如何在 WebGL 中绘制许多形状

在WebGL中绘制许多形状，我们可以通过以下几个步骤来实现：

1. 初始化 WebGL 上下文

首先，我们需要在 HTML 中创建一个 <canvas> 元素，然后在 JavaScript 中获取这个元素并初始化 WebGL 上下文。

html
<canvas id="webgl-canvas"></canvas>

javascript
var canvas = document.getElementById('webgl-canvas');
var gl = canvas.getContext('webgl');
if (!gl) {
  console.error('无法初始化 WebGL。你的浏览器可能不支持。');
}

2. 定义形状的顶点数据

我们可以定义多个形状的顶点数据。例如，如果我们想绘制一个三角形和一个正方形，我们需要为每个形状设置顶点数组。

javascript
// 三角形的顶点位置
var triangleVertices = [
  0.0,  1.0,  0.0,  // 顶点1
 -1.0, -1.0,  0.0,  // 顶点2
  1.0, -1.0,  0.0   // 顶点3
];

// 正方形的顶点位置
var squareVertices = [
 -1.0,  1.0,  0.0,  // 顶点1
 -1.0, -1.0,  0.0,  // 顶点2
  1.0,  1.0,  0.0,  // 顶点3
  1.0, -1.0,  0.0   // 顶点4
];

3. 创建并绑定缓冲区

我们需要为每种形状创建一个缓冲区，并将顶点数据绑定到这个缓冲区。

javascript
// 创建并绑定三角形的顶点缓冲区
var triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

// 创建并绑定正方形的顶点缓冲区
var squareVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(squareVertices), gl.STATIC_DRAW);

4. 编写顶点和片元着色器

对于每个形状，我们可能需要编写顶点着色器和片元着色器。这些着色器代码负责处理顶点数据和定义如何渲染像素。

glsl
// 顶点着色器代码
var vertexShaderCode = `
attribute vec3 position;
void main() {
    gl_Position = vec4(position, 1.0);
}`;

// 片元着色器代码
var fragmentShaderCode = `
precision mediump float;
uniform vec4 color;
void main() {
    gl_FragColor = color;
}`;

5. 绘制形状

最后，我们使用顶点缓冲区和着色器程序来绘制每个形状。我们可以设置不同的颜色和位置。

javascript
function drawShape(buffer, color, vertexCount) {
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  // 这里省略设置 attribute 和 uniform 变量的代码
  gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
}

// 绘制三角形
drawShape(triangleVertexBuffer, [1.0, 0.0, 0.0, 1.0], 3);
// 绘制正方形
drawShape(squareVertexBuffer, [0.0, 0.0, 1.0, 1.0], 4);

通过以上步骤，我们可以在 WebGL 中绘制多种形状，并通过改变参数来绘制不同的图形。这是一个非常基础的入门示例，实际应用中可能还需要考虑灯光、贴图、动画等多种高级特性。