[WebGL入门]十一,着色器的编译和连接

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正。


反复重复的东西

这已经是第11篇了,因为只说了一些基本的东西,到现在为止连个多边形也没绘制出来。哎呀呀呀......
不管怎么说吧,基础是很重要的。那就在这些基础上,来绘制一个多边形吧。需要准备的知识都已经介绍过了,剩下的就是按照步骤开始绘制多边形。首先,来确认一下绘制的步骤。
?从HTML中获取canvas对象
?从canvas中获取WebGL的context
?编译着色器
?准备模型数据
?顶点缓存(VBO)的生成和通知
?坐标变换矩阵的生成和通知
?发出绘图命令
?更新canvas并渲染
上面所列举的步骤中,到现在为止完全没有介绍的是最后两个,关于绘图命令的部分和canvas更新部分。稍后,我会说一说它们基本的概念。虽然这些步骤看起来挺复杂的,但是这就是使用WebGL进行渲染的基本步骤。

这次的文章,就从上到下来依次看一下前三个步骤,先说到编译着色器。

*其中有几个步骤顺序可以有变化,现在先按照这个顺序来看一下。


HTML和canvas的处理

关于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变量。
变量position的类型是vec3,是一个3维向量。里面是顶点的位置,向量的三个元素分别是X,Y,Z坐标。

另一个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来获取指定的标签。
生成着色器的时候,使用WebGL中的函数createShader。这个函数在生成着色器的时候,根据顶点着色器和片段着色器的不同来传入不同的参数。参数指定为gl.VERTEX_SHADER的时候会生成顶点着色器,参数指定为gl.FRAGMENT_SHADER的时候会生成片段着色器。

首先,将代码分配给生成的着色器的时候,使用的是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函数的第一个参数是程序对象,第二个参数是着色器。
着色器分配结束后,根据程序对象,要连接两个着色器,这时候使用linkProgram函数,参数就是程序对象。

和生成着色器一样,要判断着色器的连接是否成功,这时候使用getProgramParameter函数,并传入常量LINK_STATUS。如果没有问题的话,为了将程序对象设置为有效,使用useProgram函数。注意,如果不执行这个函数的话,在WebGL中是无法识别这个程序对象的。如果连接失败,则弹出错误信息,使用getProgramInfoLog函数来得到log。


总结

来简单总结一下本次的内容。

HTML代码中引入必要的javascript文件,以及描述着色器的代码。

准备了着色器的编译函数和连接着色器的程序对象相关的函数。每个函数中都有是否进行了正确处理的判断


下次,准备好顶点数据,也就是说准备好模型数据,然后变换为VBO。按照前面说的步骤,一步步全都理解的话,就应该没问题了,加油吧。


转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend

[WebGL入门]十一,着色器的编译和连接,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。