webgl缓冲区对象使用详解
文章目录
- 前言
- 缓冲区对象向着色器传递数据
-
- 1 创建缓冲区对象:gl.createBuffer()
- 2 绑定缓冲区对象:gl.bindBuffer()
- 3 向缓冲区对象写入数据:gl.bufferData()
-
- 类型化数组
- 4 将缓冲区对象分配给attribute变量:gl.vertexAttribPointer()
- 5 开启attribute变量:gl.enableVertexAttribArray()
- 完整示例
- 缓冲区对象传递多组信息
-
- 传递坐标与大小绘制点
- 传递坐标与颜色绘制三角形
- 总结
前言
在webgl中，所有的图形都是由大量点组成的，为了绘制点，每次都需要调用gl.drawArrays()方法，当需要绘制大量三角形、多边形或者几何体时，轮番绘制各个点是非常麻烦的。为此，webgl提供了缓冲区对象功能，它通过在webgl中开辟一块独立的内存区，将需要绘制的顶点数据全部填充至缓冲区内，供顶点着色器使用。
缓冲区对象向着色器传递数据
1 创建缓冲区对象:gl.createBuffer()
在使用缓冲区对象之前，必须先行创建。
gl.createBuffer():创建缓冲区对象，并返回该对象
- 参数：无
通过gl.createBuffer()创建的缓存区对象可以通过gl.deleteBuffer()销毁
gl.deleteBuffer(buffer):销毁名为buffer的缓冲区对象
- buffer：待销毁的缓冲区对象
2 绑定缓冲区对象:gl.bindBuffer()
创建缓冲区后需要将创立的缓冲区对象绑定至webgl中的目标上，由于不能直接向缓冲区写入数据，只能向“target”写入数据，必须先进行绑定，这样webgl才可以正确处理其中的内容。
gl.bindBuffer(target，buffer):允许使用名为buffer的缓冲区对象，并将其绑定至目标target上
- target的枚举如下
– gl.ARRARY_BUFFER：表示缓冲区对象包含了顶点数据
– gl.ELEMENT_ARRARY_BUFFER：表示缓冲区对象包含了顶点索引值- buffer:gl.createBuffer()所创建的指定缓冲区对象
3 向缓冲区对象写入数据:gl.bufferData()
gl.bufferData()方法用来开辟空间并向缓冲区写入数据
gl.bufferData(target，data，usage):开辟存储空间，向绑定至target的缓冲区对象写入数据
- target：gl.ARRARY_BUFFER或 者 gl.ELEMENT_ARRARY_BUFFER，与上一步gl.bindBuffer(target，buffer)中的target一样
- data：写入缓冲区的数据（类型化数组）
- usage：使用存储在缓冲区的数据的方式，枚举如下：
– gl.STRTIC_DRAW：向缓冲区在写入一次，需要绘制多次
– gl.STREAM_FRAW：向缓冲区在写入一次，然后绘制若干次
– gl.DYNAMIC_DRAW：向缓冲区在写入多次次，并绘制多次
类型化数组
webgl通常会同时绘制大量相同的数据类型，如坐标，颜色等，为了优化性能，webgl根据类型的不同引入了特殊的数据，即类型化数组，gl.bufferData(target，data，usage)传递的data就是类型化数组。浏览器事先知道数组中的数据类型后，处理起来会更有效率。
| 数组类型 | 每个元素的字节数 | 描述 |
|---|---|---|
| Int8Array | 1 | 8位整型数 |
| UInt8Array | 1 | 8位无符号整型数 |
| Int16Array | 2 | 16位整型数 |
| UInt16Array | 2 | 16位无符号整型数 |
| Int32Array | 4 | 32位整型数 |
| UInt32Array | 4 | 32位无符号整型数 |
| Float32Array | 4 | 单精度32位浮点数 |
| Float64Array | 8 | 双精度64位浮点数 |
类型化数组通过new关键字创建，不能直接使用[ ]，那样创建出的会是普通数组，也可以通过指定数组长度创建一个空的类型化数组。
let vertices = new Float32Array([
0.0, 0.5, // 顶点着色器补全为（0.0，0.5，0.0，1.0）
-0.5, -0.5,
0.5, -0.5
])
let vertices = new Float32Array(3)
与js的数据相比，类型化数组也具备一些基本的属性方法，但是不支持push()、pop()
| 方法、属性 | 描述 |
|---|---|
| get(index) | 读取索引为index的元素值 |
| set(index, value) | 把索引为index的元素值设置为value |
| set(array,offset) | 从第offset个元素开始将数据array的值填充进去 |
| length | 获取数组长 |
BYTES_PER_ELEMENT |
数组每个元素的字节数 |
4 将缓冲区对象分配给attribute变量:gl.vertexAttribPointer()
使用gl.vertexAttrib[x]f系列函数可以把attribute的值单个传递给着色器变量，而gl.vertexAttribPointer()方法可以将类型化数组中的所有数据一次性传递给attribute变量。gl.vertexAttribPointer(将整个缓冲区对象（地址）分配给attribute变量
gl.vertexAttribPointer(location, size, type, normalized, stride, offset): 将绑定到gl.ARRARY_BUFFER的缓冲区对象分配给由location指定的attribute变量
- location：待分配attribute变量的存储位置
- size：缓冲区中每个顶点分量的个数
- type：指定数据格式
- normalized：是否将非浮点型数据归一化为[0,1]或者[-1,1]
- stride：两个相邻顶点的字节数
- offset：缓冲区对象在的偏移量，即attribute从何处开始存储，默认为0
gl.vertexAttribPointer(location, size, type, normalized, stride, offset)第三个参数type的枚举及意义如下：
| 名称 | 描述 |
|---|---|
| gl.UNSIGNED_BYTE | 无符号字节 Unit8Array |
| gl.SHORT | 短整型 Int16Array |
| gl.UNSIGNED_SHORT | 无符号短整型 Unit16Array |
| gl.INT | 整型 Int32Array |
| gl.UNSIGNED_INT | 无符号整型 Unit32Array |
| gl.FLOAT | 浮点型 |
5 开启attribute变量:gl.enableVertexAttribArray()
最后，使用gl.enableVertexAttribArray()使顶点着色器可以访问缓冲区的数据
gl.enableVertexAttribArray(location):将绑定到glARRARY_BUFFER的缓冲区对象分配给由location指定的attribute变量
- location：attribute变量的存储位置
已经开启的attribute变量同样可以使用gl.disableVertexAttribArray()关闭分配
完整示例
采用上述流程，一口气绘制三个顶点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webgltitle>
<script src="./lib.js">script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
margin: 0;
padding: 0;
}
canvas {
margin: 50px 30px;
width: 500px;
height: 500px;
}
style>
head>
<body>
<canvas id="canvas">canvas>
<script>
/** @type {HTMLCanvasElement} */
//------------------------------------------------------创建画布
// 获取canvas元素对象
let canvas = document.getElementById('canvas');
// 获取webgl绘图上下文
const gl = canvas.getContext('webgl');
if (!gl) {
throw new Error('WebGL not supported');
}
canvas.width = 500;
canvas.height = 500;
gl.viewport(0, 0, canvas.width, canvas.height)
// 设置背景色
gl.clearColor(1.0, 1.0, 0.0, 1.0)
// 清空缓冲区
gl.clear(gl.COLOR_BUFFER_BIT)
const vertex = `
attribute vec4 aPosition;
void main() {
gl_Position = aPosition;
gl_PointSize = 10.0;
}
`
const fragment = `
precision highp float;
// uniform vec4 uColor;
void main(){
gl_FragColor =vec4(1.0,0.0,1.0,1.0);
}
`
// 创建program
const program = initShader(gl, vertex, fragment)
// 获取attribute变量的数据存储位置
const aPosition = gl.getAttribLocation(program, 'aPosition');
// 获取uniform变量的数据存储位置
// const uColor = gl.getUniformLocation(program, 'uColor');
// 创建缓冲区对象
const buffer = gl.createBuffer();
// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 传入的数据
const vertices = new Float32Array([
0.0, 0.5, // 顶点着色器补全为（0.0，0.5，0.0，1.0）
-0.5, -0.5,
0.5, -0.5
])
// 开辟空间并写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 缓冲区对象分配给attribute变量
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
// 开启attribue变量
gl.enableVertexAttribArray(aPosition)
// 开始绘制
gl.drawArrays(gl.POINTS, 0, 3)
script>
body>
html>
使用缓冲区时webgl会从js代码中获取数据后，逐个进行顶点着色器和片元着色器：
最终效果如图：
缓冲区对象传递多组信息
在缓冲区对象中不仅仅可以传递顶点信息，假设我也想同时传递其它信息呢？一个方法是再开辟一个缓冲区并绑定，给他传入代表点大小的数据，但是通过使用gl.vertexAttribPointer(location, size, type, normalized, stride, offset)的最后两个参数可以在一个缓冲区中实现上述功能。
传递坐标与大小绘制点
- 重新定义写入的数据
const vertices = new Float32Array([
0.0, 0.5, 20.0, // x坐标 y坐标 点大小
-0.5, -0.5, 15.0,
0.5, -0.5, 10.0
])
- 更新顶点着色器，加入新的attribute变量
const vertex = `
attribute vec4 aPosition;
attribute float aPointSize;
void main() {
gl_Position = aPosition;
gl_PointSize = aPointSize;
}
- 使用gl.vertexAttribPointer的最后两个参数，将顶点坐标和大小同时写入缓冲区
// 开辟空间并写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 每个元素的字节数
const BYTES = vertices.BYTES_PER_ELEMENT;
// 坐标信息
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 3 * BYTES, 0)
gl.enableVertexAttribArray(aPosition)
// 顶点大小信息
gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, 3 * BYTES, 2 * BYTES)
gl.enableVertexAttribArray(aPointSize)
// 开始绘制
gl.drawArrays(gl.POINTS, 0, 3)
效果如下
传递坐标与颜色绘制三角形
绘制三角形时，需要将缓冲区中的信息传递给顶点着色器，通过varying关键字将信息传递给片元着色器，由于每个顶点存储有坐标（2）和颜色信息（4）所以gl.vertexAttribPointer函数的倒数第二个参数应该为6*BYTES。核心代码如下：
const vertex = `
attribute vec4 aPosition;
// attribute float aPointSize;
attribute vec4 aColor;
varying vec4 v_Color;
void main() {
gl_Position = aPosition;
// gl_PointSize = aPointSize;
v_Color = aColor;
}
`
const fragment = `
precision highp float;
varying vec4 v_Color;
void main(){
gl_FragColor = v_Color;
}
`
// 创建program
const program = initShader(gl, vertex, fragment)
// 获取attribute变量的数据存储位置
const aPosition = gl.getAttribLocation(program, 'aPosition');
// const aPointSize = gl.getAttribLocation(program, 'aPointSize');
const aColor = gl.getAttribLocation(program, 'aColor');
// 创建缓冲区对象
const buffer = gl.createBuffer();
// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 传入的数据
const vertices = new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0, 1.0, // x坐标 y坐标 r g b a
-0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
0.5, -0.5, 0.0, 0.0, 1.0, 1.0
])
// 开辟空间并写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 每个元素的字节数
const BYTES = vertices.BYTES_PER_ELEMENT;
// 坐标信息
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 6 * BYTES, 0)
gl.enableVertexAttribArray(aPosition)
// 顶点大小信息
// gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, 7 * BYTES, 2 * BYTES)
// gl.enableVertexAttribArray(aPointSize)
// yanse信息
gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 6 * BYTES, 2 * BYTES)
gl.enableVertexAttribArray(aColor)
// 开始绘制
gl.drawArrays(gl.TRIANGLES, 0, 3)
效果如下：
总结
缓冲区对象向着色器传递数据
- 创建缓冲区对象:gl.createBuffer()
- 绑定缓冲区对象:gl.bindBuffer()
- 向缓冲区对象写入数据:gl.bufferData()
- 将缓冲区对象分配给attribute变量:gl.vertexAttribPointer()
- 开启attribute变量:gl.enableVertexAttribArray()
缓冲区对象传递多组信息
- 重新定义写入的数据
- 传递坐标与大小绘制点
- 传递坐标与颜色绘制三角形