webgl vertexAttribPointer
时间: 2024-01-08 14:19:42 浏览: 35
`gl.vertexAttribPointer()`是WebGL API中的一个方法,它用于指定渲染时顶点着色器中的属性变量与缓冲区对象之间的关联关系。该方法的参数包括:
- index:指定要修改的顶点着色器中的属性变量的索引。
- size:指定每个顶点属性的组成数量,必须是1、2、3或4。
- type:指定数据类型,可选值包括`gl.BYTE`、`gl.SHORT`、`gl.UNSIGNED_BYTE`、`gl.UNSIGNED_SHORT`、`gl.FLOAT`等。
- normalized:指定是否将非浮点型的数据归一化到[0,1]或[-1,1]区间内。
- stride:指定相邻两个顶点之间的字节数,如果为0,则表示数据紧密排列。
- offset:指定缓冲区对象中的偏移量,即从缓冲区的哪个位置开始读取数据。
下面是一个使用`gl.vertexAttribPointer()`方法的例子:
```javascript
// 顶点着色器
const vertexShaderSource = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
gl_PointSize = 10.0;
}
`;
// 片元着色器
const fragmentShaderSource = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
`;
// 获取canvas元素和WebGL上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
// 初始化着色器程序
const program = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);
gl.useProgram(program);
// 获取顶点着色器中的属性变量索引
const a_Position = gl.getAttribLocation(program, 'a_Position');
// 创建缓冲区对象
const buffer = gl.createBuffer();
// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 向缓冲区对象中写入数据
const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 将缓冲区对象分配给属性变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 启用属性变量
gl.enableVertexAttribArray(a_Position);
// 清空画布并绘制点
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 3);
```