启用WebGL的gl.BLEND等标志导致画面暗淡，如何解决？

一、画面暗淡的核心原因 #

1. 混合模式配置错误：你启用了gl.BLEND但未设置正确的混合函数，或是后续重复设置的gl.blendFunc(gl.SRC_ALPHA, gl.ONE)不适合常规Alpha合成。这种加法混合模式下，若素材Alpha值小于1，源颜色会被Alpha加权后叠加到黑色背景上，导致整体亮度降低；多次绘制时还会出现颜色过度叠加的异常。
2. 错误启用gl.SAMPLE_COVERAGE：这个API需要配合gl.sampleCoverage()设置覆盖权重，默认覆盖值为0.0，会无差别降低所有像素的采样覆盖率，相当于整体削弱透明度，直接导致画面发暗。它并非为常规Alpha通道合成设计。

二、正确的设置方案（实现正常Alpha且画面无暗淡） #

按照以下顺序配置WebGL状态即可：

1. 启用混合并设置标准Alpha混合函数：

   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   

   这个混合公式是最终颜色 = 源颜色×源Alpha + 目标颜色×(1-源Alpha)，是业界通用的Alpha合成模式，能正确保留素材的透明度，同时不会让颜色出现异常衰减。
2. 按需启用基于Alpha的多重采样抗锯齿（可选）：

   gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
   

   该选项会利用素材自身的Alpha值控制采样覆盖，实现平滑的边缘抗锯齿，不会像SAMPLE_COVERAGE那样无差别降低画面亮度。
3. 禁用深度测试（针对2D层叠场景）：

   gl.disable(gl.DEPTH_TEST);
   

   2D合成不需要深度排序，禁用后避免绘制顺序被深度值干扰。
4. gl.CULL_FACE可按需启用：它负责剔除背面多边形，和画面暗淡无关，若无需优化渲染性能或避免背面渲染，可直接忽略。

三、对你尝试代码的修正说明 #

你之前重复设置blendFunc(gl.SRC_ALPHA, gl.ONE)是错误的，这种加法混合仅适用于发光效果等特殊场景，不适合常规Alpha遮罩合成。同时要彻底弃用gl.SAMPLE_COVERAGE，改用SAMPLE_ALPHA_TO_COVERAGE来实现Alpha相关的抗锯齿需求。

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