返回

探索 WebGL 三角形的绘制：开启图形渲染之旅

前端







**探索 WebGL 三角形的绘制：开启图形渲染之旅** 

在计算机图形学中，三角形是最基本的图形元素。从简单的几何图形到复杂的 3D 模型，几乎所有图形都可以分解为三角形。因此，掌握三角形的绘制技巧是开启图形渲染之旅的关键一步。

WebGL（Web Graphics Library）是用于在 Web 浏览器中创建交互式 3D 图形的 JavaScript API。通过 WebGL，我们可以直接操作图形硬件，绘制出令人惊叹的图形。

**绘制单个点** 

在 WebGL 入门的第一部分中，我们了解了如何绘制单个点。使用 `gl.drawArrays(gl.POINTS, 0, 1);` 命令，我们可以绘制一个点。然而，当我们需要绘制多个相互关联的点时，这种方法就不再适用。

**绘制多个点** 

为了绘制多个点，我们需要将点的坐标数据存储在缓冲区中。缓冲区是 WebGL 中用于存储图形数据的特殊内存区域。

创建缓冲区：

```javascript
const pointsBuffer = gl.createBuffer();

绑定缓冲区：

gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer);

填充缓冲区数据：

const points = [
  // 点 1 的 x、y 坐标
  0.0, 0.5,
  // 点 2 的 x、y 坐标
  0.5, -0.5,
  // 点 3 的 x、y 坐标
  -0.5, -0.5,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

使用顶点着色器处理缓冲区数据：

顶点着色器是一个特殊的程序，用于处理每个顶点的数据。在顶点着色器中，我们可以指定如何将顶点坐标转换为屏幕坐标。

// 顶点着色器源码
const vertexShaderSource = `
  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

编译顶点着色器：

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

使用片段着色器渲染像素：

片段着色器是一个特殊的程序，用于处理每个像素的颜色。在片段着色器中，我们可以指定如何根据顶点数据计算像素颜色。

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

编译片段着色器：

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

创建程序对象：

程序对象将顶点着色器和片段着色器链接在一起，形成一个完整的渲染程序。

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

激活程序对象：

gl.useProgram(program);

获取顶点着色器的属性位置：

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

启用顶点属性：

gl.enableVertexAttribArray(positionAttributeLocation);

将缓冲区数据绑定到顶点属性：

gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

绘制三角形：

gl.drawArrays(gl.TRIANGLES, 0, 3);

索引缓冲区

索引缓冲区（Index Buffer Object，IBO）是一种特殊类型的缓冲区，用于存储顶点的索引。通过使用索引缓冲区，我们可以更有效地绘制三角形，减少重复顶点的存储。

创建索引缓冲区：

const indexBuffer = gl.createBuffer();

绑定索引缓冲区：

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

填充索引缓冲区数据：

const indices = [
  0, 1, 2, // 三角形 1 的索引
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

使用索引缓冲区绘制三角形：

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

顶点数组对象

顶点数组对象（Vertex Array Object，VAO）是一种特殊类型的对象，用于存储与顶点数据相关的所有状态信息。使用 VAO 可以减少重复设置顶点属性的开销。

创建顶点数组对象：

const vao = gl.createVertexArray();

绑定顶点数组对象：

gl.bindVertexArray(vao);

将缓冲区和顶点属性绑定到 VAO：

gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

启用顶点属性：

gl.enableVertexAttribArray(positionAttributeLocation);

使用 VAO 绘制三角形：

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

通过使用索引缓冲区和顶点数组对象，我们可以更有效地绘制三角形，提升图形渲染性能。

深入探索

绘制三角形是 WebGL 图形渲染的基础。掌握了三角形的绘制技巧，您就可以踏上探索 WebGL 的漫漫征程，创建出令人惊叹的 3D 图形。

相关资源