【ThreeJS 01】了解 WebGL 以及 ThreeJS

01 介绍

这个课程的主讲人是 Bruno Simon，这是他的作品集

在这里插入图片描述

他还做了一些有趣的项目：

WebGL 是一种 JavaScript API，可以以惊人的速度在画布上渲染三角形。它与大多数现代浏览器兼容，并且速度很快，因为它使用了访问者的图形处理单元 (GPU)。

WebGL 不仅可以绘制三角形，还可以用于创建 2D 体验，但出于课程的目的，我们将重点介绍使用三角形的 3D 体验。

GPU 可以进行数千次并行计算。想象一下，您要渲染一个 3D 模型，而这个模型由 1000 个三角形组成——仔细想想，这个数字并不算多。每个三角形包含 3 个点。当我们想要渲染模型时，GPU 必须计算这 3000 个点的位置。由于 GPU 可以进行并行计算，因此它将一次性处理所有三角形点。

一旦模型的点被正确放置，GPU 就需要绘制这些三角形的每个可见像素。同样，GPU 将一次性处理成千上万个像素的计算。

放置点和绘制像素的指令写在我们所谓的着色器中。让我告诉你，着色器很难掌握。我们还需要为这些着色器提供数据。例如：如何根据模型变换和相机的属性放置点。这些被称为矩阵。我们还需要提供数据来帮助着色像素。如果有光并且三角形面向该光，它应该比三角形没有面向光时更亮。

这就是原生 WebGL 如此困难的原因。在画布上绘制一个三角形至少需要 100 行代码。如果您想添加透视、灯光、模型并在这种情况下为所有内容制作动画，那就祝您好运了。

但原生 WebGL 的优势在于其存在于较低级别，非常接近 GPU。这可以实现出色的优化和更多控制。

Three.js 是一个遵循 MIT 许可的 JavaScript 库，可在 WebGL 上运行。该库的目标是大大简化处理我们刚才提到的所有内容的过程。您只需几行代码即可获得动画 3D 场景，而且您无需提供着色器和矩阵。

由于 Three.js 位于 WebGL 之上，我们仍然可以以某些方式与其交互。在某个时候，我们将开始编写着色器并创建矩阵。

Ricardo Cabello，又名 Mr.doob（网站、Twitter），是 Three.js 的开发者。他仍在继续开发，但现在他得到了一个大型社区的帮助。您可以在此处查看贡献者列表：https 😕/github.com/mrdoob/three.js/graphs/contributors

目前，该库每月都会更新一次，您可以在此处的发布页面中查看更改的内容：https: //github.com/mrdoob/three.js/releases

您可以在网站主页上发现许多使用 Three.js 的优秀项目：https://threejs.org/

还有一些我们会经常使用的维护良好的文档：https 😕/threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

您可以在此处找到数百个带有公共代码的示例： https: //threejs.org/examples/#webgl_tonemapping

如果您想关注更新并发现出色的项目，我建议您关注 Mr.doob 和 Three.js 推特账户：

https://twitter.com/mrdoob

https://twitter.com/threejs