WebGL、OGL与GLSL Shaders下canvas背景色无法修改问题求助

方案一：让Canvas透出HTML背景（推荐） #

1. 修改GLSL片段着色器 #

修改片段着色器的输出逻辑，保留纹理透明度以允许HTML背景透出：

precision highp float;

uniform sampler2D tMap;
uniform vec2 uResolution;
uniform float uStrength;

varying vec2 vUv;

void main() {
  vec3 color;

  color.r = texture2D(tMap, vec2(vUv.x + uStrength, vUv.y)).r;
  color.g = texture2D(tMap, vUv).g;
  color.b = texture2D(tMap, vec2(vUv.x - uStrength, vUv.y)).b;

  // 获取纹理自身的alpha值，替代固定的1.0
  float alpha = texture2D(tMap, vUv).a;
  gl_FragColor = vec4(color, alpha);
}

如果需要全局控制Canvas透明度，可以添加一个uniform变量：

// 在uniform区新增
uniform float uOpacity;

// 修改输出部分
float alpha = texture2D(tMap, vUv).a * uOpacity;
gl_FragColor = vec4(color, alpha);

随后在JS代码中给该uniform赋值，例如：mesh.program.uniforms.uOpacity.value = 0.8;。

2. 开启Renderer的Alpha通道 #

检查OGL Renderer的初始化代码，确保启用alpha支持：

const renderer = new Renderer({
  alpha: true,
  // 其他原有配置
});

未开启alpha: true时，Canvas会强制不透明，即使着色器输出alpha也无法生效。

方案二：在GLSL中直接定义背景色 #

若不想依赖HTML背景，可直接在着色器中指定背景色并与纹理混合：

precision highp float;

uniform sampler2D tMap;
uniform vec2 uResolution;
uniform float uStrength;

varying vec2 vUv;

void main() {
  vec3 color;
  vec4 texColor = texture2D(tMap, vUv);

  color.r = texture2D(tMap, vec2(vUv.x + uStrength, vUv.y)).r;
  color.g = texColor.g;
  color.b = texture2D(tMap, vec2(vUv.x - uStrength, vUv.y)).b;

  // 自定义背景色（示例为淡灰色）
  vec3 bgColor = vec3(0.9, 0.9, 0.9);
  // 根据纹理透明度混合背景与纹理颜色
  vec3 finalColor = mix(bgColor, color, texColor.a);

  gl_FragColor = vec4(finalColor, 1.0);
}

纹理覆盖不到的区域会直接显示你定义的bgColor。

方案三：CSS快速变通 #

若不想修改代码，可通过CSS调整Canvas的显示属性：

canvas {
  /* 半透明透出HTML背景 */
  opacity: 0.9;
  /* 或使用混合模式，根据需求选择 */
  mix-blend-mode: overlay;
}

此方法无需修改GLSL或JS，但可能影响纹理的色彩表现，适合快速测试。

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