关于透明MP4礼物的构思和实现

Creator 2.x
#24

1733734756582
17337347565821031×530 36.7 KB
1733734785083
1733734785083804×280 14.7 KB

大佬这里有个报错

#25

你自己慢慢研究吧，我还要上班

#26

这不就是透明视频吗，前端和客户端用的挺频繁的

#27

好的谢谢大佬

#28

是，但是确实好难实现啊，大佬有时间帮忙看看下

#29

js、ts版本都行

#30

视频显示ui.rar (2.7 KB) 搞出来了踢我一下

#31

用ai写了个webgl, 不会用creator，是这么写么？ 图片换成你自己的再改改

test.html.zip (2.4 KB)

#32

precision mediump float;
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
vec4 leftColor = texture2D(uSampler, vTextureCoord);
if (vTextureCoord.x < 0.5) {
vec4 rightColor = texture2D(uSampler, vec2(vTextureCoord.x + 0.5, vTextureCoord.y));
gl_FragColor = vec4(leftColor.rgb, rightColor.r);
} else {
discard;
}
}

#33

对这个是核心

#34

其实是coco-mat 的软解video是关键点，只要video能渲染到纹理，那怎么样操作都可以了。
把纹理拿到一个四边形上渲染，然后材质用上你的shader就行了。

#36

大佬 问题解决了吗？

#37

image
image541×642 25.4 KB
问题解决了。方法是把视频渲染到图片上，然后通过shader来改图片 。vec4 frag () {
vec4 o = vec4(1, 1, 1, 1);

#if USE_TEXTURE
    
  o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0 * vec2(0.5,1));
  o.a *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0 * vec2(0.5,1) + vec2(0.5,1)).r;

#endif

o *= color;
ALPHA_TEST(o);
return o;

}