当前位置：首页 > article >正文

WebGL进阶（七）深度缓冲区

article 2024/11/23 3:50:59

理论基础：

效果：

画家算法

深度冲突

斑驳消除

源码：

画家算法

// 初始化缓冲区并设置矩阵
function initBuffer() {

    // 定义顶点数据，包括位置和颜色
    let arr = [
        // 位置坐标，颜色值
        0.0, 100, -80, 1,      1, 0,  0, 1,  // 红色
        -50, -100, -80, 1,     1, 0,  0, 1,
        50, -100, -80, 1,      1, 0,  0, 1,

        0, 100, -60, 1,       1.0, 1.0,  0.4, 1,  // 黄色
        -50, -100, -60, 1,      1.0, 1.0,  0.4, 1,
        50, -100,-60, 1,      1.0, 1.0,  0.4, 1,

        0.0, 100, -35.0, 1,      0.4,  0.4, 1.0, 1,  // 蓝色
        -50, -100, -35.0, 1,     0.4,  0.4, 1.0, 1,
        50, -100, -35.0, 1,      0.4, 0.4, 1.0, 1,
    ]

    // 创建一个Float32Array类型的数组来存储顶点数据
    let pointPosition = new Float32Array(arr);

    // 获取顶点着色器中位置属性的位置
    let aPosition = webgl.getAttribLocation(webgl.program, "a_position");

    // 创建一个缓冲区对象
    let triangleBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
    webgl.enableVertexAttribArray(aPosition);
    webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 8 * 4, 0);

    // 获取顶点着色器中颜色属性的位置
    let aColor = webgl.getAttribLocation(webgl.program, "a_color");
    webgl.enableVertexAttribArray(aColor);
    webgl.vertexAttribPointer(aColor, 4, webgl.FLOAT, false, 8 * 4, 4 * 4);

    // 初始化投影矩阵
    let ProjMatrix = glMatrix.mat4.create();
    glMatrix.mat4.identity(ProjMatrix);
    // 设置透视投影矩阵，参数为：矩阵、角度（转换为弧度）、宽高比、近剪裁面、远剪裁面
    glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000);

    // 获取uniform变量u_formMatrix的位置
    let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");

    // 初始化模型矩阵
    let ModelMatrix = glMatrix.mat4.create();
    glMatrix.mat4.identity(ModelMatrix);
    // 沿x轴平移模型
    glMatrix.mat4.translate(ModelMatrix, ModelMatrix, [180, 0, 0]);

    // 初始化视图矩阵
    let ViewMatrix = glMatrix.mat4.create();
    glMatrix.mat4.identity(ViewMatrix);
    // 设置视图矩阵，参数为：矩阵、相机位置、目标位置、上方向
    glMatrix.mat4.lookAt(ViewMatrix, [0, 0, 300], [0, 0, -90], [0, 1, 0]);

    // 计算模型视图矩阵
    let mvMatrix = glMatrix.mat4.create();
    glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);

    // 计算模型视图投影矩阵
    let mvpMatrix = glMatrix.mat4.create();
    glMatrix.mat4.identity(mvpMatrix);
    glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);
    // 将模型视图投影矩阵传递给着色器
    webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix);

    // 设置清除颜色为绿色，并清除颜色缓冲区
    webgl.clearColor(0.0, 1.0, 0.0, 1.0);
    // 清除颜色缓冲区和深度缓冲区
    webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
    // 启用深度测试
    webgl.enable(webgl.DEPTH_TEST);
    // 绘制三角形
    webgl.drawArrays(webgl.TRIANGLES, 0, 9);
}

深度冲突

            //隐藏面消除
            webgl.clear(webgl.COLOR_BUFFER_BIT|webgl.DEPTH_BUFFER_BIT);
            webgl.enable(webgl.DEPTH_TEST);
            // webgl.enable(webgl.POLYGON_OFFSET_FILL);
            webgl.drawArrays(webgl.TRIANGLES, 0, 3);
            // webgl.polygonOffset(1.0, 1.0);  
            webgl.drawArrays(webgl.TRIANGLES, 3, 6);

斑驳消除

            webgl.clear(webgl.COLOR_BUFFER_BIT);
            //隐藏面消除
            // webgl.clear(webgl.DEPTH_BUFFER_BIT);
            // webgl.enable(webgl.DEPTH_TEST);
            webgl.drawArrays(webgl.TRIANGLES, 0, 9);