如何设置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 选项 + 后续混合模式是否启用。如果 alpha: false，再设 gl.clearColor(0,0,0,0) 也没用，清出来的仍是不透明黑。

实操建议：

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

• 确认 alpha: true 后，再调用 gl.clearColor(0, 0, 0, 0) —— 这步只是“清空为全透明”，不是“让背景变透明”
• Three.js 用户注意：renderer.setClearColor(0x000000, 0) 的第二个参数是 alpha，值为 0 才有效，写成 renderer.setClearColor(0x000000, 1) 就白搭
• 清屏前确保没其他代码意外调用 gl.clearColor 覆盖掉透明设置

混合（blending）必须手动启用且配对使用

即使 canvas 本身透明、clearColor 也设了 0，若没启用混合，所有 fragment shader 输出的颜色仍会直接覆盖帧缓冲，而不是与底层内容叠加。WebGL 不自动做 alpha 混合，这是显式行为。

实操建议：

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

• 渲染前必须调用：gl.enable(gl.BLEND)
• 接着指定混合公式：gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) 是最常用组合
• Three.js 默认已启用混合，但如果你自定义 shader 或修改 material 的 transparent 和 depthWrite，就得检查：material.transparent = true 且 material.depthWrite = false（尤其对半透明物体）
• 混合开启后，绘制顺序变得关键：不透明物体应先画，透明物体按从远到近排序，否则会出现穿帮

CSS 层叠与 canvas 自身样式不能省略

WebGL canvas 是普通 DOM 元素，它的透明表现还依赖外部样式。即使 WebGL 层完全透明，若 canvas 元素自带 background、box-shadow 或父容器 overflow:hidden，也会遮挡底层内容。

实操建议：

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

• 给 canvas 加上：style="background: transparent; border: none; outline: none;"
• 确保 canvas 父容器没有 background-color 或 overflow: hidden 意外裁剪
• 避免用 opacity: 0.99 类似 hack，它会让整个 canvas（含 WebGL 内容）一起变淡，不是真正的背景穿透
• 调试时临时加 canvas { border: 1px solid red; }，确认 canvas 几何位置和尺寸没被 CSS 意外挤压

最容易被忽略的是上下文初始化时的 alpha 选项——它像一道闸门，关着的时候后面所有操作都白忙。很多人卡在 clear color 或 blending 上反复试，其实第一行 getContext 就该盯住这个布尔值。