three.js - 为什么我必须标准化坐标？

Question

我看到每个人都将他的坐标标准化为 [-1;1] 范围内。为什么要这样做？这是必需的吗？这仅适用于 ThreeJS，还是每个 3D 框架都很常见？

Answer 1

Three.js基于WebGL而WebGL基于OpenGL ES (Embedded System)

在 WebGL/OpenGL ES 中有一个视口(viewport):

2.3 The WebGL Viewport

OpenGL manages a rectangular viewport as part of its state which defines the placement of the rendering results in the drawing buffer. Upon creation of the WebGL context, the viewport is initialized to a rectangle with origin at (0, 0) and width and height equal to (canvas.width, canvas.height).

5.13.4 Viewing and clipping

The viewport specifies the affine transformation of x and y from normalized device coordinates to window coordinates. The size of the drawing buffer is determined by the HTMLCanvasElement. The scissor box defines a rectangle which constrains drawing. When the scissor test is enabled only pixels that lie within the scissor box can be modified by drawing commands. When enabled drawing can only occur inside the intersection of the viewport, canvas area and the scissor box. When the scissor test is not enabled drawing can only occur inside the intersection of the viewport and canvas area.

这意味着 gl.viewport 定义了从标准化设备坐标到视口(viewport)矩形的转换。
因此，绘制并应显示在视口(viewport)上的所有内容都必须位于标准化设备空间中，其范围在 (-1,-1,-1) 到 (1, 1, 1) 之间。

将几何图形转换为标准化设备坐标:

几何体通过其模型矩阵转换为世界坐标。

为了从世界坐标转换为标准化设备坐标，Three.js 提供了 THREE.OrthographicCamera或THREE.PerspectiveCamera 。相机定义了一个 View 矩阵和一个投影矩阵。

View 矩阵描述了观看场景的方向和位置。 View 矩阵从世界空间变换到 View (眼睛)空间。一般来说，世界坐标和 View 坐标是 Cartesian coordinates .

投影矩阵描述了从场景的 3D 点到视口(viewport)的 2D 点的映射。投影矩阵从 View 空间变换到剪辑空间。剪辑空间坐标为 Homogeneous coordinates 。通过除以 w 分量，剪辑空间中的坐标将转换为 (-1, -1, -1) 到 (1, 1, 1) 范围内的标准化设备坐标 (NDC)剪辑坐标。