WebGL：基于 web 的交互式 2D/3D 图形引擎

推荐：使用NSDT编辑器快速搭建 3D 应用场景

在本指南中，我们旨在回答与 WebGL 技术相关的大多数问题。首先，让我们从 WebGL 定义开始。

什么是 WebGL？

WebGL（Web 图形库）是一个 JavaScript 应用程序编程接口（API），用于实现交互式 Web 图形。

它允许您直接在 HTML 画布内运行 GPU 加速图形，而无需外部插件。

WebGL 是一组用于绘制在浏览器屏幕上生成的矢量元素的函数。这是通过客户端的图形处理单元 （GPU） 完成的。换句话说，GPU 用于渲染矢量元素。

它与其他工具的不同之处在于它可以渲染的视觉元素的质量和复杂性。事实上，没有 HTML 和 CSS 方法能够达到完全相同的影响。

WebGL 技术由 KhronosGroup 创建，是 OpenGL ES 的直系后代，用于游戏和 VR 中的 3D 可视化。这项创新技术目前用于 3D 网页设计，互动游戏，物理模拟，数据可视化和艺术品。

现在，让我们来了解 WebGL 的基础知识。

WebGL 基础

与常见的误解相反，WebGL 不是一个图形套件。它不使用位图，而是利用代码绘制几何对象。它还使用客户端的 GPU 引擎在 HTML 画布上栅格化图形对象。

为了理解 WebGL 的基础知识，你需要了解基本的 3D 图形理论和渲染工作流程。

在 3D 场景中，每个点都是由其 x、y 和 z 坐标标识的折点。然后将顶点连接起来形成一组三角形形状，称为基元。

应用光源来创建阴影和深度的外观。然后对基元进行栅格化，以将 3D 矢量图形创建为 2D 像素的投影。这诱使大脑在 3D 计算机屏幕上看到 2D 对象。

WebGL 代码中有两种类型的函数：

• 顶点着色器，

• 片段着色器。

它们用于告诉计算机如何在屏幕上绘制像素。虽然主程序代码是用 JavaScript 编写的，但着色器使用 GL Shader 语言，它与 C / C++非常相似。

顶点着色器计算顶点的坐标，片段着色器负责计算像素颜色。着色过程需要计算机执行大量计算才能流畅地渲染图像。CPU 处理的工作负载通常太大。出于这个原因，WebGL 利用 GPU 来更有效地分配计算。

从本质上讲，WebGL API 就是自定义着色器状态，以控制在客户端屏幕上绘制的内容。

幸运的是，无需手动创建程序即可开始将 3D 模型添加到您的 3D 网站。您可以使用 three.js、PlayCanvas 或 Unity WebGL 构建选项等资源来快速设计 3D 体验，而无需太多的 WebGL 基础知识。

3D 和 2D 图形的关键概念

总结上面提到的内容：一组着色器告诉 GPU 如何将代码行转换为图形。反过来，着色器可以通过多种方式接收数据。下面简要介绍了四种现有的着色器编程方法，它们最终构成了 WebGL 的关键概念。

属性和缓冲区

缓冲区是可以包含几乎任何要传达的参数的数据集。例如，颜色、纹理坐标、顶点位置等。属性描述如何从缓冲区中提取数据的过程。

制服

这些是在播放着色器函数之前必须定义的全局变量。

纹理

纹理是您可以在两种着色器类型中公开访问的数据。通常，纹理包含颜色和图像数据，但实际上可以包含任何其他数据类型。

变化

变化是在着色器之间传输数据的方法。在变量中设置的值将在执行着色器时应用。

最终，WebGL 是一个复杂的工具，它使用复杂的数学和编程在用户的屏幕上生成图形。现在，让我们谈谈它的优点和缺点。

WebGL 的优缺点

在为您的目的选择最佳技术堆栈时，请考虑要应用的技术的优缺点。

WebGL Development Pros and Cons

WebGL 最重要的优点如下：

• 它是原生的，在大多数常见的桌面和移动浏览器中都是免费的

• 该技术相对较快，并且很容易与 HTML 混合

• 无需在您的设备上安装任何东西即可运行 WebGL API

• 您可以利用外部库制作出色的 3D Web 体验
  

另一方面，WebGL 的缺点是这样的：

• 它在许多方面都比它的前身 OpenGL 慢。

• 对于原生 WebGL 编程来说，学习曲线非常陡峭。

• 有安全漏洞，尽管供应商声称正在处理它们

• 可能负责由于插件不兼容等而导致的浏览器崩溃。

如果您需要跨平台和跨浏览器兼容性、与 HTML 的持续集成以及与所有元素的无缝交互。WebGL 是最佳解决方案。

对企业的优势

除了纯粹的技术特性，WebGL 还有许多其他切实的优势：

