如何设置HTML5 WebGL的透明背景及混合模式？

本文共计1064个文字，预计阅读时间需要5分钟。

在默认情况下，创建的 WebGL 上下文会将 `alpha` 设置为 `false`。如果你在 CSS 中设置了 `background: transparent;`，最终画面的背景也会被强制合成到不透明的黑色背景上。这不是 CSS 能控制的层叠问题，而是 WebGL 自身的缓冲区配置问题，没有开启透明度通道。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 创建上下文时务必传入 { alpha: true }，例如：gl = canvas.getContext('webgl', { alpha: true })
• 如果用 Three.js，得在 WebGLRenderer 初始化时加 { alpha: true }，否则 setClearColor(0x000000, 0) 也无效
• 某些旧版浏览器（如 iOS Safari 15.4 之前）对 alpha: true 支持不稳定，若出现闪烁或纯黑，可尝试降级为 { alpha: false, premultipliedAlpha: false } 并手动处理颜色

clearColor 的 alpha 值不等于背景透明度

gl.clearColor(r, g, b, a) 中的 a 只影响清屏时写入颜色缓冲的 alpha 值，但真正决定 canvas 是否透出底层内容的，是前面说的上下文 alpha 选项 + 后续混合模式是否启用。