在 WebGL 中设置正交顶视图投影

Question

我研究了这里的例子： http://learningwebgl.com/lessons/lesson01/index.html

使用的矩阵库是： http://glmatrix.net/

所以这个例子是在剪辑空间中，我明白这一点。我想使用此示例作为基础来设置正交投影。正交投影的中心应位于 0,0,0，眼睛位置位于 +Z 处并俯视 0,0,0。当我在缓冲区中输入 3d 面的坐标时，我希望能够以模型空间单位输入这些坐标。以我的地图展览为例，我有一个 10,000 立方 x -5000 至 +5000 y -5000 至 +5000 和 z -5000 至 +5000 的区域，将投影到 500 x 500 的画布上。所以我的 3d 面将在这 10,000 个立方体中的某个位置有坐标，500 x 500 画布将显示所有 10,000 个立方体。

这与 CAD 程序用于开始草图绘制的投影相同。有谁知道如何使用 glMatrix 库在 WebGL 中执行此操作？我是 WebGL 新手，我确实可以使用有关此主题的一些指导。

Answer 1

为了简单起见，您首先应该将相机变换矩阵与其投影矩阵分开。然后，您可以将它们相乘以获得“视图投影矩阵”，它将世界空间坐标转换为屏幕空间。

var cam = mat4.create();
var proj = mat4.create();

开始放置相机（凸轮矩阵）

mat4.translate( cam, cam, position )
mat4.rotate( ... )
mat4.lookAt( .. )
//...

设置正投影（投影矩阵）。您可以看到正交投影就像一个与相机对齐的盒子，您可以使用六个参数扩展每一侧。盒子内的所有内容都会显示在屏幕上。

var ratio = screenWidth/screenHeight;
var halfWorldWidth = 5000.0;

// the near/far will depend on your camera position
mat4.ortho( proj,
  -halfWorldWidth,
  halfWorldWidth,
  -halfWorldWidth / ratio,
  halfWorldWidth  /ratio,
  -50,
  50
)

终于得到视图投影了

var view     = mat4.create()
var viewProj = mat4.create()

mat4.invert( view, cam );
mat4.multiply( viewProj, proj, view );