1.基本步骤:
(1)创建着色器对象(gl.createShader())
(2)向着色器对象中填充着色器程序的源代码(gl.shaderSource())
(3)编译着色器(gl.compileShader())
(4)创建程序对象(gl.createProgram())
(5)为程序对象分配着色器(gl.attachShader())
(6)连接程序对象(gl.linkProgram())
(7)使用程序对象(gl.userProgram())
2.两个重要对象:
着色器对象:着色器对象管理一个顶点着色器或一个片元着色器,每一个着色器都有一个着色器对象
程序对象:程序对象是管理着色器对象的容器。WebGL中,一个程序对象必须包含一个顶点着色器和一个片元着色器
3.过程详解:
(1)创建着色器对象:
gl.createShader(type)
type:指定创建着色器的类型,gl.VERTEX_SHADER表示顶点着色器,gl.FRAGMENT_SHADER表示片元着色器。
可以使用gl.deleteShader(shader)来删除着色器(如果已经使用gl.attachShader()函数使之附加在了程序对象上,那么并不会立即删除着色器而是等到程序对象不再使用该着色器后再删除)
(2)指定着色器对象代码:将source字符串形式的代码传入shader指定的着色器,如果之前已经向shader传入过代码,旧的代码会被替换掉
gl.shaderSource(shader,source)
shader:需要传入代码的着色器对象
source:指定字符串形式的代码
(3)编译着色器,GLSL ES语言类似于C,需要先编译成二进制可执行格式然后供程序使用,调用gl.shaderSource()方法替换了旧的着色器代码必须编译后才能起作用,因为之前的着色器代码编译后的可执行部分不会自动替换
gl.compilerShader(shader)
shader:待编译的着色器
(4)创建程序对象:一旦程序对象被创建之后,需要向程序附上两个着色器
gl.createProgram()
(5)为程序对象分配着色器对象:着色器在赋给程序对象之前不一定要指定代码,可以将空的着色器程序赋给程序对象
gl.attachShader(program,shader)
program:指定程序对象
shader:指定着色器对象
使用detachShader(program,shader)方法解除分配给程序对象的着色器
(6)连接程序对象:为程序对象分配了两个着色器对象后,还需要将顶点着色器和片元着色器连接起来
gl.linkProgram(program)
目的是:(1)保证顶点着色器和片元着色器的varying变量同名同类型,且一一对应。(2)顶点着色器对每个varying变量赋了值(3)顶点着色器和片元着色器中同名uniform变量类型相同
(4)着色器中attribute、uniform和varying变量的个数没有超过着色器上限
(7)使用程序对象
gl.useProgram(program)
该特性使得我们可以在绘制前准备多个程序对象,然后在绘制的时候根据需要切换程序对象