WebGL的剪裁空间

推荐：使用NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景

什么是WebGL的剪裁空间

WebGL的剪裁空间（Clipping Space）是在图形渲染过程中处理视图体积裁剪的一种特定空间。它是指定义在3D世界坐标系和屏幕窗口之间的虚拟空间，用于确定哪些图元将被渲染到屏幕上。

WebGL使用了透视投影或正交投影将3D场景转换为2D图像进行渲染，在这个过程中，可见性和裁剪是非常重要的步骤。剪裁空间定义了实际渲染到屏幕的区域，并决定了对象是否可见。

WebGL的剪裁空间是一个规范化的坐标空间，从-1到+1，其中x轴，y轴和z轴分别代表了屏幕的宽度、高度和深度范围。正视看，剪裁空间以屏幕中心为原点，向右为正x轴方向，向上为正y轴方向，向外为正z轴方向。所有位于剪裁空间范围外的几何图元都会被裁剪掉。

WebGL使用透视投影矩阵或正交投影矩阵将3D物体的坐标变换到剪裁空间。透视投影更常用，它在视锥体内将3D坐标投影到裁剪空间。透视投影矩阵创建了一个视锥体，其中靠近相机的物体更大，远离相机的物体变小。这种变换模拟了现实世界中的透视效果，使得远处的物体看起来较小。

要创建透视投影矩阵，需要指定视锥体的各个参数，如视场角、宽高比、近平面和远平面的距离。通过将3D物体的顶点坐标与透视投影矩阵相乘，可以获得在裁剪空间中的坐标。

例如，对于一个视场角为45度、宽高比为1：1、近平面距离为0.1、远平面距离为100的透视投影设置，可以使用以下 WebGL 代码：

// 创建透视投影矩阵
var fov = 45 * Math.PI / 180; // 视场角
var aspectRatio = canvas.width / canvas.height; // 宽高比
var near = 0.1; // 近平面距离
var far = 100; // 远平面距离

var projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, fov, aspectRatio, near, far);

// 将顶点坐标与透视投影矩阵相乘
var transformedVertex = vec4.create(); // 原始顶点坐标
var clipSpaceVertex = vec4.create(); // 裁剪空间中的顶点坐标

vec4.transformMat4(transformedVertex, originalVertex, projectionMatrix);
vec4.scale(clipSpaceVertex, transformedVertex, 1 / transformedVertex[3]); // 齐次除法

通过上述代码，可以将3D物体的顶点坐标转换成裁剪空间中的坐标。这样，在后续的渲染管线阶段中，裁剪掉位于裁剪空间之外的部分，并通过视口变换将其映射到屏幕上可见的区域，从而实现正确的渲染效果。