【webGL】

1.类型化数组

WebGL设计复杂的计算，需要提前知道数值的精度，而标准的javascript数值无法满足需要。WebGL引入了一个概念，叫类型化数组。

ArrayBuffer的类型，表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据，其就是为将来使用而分配一定数量的字节。

var buffer=new ArrayBuffer(20);

创建该对象后，能够通过该对象获得的信息只有包含的字节数，方法是访问byteLength属性。

var bytes=buffer.byteLength;

1.1 视图

var view=new DataView(buffer,9,10);

创建一个从字节9开始到字节18的新视图。

读写数组缓冲器的数据，要求我们必须记住要将数据保存到哪里，需要占用多少字节，工作量很多，类型化视图应运而生。

1.2 类型化视图

也称为类型化数组，它们除了元素必须是某种特定的数据类型外，与常规的数组无异。

var unit16s=new Uint16Array(buffer,9,10);

还可以不用创建ArrayBuffer对象

常用方式：把常规数组传入类型化视图的构造函数即可。

var int8s=new Int8Array([10,20,30,40]);

2.WebGL上下文

var gl=drawing.getContext("experimental-webgl");

取得WebGL上下文对象后，就可以开始3D绘图了。

2.1常量

2.2方法命名

2.3准备绘图

操作WebGL上下文之前，首先使用clearColor()方法来指定要使用的颜色。

2.4视口与坐标

2.5缓冲区

2.6错误

手工调用gl.getError()方法，这个方法返回一个表示错误类型的常量。

2.7着色器（使用GLSL语言）

顶点着色器和片段着色器

顶点着色器将3D顶点转换为需要渲染的2D顶点。

片段着色器用于准确计算要绘制的每个像素。

2.8编写着色器

2.9绘图

webgl只能绘制三种形状，点、线、三角。

gl.drawElements()和gl.drawArrays()