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

Question

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

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

示例在剪辑 space 中，我理解这一点。我想使用此示例作为我的基础来设置正交投影。正交投影应该以 0,0,0 为中心，眼睛位置在 +Z 的某处并向下看 0,0,0。当我在缓冲区中输入 3d 面的坐标时，我希望能够以模型 space 单位输入这些坐标。我的地图展示的示例我有一个 10,000 立方体 x -5000 到 +5000 y -5000 到 +5000 和 z -5000 到 +5000 的区域，要投影到 canvas 上，即 500 x 500。所以我的 3d 面孔将在这 10,000 立方体中的某个位置具有坐标，而 500 x 500 canvas 将显示所有 10,000 立方体。

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

Answer 1

为了简单起见，您首先应该将相机变换矩阵与其投影矩阵分开。然后，您可以将它们相乘得到 "view-projection matrix"，它将 world-space 坐标转换为 screen-space.

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, lens, view );

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

Setting up an Orthographic Top View Projection in WebGL

orthographic

webgl