《WebGL 编程指南》笔记 —— 第九章 层次模型

  1. 着色器对象与程序对象
    着色器对象:着色器对象管理一个顶点着色器或一个片元着色器。每一个着色器都有一个着色器对象。
    程序对象:程序对象是管理着色器对象的容器。WebGL中,一个程序对象必须包含一个顶点着色器和一个片元着色器。
《WebGL 编程指南》笔记 —— 第九章 层次模型_第1张图片
  1. initShaders() 函数解密

作用

编译GLSL ES代码,创建和初始化着色器供WebGL使用。

步骤

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

《WebGL 编程指南》笔记 —— 第九章 层次模型_第2张图片

同理,删除着色器使用gl.deleteShader()

《WebGL 编程指南》笔记 —— 第九章 层次模型_第3张图片

注意:如果着色器还在使用时执行gl.deleteShader(),并不会立即删除着色器,而是要等到程序对象不再使用该着色器后,才将其删除。

(2)向着色器对象中填充着色器程序的源代码(gl.shaderSource()
JavaScript中,源代码以字符串形式储存。

《WebGL 编程指南》笔记 —— 第九章 层次模型_第4张图片

(3)编译着色器(gl.compileShader()
将着色器编译成二进制的可执行格式。

《WebGL 编程指南》笔记 —— 第九章 层次模型_第5张图片

编译过程中,调用gl.getShaderParameter()函数来检查着色器的状态。

《WebGL 编程指南》笔记 —— 第九章 层次模型_第6张图片

如果源代码中存在错误,那么就会出现编译错误,gl.getShaderParameter()就会返回false,同时将编译错误的具体内容写入着色器的信息日志(information log),可以通过gl.getShaderInfoLog()来获取。

《WebGL 编程指南》笔记 —— 第九章 层次模型_第7张图片

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

《WebGL 编程指南》笔记 —— 第九章 层次模型_第8张图片

同理,使用gl.deleteProgram()来删除程序对象

《WebGL 编程指南》笔记 —— 第九章 层次模型_第9张图片

(5)为程序对象分配着色器(gl.attachShader()
一旦程序对象被创建之后,需要向程序附上两个着色器(顶点着色器和片元着色器),可以是空的着色器。

《WebGL 编程指南》笔记 —— 第九章 层次模型_第10张图片

同理,可以使用gl.detachShader()函数来解除分配给程序对象的着色器。

《WebGL 编程指南》笔记 —— 第九章 层次模型_第11张图片

(6)连接程序对象(gl.linkProgram()

《WebGL 编程指南》笔记 —— 第九章 层次模型_第12张图片

程序对象进行着色器连接操作的目的是:
a. 保证着色器和片元着色器的varying变量同名同类型,且一一对应;
b. 保证顶点着色器对每个varying变量赋了值;
c. 保证顶点着色器和片元着色器中的同名uniform变量也是同类型的(无需一一对应,即某些uniform变量可以出现在一个着色器中而不出现在另一个中);
d. 保证着色器中的attribute变量、uniform变量和varying变量的个数没有超过着色器的上限。

着色器连接后,调用gl.getProgramPara-meter()来检查连接是否成功

《WebGL 编程指南》笔记 —— 第九章 层次模型_第13张图片

调用gl.getProgramInfoLog从信息日志中获取连接出错的信息

《WebGL 编程指南》笔记 —— 第九章 层次模型_第14张图片

(7)使用程序对象(gl.userProgram()

《WebGL 编程指南》笔记 —— 第九章 层次模型_第15张图片

总结initShaders()流程:首先调用createProgram()函数创建一个连接好的程序对象,然后告诉WebGL系统来使用这个程序对象,最后将程序对象设为gl对象的program属性。

你可能感兴趣的:(《WebGL 编程指南》笔记 —— 第九章 层次模型)