WebGL/Opengl标准化设备坐标（NDC）

如果你看得懂下面前两个例子，给定三个坐标点，为什么渲染出这样的图形，说明你是老鸟，不用看这篇文章。

标准化设备坐标 ：( Normalized Device Coordinates, NDC )

标准化设备坐标是一个 x、y 和 z 值在 -1.0 到 1.0 的一小段空间。任何落在范围外的坐标都会被丢弃/裁剪，不会显示在你的屏幕上。下图省略z轴：

代码运行渲染如下：

很多介绍标准化坐标就是上面这句话，三个坐标轴取值范围都是[-1, 1]，任何落在范围外的坐标都会被丢弃/裁剪。定义很简单，但表现的表象有很多，如开头的那两个例子。根本原因是这三个范围组成的是一个立方体区域：如下图

下图是沿z轴正式图：

接下来演示开头那两个例子为什么演示那样：

第一个案例的三个顶点：

(0,0.5,0), (0.5,-0.5,0), (-0.5,-0.5,1.5)

渲染如下：

原因是 (-0.5,-0.5,1.5)这个点的z坐标超出1了，被剪裁掉了。

再演示一下第二案例：

(0,0.5,0), (1.5,-0.5,0), (-1.5,-0.5,1.5)