webgl随笔

图解WebGL&Three.js工作原理

1. 简单说来，WebGL绘制过程包括以下三步：

1、获取顶点坐标
2、图元装配（即画出一个个三角形）
3、光栅化（生成片元，即一个个像素点）

2. 由于顶点数据往往成千上万，在获取到顶点坐标后，我们通常会将它存储在显存，即缓存区内，方便GPU更快读取。

3.“顶点着色器” : 它由opengl es编写，由javascript以字符串的形式定义并传递给GPU生成。

比如如下就是一段顶点着色器代码：

attribute vec4 position;
void main() {
  gl_Position = position; 
}

attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
position即我们定义的顶点坐标；
gl_Position是一个内建的传出变量。
如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，我们则需要转换成屏幕坐标。

4.顶点着色器会先将坐标转换完毕，然后由GPU进行图元装配，有多少顶点，这段顶点着色器程序就运行了多少次。

attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = position * matrix; 
}

5.片元着色器是生成多少片元（像素），运行多少次。

6.其中顶点数据存储在缓存区（因为数量巨大），以修饰符attribute传递给顶点着色器；矩阵则以修饰符uniform传递给顶点着色器。

7.现在，我们将模型顺时针旋转Math.PI/6，所有顶点位置肯定都变化了。

box.rotation.y = Math.PI/6;

8.但是，如果我们直接将顶点位置用javascript计算出来，那性能会很低（顶点通常成千上万），而且，这些数据也非常不利于维护。所以，我们用矩阵modelMatrix将这个旋转信息记录下来。

9.然后，我们将相机往上偏移30。同理，我们用矩阵viewMatrix将移动信息记录下来。

camera.position.y = 30;

WebGL基础介绍

10.深度小的才能显示出来,rgba比rgb最后带深度，小的是透明的

11.Three.js是一款开源的主流3D绘图JS引擎（名字Three就是3D的含义），用来简化WebGL编程，也提供了非常多的3D显示功能来实现很多炫酷的实例。