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

【问题标题】：Setting up an Orthographic Top View Projection in WebGL在 WebGL 中设置正交顶视图投影
【发布时间】：2016-10-03 07:21:10
【问题描述】：

我在这里研究了这个例子： 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 的新手，我真的可以在这个主题上使用一些指导。

【问题讨论】：

标签： webgl orthographic

【解决方案1】：

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

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

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

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

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

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
)

终于得到view-projection

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

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

【讨论】：