應用剪下時清除繪圖緩衝區
這是使用 scissor() 進行渲染的演示。
儘管 clear() 繪圖命令會將清除顏色（由 clearColor() 設定）寫入繪圖緩衝區的所有畫素，但 scissor() 定義了一個掩碼，只允許指定矩形區域內的畫素被更新。
這是一個討論畫素和片段之間區別的好機會。畫素是螢幕上的一個影像元素（實際上是一個點），或者繪圖緩衝區中的單個元素，即儲存您的畫素資料（如 RGB 顏色分量）的記憶體區域。片段是指在 WebGL 管道處理畫素時所使用的狀態。
之所以要進行這種區分，是因為片段顏色（以及其他片段值，如深度）在最終寫入螢幕之前，可能會在圖形操作中被多次修改。我們已經透過應用 顏色掩碼 瞭解到片段顏色是如何在圖形操作中發生變化的。在其他情況下，片段可能會被完全丟棄（因此畫素值不會被更新），或者它可能會與已存在的畫素值進行互動（例如，在為場景中非不透明元素進行顏色混合時）。
這裡我們看到了片段和畫素之間區別的另一個例子。剪下是 WebGL/OpenGL 圖形管道中的一個獨立階段（它發生在顏色清除之後，顏色掩碼之前）。在實際畫素被更新之前，片段必須透過剪下測試。如果片段通過了剪下測試，它們將繼續沿著圖形管道向下傳遞，並且螢幕上的相應畫素將被更新。如果它們未能透過測試，它們將被立即丟棄，不再進行任何進一步的處理，畫素也不會被更新。由於只有指定矩形區域內的片段成功通過了剪下測試，因此只有該區域內的畫素會被更新，我們在螢幕上得到一個矩形。
管道的剪下階段預設是停用的。我們在這裡使用 enable() 方法啟用它（您也將使用 enable() 來啟用 WebGL 的許多其他功能；因此，在這種情況下，將 SCISSOR_TEST 常量作為引數）。這再次展示了 WebGL 中命令的典型順序。我們首先調整 WebGL 狀態。在這種情況下，啟用剪下測試並建立一個矩形掩碼。只有在 WebGL 狀態得到令人滿意的調整後，我們才執行繪圖命令（在本例中是 clear()），該命令啟動片段沿著圖形管道的處理。
<p>Result of scissoring.</p>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
body {
text-align: center;
}
canvas {
display: block;
width: 280px;
height: 210px;
margin: auto;
padding: 0;
border: none;
background-color: black;
}
const paragraph = document.querySelector("p");
const canvas = document.querySelector("canvas");
// The following two lines set the size (in CSS pixels) of
// the drawing buffer to be identical to the size of the
// canvas HTML element, as determined by CSS.
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const gl = canvas.getContext("webgl");
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Enable scissoring operation and define the position and
// size of the scissoring area.
gl.enable(gl.SCISSOR_TEST);
gl.scissor(40, 20, 60, 130);
// Clear the drawing buffer solid yellow.
gl.clearColor(1.0, 1.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
此示例的原始碼也可在 GitHub 上找到。