WebGL学习实录（三）

前面两个章节主要是讲述了基础概念。接下来我们来学习基本的WebGL程序结构。

WebGL应用程序代码是Javascript和OpenGL着色语言的组合，其中Javascript是需要与CPU进行沟通，OpenGL着色语言跟GPU通信。

使用HTML5 Canvas 绘制WebGL大致步骤如下：

1） 创建HTML5 canvas控件

<canvas id="canvas" width="400px" height="300px"></canvas>

2）获取画布canvas 元素和上下文；

var canvas = document.getElementById('canvas');

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

3）编译着色器

编写GLSL着色器代码，两种方式，

a）将代码嵌入script标签中

<script id="shader-vs" type="x-shader/x-vertex">

attribute vec2 coodinates;

void main(void) {

gl_Position = vec4(coodinates, 0.0, 1.0);

}

</script>

var vertCode = document.getElementById('shader-vs').text;

 

b) 字符串。

var vertCode = 'attribute vec2 coodinates;' + 'void main(void) {' + 'gl_Position = vec4(coodinates, 0.0, 1.0);' + '}';

 

4） 建立顶点着色器颜色数组

var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];

5） 创建WebGL缓存区，然后将颜色数组存储起来。

var vertex_buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

 

6） 创建顶点着色器

var vertShader = gl.createShader(gl.VERTEX_SHADER);

7） 把写好GLSL着色器代码传入到顶点着色器上

gl.shaderSource(vertShader, vertCode);

 

8）编译程序

gl.compileShader(vertShader);

同样的，片段着色器也需要创建、GLSL代码附加到着色器，最后编译。

 

9）接下来就是合并程序了。

首先，创建一个程序对象

var shaderProgram = gl.createProgram();