WebGL FrameBuffer被裁剪至画布尺寸问题求助

• 问题根因：你碰到的不是gl.viewport的问题——gl.viewport只负责WebGL在画布上的绘制区域，而地图的可见范围是由投影矩阵和模型视图矩阵控制的。只调viewport只会裁切画面，根本不会让超出画布的地图区域显示出来。

• 具体修复步骤：

  1. 重构投影矩阵：别再用画布尺寸做投影范围了，换成你的地图逻辑尺寸。比如你的地图是80x60个瓦片，每个瓦片32px，那正交投影的范围应该设为[-1280, 1280, -960, 960]（以地图中心为原点的话），用mat4.ortho生成这个矩阵传给着色器。
  2. 正确处理平移（相机偏移）：把地图的平移量（比如玩家移动后的相机位置）加到模型视图矩阵里，而不是乱调viewport。用mat4.translate把偏移量合并到矩阵中，让所有瓦片的位置都跟着相机偏移。
  3. 检查着色器的坐标计算：顶点着色器里的gl_Position必须是projectionMatrix * modelViewMatrix * vec4(vertexPosition, 0.0, 1.0)的形式，确保所有在投影范围内的瓦片都能被正确映射到画布上。

• 针对你项目的建议：

  • 找到初始化投影矩阵的代码，把基于画布宽高的参数换成地图的实际逻辑尺寸。
  • 把gl.viewport恢复成gl.viewport(0, 0, canvas.width, canvas.height)，保证整个画布都用来渲染。
  • 确认平移参数已经正确传递到了着色器的模型视图矩阵中，别让瓦片的位置还是基于画布原点计算。

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