返回

用原生的WebGL 构建基础2d几何形体：探索图形创造力的本质

前端

WebGL 入门：使用基本图元绘制 2D 几何图形

在浩瀚的数字领域，图形创造力如明星般闪耀，为各种应用注入活力，从网站设计到互动游戏，再到艺术创作和科学可视化。在这一片图形世界中，WebGL 凭借其渲染交互式 3D 和 2D 图形的强大 JavaScript API 脱颖而出。在这篇文章中，我们将深入探讨使用 WebGL 构建基本 2D 几何图形的原理，从基本图元出发，逐步揭开图形创造力的奥秘。

WebGL 的基本图元

WebGL 提供了一套基本图元，可直接用于绘制 2D 几何图形，包括：

  • 点（point）
  • 线（line）
  • 三角形（triangle）
  • 三角形带（triangle strip）
  • 三角形扇（triangle fan）
  • 线段（line loop）

这些基本图元宛如积木，可以组合成更复杂的几何图形，如矩形、圆形、立方体和球体。

用基本图元构建矩形

矩形是最基本的 2D 几何图形之一，由两个三角形构成。要构建矩形，我们需要：

  1. 定义矩形的顶点：
var vertices = [
  -1.0, -1.0, // 左下角
   1.0, -1.0, // 右下角
  -1.0,  1.0, // 左上角
   1.0,  1.0  // 右上角
];
  1. 连接顶点形成三角形：
var indices = [
  0, 1, 2, // 第一个三角形（左下角、右下角、左上角）
  1, 3, 2  // 第二个三角形（右下角、右上角、左上角）
];
  1. 使用 WebGL 绘制矩形：
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

用基本图元构建圆形

圆形比矩形复杂，由三角形扇构成。要构建圆形，我们需要：

  1. 定义圆心和半径：
var center = [0.0, 0.0]; // 圆心
var radius = 1.0;       // 半径
  1. 计算圆周上的点：
var numPoints = 36;  // 圆周上的点数
var points = [];
for (var i = 0; i < numPoints; i++) {
  // 计算角度
  var angle = i * Math.PI * 2 / numPoints;
  // 计算点坐标
  var x = center[0] + radius * Math.cos(angle);
  var y = center[1] + radius * Math.sin(angle);
  points.push([x, y]);
}
  1. 连接点形成三角形扇：
var indices = [];
for (var i = 1; i < numPoints; i++) {
  indices.push(0, i, i + 1); // 三角形扇（圆心、第 i 个点、第 i + 1 个点）
}
  1. 使用 WebGL 绘制圆形：
gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT, 0);

用基本图元构建立方体

立方体是一个三维几何图形，由六个正方形构成。要构建立方体，我们需要：

  1. 定义立方体的顶点：
var vertices = [
  // 前面
  -1.0, -1.0, -1.0,
   1.0, -1.0, -1.0,
  -1.0,  1.0, -1.0,
   1.0,  1.0, -1.0,
  // 后面
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
  -1.0,  1.0,  1.0,
   1.0,  1.0,  1.0
];
  1. 连接顶点形成正方形：
var indices = [
  // 前面
  0, 1, 2,
  1, 3, 2,
  // 后面
  4, 5, 6,
  5, 7, 6,
  // 顶部
  0, 4, 6,
  0, 2, 6,
  // 底部
  1, 5, 7,
  1, 3, 7,
  // 左侧
  0, 1, 5,
  0, 4, 5,
  // 右侧
  2, 3, 7,
  2, 6, 7
];
  1. 使用 WebGL 绘制立方体：
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

用基本图元构建球体

球体是一个三维几何图形，由三角形扇构成。要构建球体，我们需要：

  1. 定义球心和半径：
var center = [0.0, 0.0, 0.0]; // 球心
var radius = 1.0;           // 半径
  1. 计算球体表面上的点：
var numPoints = 36;  // 球体表面上的点数
var points = [];
for (var i = 0; i < numPoints; i++) {
  // 计算角度
  var angle1 = i * Math.PI * 2 / numPoints;
  var angle2 = (i + 1) * Math.PI * 2 / numPoints;
  for (var j = 0; j < numPoints; j++) {
    var angle3 = j * Math.PI / numPoints;
    // 计算点坐标
    var x = center[0] + radius * Math.cos(angle1) * Math.cos(angle3);
    var y = center[1] + radius * Math.sin(angle3);
    var z = center[2] + radius * Math.sin(angle1) * Math.cos(angle3);
    points.push([x, y, z]);
  }
}
  1. 连接点形成三角形扇：
var indices = [];
for (var i = 0; i < numPoints; i++) {
  for (var j = 0; j < numPoints; j++) {
    indices.push(i * numPoints + j, i * numPoints + j + 1, (i + 1) * numPoints + j);
    indices.push(i * numPoints + j + 1, (i + 1) * numPoints + j + 1, (i + 1) * numPoints + j);
  }
}
  1. 使用 WebGL 绘制球体：
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

常见问题解答

  1. 什么是 WebGL？
    WebGL 是一个 JavaScript API，用于在网页上绘制 3D 和 2D 图形。

  2. 我可以使用 WebGL 绘制哪些类型的几何图形？
    您可以使用 WebGL 绘制各种几何图形，包括点、线、三角形、矩形、圆形、立方体和球体。

  3. 如何用 WebGL 绘制一个圆？
    您可以使用三角形扇绘制圆形。三角形扇由中心点和连接到该中心点的圆周上的点组成。

  4. 如何用 WebGL 绘制一个球体？
    您可以使用三角形扇绘制球体。球体由中心点和连接到该中心点的球体表面上的点组成。

  5. WebGL 可以用来做什么？
    WebGL 可用于创建交互式 3D 和 2D 图形，用于游戏、可视化、设计和许多其他应用程序。

总结

掌握 WebGL 的基本图元是解锁图形创造力的第一步。通过将这些图元组合起来，我们可以构建各种各样的几何图形，为数字世界注入生机与活力。从简单的矩形到复杂的球体，WebGL 为我们提供了无限的可能性，让我们在视觉表现力的画布上尽情挥洒创意。