• 壮观的图形和出色的用户体验

WebGL 使 3D 图形在用户的浏览器屏幕上栩栩如生，如果您认为这没什么大不了的，请再想一想。此 API 通过编程方式提供真实 3D 和虚拟现实的体验。这使得这项技术如此具有影响力。

• 更少的性能问题

WebGL 使用客户端硬件，因此，它在用户的屏幕上运行更流畅，并且通常具有较低的播放延迟。

• 跨平台可用性

WebGL 将在最常见的浏览器，设备和操作系统上运行，这使得它可供各种用户组使用。

• 比其他解决方案更安全

在 WebGL 出现之前，浏览器中 3D 图形和动画的显示需要特定的插件。它们经常崩溃并导致许多安全漏洞。尽管 WebGL 并非完全没有安全问题，但它仍然比迄今为止任何其他类似技术都更安全。

• 为基于浏览器的游戏打开大门

基于浏览器的游戏一直需求量很大。然而，在 WebGL 之前交付它的唯一方法是通过使用插件，这涉及许多问题。WebGL 将使您能够轻松创建基于 Web 的游戏并进入这个有前途的细分市场。

WebGL vs OpenGL：异同

WebGL 经常被比作 OpenGL。OpenGL 也是由 Kronos 集团于 1992 年创建的，是用于 3D 和 2D 图形的 API。

WebGL vs OpenGL

听起来几乎没有任何区别，但是，我们不应该忽视许多实质性的细微差别。

• 起源

WebGL 起源于 OpenGL ES2，它是 OpenGL 的简化版本。另一方面，OpenGL 更复杂，并且具有过多的功能。

• 特征

在功能方面，OpenGL 的范围更广。除了片段和顶点着色器之外，它还包括更多种类的着色器类型。

• 安装

虽然 WebGL 在桌面和移动设备上的浏览器中运行，但 OpenGL 需要驱动器并需要安装。

• 程序设计语言

WebGL 主要是用 JavaScript 编写的，因此它与 HTML 集成良好，并且可以在 HTML 画布上运行。OpenGL 的母语是 C。

• 学习曲线

OpenGL 的学习曲线更陡峭，因为它要复杂得多。然而，一旦你掌握了 WebGL，它就会变得更容易学习。

• 使用案例

OpenGL 广泛应用于游戏技术，以构建视频游戏。WebGL 为 Web 服务和应用程序提供支持（下面，我们将更详细地探讨 WebGL 使用的示例）。

简而言之，OpenGL 和 WebGL 都是用于渲染图像的 API。但是，WebGL 更适合 Web 的 3D 图形和构建基于 Web 的服务。WebGL 也更容易学习，可以通过外部库进行增强，并且具有更好的 HTML 和 JavaScript 集成。

WebGL 的其他库

WebGL 开发人员可以使用各种各样的 WebGL 框架和库来构建三维网站。应用预先编写的元素可以大大提高 Web 开发的速度，而不是重新发明轮子。

Best WebGL Tecnologies

现在让我们快速概述一些用于使用 WebGL 开发 3D 网站的流行附加库。

Unity WebGL

如果你正在寻找 WebGL 开发的资源，这可能是你会遇到的第一个库。在网页中创建内容时，Unity WebGL 允许 Web 开发人员直接与浏览器的 JavaScript 引擎交互。

这样，网页上的所有元素都可以相互通信。Unity WebGL 提供了不同的方法来做到这一点。从 Unity 脚本调用 Javascript 或 C 函数，或者从浏览器的 JavaScript 向 Unity 脚本发送一些数据。

目前，大多数主流桌面浏览器都支持 Unity WebGL 内容。但是，它尚不提供对移动设备的支持。

Three.js

Three.js 是一个专门为 WebGL 准备的 JavaScript 元素库。该库具有大量效果、对象、摄像机、场景、材质、着色器和其他实用程序。这些手册仍在编写中，但网络上的庞大开发人员社区运行论坛和讨论。

巴比伦.js

Github 上的另一个开源库 Babylon 通常被描述为在浏览器中显示 3D 图形的引擎.js。它的原始语言是 Typescript，但它的代码由所有支持 WebGL 和 HTML5 的浏览器本地解释。巴比伦.js 具有广泛的应用，包括游戏、犯罪数据可视化、时尚、医疗保健教育和军事训练。

游戏画布

PlayCanvas 专门用于游戏，是一个由基于云的专有开发平台支持的 3D 引擎。这允许 Web 开发团队从多台计算机实时编辑 Web 项目。这些功能包括浏览器中的 3D 动画、刚体物理模拟和声音设计。该引擎于 2014 年开源，在 Github 上也有一个免费的存储库。

A-Frame

