GPU 自动裁切测试到底在干嘛？

在 WebGL 里你经常会看到两个与“裁剪”相关的概念：Clipping和Scissor Test。如果你刚接触 GPU 渲染管线，往往会产生以下痛点：

• 它和几何裁剪是一回事吗？”
• "模板测试也能限制区域，那两者有什么区别？"
• "它究竟是把哪些片元丢弃？"
• "坐标原点在哪里容易搞错！"

下面按顺序拆解这些疑问，并给出最直观的答案。

主要一句话：

scissorTest = 用一个屏幕空间里的矩形区域限制哪些片元可以写入。

这句话强调了两个关键点：

• Cropping关注的是顶点是否超出可见体。老实说，
• Cutter Test 关注的是最终写入帧缓冲区之前的每个片元是否落在某个矩形内。

2️⃣ 它在渲染管线里的位置

顶点着色器 → 图元装配 → 裁剪 → 除法 → NDC → 视口变换
→ 光栅化 → 片元着色器 → **裁切测试** →
模板测试 → 深度测试 → 混合 → 帧缓冲

从这个流程可以看到，Cutter Test 是在光栅化后、片元着色器前的一道门槛。

3️⃣ 它到底在“裁”什么？

• # 不砍顶点，也不砍三角形的一部分几何结构。
• # 只剔除落在矩形外面的片元写入机会。

再看举例，一个大三角形覆盖整块屏幕；光栅化后产生数千个片元，只有位于指定矩形内的片元继续走下去，其余立即丢弃。

4️⃣ 与 “Clipping” 的本质区别

至于记住，Cropping = 几何空间问题 Scissor Test = 屏幕矩形控制问题。老实说，

5️⃣ 与 “模板” 测试对比

• Cutter Test: 只能用轴对齐矩形。规则简单，无需额外缓冲，开销低——适合快速限制一个直角盒子。
• Stencil Test: 支持任意形状。需要 stencil buffer，一般先写再读，适合遮罩、镜面、传送门等复杂场景。

如果你只需要一个普通矩形区域，就直接用 Scissor Test 更高效；如果需要圆形、文字或不规则洞口，就用 Stencil 或自定义 discard。说起来，

6️⃣ Scissor API 非常简洁

gl.enable;gl.scissor，// 左下角为原点
// ...
gl.disable;

• The coordinates are in viewport space – left‑bottom origin.
• If you use DOM mouse coordinates you usually need to flip Y:

const glY = canvas.height - domY - rectHeight;gl.scissor，]

7️⃣ 常见用途 & 示例代码 


- 局部 UI 面板绘制 / 小地图 / 分屏 / 画中画 / 多视图编辑器等 —— 都只需一个矩形区域即可满足需求。其实，

- 局部清屏：`gl.clear` 一样受 scissor 控制。只清除指定区域，老实说，适合高频更新局部 UI 或实时渲染引擎内部状态。


完整示例：只清除一块矩形区域 

// 清空整个画布
gl.disable;gl.clearColor;gl.clear，// 开启 scissor，只允许左下角200x200区 写入
gl.enable;gl.scissor，//
clear，只影响那个小块
gl.clearColor;
gl.clear，// 禁用，以免影响后续 drawCall
gl.disable;
 <\/details>
<\/div>



完整示例：左右两块分别绘制不同颜色背景 

const w = canvas.width;const h = canvas.height;老实说，// 左半边绿底
gl.enable;gl.scissor,h);gl.clearColor;gl.clear，// 右半边蓝底
gl.scissor,0,Math.ceil,h);gl.clearColor;老实说，gl.clear;gl.disable，// 后面可以再绘制左侧俯视图 +右侧图 ...

<\/details>



完整示例：全屏 quad，但仅渲染到局部面板 

// 清空背景
gl.clearColor;gl.clear，// 开启 scissor 指定面板位置 & 大小
const panelX=120。panelY=90,panelW=300,panelH=200;gl.enable，gl.scissor;// 绘制全屏 quad shader
useProgram;// ，设置属性、uniforms…// 假设 quadBuffer 已经绑定并准备好数据
drawArrays
// 禁用 scissor，以免污染后续绘制
gl.disable;<\/\/\/

 





➦ Avoiding pitfalls:




如果没有同时设置 scissoring。则 clear 会把整张画布擦成同一颜色，而不是仅仅清掉小地图窗口。话说回来，➦
当你多次重绘时这类问题比较容易出现。