WebGL绘制矩形全方位总结！

2024-02-25 01:58:03

在计算机图形学中，矩形是一种基本的几何图形。它由四个边和四个角组成，并且通常用于表示二维空间中的区域。在WebGL中，矩形可以通过使用顶点缓冲区对象(VBO)和索引缓冲区对象(IBO)来绘制。

使用顶点缓冲区对象(VBO)和索引缓冲区对象(IBO)绘制矩形：

// 顶点着色器代码
attribute vec3 position;

void main() {
  gl_Position = vec4(position, 1.0);
}

// 片段着色器代码
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

// JavaScript代码
// 1. 创建WebGL上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// 2. 创建顶点缓冲区对象(VBO)
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 3. 定义矩形的顶点数据
const vertices = [
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
];

// 4. 将顶点数据写入VBO
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 5. 创建索引缓冲区对象(IBO)
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// 6. 定义矩形的索引数据
const indices = [
  0, 1, 2,
  0, 2, 3,
];

// 7. 将索引数据写入IBO
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// 8. 配置顶点属性
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

// 9. 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 10. 清空颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 11. 绑定着色器程序
gl.useProgram(program);

// 12. 绑定VBO和IBO
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// 13. 绘制矩形
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

以上代码演示了如何使用VBO和IBO绘制矩形。这种方法是比较常见的，也是比较高效的。

当然，除了使用VBO和IBO绘制矩形外，还可以使用其他方法。例如，可以使用顶点数组对象(VAO)来绘制矩形。VAO是一种新的WebGL对象，它可以将多个VBO和IBO绑定在一起，从而简化绘制过程。

使用顶点数组对象(VAO)绘制矩形：

// 顶点着色器代码
attribute vec3 position;

void main() {
  gl_Position = vec4(position, 1.0);
}

// 片段着色器代码
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

// JavaScript代码
// 1. 创建WebGL上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// 2. 创建顶点数组对象(VAO)
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// 3. 创建VBO和IBO
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// 4. 定义矩形的顶点数据和索引数据
const vertices = [
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
];

const indices = [
  0, 1, 2,
  0, 2, 3,
];

// 5. 将顶点数据和索引数据写入VBO和IBO
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// 6. 配置顶点属性
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

// 7. 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 8. 清空颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 9. 绑定着色器程序
gl.useProgram(program);

// 10. 绑定VAO
gl.bindVertexArray(vao);

// 11. 绘制矩形
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);