39 WebGL着色器和着色器程序对象：initShader()函数的作用

最新推荐文章于 2024-09-08 10:30:27 发布

暮志未晚NAN

最新推荐文章于 2024-09-08 10:30:27 发布

阅读量3.1k

点赞数 1

分类专栏： WebGL 文章标签： WebGL 初始化着色器程序对象

本文链接：https://blog.csdn.net/qq_30100043/article/details/73087493

版权

WebGL 专栏收录该内容

58 篇文章 74 订阅

订阅专栏

这一节，我们研究一下以前一直使用的辅助函数initShader()。

之前教程当中故意把这个函数中留到最后讲解，是为了确保学习initShaders()函数中的复杂细节时，对WebGL已经有了比较深入的了解。掌握这一部分内容不是必须的，直接使用initShaders()函数也能够编写出相当不错的WebGL程序。

initShaders()函数的作用是，编译GLSL ES代码，创建和初始化着色器供WebGL使用。具体分为以下7个步骤：

（1）创建着色器对象（gl.createShader()）

（2）向着色器对象中填充着色器程序的源代码（gl.shaderSource()）

（3）编译着色器（gl.compileShader()）

（4）创建程序对象（gl.createProgram()）

（5）为程序对象分配着色器（gl.attachShader()）

（6）链接程序对象（gl.linkProgram()）

（7）使用程序对象（gl.useProgram()）

在这里出现了两种对象：着色器对象（shader object）和程序对象（program object）。

着色器对象：着色器对象管理一个顶点着色器或一个片元着色器。每一个着色器都有一个着色器对象。

程序对象：程序对象是管理着色器对象的容器。WebGL中，一个程序对象必须包含一个顶点着色器和一个片元着色器。

创建着色器对象（gl.createShader()）

所有的着色器对象都必须通过调用gl.createShader()来创建

gl.createShader()函数根据传入的参数创建一个顶点着色器或者片元着色器。如果不需要这个着色器，可以使用gl.deleteShader()函数来删除着色器。

注意，如果着色器对象还在使用（也就是说已经使用gl.attachShader()函数使之附加在了程序对象上），那么gl.deleteShader()并不会立刻删除着色器，二十要等到程序对象不再使用该着色器后，才将其删除。

指定着色器对象的代码（gl.shaderSource()）

通过gl.shaderSource()函数向着色器指定GLSL ES源代码。

编译着色器（gl.compileShader()）

向着色器对象传入源代码之后，还需要对其进行编译才能够使用。GLSL ES语言和JavaScript不同而更接近C或C++，在使用之前需要编译成二进制的可执行格式，WebGL系统真正使用的是这种可执行格式。使用gl.compileShader()函数进行编译。注意，如果你通过调用gl.shaderSource()，用新的代码替换掉了着色器中旧的代码，WebGL系统中的用旧的代码编译出的可执行部分不会被自动替换，你需要手动地重新进行编译。

当调用gl.compileShader()函数时，如果着色器源代码中存在错误，那么就会出现编译错误。可以调用gl.getShaderParameter()函数来检查着色器的状态。

调用gl.getShaderParameter()并将参数pname指定为gl.COMPILE_STATUS，就可以检查着色器编译是否成功。

如果编译失败，gl.getShaderParameter()会返回false，WebGL系统会把编译错误的具体内容写入着色器的信息日志（information log），我们可以通过gl.getShaderInfoLog()来获取。

虽然日志信息的具体格式依赖于浏览器对WebGL的实现，但大多数WebGL系统给出的错误信息都会包含代码出错行的行号。比如，如果你视图编译如下这样的一个着色器：

    //片元着色器
    var FSHADER_SOURCE = "" +
        "varying vec4 v_Color;\n" +
        "void main(){" +
        "   gl.FragColor = v_Color;\n" +
        "}\n";

代码的第二行出错了，在控制台显示的错误信息是：