WEBGL编程指南之着色器

1.创建步骤

1. 创建着色器对象（gl.createShader()）
2. 向着色器对象中填充着色器程序源码（gl.shaderSource()）
3. 编译着色器（gl.compileShader()）
4. 创建程序对象（gl.createProgrom()）
5. 为程序对象分配着色器（gl.attachShader()）
6. 链接程序对象（gl.linkProgram()）
7. 使用程序对象（gl.useProgram()）
   着色器对象：管理一个顶点着色器或一个片元着色器。每个着色器都有一个着色器对象。
   程序对象：管理着色器对象的容器。webGl中，一个程序对象必须包含一个顶点着色器和一个片源着色器。

2.例子

3.函数说明

1.gl.createShader(type),type值为gl.VERTEX_SHADER或gl.FRAGMENT_SHADER,返回创建的着色器shader
2.gl.shaderSource(shader,source),shader为第一步骤中的返回的着色器。source为着色器代码字符串。
3.gl.compileShader(shader),为第一步中返回的着色器对象。
4.gl.createProgram(),无参数，返回program对象
5.gl.attachShader(program,shader),program为第4步骤中返回的程序对象，shader为顶点着色器对象或是片元着色器对象，该函数需要调用两次。
6.gl.linkProgram(program),program为创建的程序对象。
7.gl.useProgram(program)
（google对webgl有写好的cuon-utils.js文件可以方便的创建程序对象）部分代码如下

function initShaders(gl,vsshader,fshader)
{
   var program=createProgram(gl,vshader,fsahder);
   gl.useProgram(program);
   gl.program=program;
  return true;
}
function createProgram(gl,vshader,fsahder)
{
   var vertexShader=loaderShader(gl,gl.VERTEX_SHADER,vshader);
   var fragmentShader=loaderShader(gl,gl.FRAGMENT_SHADER,fshader);
   
   var program=gl.createProgram();
   gl.attachShader(program,vertexShader);
   gl.attachSahder(program,fragmentShader);
   gl.linkProgram(program) ;
   return program;
}