在WebGL的世界中，深度控制是创造出电影级视觉效果的基石。它关乎物体的远近呈现、层次分明，以及场景的立体感。今天，我们就来深入探讨WebGL中的深度控制技巧，帮助你轻松掌握实现电影级景深的效果。
深度缓冲区（Depth Buffer）
在WebGL中，深度缓冲区是最基础也是最重要的深度控制工具。它负责存储每个像素的深度信息。当你渲染一个场景时，WebGL会根据深度缓冲区的信息决定哪些物体应该被显示，哪些应该被遮挡。
创建深度缓冲区
首先，你需要确保在创建WebGL上下文时开启了深度测试：
const gl = canvas.getContext('webgl');
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
这里，gl.DEPTH_TEST 启用深度测试，gl.LESS 设置为当片段的深度值小于缓冲区中的深度值时，该片段才被渲染。
控制深度范围
为了更好地控制深度范围，可以使用gl.depthRange方法：
gl.depthRange(-1.0, 1.0); // 设置深度值从-1.0到1.0
在这个例子中，深度值为-1.0的物体会在视图中显示为最近，而深度值为1.0的物体则显示为最远。
近大远小（Perspective Projection）
使用透视投影可以使近处的物体显得更大，远处的物体显得更小，从而产生一种立体感。
设置透视投影
const fieldOfView = 75; // 视场角度
const aspectRatio = gl.canvas.width / gl.canvas.height;
const zNear = 0.1;
const zFar = 100.0;
const perspectiveMatrix = mat4.perspective(mat4.create(), fieldOfView, aspectRatio, zNear, zFar);
在这个例子中，我们使用mat4.perspective函数来创建一个透视矩阵。zNear和zFar分别表示渲染场景的近点和远点。
应用透视投影
将透视矩阵应用于视图矩阵或投影矩阵：
gl.uniformMatrix4fvuniformLocation(prog, u_PerspectiveMatrix, false, perspectiveMatrix);
这样，所有通过这个投影矩阵渲染的物体都将使用透视投影。
阴影与光照
阴影和光照是增加场景深度感的重要手段。
添加阴影
使用shadow map技术可以创建阴影效果，使物体在光线照射下产生立体感。
const shadowMapWidth = 1024;
const shadowMapHeight = 1024;
const shadowTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, shadowTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, shadowMapWidth, shadowMapHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// 设置阴影贴图的参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// 使用纹理单元
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, shadowTexture);
应用光照
光照可以通过lighting技术实现。你可以使用gl.directionalLight或gl.pointLight来创建光源：
gl.directionalLightfdirLight(gl, 1.0, 0.0, 0.0, 0.5);
gl.pointLightfpointLight(gl, 0.5, 0.5, 1.0, 1.0);
总结
通过上述技巧，你可以在WebGL中实现电影级的深度控制效果。掌握深度缓冲区、透视投影、阴影与光照等基础知识，是构建出引人入胜的3D场景的关键。不断实践和探索，你的WebGL技能将会更上一层楼！