此框架适用于 XR 开发（AR/VR 和混合现实体验）。它还用于在浏览器中显示 3D 和 VR 元素。A-Frame 本质上是一个 VR 插件，它具有一系列组件，如动画，几何图形，光标，控件等。

A-Frame 生成的代码可以在大多数流行的 VR 头显上运行，也可以在桌面和移动设备上显示图形。这使得 A-Frame 成为使浏览器游戏能够在任何设备上运行的完美库。免费存储库也可以在 Github 上找到。

Deck.gl

Deck.gl 主要用于地理空间数据的可视化，非常适合使用 WebGL 处理大型数据集。从而基于分析数据创建复杂的可视化效果。

它与 React 集成良好，当与 MapboxGL 结合使用时可提供出色的结果。它可以在 Mapbox 地图顶部创建引人注目的 2D 或 3D 图形叠加层。您可以使用 Deck.gl Github 存储库来创建 WebGL 地理空间可视化。

Filament

Filament 是一个用于移动解决方案的 Google 开源库。它是一个实时 3D 渲染器，也可以在许多平台上运行。这是一个使用 C++构建的新库，以获得最佳性能。WebGL 开发人员专注于保持它尽可能轻巧和紧凑。

Kick.js

Kick.js 对于那些想要在 WebGL 中获得快速实践经验的人来说是一个完美的选择。该游戏引擎和图形库具有全面的文档、教程和示例，易于学习。非常适合 Web 开发和创建交互式游戏。

ClayGL

ClayGL 用于可视化大型集合和数据，也可以应用于地理空间映射目的。然而，该库也适用于需要按需扩展的多用途 Web 应用程序。该库为用户提供了高度复杂和详细的图形、示例和教程。

附加的 WebGL 库总数超过 80 个，描述所有这些库超出了本文的范围。但是，您可以使用 GitHub 上广泛的库列表来找到最适合您的业务目的的库。

2D 和 3D 图形最佳实践

为了使 WebGL 充分发挥其潜力，专家们制定了一系列建议来帮助实现最佳性能。一些 WebGL 最佳实践如下：

• 消除错误

通常，WebGL 错误消息显示为 JavaScript 警告。运行 WebGL 的浏览器的问题在于，在出现一定数量的错误后，它们会停止发送有关它们的通知。这确实阻碍了修复 WebGL 代码。尽一切努力检测所有错误，并在代码变得难以修复之前消除它们。getError

• 了解浏览器限制

客户端的浏览器可能不支持您应用的扩展。如果使用扩展，请考虑提供相同体验的其他方法。但是，某些扩展提供跨浏览器可操作性，因此在构建产品时关注它们是有意义的。

• 了解系统限制

运行 WebGL 代码的系统可能有局限性，其容量可能与您的系统容量大不相同。因此，您的项目可能具有不同的播放速度、性能等。然而，WebGL 代码通常不是那么耗费资源，许多函数将得到普遍支持。

• 必要时清理代码

删除对象可在不再需要渲染结果时清除 WebGL 上下文。清理和删除不必要的元素将有助于加速代码执行。

WebGL 技术的 5 个生动例子

WebGL 的用途是什么？

现在让我们用这些生动的例子来探索 WebGL 可以做什么。下面的一些视觉体验确实令人着迷，并成功地展示了 WebGL 的能力。

1. 虚拟物理实验室

在教育领域，WebGL 帮助创建以前只能在真实实验室环境中实现的模拟。在威赛科技，我们建立了一个虚拟物理实验室，帮助美国大学的学生磨练他们的学术技能。

2. 数字水母

这些 3D 水母看起来完全真实，但是，它们是使用 WebGL 创建的。请注意，您可以控制水母的大小、速度、计数和水湍流等参数。

WebGL Jellyfish

3. 化学涂鸦组件

这是一个包含化学结构、反应和其他交互式组件的 JavaScript 3D 库。由 iChemLabs 创建的 ChemDoodle 是化学网站和科学家的绝佳工具。

Javascript 3D Library

4. 解剖可视化

一个突出的 WebGL 例子，BioDigital 的这个项目可视化了人体的所有系统。提供治疗和疾病的全面可视化，并服务于医疗保健、科学和教育目的。

BioDigital Human

5. 罗马音乐视频

3 Dreams of Black 是 Rome 用 WebGL 制作的音乐视频。该视频由 Mirada 与导演 Chris Milk 合作制作，非常壮观，并包含游戏参考。必看！

3 Dreams of Black byROME

除了这些壮观的例子之外，整个软件开发部分都致力于 WebGL 游戏。一些由 WebGL 提供支持的最佳浏览器游戏包括 Shell Shockers，Derby Crash 4 和 Bullet Force。另外，考虑看看谷歌实验展示使用机器学习和 WebGL 制作的项目。

原文链接：WebGL：基于web的交互式2D/3D图形引擎 (mvrlink.com)