在JavaScript 中,顶点信息保存在定型数组中。要使用这些信息,必须先把它们转换为WebGL 缓冲
区。创建缓冲区要调用gl.createBuffer()方法,并使用gl.bindBuffer()方法将缓冲区绑定到
WebGL 上下文。绑定之后,就可以用数据填充缓冲区了。比如:
let buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0.5, 1]), gl.STATIC_DRAW);
调用gl.bindBuffer()将buffer 设置为上下文的当前缓冲区。然后,所有缓冲区操作都在
buffer 上直接执行。因此,调用gl.bufferData()虽然没有包含对buffer 的直接引用,但仍然是
在它上面执行的。上面最后一行代码使用一个Float32Array(通常把所有顶点信息保存在
Float32Array 中)初始化了buffer。如果想输出缓冲区内容,那么可以调用drawElements()方法
并传入gl.ELEMENT_ARRAY_BUFFER。
gl.bufferData()方法的最后一个参数表示如何使用缓冲区。这个参数可以是以下常量值。
gl.STATIC_DRAW:数据加载一次,可以在多次绘制中使用。
gl.STREAM_DRAW:数据加载一次,只能在几次绘制中使用。
gl.DYNAMIC_DRAW:数据可以重复修改,在多次绘制中使用。
除非是很有经验的OpenGL 程序员,否则我们会对大多数缓冲区使用gl.STATIC_DRAW。
缓冲区会一直驻留在内存中,直到页面卸载。如果不再需要缓冲区,那么最好调用gl.deleteBuffer()
方法释放其占用的内存:
gl.deleteBuffer(buffer);
错误
与JavaScript 多数情况下不同的是,在WebGL 操作中通常不会抛出错误。必须在调用可能失败的方
法后,调用gl.getError()方法。这个方法返回一个常量,表示发生的错误类型。下面列出了这些常量。
gl.NO_ERROR:上一次操作没有发生错误(0 值)。
gl.INVALID_ENUM:上一次操作没有传入WebGL 预定义的常量。
gl.INVALID_VALUE:上一次操作需要无符号数值,但是传入了负数。
gl.INVALID_OPERATION:上一次操作在当前状态下无法完成。
gl.OUT_OF_MEMORY:上一次操作因内存不足而无法完成。
gl.CONTEXT_LOST_WEBGL:上一次操作因外部事件(如设备掉电)而丢失了WebGL 上下文。
每次调用gl.getError()方法会返回一个错误值。第一次调用之后,再调用gl.getError()可
能会返回另一个错误值。如果有多个错误,则可以重复这个过程,直到gl.getError()返回
gl.NO_ERROR。如果执行了多次操作,那么可以通过循环调用getError():
let errorCode = gl.getError();
while (errorCode) {
console.log("Error occurred: " + errorCode);
errorCode = gl.getError();
}
如果WebGL 代码没有产出想要的输出结果,那么可以调用几次getError(),这样有可能帮你找到问题所在。
着色器
着色器是OpenGL 中的另一个概念。WebGL 中有两种着色器:顶点着色器和片段(或像素)着色器。
顶点着色器用于把3D 顶点转换为可以渲染的2D 点。片段着色器用于计算绘制一个像素的正确颜色。
WebGL 着色器的独特之处在于,它们不是JavaScript 实现的,而是使用一种与C 或JavaScript 完全不同
的语言GLSL(OpenGL Shading Language)写的。
javascript七基础学习系列一千七百七十:缓冲区
最新推荐文章于 2024-09-07 13:38:28 发布