webgl 模板缓冲

Posted 2021-02-14 honghong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webgl 模板缓冲相关的知识，希望对你有一定的参考价值。
先思考个问题, 想实现遮罩怎么办?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Stencil Buffer</title>
<script id="shader-vs" type="x-shader/x-vertex">
precision highp float;
attribute vec3 aPos;
attribute vec4 aColor;
varying vec4 vColor;
void main(void){
    gl_Position = vec4(aPos, 1);
    vColor = aColor;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
varying vec4 vColor;
void main(void) {
    gl_FragColor = vColor;
}
</script>
<script id="shader-vs-2" type="x-shader/x-vertex">
precision highp float;
attribute vec3 aPos;
attribute vec2 aTextureCoords;
varying vec2 vTextureCoord;
void main(void){
    gl_Position = vec4(aPos, 1.0);
    vTextureCoord = aTextureCoords;
}
</script>
<script id="shader-fs-2" type="x-shader/x-fragment">
precision highp float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    if (gl_FragColor.a == 0.0) {
        discard;
    }
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400" ></canvas>
<script>
var gl;
var canvas = document.getElementById(‘canvas‘);
var glProgram = null;
var glProgram2 = null;
var samplerUniform = null;
var maskTexture;

function getGLContext() {
    var glContextNames = [‘webgl‘, ‘experimental-webgl‘];
    for (var i = 0; i < glContextNames.length; i ++) {
        try {
            gl = canvas.getContext(glContextNames[i], {
                stencil: true
            });
        } catch (e) {}
        if (gl) {
            gl.clearColor(74 / 255, 115 / 255, 94 / 255, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.enable(gl.STENCIL_TEST);
            break;
        }
    }
}

function initShaders(vsShaderId, fsShaderId) {
    //get shader source
    var vs_source = document.getElementById(vsShaderId).innerHTML;
    var fs_source = document.getElementById(fsShaderId).innerHTML;

    //compile shaders
    var vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);
    var fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);

    //create program
    var glProgram = gl.createProgram();

    //attach and link shaders to the program
    gl.attachShader(glProgram, vertexShader);
    gl.attachShader(glProgram, fragmentShader);
    gl.linkProgram(glProgram);

    if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
        alert("Unable to initialize the shader program.");
    }

    //use program
    // gl.useProgram(glProgram);
    return glProgram;
}

function makeShader(src, type) {
    //compile the vertex shader
    var shader = gl.createShader(type);
    gl.shaderSource(shader, src);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
    }
    return shader;
}
// vertex representing the triangle
var vertex = [
    -.5, -.2,  0,
    .5,  -.2,  0,
    0,   .6,   0
];
var stencilVertex = [
    -.2, -.5,  0,
    .4,  -.5,  0,
    .3,   .6,   0
];
function setupBufferAndDraw(){
    // draw the mask image as stencil
    gl.useProgram(program2);
    var maskVertex = [
         -1, -1, 0,
         1,  -1, 0,
         1,   1, 0,
         -1, -1, 0,
         1,   1, 0,
         -1,  1, 0
    ];
    var maskTexCoords = [
        0, 0,
        1, 0,
        1, 1,
        0, 0,
        1, 1,
        0, 1
    ];
    var maskBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, maskBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(maskVertex), gl.STATIC_DRAW);

    var aMaskVertexPosition = gl.getAttribLocation(program2, ‘aPos‘);
    gl.vertexAttribPointer(aMaskVertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(aMaskVertexPosition);

    // texture coordinate data
    var maskTexCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, maskTexCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(maskTexCoords), gl.STATIC_DRAW);

    var vertexTexCoordAttribute = gl.getAttribLocation(program2, "aTextureCoords");
    gl.enableVertexAttribArray(vertexTexCoordAttribute);
    gl.vertexAttribPointer(vertexTexCoordAttribute, 2, gl.FLOAT, false, 0, 0);

    // Always pass test
    gl.stencilFunc(gl.ALWAYS, 1, 0xff);
    gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
    gl.stencilMask(0xff);
    gl.clear(gl.STENCIL_BUFFER_BIT);
    // No need to display the triangle
    gl.colorMask(0, 0, 0, 0);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, maskTexture);
    gl.uniform1i(samplerUniform, 0);

    gl.drawArrays(gl.TRIANGLES, 0, maskVertex.length / 3);
    // return;
    gl.useProgram(program);
    // Pass test if stencil value is 1
    gl.stencilFunc(gl.EQUAL, 1, 0xFF);
    gl.stencilMask(0x00);
    gl.colorMask(1, 1, 1, 1);
    // draw the clipped triangle
    var color = [
        1, 0, 0, 1,
        0, 1, 0, 1,
        0, 0, 1, 1
    ];
    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);

    var aColorPosition = gl.getAttribLocation(program, ‘aColor‘);
    gl.vertexAttribPointer(aColorPosition, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(aColorPosition);

    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);

    var aVertexPosition = gl.getAttribLocation(program, ‘aPos‘);
    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(aVertexPosition);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, vertex.length / 3);
}

function createTexture(source) {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.bindTexture(gl.TEXTURE_2D, null);
    return texture;
}

window.onload = function () {
    getGLContext();
    program = initShaders(‘shader-vs‘, ‘shader-fs‘);
    program2 = initShaders(‘shader-vs-2‘, ‘shader-fs-2‘);
    samplerUniform = gl.getUniformLocation(program2, ‘uSampler‘);
    var img = new Image();
    img.onload = function () {
        maskTexture = createTexture(this);
        setupBufferAndDraw();
    };
    img.src = ‘../images/mask-png8.png‘;
}
</script>
</body>
</html>
以上是关于webgl 模板缓冲的主要内容，如果未能解决你的问题，请参考以下文章
webGL - 如何在帧缓冲区旁边设置模板缓冲区并使用它？
WebGL 中有没有办法快速反转模板缓冲区？
webgl 绘图顺序，模板缓冲区
WebGL：在带有深度模板纹理附件的帧缓冲区上未清除颜色
webgl 模板缓冲
WebGL纹理颜色原理