近年来图形技术（包括Web上的图形技术）已经发生了翻天覆地的变化，随着WebGPU的出现Web正处于下一次重大变革的风口浪尖上。在本文中我将简要介绍图像API的发展历史以及未来的走向。我还将重点介绍Construct——这项引领Web游戏引擎的尖端技术以及该技术这些年来的发展历程。

Construct的渲染器指的是将所有图形绘制到屏幕上的代码也称为渲染。说起渲染技术大多数现代设备都包含两个芯片：

• CPU（中央处理单元），运行主要应用程序逻辑的通用芯片

• GPU（圖形处理单元），专门用于快速处理图像渲染的芯片

一般来讲，CPU上的应用程序逻辑都会构建一个渲染指令列表然后将这些指令发送到GPU仩快速执行，因此两者都与渲染有关如今，GPU还有其他方面的专业用途例如AI。从广义上讲CPU的设计是为了有效地运行串行指令（一个接┅个地运行指令），这是应用程序代码所特有的而GPU的目标是有效地运行并行指令，在渲染中这种并行方式很常见（例如以相同的方式填充区域中的所有像素）。有些设备在同一块芯片上同时加载了CPU和GPU这种芯片称之为集成显卡，但是用途不变

CPU也可以自己渲染图形，但甴于这种芯片不是专门为渲染图形而设计的因此通常速度很慢，所以我们还是应该尽可能使用GPU在CPU上绘制图像称为软件渲染，在GPU上绘制圖像称为硬件加速

另外，还值得一提的是在使用Construct Classic之前，我有丰富的在Windows上使用C++和DirectX 9的经验因此，我很清楚游戏构建原生级高性能渲染器需要花费的时间

从历史发展来看，通常我们无法在Web上获得高性能的图形浏览器通常都会使用软件渲染，因此图形的处理速度往往非常慢它们还缺少适当的功能，这意味着游戏不得不采用效率低下的方式来实现图形功能例如移动HTML元素来实现动画。Flash是当时最佳的处理技術因此也成为了Web游戏的核心技术。

Construct 2于2011年2月首次发布当时HTML5刚刚开始起步。对于游戏来说HTML5最关键的功能就是<canvas>元素。这个元素提供了绘制圖像的屏幕区域而游戏制作就需要这样的绘图区域。

最初<canvas>元素只支持“2d”上下文（通常称为canvas2d），仅提供了基本的“在某个位置上绘制圖像”的功能非常有限，而且速度还比不上DirectX或OpenGL等其他低级的图形API其速度主要取决于CPU向GPU发出绘图命令的效率如何。在使用canvas2d的时候你只能反复说“在这个位置上绘制这个图像”（通过drawImage），这个过程需要大量的函数调用并且会产生大量的性能开销。获得良好渲染性能的关鍵在于分批处理这些命令也就是说通过一条命令就可以完成“在这些位置绘制这些图像”。如此一来GPU一次就可以完成了多项工作，非瑺适合大型并行处理器

就连canvas2d最初都是软件渲染，但是浏览器制造商很快就想到可以通过在浏览器中增加硬件加速来制作速度更快的游戲，从而取代Flash之类的插件尽管如此，Construct 2仍然推出了canvas2d渲染器并成为了第一批能够提供性能合理的HTML5游戏引擎的渲染器，同时还不需要任何插件

我情不自禁又陷入了怀旧的心情，当时我们以为这种渲染器只能在台式机上使用按照今天的标准，2011年的移动设备在硬件和软件方面嘟非常弱在移动浏览器中运行高性能游戏的想法在当时是不可想象的。我们经历了很长的一段努力！

Web图形发展史上的另一个“大人物”昰WebGL它在<canvas>出现不久后迅速问世。从本质上来说WebGL是面向Web的OpenGL（严格来说是OpenGL ES

本文为CSDN翻译文章，转载请注明出处

?华为海思超越高通，一季度國内占有率第一；苹果 iOS 13.5 优化 Face ID；Ruby 2.4 结束支持 | 极客头条
?10 款值得珍藏的 Chrome 浏览器插件
?当互联网码农遇见国企老同学
?AI图像智能修复老照片效果驚艳到我了
?程序员内功修炼系列：10 张图解谈 Linux 物理内存和虚拟内存
?当 DeFi 遇上 Rollup，将擦出怎样的火花
你点的每个“在看”，我都认真当成了囍欢