Question

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

所以这个例子是在剪辑空间中，我明白了。我想用这个例子作为我的基础设置一个正交投影。正交投影的中心应该是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

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

Global Options

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

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

设置othographic投影（proj矩阵）。你可以看到正射投影就像一个与摄像机对齐的盒子，你可以用六个参数展开每一面。盒子里面的所有东西都会显示在屏幕上。

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
)

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

1 个答案: