webgl2 方法解析: colorMask()

gl.colorMask() 是一个在 WebGL（Web Graphics Library）中使用的函数，用于控制是否允许对颜色缓冲区的各个颜色分量（红、绿、蓝、透明度）进行写入操作。

以下是关于 gl.colorMask() 的详细说明：

语法

arduino 复制代码

void gl.colorMask(red, green, blue, alpha);

参数

red（布尔值）：如果为 true，允许对颜色缓冲区的红色分量进行写入操作；如果为 false，则禁止写入。
green（布尔值）：如果为 true，允许对颜色缓冲区的绿色分量进行写入操作；如果为 false，则禁止写入。
blue（布尔值）：如果为 true，允许对颜色缓冲区的蓝色分量进行写入操作；如果为 false，则禁止写入。
alpha（布尔值）：如果为 true，允许对颜色缓冲区的透明度分量进行写入操作；如果为 false，则禁止写入。

作用

通过 gl.colorMask()，你可以选择性地允许或禁止对颜色缓冲区的某个或某些颜色分量进行写入。这在以下场景中非常有用：

调试时隐藏某些颜色分量 ：例如，你可以将 red 设置为 false，以查看场景中其他颜色分量的效果。
优化渲染性能：如果你知道某个渲染阶段不需要修改某些颜色分量，可以将其禁用，从而节省一些渲染开销。
实现特殊效果：例如，通过只允许写入透明度分量，可以实现一些特殊的透明度效果。

示例代码

以下是一个简单的示例(可直接运行)，展示如何使用 gl.colorMask()：

ruby 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL colorMask Example</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <div>
        <button onclick="setColorMask(true, true, true, true)">不遮挡任何颜色通道</button>
        <button onclick="setColorMask(false, true, true, true)">遮挡红色通道</button>
        <button onclick="setColorMask(true, false, true, true)">遮挡绿色通道</button>
        <button onclick="setColorMask(true, true, false, true)">遮挡蓝色通道</button>
        <button onclick="setColorMask(true, true, true, false)">遮挡透明度通道</button>
    </div>
    <script>
        //////////////////////////1.获取渲染上下文//////////////////////////
        // 获取 canvas 元素
        const canvas = document.getElementById('myCanvas');
        // 获取 WebGL 上下文
        const gl = canvas.getContext('webgl2');
        if (!gl) {
            console.error('WebGL not supported');
            alert('WebGL not supported');
            throw new Error('WebGL not supported');
        }

        //////////////////////////2.定义着色器//////////////////////////
        // 顶点着色器代码
        const vertexShaderSource = `#version 300 es
            in vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

        // 片段着色器代码
        const fragmentShaderSource = `#version 300 es
            precision mediump float;
            uniform vec4 uColor;
            out vec4 fragColor;

            void main() {
                fragColor = uColor;
            }
        `;

        // 创建着色器
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Shader compile failed with: ' + gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);


        //////////////////////////3.定义program//////////////////////////
        // 创建程序
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.error('Program link failed with: ' + gl.getProgramInfoLog(program));
            gl.deleteProgram(program);
            throw new Error('Program link failed');
        }
        gl.useProgram(program);


        //////////////////////////4.设置attrib//////////////////////////
        // 设置顶点数据
        const positions = new Float32Array([
            // 第一个三角形
            -0.25, -0.25, 0.0, 1.0,
             0.25, -0.25, 0.0, 1.0,
             0.0,  0.25, 0.0, 1.0
        ]);

        // 创建缓冲区
        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
        // 设置顶点属性
        const aPosition = gl.getAttribLocation(program, 'aPosition');
        gl.enableVertexAttribArray(aPosition);
        gl.vertexAttribPointer(aPosition, 4, gl.FLOAT, false, 0, 0);

        //////////////////////////5.设置uniform//////////////////////////
        // 设置颜色
        const uColor = gl.getUniformLocation(program, 'uColor');
        // 绘制第二个三角形（只允许红色分量写入）
        gl.uniform4f(uColor, 0.8, 0.2, 0.8, 0.7); // 设置颜色为绿色

        //////////////////////////6.渲染//////////////////////////
        function render(r, g, b, a) {
            // 清空颜色缓冲区
            gl.colorMask(true, true, true, true);
            gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置背景为黑色
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.colorMask(r, g, b, a);

            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }

        function setColorMask(r, g, b, a) {
            render(r, g, b, a);
        }

        setColorMask(true, true, true, true);

    </script>
</body>
</html>

注意

gl.colorMask()方法同样会作用于gl.clearColor()和gl.clear()方法。上方示例中我在gl.clear()方法前调用了gl.colorMask(true, true, true, true), 就是为了让gl.clear()能够正确的清空整个画布。