WebGL 的前世今生及未来

Sanddyl
1,119 阅读12分钟

一、概述

我们生活在一个 3D 世界中，但我们与计算机相关设备的交互，几乎都发生在 2D 显示终端上。如何在 2D 显示终端上呈现流畅、逼真的 3D 应用程序，是计算机领域重要研究方向。

image.png

图1 人们通过 2D 设备进行 3D 应用的开发与使用

伴随软硬件技术不断的发展与突破，现如今，几乎所有针对个人的主机设备，都具备高性能的 3D 图形处理单元，且配套成熟稳定的软件驱动。基于此，各种富有创造性且极具视觉冲击力的 3D 应用被开发出来，广泛应用在我们的日常生活与工作之中。

同样，3D 图形技术在 Web 应用中的探索与发展也从未停止。随着 Web 技术的演进与现代浏览器技术的进步，2011 年 3 月，Khronos 组织发布了 WebGL 1.0 规范，为 Web 应用在图像显示与处理部分，初步带来了基于 GPU 的硬件加速方案。并在生产丰富多样化的 Web 内容上，发挥了积极的作用。

二、WebGL 前世

在进一步介绍 WebGL 之前，先从计算机设备的图形图像体系入手来追本溯源，有助于加深对 WebGL 的理解。

2.1、 计算机图形系统硬件、工作流程

现代计算机具有专用的图形处理单元（GPU）来为显示终端生成图像，下图所示为常见的CPU、GPU、显示终端的工作方式：

image.png

图2 CPU、GPU 及显示终端的常见工作方式

从硬件角度来讲，计算机输出图像的过程经过以下几个主要步骤：

  1. CPU 根据相关输入，准备相关显示内容（数据）提交至 GPU；
  2. GPU 渲染完成后将渲染结果存入帧缓冲区；
  3. 视频控制器根据同步信号，逐帧读取帧缓冲区的数据；
  4. 帧缓冲数据经转换后，最终交由显示终端进行显示。

2.2、 3D 应用程序结构

几乎所有 3D 应用程序，其基本工作方式及流程，均符合图 2 所述情形。而对于早期 PC 历史的大部分时间，与图形处理单元配套的驱动程序，都和具体应用程序捆绑或编译在应用程序中：

image.png

图3 嵌入式硬件驱动的应用程序结构

图3 所示结构优化了对硬件功能的访问，有助于获得最佳的性能，高质量的 3D 应用也可以从底层硬件中榨取更多的性能。

但是“捆绑式”的缺点同样不小，一旦应用程序被发布和安装，硬件驱动版本将被“冻结”，随之被“冻结”的也包含驱动错误和新的功能。如果硬件供应商修复了错误或引入了增强性的功能，用户在不重新安装和升级应用的前提下，将无法及时修复和更新。此外，由于图形硬件发展迅速，捆绑式的应用或游戏更容易“过时”，一旦图形硬件有新的变动，软件供应商必须制作和发布新的版本。这在互联网带宽较低且接入成本较高的时期，是一个令人头疼的问题。

为了解决“捆绑式”应用的种种问题，操作系统逐渐承担起托管驱动程序的任务。应用/游戏可通过调用操作系统支持的图形 API，再进一步转译为硬件驱动能够接受的指令，进而实现对图形硬件能力的使用：

image.png

图4 使用图形 API 的应用程序结构

图4 所示结构将操作系统作为一个“中间人”，上层承载各类型或风格的应用，下层通过图形 API 适配来自各供应商的图形硬件（驱动）。如此以来，应用程序不再受图形驱动更改及图形硬件演变的影响（至少在相当长的时间内，都可以保证应用程序可以正常工作）。

该应用结构有效降低了应用开发的迭代及维护成本，但会在应用性能方面造成一定损耗（对各类硬件的适配，主要考虑通用性而非特定设备的专有特性）。

2.3、 图形 API 标准之 OpenGL

上节内容提到的图形 API 的出现，极大的简化了 3D 应用/游戏开发的复杂度。可认为“它们”是标准化的、文档化的接口定义，可供其他应用程序使用，并由图形硬件（驱动）负责实现。

目前为止，市面上已经有很多的图形 API 标准。就桌面应用端来讲，有传统图形 API 标准：OpenGL、Direct3D（DX12以下），及可充分利用多线程且更好进行 GPU 层面优化的新一代图形 API 标准：Vulkan、Direct3D（DX12）、Metal 等……

