标签：webgl
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。
这已经是第11篇了，因为只说了一些基本的东西，到现在为止连个多边形也没绘制出来。哎呀呀呀......
不管怎么说吧，基础是很重要的。那就在这些基础上，来绘制一个多边形吧。需要准备的知识都已经介绍过了，剩下的就是按照步骤开始绘制多边形。首先，来确认一下绘制的步骤。
?从HTML中获取canvas对象
?从canvas中获取WebGL的context
?编译着色器
?准备模型数据
?顶点缓存（VBO）的生成和通知
?坐标变换矩阵的生成和通知
?发出绘图命令
?更新canvas并渲染
上面所列举的步骤中，到现在为止完全没有介绍的是最后两个，关于绘图命令的部分和canvas更新部分。稍后，我会说一说它们基本的概念。虽然这些步骤看起来挺复杂的，但是这就是使用WebGL进行渲染的基本步骤。
这次的文章，就从上到下来依次看一下前三个步骤，先说到编译着色器。
＊其中有几个步骤顺序可以有变化，现在先按照这个顺序来看一下。
关于HTML和canvas的处理，在之前的文章中（七，context的初始化）也已经讲过了。基本上也不会有什么变化，在这里再说一下。
>HTML代码
<html>
<head>
<title>WebGL TEST</title>
<script src="script.js" type="text/javascript"></script>
<script src="minMatrix.js" type="text/javascript"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 position;
uniform mat4 mvpMatrix;
void main(void){
gl_Position = mvpMatrix * vec4(position, 1.0);
}
</script>
<script id="fs" type="x-shader/x-fragment">
void main(void){
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>HTML代码就是上面这样，head标签中引用了两个javascript文件，一个是WebGL的处理文件script.js，另一个是本网站自己写的矩阵计算的库minMatrix.js。接着，该出现顶点着色器和片段着色器的代码了。首先，先从type是x-shader/x-vertex的顶点着色器开始。下面是顶点着色器部分的代码。
>顶点着色器的代码
attribute vec3 position;
uniform mat4 mvpMatrix;
void main(void){
gl_Position = mvpMatrix * vec4(position, 1.0);
}这里用到了一个attribute变量和一个uniform变量。另一个uniform声明的变量mvpMatrix，类型是mat4，所以是一个4x4的方阵。是模型，视图，投影的各个变换矩阵结合后的坐标变换矩阵。
这次的顶点着色器，只是利用坐标变换矩阵来变换顶点的坐标位置，使用乘法运算。这时候，为了让position和矩阵相乘，使用vec4函数，先将其变成一个4维的向量，然后相乘，最后将计算结果代入到gl_Position，顶点着色器的处理结束。
接着说片段着色器。
这次，绘制的模型是一个简单的三角形，先不进行着色，只是使用白色来填充。所以，片段着色器中的处理，就只是将白色信息传给gl_FragColor中。下面是片段着色器的代码。
>片段着色器的代码
void main(void){
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}关于颜色，基本上使用vec3或者vec4的情况比较多。因为一般就是使用RGB或者RGBA，需要3～4个元素。这一次使用的vec4是所有的参数都是1.0的向量，颜色是白色［红，绿，蓝，不透明度的各元素都是最大＝白色］。接着来看顶点着色器和片段着色器的编译。
编译也不需要什么特别的编译器，只需要调用WebGL内部的函数就可以进行编译了。准备一个函数，从着色器的编译，到实际着色器的生成这一连串的流程，都在这一个函数中来完成。下面是这个函数的代码。
＊下面的函数中的gl，是提前从WebGL的context中获取的。
>生成和编译着色器的函数
function create_shader(id){
// 用来保存着色器的变量
var shader;
// 根据id从HTML中获取指定的script标签
var scriptElement = document.getElementById(id);
// 如果指定的script标签不存在，则返回
if(!scriptElement){return;}
// 判断script标签的type属性
switch(scriptElement.type){
// 顶点着色器的时候
case ‘x-shader/x-vertex‘:
shader = gl.createShader(gl.VERTEX_SHADER);
break;
// 片段着色器的时候
case ‘x-shader/x-fragment‘:
shader = gl.createShader(gl.FRAGMENT_SHADER);
break;
default :
return;
}
// 将标签中的代码分配给生成的着色器
gl.shaderSource(shader, scriptElement.text);
// 编译着色器
gl.compileShader(shader);
// 判断一下着色器是否编译成功
if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
// 编译成功，则返回着色器
return shader;
}else{
// 编译失败，弹出错误消息
alert(gl.getShaderInfoLog(shader));
}
}使用这个函数的时候，需要传入script标签的id作为参数，函数中根据这个id来获取指定的标签。首先，将代码分配给生成的着色器的时候，使用的是shaderSource函数，参数有两个，第一个参数是着色器对象，第二个参数是着色器的代码。这时候，只是把着色器的代码分配给了着色器，还没有进行编译。编译的时候，使用的是compileShader函数，将着色器对象作为参数传给这个函数，就可以将着色器进行编译。
着色器是否编译成功，通过着色器中的参数可以判断，获取这个参数的时候，使用getShaderParameter函数，并使用WebGL中存在的常量COMPILE_STATUS作为参数。如果这时候的返回值是false，则表示因为什么原因导致编译失败了，要想查看原因的话，将着色器传入getShaderInfoLog函数中，就可以确认log了。
这个自定义函数，无论是顶点着色器还是片段着色器，都可以进行编译。实际上，顶点着色器和片段着色器的处理不同的地方就是createShader函数，其他地方是完全一样的。
着色器生成之后，接着来生成程序对象。这里突然出现的程序对象，到底是个什么对象呢？
以前的文章中（八，着色器的说明和基础）也稍微接触了一些，使用varying修饰符定义的变量，可以从顶点着色器向片段着色器中传递数据。其实，实现从一个着色器向另一个着色器传递数据的，不是别的，就是程序对象。程序对象是管理顶点着色器和片段着色器，或者WebGL程序和各个着色器之间进行数据的互相通信的重要的对象。
那么，生成程序对象，并把着色器传给程序对象，然后连接着色器，将这些处理函数化。
>程序对象的生成和着色器连接的函数
function create_program(vs, fs){
// 程序对象的生成
var program = gl.createProgram();
// 向程序对象里分配着色器
gl.attachShader(program, vs);
gl.attachShader(program, fs);
// 将着色器连接
gl.linkProgram(program);
// 判断着色器的连接是否成功
if(gl.getProgramParameter(program, gl.LINK_STATUS)){
// 成功的话，将程序对象设置为有效
gl.useProgram(program);
// 返回程序对象
return program;
}else{
// 如果失败，弹出错误信息
alert(gl.getProgramInfoLog(program));
}
}这个函数接收顶点着色器和片段着色器两个参数。然后，首先生成程序对象，分配着色器。生成着色器的时候，使用WebGL中的函数createProgram，将着色器分配给程序对象的时候使用函数attachShader，attachShader函数的第一个参数是程序对象，第二个参数是着色器。和生成着色器一样，要判断着色器的连接是否成功，这时候使用getProgramParameter函数，并传入常量LINK_STATUS。如果没有问题的话，为了将程序对象设置为有效，使用useProgram函数。注意，如果不执行这个函数的话，在WebGL中是无法识别这个程序对象的。如果连接失败，则弹出错误信息，使用getProgramInfoLog函数来得到log。
来简单总结一下本次的内容。
HTML代码中引入必要的javascript文件，以及描述着色器的代码。
准备了着色器的编译函数和连接着色器的程序对象相关的函数。每个函数中都有是否进行了正确处理的判断。
下次，准备好顶点数据，也就是说准备好模型数据，然后变换为VBO。按照前面说的步骤，一步步全都理解的话，就应该没问题了，加油吧。
转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend
[WebGL入门]十一，着色器的编译和连接,布布扣,bubuko.com
标签：webgl
原文地址：http://blog.csdn.net/lufy_legend/article/details/38391581
