Three.js-Aframe使用着色器替换纹理颜色出现黑色值问题求解

• 核心问题是你的片元着色器没有先对目标纹理进行采样，直接读取了gl_FragColor的初始值：WebGL环境下gl_FragColor默认初始值为(0,0,0,1)也就是纯黑色，你提到的左下角、右上角区域属于纹理没有覆盖的区域，绿色分量低于0.9的阈值，因此按你的逻辑保留了初始黑色值、alpha设为1，就会显示为黑色块。
• 其次如果你的材质没有开启transparent属性，即使你给像素设了alpha值也不会生效，本该透明的区域会直接显示为黑色。

1. 首先修改片元着色器，先采样纹理再做抠图判断，同时可以优化绿幕判断逻辑，避免亮白色等非绿色像素被误判：

uniform sampler2D map;
varying vec2 vUv;

void main() {
    // 第一步先采样得到纹理原始像素值
    vec4 texColor = texture2D(map, vUv);
    float thres = 0.9;
    // 除了绿色分量高于阈值，还要保证绿色高于红、蓝分量，避免误判
    if (texColor.g > thres && texColor.g > texColor.r && texColor.g > texColor.b) {
        texColor.a = 0.0;
    } else {
        texColor.a = 1.0;
    }
    gl_FragColor = texColor;
}

2. 确认你的着色器材质开启了透明属性：
   如果是Three.js环境，创建材质时添加配置：

const chromaKeyMaterial = new THREE.ShaderMaterial({
  uniforms: {
    map: { value: 你的纹理对象 }
  },
  vertexShader: 你的顶点着色器代码, // 顶点着色器中需要传递uv变量vUv
  fragmentShader: 上面修改后的片元着色器代码,
  transparent: true // 必须开启该配置alpha通道才会生效
})

如果是AFrame自定义材质，需要在材质配置中添加transparent: true属性。
3. （可选）如果存在边缘黑边问题，可以把硬阈值判断改为平滑过渡，消除硬边缘的杂色：

void main() {
    vec4 texColor = texture2D(map, vUv);
    float thresLow = 0.7;
    float thresHigh = 0.9;
    // 绿色分量越高，透明度越高，平滑过渡
    float alpha = texColor.g > texColor.r && texColor.g > texColor.b ? 
        1.0 - smoothstep(thresLow, thresHigh, texColor.g) : 1.0;
    texColor.a = alpha;
    gl_FragColor = texColor;
}

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