（十三）浅谈gl.viewport()的具体原理、使用方法和应用场景

本文链接：https://blog.csdn.net/cuijiying/article/details/145083297

在WebGL中，gl.viewport() 是一个非常重要的函数，它控制着渲染图像在画布上的位置和大小。它的作用是定义渲染区域的尺寸（宽度和高度），并设置渲染目标在视口中的起始位置。理解 gl.viewport() 对于调试和优化 WebGL 渲染至关重要。

1. `gl.viewport()` 的基本原理

gl.viewport() 用来设置视口（viewport），即在 WebGL 上下文的输出区域。在 WebGL 中，所有的绘制操作会发生在一个虚拟的标准化坐标系（NDC，Normalized Device Coordinates）中，标准化的坐标范围为 [-1, 1]。然后通过视口转换，将这个 NDC 坐标系映射到屏幕坐标系。

NDC到屏幕坐标的映射：视口定义了 NDC 坐标如何映射到屏幕坐标。视口的大小和位置决定了最终图像在屏幕上的呈现效果。

2. `gl.viewport()` 的参数

gl.viewport() 接受四个参数：

gl.viewport(x, y, width, height);

x 和 y：视口的左下角位置（以像素为单位）。这两个值指定了视口的起始点，即渲染目标的左下角的位置。
width 和 height：视口的宽度和高度（以像素为单位）。这些值控制了渲染区域的尺寸。

3. 视口的应用场景和常见使用方法

3.1 基本应用场景

默认视口设置

默认情况下，WebGL 的视口与画布的大小一致。假设你创建了一个大小为 800x600 的画布，调用 gl.viewport(0, 0, canvas.width, canvas.height) 时，WebGL 将渲染到整个画布。
```
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
gl.viewport(0, 0, canvas.width, canvas.height);
```
缩放渲染区域

如果你需要渲染到一个较小的区域，而不是整个画布，可以调整 width 和 height 参数。
```
gl.viewport(50, 50, 400, 300); // 将渲染区域缩放到画布的一个子区域
```
这意味着 WebGL 将只在画布的 (50, 50) 到 (450, 350) 的区域内渲染。

多个视口（多视口渲染）

在某些高级应用中，例如游戏或可视化，可能需要同时渲染多个视口。通过调用 gl.viewport() 多次，你可以定义多个渲染区域。在每次绘制之前，设置不同的视口参数。

// 渲染到左上角区域
gl.viewport(0, 0, canvas.width / 2, canvas.height / 2);
drawSceneLeftTop();

// 渲染到右上角区域
gl.viewport(canvas.width / 2, 0, canvas.width / 2, canvas.height / 2);
drawSceneRightTop();

// 渲染到左下角区域
gl.viewport(0, canvas.height / 2, canvas.width / 2, canvas.height / 2);
drawSceneLeftBottom();

// 渲染到右下角区域
gl.viewport(canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2);
drawSceneRightBottom();

在这种情况下，多个场景可以同时渲染到画布的不同部分。

3.2 动态调整视口

在响应式设计或窗口大小调整时，你可能需要动态调整视口的大小。例如，当浏览器窗口大小改变时，你可能希望重新设置视口，确保渲染区域与新画布大小一致。

window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);
});

4. `gl.viewport()` 与其他视图转换

投影矩阵和视口变换：通常，WebGL 会使用一个投影矩阵（比如正投影矩阵或者透视投影矩阵）来将世界坐标转换为 NDC 坐标，而 gl.viewport() 则负责将这个 NDC 坐标转换到屏幕坐标。投影矩阵和视口变换共同决定了最终渲染的输出。
视口变换与 gl.clear()：视口会影响 gl.clear() 的渲染范围。你可以在设置视口后调用 gl.clear()，以便清空指定区域的颜色缓冲。

5. 总结与最佳实践

合理使用视口：gl.viewport() 是处理视口大小、位置以及渲染区域的关键函数。在多视口渲染、窗口大小自适应以及子区域渲染时，gl.viewport() 使得这些操作变得简单。
动态调整：在响应式设计中，动态调整视口大小非常重要。
多个视口：可以通过多次调用 gl.viewport() 来实现多个视口的渲染，常用于多视角渲染等复杂场景。

代码示例：动态调整视口和画布大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Viewport Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<canvas id="myCanvas"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const gl = canvas.getContext('webgl');

    // 设置画布和视口的大小
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        gl.viewport(0, 0, canvas.width, canvas.height);
    }

    // 初次设置
    resizeCanvas();

    // 监听窗口变化
    window.addEventListener('resize', resizeCanvas);

    // 绘制场景的示例（这里只是一个简化版的框架）
    function drawScene() {
        gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置背景色为黑色
        gl.clear(gl.COLOR_BUFFER_BIT); // 清除颜色缓冲区

        // 其他渲染操作（省略）
    }

    // 渲染循环
    function render() {
        drawScene();
        requestAnimationFrame(render);
    }

    render();
</script>
</body>
</html>