p5.js风效滤镜Shader导致透明图形变黑的问题与修复

问题场景 #

我在p5.js里做风吹植物的模拟效果，用了一款风效片段Shader，但给带透明通道的独立图形用这个Shader时，图形的透明区域会变成黑色。

试过的无效解决办法 #

• 创建画布前设置setAttribute("alpha", true)，不管开不开WEBGL模式都没用
• 在Shader里用discard语句处理alpha为0的像素，也没解决问题

测试的两种情况 #

• 全局应用Shader：Shader的风动效果正常，但连背景也被扭曲了，不符合只让植物动的需求
• 给单个模拟植物的绿色矩形应用Shader：透明区域变黑，而且不想让背景图形被扭曲

问题原因和修复方案 #

问题根源是Shader里错误地把gl_FragColor的alpha值硬设成了1.0，直接覆盖了原纹理的透明通道。修复时只需要保留纹理本身的alpha通道，把对应的代码改成：

gl_FragColor = texture2D(tex0, uv);

内容的提问来源于stack exchange，提问作者erik