- 着色器对象与程序对象
着色器对象
:着色器对象管理一个顶点着色器或一个片元着色器。每一个着色器都有一个着色器对象。
程序对象
:程序对象是管理着色器对象的容器。WebGL
中,一个程序对象必须包含一个顶点着色器和一个片元着色器。
-
initShaders()
函数解密
作用:
编译GLSL ES
代码,创建和初始化着色器供WebGL
使用。
步骤:
(1)创建着色器对象(gl.createShader()
)
同理,删除着色器使用gl.deleteShader()
注意:如果着色器还在使用时执行gl.deleteShader()
,并不会立即删除着色器,而是要等到程序对象不再使用该着色器后,才将其删除。
(2)向着色器对象中填充着色器程序的源代码(gl.shaderSource()
)
在JavaScript
中,源代码以字符串形式储存。
(3)编译着色器(gl.compileShader()
)
将着色器编译成二进制的可执行格式。
编译过程中,调用gl.getShaderParameter()
函数来检查着色器的状态。
如果源代码中存在错误,那么就会出现编译错误,gl.getShaderParameter()
就会返回false
,同时将编译错误的具体内容写入着色器的信息日志(information log
),可以通过gl.getShaderInfoLog()
来获取。
(4)创建程序对象(gl.createProgram()
)
同理,使用gl.deleteProgram()
来删除程序对象
(5)为程序对象分配着色器(gl.attachShader()
)
一旦程序对象被创建之后,需要向程序附上两个着色器(顶点着色器和片元着色器),可以是空的着色器。
同理,可以使用gl.detachShader()
函数来解除分配给程序对象的着色器。
(6)连接程序对象(gl.linkProgram()
)
程序对象进行着色器连接操作的目的是:
a. 保证着色器和片元着色器的varying变量同名同类型,且一一对应;
b. 保证顶点着色器对每个varying
变量赋了值;
c. 保证顶点着色器和片元着色器中的同名uniform
变量也是同类型的(无需一一对应,即某些uniform变量可以出现在一个着色器中而不出现在另一个中);
d. 保证着色器中的attribute
变量、uniform
变量和varying
变量的个数没有超过着色器的上限。
着色器连接后,调用gl.getProgramPara-meter()
来检查连接是否成功
调用gl.getProgramInfoLog
从信息日志中获取连接出错的信息
(7)使用程序对象(gl.userProgram()
)
总结:initShaders()
流程:首先调用createProgram()
函数创建一个连接好的程序对象,然后告诉WebGL
系统来使用这个程序对象,最后将程序对象设为gl
对象的program
属性。