Three.js流图透明区域出现异常水流的问题求助

我正在跟随指定教程使用Three.js创建河流效果，已加载位移图与带透明通道的流图并编写了对应着色器代码。预期效果是仅在流图的非透明区域显示蓝色河流及水流动画，但实际渲染时，流图的透明区域也出现了统一方向的水流效果，请问需要调整哪些部分？

解决方法（经@Mugen87指导实现） #

• 片元着色器中增加透明度过滤：采样流图的Alpha通道，设置阈值判断，仅对非透明区域执行河流颜色与位移逻辑，透明区域直接丢弃片元：

// 片元着色器中采样流图
vec4 flowMapColor = texture2D(uFlowMap, vUv);
// 过滤透明区域
if (flowMapColor.a < 0.1) {
    discard;
}
// 后续河流颜色计算、位移采样等逻辑

• 正确配置材质透明参数：确保河流材质开启透明属性，并选择合适的混合模式，避免透明区域的颜色叠加干扰：

const riverMat = new THREE.ShaderMaterial({
    transparent: true,
    blending: THREE.NormalBlending, // 根据场景需求调整
    // 着色器代码、uniform变量等配置
});

• 顶点位移的条件限制（若顶点着色器处理位移）：将流图的Alpha值从顶点着色器传递到片元，或者在顶点着色器中直接判断，仅对非透明区域的顶点应用位移变换，避免透明区域顶点错误位移导致视觉异常。

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