用 TypeScript 和 WebGL 构建交互式图形：掌握图像绘制的艺术

2024-02-23 05:14:31

WebGL 的世界：让 TypeScript 成为你的绘图伙伴

作为一名经验丰富的技术博客作者，我乐意将 TypeScript 与 WebGL 的奇妙结合呈献给你。这是个将枯燥的数据变为视觉艺术的旅程，你将学会如何利用 WebGL 的强大功能，在浏览器中绘制出令人叹为观止的图形。

WebGL 是什么？

WebGL 是一种 JavaScript API，它允许我们在 HTML5 画布中绘制交互式的 2D 和 3D 图形。它为我们提供了许多强大的功能，如顶点着色器、片元着色器、纹理和缓冲区等，这些工具使我们能够构建各种图形应用，从简单的 2D 游戏到复杂的 3D 动画。

TypeScript 如何与 WebGL 合作？

TypeScript 是一种强大的 JavaScript 扩展，它为我们提供了类型检查、接口和类等特性，使我们能够编写更健壮、更易维护的代码。TypeScript 与 WebGL 的结合相得益彰，我们可以利用 TypeScript 的类型检查来确保代码的正确性，同时利用 WebGL 的强大功能来实现我们天马行空的创意。

如何开始？

如果你已经迫不及待地想要开始 WebGL 的旅程，那么你首先需要一个 WebGL 支持的浏览器。目前，大多数主流浏览器都支持 WebGL，因此你可以在 Chrome、Firefox、Safari 或 Edge 中开始你的 WebGL 之旅。

接下来，你需要创建一个 HTML 画布元素，它是 WebGL 绘制的载体。你可以在 HTML 代码中添加以下代码来创建一个画布元素：

<canvas id="myCanvas"></canvas>

然后，你需要创建一个 WebGL 上下文，它是 WebGL 的绘图环境。你可以在 JavaScript 代码中添加以下代码来创建一个 WebGL 上下文：

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

现在，你已经拥有了一个 WebGL 上下文，你可以开始绘制图形了。你可以使用 WebGL 的各种函数来绘制点、线、三角形和其他几何图形。

让我们一起实践吧！

为了让你更好地理解 TypeScript 与 WebGL 的结合，我将分享一个简单的示例。我们将在 HTML 画布中绘制一个旋转的立方体。

首先，我们需要定义立方体的顶点数据。顶点数据是定义立方体形状的点的位置。我们可以使用以下代码来定义立方体的顶点数据：

const vertices = [
  // 前面
  -1, -1,  1,
   1, -1,  1,
   1,  1,  1,
  -1,  1,  1,

  // 后面
  -1, -1, -1,
  -1,  1, -1,
   1,  1, -1,
   1, -1, -1,

  // 顶部
  -1,  1,  1,
  -1,  1, -1,
   1,  1, -1,
   1,  1,  1,

  // 底部
  -1, -1, -1,
   1, -1, -1,
   1, -1,  1,
  -1, -1,  1,

  // 右侧
   1, -1, -1,
   1,  1, -1,
   1,  1,  1,
   1, -1,  1,

  // 左侧
  -1, -1, -1,
  -1, -1,  1,
  -1,  1,  1,
  -1,  1, -1
];

接下来，我们需要定义立方体的索引数据。索引数据是定义立方体面部如何连接的点的位置。我们可以使用以下代码来定义立方体的索引数据：

const indices = [
  0, 1, 2,      0, 2, 3,    // 前面
  4, 5, 6,      4, 6, 7,    // 后面
  8, 9, 10,     8, 10, 11,  // 顶部
  12, 13, 14,   12, 14, 15, // 底部
  16, 17, 18,   16, 18, 19, // 右侧
  20, 21, 22,   20, 22, 23  // 左侧
];

现在，我们需要创建一个 WebGL 顶点缓冲区对象 (VBO) 来存储顶点数据。我们可以使用以下代码来创建一个 VBO：

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

接下来，我们需要创建一个 WebGL 索引缓冲区对象 (IBO) 来存储索引数据。我们可以使用以下代码来创建一个 IBO：

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

现在，我们需要创建一个 WebGL 着色器程序。着色器程序是定义如何计算每个顶点的颜色和位置的代码。我们可以使用以下代码来创建一个着色器程序：

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

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

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

现在，我们需要将 VBO 和 IBO 绑定到着色器程序。我们可以使用以下代码将 VBO 绑定到着色器程序：

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

我们可以使用以下代码将 IBO 绑定到着色器程序：

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

现在，我们需要设置 WebGL 的视口。视口是 WebGL 在 HTML 画布中绘制图形的区域。我们可以使用以下代码来设置 WebGL 的视口：

gl.viewport(0, 0, canvas.width, canvas.height);

现在，我们需要设置 WebGL 的清除颜色。清除颜色是 WebGL 在清除颜色缓冲区时使用的颜色。我们可以使用以下代码来设置 WebGL 的清除颜色：

gl.clearColor(0.0, 0.0, 0.0, 1.0);

现在，我们可以开始绘制图形了。我们可以使用以下代码来绘制立方体：

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(shaderProgram);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

现在，你应该可以在 HTML 画布中看到一个旋转的立方体了。