WebGL进阶（七）深度缓冲区

理论基础：

效果：

画家算法

深度冲突

斑驳消除

源码：

画家算法

// 初始化缓冲区并设置矩阵
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);

 

复盘：

声明：本人素材学习来自于冰老师及官方文档！部分为自己理解注释冰哥图形学工作站的个人空间-冰哥图形学工作站个人主页-哔哩哔哩视频