Glsl Alpha通道淡入淡出动画

我对着色器还很陌生，我一直在尝试创建一个着色器，可以对纹理进行alpha狂欢，我已经很接近了，但我很确定有更好的方法

这就是我要说的

---

淡入并不像您所看到的那样完全显示整个图像。任何关于解决这一问题的更好方法的见解都是非常好的。谢谢

要做的是使

遮罩位置左侧的区域可见，但要隐藏右侧的区域。这可以通过以下方式实现：

color.a*=1.0-步长（淡入度大小，p）；

如果希望从可见区域平滑过渡到不可见区域，则必须使用。衰减的开始是
遮罩位置之前的一定量
，结束是
遮罩位置之后的一定量
：

float start\u p=mask\u position-fade\u size；
浮动端p=遮罩位置+淡入度大小；
color.a*=1.0-平滑步长（开始、结束、vUv.x）；

这将导致图像的开始和结束永远不会完全淡入。为了对此进行补偿，[vUV.x]必须从范围[0.0,1.0]映射到范围[
fade\u size
，
1.0-fade\u size
]。这可以通过以下方式轻松计算：

float p=vUv.x*（1.0-2.0*渐变大小）+渐变大小；
color.a*=1.0-平滑步长（开始、结束、结束）；

如果最终剔除器的alpha通道低于一个极小的阈值，则可以丢弃碎片：

if（颜色a<0.01）
丢弃；

最终着色器：

可变vec2vuv；
高精度浮点；
精度高；
二维纹理均匀；
均匀浮动位置；
均匀的浮球尺寸；
真空总管（真空）{
vec4颜色=纹理2D（纹理，vUv）；
浮动开始p=遮罩位置-衰减大小；
浮动端p=遮罩位置+淡入度大小；
浮点p=混合（渐变大小，1.0-渐变大小，vUv.x）；
color.a*=1.0-平滑步长（开始、结束、结束）；
如果（颜色a<0.01）
丢弃；
gl_FragColor=颜色；
}

请参见示例：


var容器；
摄像机、场景、渲染器；
var制服；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
摄像头=新的三个摄像头（）；
摄像机位置z=1；
场景=新的三个。场景（）；
var几何=新的三个。平面缓冲几何（2，2）；
var texture=new THREE.TextureLoader（）.load（'https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg' );
制服={
u_时间：{类型：“f”，值：1.0}，
分辨率：{type:“v2”，值：new THREE.Vector2（）}，
鼠标：{type:“v2”，值：new THREE.Vector2（）}，
纹理：{type:'t'，value:texture}，
淡入度大小：{type:'f'，值：0.2}，
掩码位置：{type:'f'，值：0}
};
var material=新的三个着色器材质（{
制服：制服，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragmentShader'）.textContent
} );
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（{alpha:true}）；
setClearColor（0xffffff，0.0）；
renderer.setPixelRatio（window.devicePixelRatio）；
container.appendChild（renderer.doElement）；
onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
document.onmousemove=函数（e）{
uniforms.u_mouse.value.x=e.pageX
uniforms.u_mouse.value.y=e.pageY
}
}
函数onWindowResize（事件）{
renderer.setSize（window.innerWidth、window.innerHeight）；
uniforms.u_resolution.value.x=renderer.domeElement.width；
uniforms.u_resolution.value.y=renderer.domeElement.height；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
var mask_阶跃=0.01；
var=0.0；
函数render（）{
如果（mask_val>=1.0）{mask_val=1.0；mask_step=-0.01；}
else if（mask_val）您可以使用mix，比如：color=mix（vec4（0），color，time）；或者，让它重复自己，比如：color=mix（vec4（0），color，sin（time））；其中时间是从加载以来经过的时间得到的统一值。
varying vec2 vUv;
        precision highp float;
        precision highp int;
        uniform sampler2D texture;
        uniform float mask_position;
        uniform float fade_size;


        void main(void) {
            float mask_starting_point = (0.0 - fade_size);
            float mask_ending_point = (1.0 - fade_size);

            vec4 orig_color = texture2D(texture, vUv);

            vec4 color = texture2D(texture, vUv);

            float mask_p = smoothstep(mask_starting_point, mask_ending_point, mask_position);

            //color.a *= (distance(vUv.x, split_center_point));

            vec2 p = vUv;

             if (p.x > (mask_p)){
                 color.a = 0.0;
             }else{
                color.a *= (smoothstep(mask_position, (mask_position - fade_size), p.x ));
              }



            gl_FragColor = color;
        }