WebGL第二课-着色器使用

上一课将WebGL背景以及着色器一些知识简单介绍过了，本课就来讲解一下着色器具体需要怎么来编译使用才能绘制出图像。

创建WebGl与着色器编码

第一步内容为第一课讲解部分：

var canvas = document.getElementById("glcanvas");
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
var VSHADER_SOURCE = 
  'void main() {\n' +
    '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
    '  gl_PointSize = 10.0;\n' + 
  '}\n';
var FSHADER_SOURCE =
    'void main() {\n' +
    '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';

创建承载着色器的程序

着色器代码需要载入到一个程序中，webgl使用此程序才能调用着色器。

1	var program = gl.createProgram();

创建着色器

使用webgl程序创建一个能承载OPENGL ES程序的容器

//创建顶点着色器
var vShader = gl.createShader(gl.VERTEX_SHADER);
//创建片元着色器
var fShader = gl.createShader(gl.FRAGMENT_SHADER);

shader容器与着色器绑定

1 2	gl.shaderSource(vShader, VSHADER_SOURCE); gl.shaderSource(fShader, FSHADER_SOURCE);

将GLSE语言编译成浏览器可用代码

1 2	gl.compileShader(vShader); gl.compileShader(fShader);

将着色器添加到程序上

1 2	gl.attachShader(program, vShader); gl.attachShader(program, fShader);

链接程序

在链接操作执行以后，可以任意修改shader的源代码，对shader重新编译不会影响整个程序，除非重新链接程序

1	gl.linkProgram(program);

使用着色器

加载并使用链接好的程序

1	gl.useProgram(program);

使用着色器画一个点

1
2
3

gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0 ,1);

gl.clearColor()设置清空画布的颜色，参数为指定的颜色，颜色依旧采用GLES语法，颜色值范围0.0-1.1

gl.clear(buffer)将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用gl.clearColor()指定值（作为预定值）

buffer可设定值

gl.COLOR_BUFFER_BIT：指定颜色缓存
gl.DEPTH_BUFFER_BIT：指定深度缓冲区
gl.STENCIL_BUFFER_BIT：指定模板缓冲区