d3.js 旋转图形_从简单到复杂三维图形渲染管线

一、什么是三维图形渲染管线

3D Graphics Rendering Pipeline

1、三维

• 3D，三维空间的简称。
• 在笛卡尔空间坐标系内，一般使用x、y、z三个分量表示一个位置。

2、图形

• 图形：Graphic，用一组指令集合来描述内容，如描述构成该图的各种图元几何数据、绘制方法等。因为图形对象中有丰富的结构、形状和造型数据，图形对象可以进行丰富的变换而不会失真。
• 图像：Image，用有限的像素栅格及颜色数值来表述内容，可表达丰富的色彩信息。因为图像的像素数量和像素位宽都有限，因此对图像变换后会损坏图像数据丢失精度。

3、渲染

• 渲染：Rendering，是将图形数据转换成图像数据的过程。比如将三维图形转换到一张图片、将二维矢量图显示到显示器真缓冲区等。

4、管线

• 一套还算比较复杂的算法，按照功能划分为若干个阶段。

二、必备的数学基础

1、向量

• 在3D图形数学中，向量(x, y, z)可用于描述几何数据中的：
  • 位置
  • 方向
  • 一个端点在原点的线段
  • RGB颜色
• 向量加法减法，用于描述：
  • 特定位置点经过平移的新位置。
  • 两个位置之间的方向和距离。
• 向量点乘：
  • 求夹角。
  • 已知夹角，求特定位置的坐标。
  • 求射影长度。
  • 矩阵乘法计算的工具。
• 向量叉乘：
  • 求法线
  • 笛卡尔坐标轴方向计算，知道x，y方向求z方向等。

2、矩阵

• 空间变换（平移、旋转、缩放、投影。。。）