Javascript高级编程学习笔记（98）—— WebGL(4) WebGL上下文(2)

错误

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));
}