webgl2 方法解析: SCISSOR_TEST

在 WebGL 中，gl.SCISSOR_TEST 是一个重要的功能，用于限制渲染操作的区域，从而提高渲染效率或实现特定的视觉效果。

1. 什么是 `gl.SCISSOR_TEST`？

gl.SCISSOR_TEST 是 WebGL 中的一个功能标志，用于启用或禁用剪切测试（Scissor Test）。剪切测试允许开发者指定一个矩形区域（剪切框），只有在这个区域内的像素才会被渲染，区域外的像素将被丢弃。

2. 如何启用和禁用剪切测试？

启用剪切测试：
ini 复制代码
```
gl.enable(gl.SCISSOR_TEST);
```
禁用剪切测试：
ini 复制代码
```
gl.disable(gl.SCISSOR_TEST);
```
默认情况下，剪切测试是禁用的。

3. 如何设置剪切区域？

使用 gl.scissor() 方法可以设置剪切区域。该方法的参数包括剪切框的左下角坐标 (x, y) 以及框的宽度和高度 (width, height)：

arduino 复制代码

gl.scissor(x, y, width, height);

x 和 y 是剪切框左下角的坐标。
width 和 height 是剪切框的宽度和高度。

4. 使用示例

以下是一个完整的示例，展示如何在 WebGL 中使用 gl.SCISSOR_TEST 来限制渲染区域：

ini 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGL Scissor Test Example</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>WebGL Scissor Test Example</h1>
  <canvas id="glCanvas" width="500" height="500"></canvas>
  <script>
    // 获取 canvas 元素
    const canvas = document.getElementById('glCanvas');
    const gl = canvas.getContext('webgl');

    if (!gl) {
      console.error('WebGL not supported, falling back on experimental-webgl');
      gl = canvas.getContext('experimental-webgl');
    }

    if (!gl) {
      alert('Your browser does not support WebGL');
    }

    // 顶点着色器
    const vertexShaderSource = `
      attribute vec4 aVertexPosition;
      void main() {
        gl_Position = aVertexPosition;
      }
    `;

    // 片段着色器
    const fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
      }
    `;

    // 创建着色器
    function loadShader(type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    }

    // 创建程序
    const vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
    }

    gl.useProgram(shaderProgram);

    // 设置顶点数据
    const positions = [
      -0.5, -0.5,
       0.5, -0.5,
       0.5,  0.5,
      -0.5,  0.5
    ];

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
    gl.enableVertexAttribArray(aVertexPosition);
    gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);

    // 设置视口
    gl.viewport(0, 0, canvas.width, canvas.height);

    // 启用剪切测试
    gl.enable(gl.SCISSOR_TEST);

    // 设置剪切区域（只渲染右上角的 200x200 区域）
    gl.scissor(300, 300, 200, 200);

    // 清空颜色缓冲区
    gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置背景为黑色
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 绘制矩形
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

    // 禁用剪切测试（可选）
    // gl.disable(gl.SCISSOR_TEST);
  </script>
</body>
</html>

在这个示例中，只有剪切区域内的像素会被渲染为红色，其他区域保持黑色。

5. 注意事项

剪切区域的坐标 (x, y) 是相对于画布左下角的。
如果 width 或 height 为负值，将会抛出 gl.INVALID_VALUE 错误。
剪切测试通常与视口（Viewport）设置配合使用，以实现更复杂的渲染控制。