而本文提到的 WebGL 作为 Web 端重要的图形 API 标准，与 OpenGL 有着密不可分的关系，可简单认为，WebGL 就是浏览器端的 OpenGL。

So …… Why OpenGL ？ 归纳起来主要有以下几点原因：

  1. 够老牌、资历深；
  2. 应用广泛，拥有市面上最多的粉丝；
  3. 开源免费，跨平台。

OpenGL 初始版本发布于 1992 年，2006 年交由 Khronos 组织进行管理，设计之初就以提供跨平台的图形 API 标准为目标，因此成为类 Unix 系统的主要图形 API。

后遭遇 Direct3D 的激烈竞争，依赖于 Windows 系统的高市场占有率，和 Direct3D 自身不断的优化与改进，虽然在专业图形领域 OpenGL 用户更多，但 Direct3D 则成为了计算机游戏开发的首选。

2003 年，OpenGL ES 1.0 （基于 OpenGL 1.3 标准）发布，标志着 OpenGL API 标准正式接入嵌入式操作系统。伴随智能终端的普及和移动互联时代的到来，使得 OpenGL ES 成为 “历史上部署最广泛的图形 API” 。

同一历史时期，随着 Web 技术的发展，尤其是 Html5 时代的到来，使得浏览器从简单的信息展示平台成为承载更多复杂功能的应用平台。人们也不仅仅满足于 2D 页面展示形式，并进行了大量 3D 内容展示的尝试（3D Plugin）。2011 年 WebGL 1.0（基于 OpenGL ES 2.0 标准）发布，使得 Web 开发人员在不使用任何插件的前提下，就能够创建 3D 页面。

OpenGL 及其子标准也在 WebGL 这最后一块拼图完成的时候达到了其历史的巅峰，可称为史上最伟大的图形 API 标准：

image.png

图5 OpenGL、OpenGL ES、WebGL 三者的关系

三、WebGL今生

WebGL 的发布，标志着历史上第一次 Web 开发人员能以近乎原生的速度访问图形硬件。WebGL 1.0 也以最快的速度被各大主流浏览器支持，并广泛应用到各类型内容的生产当中。在 Khronos 的支持下，WebGL 不断发展，并于 2017 年发布 2.0 版本。但各大主流浏览器对 WebGL 2.0 的支持可谓一波三折，其中 Safari 从 12 版本开始，始终将 WebGL 2.0 做为实验特性而默认不开启，其主要精力则放在自己下一代图形标准的工作当中，直到 2022 年，Safari 才正式开放 WebGL 2.0。

3.1、 WebGL 应用程序结构

WebGL API 标准基于 OpenGL ES 制定，但并不意味着其下层完全依托于 OpenGL 或 OpenGL ES。其应用结构如下：

image.png

图6 WebGL 应用程序结构

如图6 所示结构，WebGL 与下层图形 API 中间包含一个转译过程，因此理论上不受限于特定硬件图形 API 。 事实也是如此，在 Windows 平台上，Google Chrome 和 Mozilla Firefox 以 ANGLE （Google 开发且开源的图形 API 转换引擎）作为默认的 WebGL 后端引擎，其允许将 OpenGL ES API 的调用转换为该操作系统可用的硬件图形 API 之一来无缝运行 WebGL 和其他 OpenGL ES 内容。因此对有跨平台需求的轻型 3D 应用，WebGL 是极佳的选择。

3.2、WebGL 应用场景

WebGL 自发布起就受到热烈追捧，并被应用到各种业务场景中，也催生出很多富有创意且极具价值的产品：

image.png

图7 WebGL 应用场景

  1. Google Earth 为人们提供强大的地图服务；
  2. 汽车厂商推出数字化的营销方案，用户可在虚拟环境中进行驾乘体验并获取有关产品的介绍信息；
  3. Sketchfab 网站为用户提供 3D 素材交易服务；
  4. 小游戏平台支持用 WebGL 去开发点击即玩的游戏；
  5. 对 “数字孪生/数据可视化” 技术的使用，使得决策、管理者的工作更加直观、科学与高效；
  6. 在教育信息化领域，可通过 WebGL 创设在线的虚拟学习环境，使学生自主探究学习，可有效提升学习效率，解决一定教育痛点。

