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);
  • xy 是剪切框左下角的坐标。
  • widthheight 是剪切框的宽度和高度。

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) 是相对于画布左下角的。
  • 如果 widthheight 为负值,将会抛出 gl.INVALID_VALUE 错误。
  • 剪切测试通常与视口(Viewport)设置配合使用,以实现更复杂的渲染控制。
相关推荐
伍哥的传说7 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4538 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2438 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴8 小时前
Tile Pattern
前端·webgl
Feather_7410 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro
\光辉岁月/10 小时前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩11 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking11 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo61711 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Micro麦可乐11 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api