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中有两种着色器

1. 顶点着色器: 用于将3D顶点转换为须要渲染的2D顶点
2. 片断(像素)着色器: 用于准确计算每一个须要绘制像素的颜色

WebGL着色器的难点在于着色器并非使用JAVAScript编写的,这些着色器是使用 GLSL (一种类C语言编写的)

 

在开始代码前简单介绍一下着色器编写的相关事宜

1. 每一个着色器都有一个main方法,该方法在绘图期间会重复执行
2. 为着色器传递数据的方法有两种: Attribute 和 Uniform
3. Attribute用于向着色器传递顶点信息
4. 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));
}