3.3、使用框架开发复杂 WebGL 应用

WebGL 学习曲线相对陡峭，涉及到的内容也相对庞杂。开发基于 WebGL 的应用，除了对 WebGL API 本身有所掌握之外，还需具备一定的图形学及着色语言相关知识，要求开发人员具备良好的数据基础。在开发过程中，还会涉及到兼容、处理及优化各类型资源数据（贴图、模型、动画、材质、特效等），且需保证整个图形处理及渲染的稳定性及效率。这往往是在短时间内不易做到的。

好在经过多年的发展，业内已经有很多优秀的框架，可供开发人员进行复杂应用的开发。其中以 Three.js 和 Babylon.js 最受欢迎：

Three.js：于 2010 年 4 月在 GitHub 上首次发布，在 GitHub 上有超过 1500 名贡献者。

Babylon.js：于 2013 年在 Microsoft Public License 下发布，最初由两名 Microsoft 员工开发，目前托管在 GitHub 上，有超过 400 名贡献者。

适时选择合适的开发框架，在其基础上进行学习、探索和优化往往比重复造轮子更能产生价值。换句话讲：开发人员要具备造轮子的能力，但是要尽可能避免重复造轮子。因此在需要开发复杂 WebGL 应用时，可优先选择成熟的开发框架去完成工作。

image.png

图8 作者在使用 Three.js 期间，通过与大佬交流来获得提升

四、WebGL 未来

技术是不断发展的，时间来到 2017 年，OpenGL 发布其最后一个版本 4.6，同年 Khronos 宣布不再有 OpenGL 的新版本推出，此后将专注于 Vulkan（被称为 glNext） 和其他技术的开发。此举也标志着 OpenGL 作为老牌的图形 API 之一，即将迎来它的谢幕……而承载其荣耀于寄托的“后辈”，也必将创造更大的荣耀……

随着 OpenGL 停止更新，新一代图形 API 如：Vulkan、Metal、D3D12 等陆续发布，而新的 Web 图形 API WebGPU 也呼之欲出。WebGL 毫无疑问也会退出历史的舞台。 image.png

图9 Graphics API 发布时间线（网络来源）

4.1、OpenGL 不再符合现代 GPU 架构

早期的 GPU 是一组固定的、仅具有基本功能的硬件，几乎没有可编程性。随着应用开发者不断突破这些非可编程系统的功能极限，促使 GPU 厂商也不断的进行技术突破。现代 GPU 也随着应用开发者 GPU 厂商的“竞争”演化成为可处理大量数据且支持异步并行计算的性能“怪兽”。

由于 OpenGL 发布于计算机图形学的早期，全局状态机类似的设计已经与现代 GPU 架构脱节，无法发挥 GPU 最优的能力（此处不是本文的重点，可点击 图9 网络来源 了解更多）。而 WebGL 的设计来源于 OpenGL 子集标准，因此也面临同样的问题。

4.2、WebGL 仍将持续很长时间

虽说 WebGPU 离我们越来越近，从放出的 Demo 来看，多方面均大幅优于 WebGL。但是可以预见的是，WebGL 在未来的很长时间内，依然是前端图形应用开发的主要选择：

  • 前端标准的推进一向缓慢，而对于新标准的支持，各大浏览器厂商也存在一定的差异；
  • 前端需优先考虑兼容性和稳定性，对于大范围使用的应用，采用新的技术往往会带来负面的影响；
  • WebGL 已足够稳定，且 2.0 版本于 2022 年才被所有主流浏览器支持（主要是 Safari 一直将其作为实验性功能）。为保证已有网站的正常运行，这项标准在可预见的时间内，并不会从浏览器中移除。

综上所述，对于开发人员来讲，技术焦虑和选型困难其实并不存在，对于 WebGL 的学习与使用依然很有必要：

  • 与新的标准比较，WebGL 更易于学习和使用，是图形图像及 GPU 基本原理入门的很好选择；
  • 在实际开发中，掌握 WebGL 可以在遇到问题时更好的参阅业内大量的优秀案例，有助于解决实际问题；
  • 成熟的开发框架会在顶层兼容新旧功能，在使用框架开发时，很多基于 WebGL 的框架功能均可以在新的标准下使用。
avatar
文章
阅读
粉丝