重置gl.viewport()无效：WebGL画布缩放后未更新的技术问询

首先咱们按优先级排查最容易踩的坑，一步步来解决：

1. 必须同步更新画布的实际宽高与CSS样式 #

这是最常见的疏漏！当你修改canvas.width/canvas.height（实际绘图缓冲区尺寸）时，如果不同步调整CSS的width/height，浏览器会自动拉伸WebGL的渲染结果，导致比例失真，和其他画布出现偏移。代码示例：

const canvas = gl.canvas;
const targetWidth = window.innerWidth;
const targetHeight = window.innerHeight;

// 更新实际绘图缓冲区（WebGL依赖这个）
canvas.width = targetWidth;
canvas.height = targetHeight;

// 同步CSS样式，避免浏览器拉伸渲染结果
canvas.style.width = `${targetWidth}px`;
canvas.style.height = `${targetHeight}px`;

2. 确保viewport调用时机正确 #

你调用gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)是正确的，但要注意：

• 必须在修改画布宽高之后调用这行代码
• 避免后续代码（比如第三方库、其他渲染逻辑）覆盖viewport设置

建议把viewport更新放在渲染循环的最开始，保证每次渲染都用最新的画布尺寸：

function renderLoop() {
  const gl = canvas.getContext('webgl');
  // 先更新视口，确保坐标映射正确
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  
  // 再执行清屏、绑定纹理、绘制三角形等操作
  gl.clear(gl.COLOR_BUFFER_BIT);
  // ... 你的渲染代码
  requestAnimationFrame(renderLoop);
}

3. 检查纹理UV与坐标系适配（可选） #

如果你希望纹理保持原始比例而非铺满画布，或者遇到上下颠倒的问题，需要调整UV坐标：

• 若纹理上下颠倒（WebGL Y轴向上，2D Canvas Y轴向下），在顶点着色器中翻转UV：

attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
  // 翻转Y轴UV，匹配2D画布的坐标系
  v_uv = vec2(a_uv.x, 1.0 - a_uv.y);
  // ... 其他顶点逻辑
}

• 若要保持纹理比例，计算画布与纹理的宽高比，调整UV缩放：

const canvasAspect = canvas.width / canvas.height;
const textureAspect = texture.width / texture.height;
const uvScale = canvasAspect > textureAspect ? textureAspect / canvasAspect : canvasAspect / textureAspect;
// 将uvScale传入着色器，修改UV计算：v_uv = a_uv * vec2(uvScale, uvScale);

4. 排除其他代码干扰 #

检查是否有其他代码（比如全局的WebGL状态管理、第三方渲染库）在你设置viewport后，又重新修改了视口参数，这也会导致比例偏移。

按上面的步骤排查，基本就能解决你的问题了。大部分情况都是因为没同步更新CSS样式，或者viewport的调用时机不对导致的。

内容的提问来源于stack exchange，提问作者Diego