mv shader+rendertexture

yagami

好久没来了，做了个比较常用的功能 ，屏幕后处理效果 这里做了几个简单的例子

使用方法如下


toys.js.zip (2.9 KB, 下载次数: 17, 售价: 1 星屑)

2022-8-23 16:03 上传

点击文件名下载附件
售价: 1 星屑  [记录]

yagami

1071257831 发表于 2022-8-23 08:11
插件看起来可以，
我给插件写了一个帮助方便用，如果有冒犯到了您，我会第一时间删除。

第一个问题是切换场景没保存状态 这个改了
第二个可能是因为贴图没主动gc导致的，不是很清楚 我加了内存释放你可以试试，附件更新了
这个其实主要是个思路，效果能扩展，我只是用了几个最简单shader，使用场景也能扩展，比如战斗场景里也能用，这个就靠后人自我发挥吧
比如下面这个效果 我并没整合进去 shader和参数如下 ，就当练手吧

JAVASCRIPT 代码复制

var frag2 = " \
            varying vec2 vTextureCoord;\
                uniform sampler2D uSampler;\
                uniform float m_time;\
                uniform float period;\
                uniform float velocity;\
                uniform float amplitude;\
                uniform float brightness;\
                float PI = 3.14159;\
                void main(void){\
                  float v = sin((vTextureCoord.x - m_time * velocity) * 2.0 * PI * period);\
                  vec4 color = texture2D(uSampler, vTextureCoord + vec2(0.0, v * amplitude * vTextureCoord.x));\
                \
                  if (color.a > 0.0) {\
                    float delta = sin((vTextureCoord.x + 0.001 - m_time * velocity) * 2.0 * PI * period) - v;\
                    if (delta < 0.0) {\
                      color = mix(color, vec4(1.0), -delta * brightness);\
                    }\
                  }\
                  gl_FragColor = color;\
                }\
                ";
 
                var simpleShader = new PIXI.Filter(vert, frag2);
                renderSprite._filters = [simpleShader];
                var filter = renderSprite._filters[0].uniforms
                filter.period = 3.0
                filter.amplitude = 0.04
                filter.velocity = 0.3
                filter.brightness = 8.0
                filter.m_time = filterstate.m_time

var frag2 = " \


            varying vec2 vTextureCoord;\


                uniform sampler2D uSampler;\


                uniform float m_time;\


                uniform float period;\


                uniform float velocity;\


                uniform float amplitude;\


                uniform float brightness;\


                float PI = 3.14159;\


                void main(void){\


                  float v = sin((vTextureCoord.x - m_time * velocity) * 2.0 * PI * period);\


                  vec4 color = texture2D(uSampler, vTextureCoord + vec2(0.0, v * amplitude * vTextureCoord.x));\


                \


                  if (color.a > 0.0) {\


                    float delta = sin((vTextureCoord.x + 0.001 - m_time * velocity) * 2.0 * PI * period) - v;\


                    if (delta < 0.0) {\


                      color = mix(color, vec4(1.0), -delta * brightness);\


                    }\


                  }\


                  gl_FragColor = color;\


                }\


                ";


 


                var simpleShader = new PIXI.Filter(vert, frag2);


                renderSprite._filters = [simpleShader];


                var filter = renderSprite._filters[0].uniforms


                filter.period = 3.0


                filter.amplitude = 0.04


                filter.velocity = 0.3


                filter.brightness = 8.0


                filter.m_time = filterstate.m_time

1071257831

插件看起来可以，
我给插件写了一个帮助方便用，如果有冒犯到了您，我会第一时间删除。

其次，插件开启滤镜效果后打开菜单再关闭，滤镜效果会自动失效。