之前对着色器的初始化都是使用的initShaders()
这个方法,部分代码在文章最后,其内部分执行细节没有去清晰的了解过,下面做进一步的了解和分析,才能更深入的了解webgl
的原理
initShaders()
方法的主要作用是编译GLSL ES
代码,创建和初始化着色器,以便供WebgGL
使用,具体初始化分为以下七步;
- 1、创建着色器对象
gl.createShader()
- 2、向着色器对象中填充着色器程序的源代码
gl.shaderSource()
- 3、编译着色器
gl.compileShader()
- 4、创建程序对象
gl.createProgram()
- 5、为程序对象分配着色器
gl.attachShader()
- 6、连接程序对象
gl.linkProgram()
- 7、使用程序对象
gl.useProgram()
1、两个对象
着色器对象:着色器对象管理一个顶点着色器或者一个片元着色器
程序对象:程序对象是管理着着色器对象的容器
2、具体方法介绍
1、创建着色器对象 gl.createShader()
通过gl.createShader()
来创建着色器对象,gl.VERTEX_SHADER
或者gl.FRAGMENT
gl.createShader(type)
是WebGL
提供的一个方法,MDN
文档这样解释
WebGLRenderingContext.createShader()
用于创建一个WebGLShader
着色器对象,该对象可以使用WebGLRenderingContext.shaderSource()
和WebGLRenderingContext.compileShader()
方法配置着色器代码.
该方法接收一个参数type
type
参数为gl.VERTEX_SHADER
或gl.FRAGMENT_SHADER
两者中的一个
如果不再需要这个着色器可以使用gl.deleteShader()
将其删除,但是如果着色器对象还在使用,那么gl.deleteShader()
并不会立刻将其删除,而是要等到程序对象不再使用该着色器后,才将其删除
2、指定着色器对象的代码gl.shaderSource()
gl.shaderSource(shader, source)
方法,向着色器指定GLSL ES
源代码,在js
中源代码以字符串的形式存在;
3、编译着色器gl.compileshader()
使用WebGLRenderingContext.compileShader()
用于编译一个GLSL
着色器,使其成为二进制数据,然后就可以被WebGLProgram
对象所使用
语法
void gl.compileShader(shader)
var shader = gl.createShader(gl.VERTEX_SHADER);// 创建着色器对象
gl.shaderSource(shader, shaderSource);// 指定着色器对象的代码
gl.compileShader(shader);// 编译着色器
当使用gl.compileShader()
方法时,如果着色器源代码中存在错误,那么就会出现编译错误,可以使用gl.getShaderParameter()
来检查着色器的状态
有以下参数
gl.DELETE_STATUS
:标示着色器是否被删除,删除(GL_TRUE
)未删除(GL_FALSE
).gl.COMPILE_STATUS
: 标示着色器是否编译成功,是(GL_TRUE
)不是(GL_FALSE
)gl.SHADER_TYPE
: 标示着色器类型,是顶点着色器(gl.VERTEX_SHADER
)还是片段着色器(gl.FRAGMENT_SHADER
)
返回true
或者false
如果编译失败,返回false
,此时webgl
系统会把编译错误的具体内容写入着色器的 信息日志,可以通过 gl.getShaderInfoLog()
来获取报错信息
4、创建程序对象gl.createProgram()
程序对象包含顶点着色器和片元着色器,可以调用gl.createProfram()
来创建程序对象,
该方法没有参数,返回一个WebGLProgram
对象<