WebGL学习实录（一）

基础

1) 需要熟悉使用canvas；

如何创建webgl上下文环境；

var gl = canvas.getContext('experimental-webgl');

或者

var gl = canvas.getContext('webgl');

2）理解WebGl的坐标系

跟其他3D系统一样，WebGL的Z轴表示x,y和z轴。

在WebGL上的坐标被限定为（1,1,1）和（-1，-1，-1），不会显示任何超越这些边界。

 

3） 基础概念

a) 顶点

顶点是定义一个3D对象的边缘的点。它是由每一个表示 x，y和z轴，分别3浮点值来表示。

b) 索引

在WebGL中被用来识别顶点呃数值。这些数值将被用来绘制在WebGL网格上。

c) 数组

d)缓存区

顶点缓冲区对象-存储每一个顶点的数据

索引缓冲区对象-存在有关索引数据

帧缓冲区-是图形内存持有的场景数据的一部分，包括宽度、表面的高度，每一个像素和他们的颜色深度等。

存储到顶点数组后，我们将它们传递到使用这些WebGL图形队列的缓存区对象中。

e)网格

WebGL的API提供了两种方法绘制2d和3D对象，即drawArrays()和drawElements().

这两种方法接受一个使用它用户可以选择想要绘制的对象，称为模式参数。通过该参数，对象被限制为点、线和三角形。

想要使用这两种方法绘制3D对象，我们必须构造采用点、线或者三角形的一个或者多个这样的原始多边形，然后基于这些多必须，就形成了一个网格。

使用基本多边形绘制的3D对象被称为一个网格。

4) 顶点着色器

GPU上运行的小程序。顶点着色器即是所谓的在每个顶点的程序代码。它被用来转换几何形状从一个地方到另一个地方，负责处理每个顶点的数据，如顶点坐标、法线、色彩和纹理坐标。

在顶点着色器的ESGL代码中，必须定义属性来处理数据。这些属性指向一个顶点缓冲区对象。

 

下面的任务可以使用顶点着色器来进行：

• 顶点变换
• 正常转化和正常化
• 纹理坐标的生成
• 纹理坐标的转换
• 灯光、光线
• 颜色材料应用

 

 

5) 片段着色器

GPU上运行的小程序。网状由多个三角形形成，并且每个三角形的表面被称为一个片段。片段着色器是对每一个片段的所有像素上运行的代码。

以下任务由片段着色器进行：

• 插值操作
• 纹理访问
• 纹理应用
• 灰蒙/雾
• 颜色总和

 

6) SL变量

属性（attribute）- 只能在顶点着色器（vertex shader）中使用的变量,表示一些顶点的数据,如顶点坐标、法线、纹理坐标、顶点颜色等。

均衡（Uniform) - 是外部应用程序传递给顶点着色器（vertex shader）和片段着色器（fragment shader）的变量。一般用来表示：变换矩阵，材质，光照参数和颜色等信息

变动充填（Varying) - 是顶点着色器（vertex shader）和片段着色器（fragment shader）之间做数据传递用的，它的声明必须是一致的。

 

7） WebGL图形管道线