WebGL视口：在图形渲染管线中控制窗口显示

2023-11-18 14:11:05

WebGL 视口：掌控您在浏览器中 3D 世界的展示

想象一下，您正在构建一个引人入胜的 3D 应用程序，它将在用户面前展现一个充满活力的世界。为了确保您的场景在浏览器窗口中以最优方式显示，您需要熟练掌握 WebGL 视口。视口是图形渲染管线中的一个关键组件，它定义了在屏幕上绘制 3D 场景的区域。

视口的魔力

WebGL 视口是一个矩形区域，它负责将裁剪后的图元从裁剪空间转换到屏幕空间。通过操纵视口，您可以控制 3D 场景在浏览器窗口中的位置、大小和比例。它就像一个魔术师，可以改变您场景在用户面前呈现的方式。

视口在渲染管线中的角色

视口变换是图形渲染管线中顶点变换的一部分，它发生在裁剪和背面剔除之后，透视除法之前。在这个阶段，图元已经从原始模型空间裁剪到裁剪空间，并且背面不可见的图元已被剔除。

设置视口

在 WebGL 中，可以使用 gl.viewport() 方法设置视口。这个方法需要四个参数：

x：视口的左下角 x 坐标
y：视口的左下角 y 坐标
width： 视口的宽度
height： 视口的高度

代码示例：

gl.viewport(0, 0, canvas.width, canvas.height);

这将设置视口以覆盖整个画布区域。

多视口模式

WebGL 支持多视口模式，允许您在单个画布上渲染多个视口。这对于创建分屏显示或并排比较不同场景非常有用。

视口的实际应用

视口在 WebGL 中有广泛的应用，包括：

控制窗口尺寸： 调整 3D 场景的大小和比例以适应不同的浏览器窗口。
创建多个视图： 同时显示场景的不同视图，例如主视图和迷你地图。
后期处理： 使用视口与 WebGL 帧缓冲区一起创建后期处理效果，例如模糊和景深。
VR 体验： 视口在 VR 中用于渲染场景的左右眼视图。

示例代码

让我们编写一些代码来展示视口的实际应用。我们将设置一个视口并绘制一个简单的三角形：

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 创建一个三角形
const triangleVertices = [
    -1.0, -1.0, 0.0,
    1.0, -1.0, 0.0,
    0.0,  1.0, 0.0
];

// 编译着色器程序
const vertexShader = compileVertexShader(...);
const fragmentShader = compileFragmentShader(...);
const program = createProgram(vertexShader, fragmentShader);

// 链接并使用着色器程序
gl.linkProgram(program);
gl.useProgram(program);

// 获取顶点属性位置
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

// 启用顶点属性
gl.enableVertexAttribArray(positionAttributeLocation);

// 设置顶点属性数据
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);