错误
Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误
如果希望获取WebGL的错误信息,那么就需要手动调用 gl.getError() 方法
该方法会返回以下错误常量之一:
- gl.NO_ERROR: 上一次操作没有发生错误
- gl.INVALID_ENUM: 应该给WebGL方法传入常量但是传错了参数
- gl.INVALID_VALUE: 在需要无符号数的地方传入了负值
- gl.INVALID_OPERATION: 在当前状态下不能完成操作
- gl.OUT_OF_MEMORY: 没有足够的内存完成操作
- gl.CONTEXT_LOST_WEBGL: 由于外部因素干扰丢失了当前的 WebGL 上下文
需要注意的 getError() 方法一次只会返回一个错误值,如果产生了多个错误最好循环调用该方法,直到该方法的返回值是一个 gl.NO_ERROR 为止
着色器
着色器(shader) 是 OpenGL 中的另一个概念, WebGL中有两种着色器
- 顶点着色器: 用于将3D顶点转换为需要渲染的2D顶点
- 片段(像素)着色器: 用于准确计算每个需要绘制像素的颜色
WebGL着色器的难点在于着色器并不是使用JAVAScript编写的,这些着色器是使用 GLSL (一种类C语言编写的)
在开始代码前简单介绍一下着色器编写的相关事宜
- 每个着色器都有一个main方法,该方法在绘图期间会重复执行
- 为着色器传递数据的方法有两种: Attribute 和 Uniform
- Attribute用于向着色器传递顶点信息
- Uniform 用于向着色器传入常量值
由于浏览器不能解析 GLSL 程序,所以我们需要准备好字符串形式的 GLSL 程序,以便编译链接到着色器程序
如:
<script type="x-webgl/x-vertex-shader" id="vertexShader">
attribute vec2 aVertexPosition; void main(){
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script> <script type="x-webgl/x-vertex-shader" id="fragmentShader">
uniform vec4 uColor; void main(){
gl_FragColor = uColor;
}
</script>
然后我们需要通过上面的片段来创建着色器对象:
let vertexGlsl = document.getElementById("vertexShader").text,
fragmentGlsl = document.getElementById("fragmentShader").text;
// 创建着色器
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexGlsl);
// 编译着色器
gl.compileShader(vertexShader);
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentGlsl);
gl.compileShader(fragmentShader);
let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
着色器传值
上方创建完成的着色器必须接收一个值才能工作
传入变量需要两个步骤,首先需要获取变量的位置,然后给该变量赋值
let uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(uColor, [0, 0, 0, 1]); let aVertexPosition = gl.getAttribLocation(program,"aVertexPosition");
gl.enableVertexAttribArray(aVertexPosition);// 启用Attribute变量
gl.vertexAttribPointer(aVertexPosition, itemSize, gl.FLOAT, false ,0,0);// 创建指针,指向gl.bindBuffer指定的缓冲区并保存在 aVertexPosition*顶点着色器使用
着色器调试
与WebGL的其他操作一样 着色器操作也可能会失败,并且也是静默失败
如果希望获取着色器的错误信息,那么则需要调用 gl.getShaderParameter(),来获取着色器的编译状态
if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
alert(get.getShaderInfoLog(vertexShader));
}
如果要检测链接效果可以使用如下代码
if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
alert(get.getProgramInfoLog(program));
}