在 WebGL 里，gl.viewport() 是一个很基础、却经常被忽略的函数。它决定了绘制结果最终落在画布的哪个区域，以及这个区域有多大。只要你在做窗口自适应、多视口渲染，或者单纯想把画面准确地映射到屏幕上，都会绕不开它。
gl.viewport() 的基本原理
WebGL 的绘制并不是直接在屏幕坐标里进行的。顶点经过一系列变换后，会落到一个标准化设备坐标系（NDC）中，它的范围是 [-1, 1]。接下来，GPU 会把这个坐标映射到真正的画布像素区域，这一步就是视口变换，而 gl.viewport() 正是在做这件事。
换句话说，投影矩阵负责把世界坐标压缩到 NDC，gl.viewport() 再把 NDC 映射到画布上的具体像素位置。两者配合起来，最终图像才会准确显示在我们看到的区域里。
gl.viewport() 的参数含义
gl.viewport() 的调用形式很简单：
gl.viewport(x, y, width, height);
x、y：视口左下角的起点位置，单位是像素。width、height：视口的宽高，单位同样是像素。
这里有个细节要记住：WebGL 里的 (x, y) 指的是左下角，这一点和很多 2D 画布或 DOM 布局习惯并不一样，调试时很容易在这里绕进去。
常见使用方式
默认情况：让视口覆盖整个画布
大多数场景下，你只需要让视口和画布大小一致。比如画布是 800x600，通常就会这样设置：
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
gl.viewport(0, 0, canvas.width, canvas.height);
这表示渲染内容会填满整个画布，没有额外偏移。
只渲染画布中的一部分区域
如果你希望把图像限制在画布的某个子区域里，直接调整视口的宽高就行。比如：
gl.viewport(50, 50, 400, 300);
这段代码会把渲染区域限制在从 (50, 50) 开始、宽 400、高 300 的矩形内。常见用途包括分屏界面、局部预览窗口、调试视图等。
多视口渲染
在游戏、可视化大屏或编辑器里，多视口并不少见。思路也很直接：每次绘制前先切换视口，再绘制对应内容。
