阶段 3 · 3D基础18 分钟
深度缓冲：正确处理前后遮挡
Depth Texture、depthCompare 与清除值
为 3D 场景添加深度附件，让前方表面覆盖后方表面，而不是依赖提交顺序。
LEARNING GOALS
先明确本课目标
1
创建 depth24plus 纹理
2
配置 depthStencil 状态
3
理解 depthWriteEnabled 与 depthCompare
MENTAL MODEL · 再建立心智模型
每个像素除颜色外还有一个深度值；新片元通过比较后才有资格写颜色和更新深度。
MINIMAL EXAMPLE
为什么后画的物体不应该总盖住先画的物体？
Depth Buffer 为每个样本保存深度。片元到达时，depthCompare 把新深度与已有值比较；通过才更新颜色，并在 depthWriteEnabled 时更新深度。
javascriptdepthStencil: {
format: 'depth24plus',
depthWriteEnabled: true,
depthCompare: 'less',
}
// 每帧开始清到最远处
depthClearValue: 1.0- less 深度更小的片元更靠近相机，因此通过测试。
- 清除为 1 WebGPU 默认深度范围是 0–1，1 代表最远端。
- 格式必须一致 Pipeline 的 depth format 必须与 Render Pass 绑定的深度纹理一致。
即使绘制顺序改变，靠近相机的表面仍会正确遮挡远处表面。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
纹理Texture Format规定 texel 通道、位宽、数值解释和可用操作，如 rgba8unorm、depth24plus。3D 渲染Depth Buffer为每个样本保存深度，通过 depthCompare 决定新片元是否可见。3D 渲染Depth Test比较当前片元深度与深度缓冲，通常不透明几何使用 less 和深度写入。3D 渲染Z-fighting两个表面深度非常接近时因精度不足产生闪烁；可调整 near/far、几何偏移或深度策略。3D 渲染depth24plusWebGPU 的深度纹理格式，保证至少约 24 位深度精度，具体底层表示由实现选择。渲染目标Depth AttachmentRender Pass 使用的深度/模板纹理视图，保存深度测试结果并按 loadOp、storeOp 管理内容。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
加入 reversed-Z 思路并解释它为何改善远距离精度。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
深度附件随尺寸变化
深度纹理通常与颜色附件同宽高；画布尺寸变化后要销毁并重建。
透明物体另当别论
不透明物体适合开深度写入；透明物体通常保留深度测试但关闭深度写入，并按远到近排序。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
深度测试算法一致；WebGPU 要把深度格式同时写进纹理、Pipeline 和 RenderPass。
WebGL
创建/绑定 framebuffer 时附加 depth buffer，启用 DEPTH_TEST 并设置 depthFunc。
WebGPU
创建 depth texture，在 Pipeline 声明 depthStencil，并在每个 pass 提供 attachment。
WebGPU 深度格式不一致会在创建/编码时被验证；应由同一附件描述派生三处配置。