阶段 3 · 3D基础18 分钟
混合与透明：新颜色如何合成到旧颜色
BlendComponent、预乘 Alpha 与绘制顺序
绘制重叠半透明形状，比较标准 alpha 混合与加法混合。
LEARNING GOALS
先明确本课目标
1
配置 color/alpha blend
2
理解预乘 alpha
3
认识透明排序与深度写入的关系
MENTAL MODEL · 再建立心智模型
片元着色器给出“源颜色”，附件里已有“目标颜色”；BlendState 定义两者如何加权组合。
MINIMAL EXAMPLE
半透明颜色是怎样与背景合成的？
Blending 用源片元颜色 Source 与附件已有颜色 Destination 计算新颜色。常规 alpha 混合近似为 src × alpha + dst × (1 − alpha)。
javascriptblend: {
color: {
srcFactor: 'src-alpha',
dstFactor: 'one-minus-src-alpha',
operation: 'add',
},
alpha: {
srcFactor: 'one',
dstFactor: 'one-minus-src-alpha',
operation: 'add',
},
}- Source 当前片元着色器输出的颜色。
- Destination 颜色附件同一位置已经存在的颜色。
- 顺序有影响 普通透明混合通常需要从远到近绘制；加法混合则常与顺序无关。
alpha 越小，结果越接近背景；多个半透明对象按公式逐次累积。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
渲染管线Fragment Shader对光栅化产生的片元执行，输出颜色、深度等附件结果。颜色输出Blending把片元源颜色与附件中已有目标颜色按 BlendState 合成。颜色输出Alpha通常表示覆盖度或透明度的第四通道，具体含义取决于混合公式与内容约定。颜色输出Premultiplied AlphaRGB 已预先乘以 alpha 的颜色表示，常配 one / one-minus-src-alpha 混合。颜色输出Blend Factor混合公式中乘在源颜色或目标颜色上的系数，例如 src-alpha、one 或 one-minus-src-alpha。颜色输出Draw Order图元提交和混合的先后次序；普通透明混合通常需要从远到近排序。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现一个基于权重的顺序无关透明近似。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
标准混合公式
常见非预乘颜色使用 src-alpha 与 one-minus-src-alpha。预乘 alpha 的源 RGB 已乘 alpha，通常使用 one 与 one-minus-src-alpha。
混合不是排序器
半透明表面仍常需从远到近绘制；深度测试可保留，但通常关闭透明物体的深度写入。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
混合方程相同；WebGL 修改全局状态，WebGPU 把混合固定在每个颜色目标中。
WebGL
enable(BLEND)、blendFuncSeparate 与 blendEquationSeparate 改变 Context 状态。
WebGPU
RenderPipeline 的 fragment target 为 color/alpha 分别声明 BlendComponent。
需要不同混合模式时，WebGPU 通常需要不同 Pipeline 或管线缓存键。