图形学【免费下载链接】webgl-fundamentalsWebGL lessons that start with the basics项目地址https://gitcode.com/gh_mirrors/we/webgl-fundamentals点击查看免费下载本文基于 webgl-fundamentals 仓库的 WebGL e Alpha 教程原文为英文 WebGL and Alpha 的葡语翻译版展开讲清 WebGL 与 OpenGL 在 backbuffer alpha 处理上的根本差异并完整覆盖仓库给出的六种让 WebGL 的 alpha 行为更接近 OpenGL 或更贴合浏览器合成模型的处理手段。读完后你将能够诊断透明 canvas 的颜色异常并在getContext参数、colorMask、UNPACK_PREMULTIPLY_ALPHA_WEBGL与混合函数之间做出正确的组合选择。背景WebGL 的 alpha 为什么和 OpenGL 不一样仓库文档指出的核心差异是OpenGL渲染到一个 backbuffer这个 buffer 不与任何东西合成或等效于不与任何东西合成操作系统窗口管理器不会去管它因此 alpha 值是多少都无关紧要WebGL的 canvas 是由浏览器与整个网页一起合成的而且默认采用预乘 alphapre-multiplied alpha——与带透明通道的 PNGimg标签、2D canvas 的行为一致。理解预乘 alpha是理解后续所有方案的前提。预乘 alpha 意味着 RGB 分量已经被乘以了 alpha 值例如原始 RGB 为1, 0, 0、alpha 为0.5预乘后 RGB 就变成了0.5, 0, 0。浏览器默认期望 canvas 中的像素是预乘值。仓库另一篇问答文章 如何让 WebGL canvas 透明 给出了一个非常直观的例子如果你把清屏色设为(1, 0, 0, 0.5)未预乘的纯红半透明浏览器会认为这是一个不合法的预乘值a 0.5却要求r保持1于是合成出你在 HTML 其他地方都见不到的奇怪效果——黑色文字配红色底、边缘泛红等。该文档中给出的修复方式之一正是本文方案 #1。方案 #1告诉 WebGL 使用非预乘 alpha 进行合成gl canvas.getContext(webgl, { premultipliedAlpha: false // Ask for non-premultiplied alpha });这个选项的默认值是true。设为false后浏览器在合成时就不会假定像素是预乘值你在 WebGL 中写出的1, 0, 0, 0.5就能按纯红、半透明被正确理解。但要注意结果仍然会被合成为页面的一部分叠在 canvas 下方的 CSS 背景之上——canvas 自身的 background 色、canvas 容器背景色、页面背景色、canvasz-index 0时其背后的内容也就是 CSS 为该页面区域定义的颜色。仓库问答文档正是用这个选项解决了透明问题const gl canvas.getContext(webgl, { premultipliedAlpha: false });原文还给出了一个调试技巧怀疑自己有 alpha 问题吗把 canvas 的 CSS 背景设成亮色如红色问题会立刻显现canvas stylebackground: red;/canvas反过来把背景设成黑色则会掩盖所有 alpha 问题——这也是很多 bug 迟迟无法被发现的原因。方案 #2告诉 WebGL 你的 backbuffer 不需要 alphagl canvas.getContext(webgl, { alpha: false });这会让 backbuffer 只有 RGB 通道行为上最接近 OpenGLalpha 无意义、也不参与合成。原文认为这很可能是最佳选项一个合格的浏览器可以看到你没有 alpha从而真正优化 WebGL 的合成路径。代价也很直接backbuffer 里真的没有 alpha 了。如果你的应用恰好依赖 backbuffer 的 alpha 通道做某些效果这条路就走不通。原文作者表示他所知道的应用里几乎没有在 backbuffer 上使用 alpha 的并认为这本来就该是默认值。方案 #3在渲染末尾把 alpha 清成 1.0.. renderScene(); .. // Set the backbuffers alpha to 1.0 gl.clearColor(1, 1, 1, 1); gl.colorMask(false, false, false, true); gl.clear(gl.COLOR_BUFFER_BIT);思路是场景照常渲染最后再清一次色缓冲但通过colorMask(false, false, false, true)只允许写入 alpha 通道把 backbuffer 的 alpha 整体拉满到 1.0即完全不透明。原文解释了为什么这种做法代价很小clear 在大多数硬件上是有专门优化路径的通常非常快。作者说他的大多数演示都用了这种写法并认为多数 WebGL 库都应该默认采用这个策略真正需要用 alpha 做合成效果的少数开发者可以显式选择别的方案其余人则获得最好的性能和最少的意外。方案 #4只清一次 alpha之后不再向 alpha 写入// At init time. Clear the back buffer. gl.clearColor(1, 1, 1, 1); gl.clear(gl.COLOR_BUFFER_BIT); // Turn off rendering to alpha gl.colorMask(true, true, true, false);与方案 #3 相比这里把清屏放在初始化时只执行一次随后用colorMask(true, true, true, false)关闭对 alpha 通道的渲染写入后续每帧的普通清屏和场景渲染都不会再动 alpha 通道。原文提醒了一个容易踩的坑如果你在渲染到自己的 framebuffer切换回 canvas 之前可能需要重新打开alpha 写入gl.colorMask(true, true, true, true)切到屏幕后再关掉。也就是说colorMask状态是全局 GL 状态绑定 framebuffer 切换时要自行管理。方案 #5纹理/图片中的 alpha——UNPACK_PREMULTIPLY_ALPHA_WEBGL当你把带 alpha 的图片加载进 WebGL 时默认情况下 WebGL 会原样提供 PNG 文件中的值即颜色分量未预乘。原文作者认为这正是他做 OpenGL 程序习惯的表示因为未预乘是无损的而预乘是有损的。一个直观的例子1, 0.5, 0.5, 0RGBA在未预乘的语义下是完全合法的取值而在预乘语义下这是不可能的值因为a 0就意味着r、g、b必须全为 0。如果你希望 WebGL 帮你预乘可以在上传纹理前设置gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);该选项默认是关的即不预乘。Canvas 2D 与 WebGL 的转换方向是这里最容易混淆的点绝大多数甚至可以说所有Canvas 2D 实现内部使用预乘 alpha。因此当你把 Canvas 2D 的结果传给 WebGL且UNPACK_PREMULTIPLY_ALPHA_WEBGL为 false 时WebGL 会把它反向转换回未预乘——而这次反预乘是有损的会引入误差。仓库中的实际代码印证了这一点。文字纹理示例 webgl-text-texture.md 描述了文字边缘出现灰色描边的问题原因正是Canvas 2D API 只产生预乘 alpha 值WebGL 上传纹理时尝试反预乘却无法完美还原。修复方法有两处改动告诉 WebGL 不要反预乘gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);同步修改混合函数见下一节。对应的完整可运行示例在 webgl-text-texture-premultiplied-alpha.html 中其核心片段为gl.bindTexture(gl.TEXTURE_2D, textTex); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textCanvas);注意UNPACK_PREMULTIPLY_ALPHA_WEBGL是逐次上传的状态它影响gl.texImage2D/gl.texSubImage2D上传的数据而不是纹理之后的读取行为若同一上下文要上传未预乘的图片数据记得把该状态切回 false。方案 #6与预乘 alpha 匹配的混合方程原文指出几乎所有他写过或参与过的 OpenGL 应用都使用gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);这个组合只对未预乘alpha 的纹理成立——SRC_ALPHA的语义是把源颜色乘以其 alpha。如果你确实要使用预乘alpha 纹理则应改为gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);因为预乘意味着纹理数据中的 RGB 已经被乘过 alphaGPU 不需要再乘一次源因子设为ONE乘 1即可。webgl-text-texture.md 原文对此的解释是旧的那个会把 src 颜色乘以它的 alpha……但现在纹理数据已经乘过了它的 alpha所以不需要 GPU 再做乘法。webgl-text-texture-premultiplied-alpha.html 示例中的绘制流程完整演示了两套混合模式的切换绘制不透明的 3D 场景时关闭混合gl.disable(gl.BLEND)绘制半透明文字纹理时再启用gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.depthMask(false);六种方案速查表方案关键 API作用适用场景#1getContext(webgl, { premultipliedAlpha: false })浏览器合成时按未预乘值解释像素WebGL 内数据是未预乘、需与页面透明合成#2getContext(webgl, { alpha: false })backbuffer 仅 RGB浏览器可优化合成全屏不透明渲染原文推荐的首选#3colorMask(false,false,false,true)clear每帧末尾把 backbuffer alpha 清成 1.0需要保留 alpha 通道但要求每帧输出完全不透明#4初始化清一次 colorMask(true,true,true,false)之后完全不写 alpha类似 #3但连每帧清屏开销都省掉#5pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, ...)控制纹理上传时的预乘/反预乘Canvas 2D 数据进 WebGL 时保持预乘以消除有损转换#6blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)与预乘纹理匹配的混合方程渲染预乘 alpha 纹理小结WebGL 与 OpenGL 的 alpha 差异本质上源于一点OpenGL 的 backbuffer 不参与合成而 WebGL 的 canvas 由浏览器按 HTML5 的预乘 alpha 约定与页面合成。围绕这一点仓库文档给出了六个层次的解法——从 context 属性#1、#2到每帧状态管理#3、#4再到纹理数据转换#5与混合方程#6。对绝大多数不依赖页面透明合成的应用alpha: false方案 #2是最省心、性能最优的选择而对需要透明合成或绘制 Canvas 2D 来源纹理的场景正确组合 #1、#5 与 #6 才能既消除边缘瑕疵又保持合成颜色正确。仓库中 webgl-text-texture.md 与 webgl-text-texture-premultiplied-alpha.html 提供了这套组合拳的完整可运行示例可直接参考复现。赞分享图形学【免费下载链接】webgl-fundamentalsWebGL lessons that start with the basics项目地址https://gitcode.com/gh_mirrors/we/webgl-fundamentals点击查看免费下载相关推荐WebGL 纹理完全指南纹理坐标、mipmap、NPOT 限制与纹理图集webgl-fundamentals 实战WebGL 纹理完全指南纹理坐标、mipmap、NPOT 限制与纹理图集webgl fundamentals 实战 本文是 webgl fundament图形学WebGL 纹理完全指南从纹理坐标、Mipmap 到纹理图集webgl-fundamentals 实战解析WebGL 纹理完全指南从纹理坐标、Mipmap 到纹理图集webgl fundamentals 实战解析 本文基于 webgl fundamentals图形学webgl-fundamentals 实战在 WebGL 中使用 2 个以上纹理纹理单元 Texture Unit 详解webgl fundamentals 实战在 WebGL 中使用 2 个以上纹理纹理单元 Texture Unit 详解 在 webgl fundamen图形学上一篇【亲测免费】 ComfyFlowApp 使用教程下一篇LobeHub ux-audit 技能系列一Layer 1 静态代码审计L1——不跑界面、只看代码的 UX 基线检查法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考