webgl 透明需显式开启 alpha 选项：创建上下文时必须传 {alpha: true}，再设 clearcolor(0,0,0,0) 并启用混合 gl.enable(gl.blend) 和 blendfunc，同时确保 css 样式不遮挡。
WebGL 渲染上下文的 alpha 选项必须显式开启
默认情况下，canvas 创建的 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 就该盯住这个布尔值。
