作者 | ASHLEY
译者 | 弯月&＃xff0c;责编 | 夕颜
出品 | CSDN&＃xff08;ID:CSDNnews&＃xff09;
近年来&＃xff0c;图形技术&＃xff08;包括Web上的图形技术&＃xff09;已经发生了翻天覆地的变化&＃xff0c;随着WebGPU的出现&＃xff0c;Web正处于下一次重大变革的风口浪尖上。在本文中&＃xff0c;我将简要介绍图像API的发展历史以及未来的走向。我还将重点介绍Construct——这项引领Web游戏引擎的尖端技术&＃xff0c;以及该技术这些年来的发展历程。
有关术语的几点说明
Construct的渲染器指的是将所有图形绘制到屏幕上的代码&＃xff0c;也称为渲染。说起渲染技术&＃xff0c;大多数现代设备都包含两个芯片&＃xff1a;
一般来讲&＃xff0c;CPU上的应用程序逻辑都会构建一个渲染指令列表&＃xff0c;然后将这些指令发送到GPU上快速执行&＃xff0c;因此两者都与渲染有关。如今&＃xff0c;GPU还有其他方面的专业用途&＃xff0c;例如AI。从广义上讲&＃xff0c;CPU的设计是为了有效地运行串行指令&＃xff08;一个接一个地运行指令&＃xff09;&＃xff0c;这是应用程序代码所特有的&＃xff0c;而GPU的目标是有效地运行并行指令&＃xff0c;在渲染中这种并行方式很常见&＃xff08;例如&＃xff0c;以相同的方式填充区域中的所有像素&＃xff09;。有些设备在同一块芯片上同时加载了CPU和GPU&＃xff0c;这种芯片称之为集成显卡&＃xff0c;但是用途不变。
CPU也可以自己渲染图形&＃xff0c;但由于这种芯片不是专门为渲染图形而设计的&＃xff0c;因此通常速度很慢&＃xff0c;所以我们还是应该尽可能使用GPU。在CPU上绘制图像称为软件渲染&＃xff0c;在GPU上绘制图像称为硬件加速。
另外&＃xff0c;还值得一提的是&＃xff0c;在使用Construct Classic之前&＃xff0c;我有丰富的在Windows上使用C&＃43;&＃43;和DirectX 9的经验。因此&＃xff0c;我很清楚游戏构建原生级高性能渲染器需要花费的时间。
早期的Web
从历史发展来看&＃xff0c;通常我们无法在Web上获得高性能的图形。浏览器通常都会使用软件渲染&＃xff0c;因此图形的处理速度往往非常慢。它们还缺少适当的功能&＃xff0c;这意味着游戏不得不采用效率低下的方式来实现图形功能&＃xff0c;例如移动HTML元素来实现动画。Flash是当时最佳的处理技术&＃xff0c;因此也成为了Web游戏的核心技术。
HTML5 Canvas
Construct 2于2011年2月首次发布&＃xff0c;当时HTML5刚刚开始起步。对于游戏来说&＃xff0c;HTML5最关键的功能就是。这个元素提供了绘制图像的屏幕区域&＃xff0c;而游戏制作就需要这样的绘图区域。
最初&＃xff0c;
就连canvas2d最初都是软件渲染&＃xff0c;但是浏览器制造商很快就想到&＃xff0c;可以通过在浏览器中增加硬件加速来制作速度更快的游戏&＃xff0c;从而取代Flash之类的插件。尽管如此&＃xff0c;Construct 2仍然推出了canvas2d渲染器&＃xff0c;并成为了第一批能够提供性能合理的HTML5游戏引擎的渲染器&＃xff0c;同时还不需要任何插件。
我情不自禁又陷入了怀旧的心情&＃xff0c;当时我们以为这种渲染器只能在台式机上使用。按照今天的标准&＃xff0c;2011年的移动设备在硬件和软件方面都非常弱。在移动浏览器中运行高性能游戏的想法在当时是不可想象的。我们经历了很长的一段努力&＃xff01;
WEBGL
Web图形发展史上的另一个“大人物”是WebGL&＃xff0c;它在
WebGL首次出现在2011年初发布的Chrome 9和Firefox 4中。同年11月&＃xff0c;我们首次在Construct 2 r68中发布了对WebGL渲染的支持。最初的基准测试表明&＃xff0c;WebGL比canvas2d快4倍&＃xff0c;后来又提高到可10-20倍之多&＃xff0c;这是一个巨大的提升&＃xff01;
此外&＃xff0c;WebGL的功能比较多&＃xff0c;而且还支持漂亮的着色效果。我们可以利用WebGL生成复杂的批处理命令&＃xff0c;例如一次性绘制几百个sprite&＃xff0c;这就是为什么它这么快的原因。早在2014年&＃xff0c;我就写了一篇文章描述Construct 2 WebGL的渲染器&＃xff0c;尽管有段时间了&＃xff0c;但依然可以透过这篇文章一窥WebGL渲染的优化以及批处理工作的原理。
过了几年后&＃xff0c;浏览器才开始全面支持WebGL。直到2014年iOS才添加了WebGL&＃xff0c;之后所有的台式机和移动浏览器才开始支持WebGL。起初甚至有些桌面系统都不支持WebGL&＃xff0c;IE11于2013年才添加了WebGL&＃xff0c;而等到每个人都升级到支持WebGL的IE11又是多年以后的事情了。因此&＃xff0c;我们不得不在Construct中同时支持canvas2d和WebGL。
实际上&＃xff0c;直到2018年底启动C3运行时后&＃xff0c;我们才算真正全面删除了canvas2d——我们全面转向WebGL&＃xff0c;并删除了所有canvas2d代码。那时WebGL已无处不在&＃xff0c;所以我们并没有真正的损失&＃xff0c;而且还大大简化了我们的代码库&＃xff0c;从那以后我们终于可以只关注一个渲染器了。&＃xff08;实际上&＃xff0c;Construct 3的C2运行时中仍保留了canvas2d的代码&＃xff01;&＃xff01;但是&＃xff0c;到2021年7月C2运行时将与Construct 2一起退休&＃xff0c;届时我们将在历时十年之后正式告别古老的canvas2d代码。&＃xff09;
WEBGL 2
WebGL 2是一项将WebGL的功能提高到与OpenGL ES 3.0同等水平的更新&＃xff08;WebGL 1与OpenGL ES 2.0同等水平&＃xff09;。WebGL 2在API中添加了很多功能&＃xff0c;但对于Construct来说&＃xff0c;这次更新的规模很小&＃xff0c;仅增加了一些次要的限制&＃xff0c;而且还允许我们通过调整引擎的某些部分来提高效率。对于2D游戏而言&＃xff0c;这次更新并不是那么重要&＃xff0c;但对于3D游戏而言&＃xff0c;这次更新可能更为重要。
WebGL 2最早出现在2017的Chrome 56和Firefox 51。从未得到过Internet Explorer或Edge的支持&＃xff0c;直到Edge切换到与Chrome相同的浏览器引擎&＃xff08;今年才发布&＃xff09;。令人惊讶的是&＃xff0c;到目前为止&＃xff0c;Safari仍未添加对WebGL 2的支持。尽管似乎仍在开发中&＃xff0c;但并不是特别重要&＃xff0c;因为如上所述&＃xff0c;WebGL 2只是Construct的一个不太重要的更新。同时&＃xff0c;苹果似乎确实在积极开发WebGPU&＃xff08;一种更高级的API&＃xff09;&＃xff0c;因此从长远来看重要性可能会更低&＃xff0c;但到后期可能会有所帮助。
由于在Construct中添加对WebGL 2的支持仅需一些简单的改动&＃xff0c;因此渲染器本身基本上没有变化。大多数现代设备都支持WebGL 2&＃xff0c;但如果不支持&＃xff0c;则Construct会切换回WebGL 1&＃xff0c;并且所有功能在很大程度上都相同。虽然我们不清楚具体的数字&＃xff0c;但大概有60%-80%的设备都支持WebGL 2&＃xff0c;因此需要WebGL 1的地方仍然很多&＃xff0c;但是与canvas2d不同&＃xff0c;支持WebGL 2无需大费周折。
WEBGPU
转眼&＃xff0c;我们就说到了现如今的情况&＃xff1a;使用WebGL 2或WebGL 1&＃xff0c;在Construct中获得高性能的图形处理。但是&＃xff0c;技术在不断改进&＃xff0c;目前正在开发的WebGPU可以为Web提供更快、更强大的图形技术&＃xff01;但是在了解WebGPU之前&＃xff0c;我们必须回顾一下原生图形技术的简要历史。
OPENGL
OpenGL是跨平台低层高性能图形技术&＃xff0c;WebGL就源于此&＃xff0c;这项技术非常古老。最初于1990年代初期开发。对于计算机来说&＃xff0c;这已经属于老古董了&＃xff01;实际上&＃xff0c;现代GPU的工作方式与当时截然不同&＃xff0c;但是OpenGL的许多核心概念并未改变。因此&＃xff0c;应用程序使用OpenGL的方式基本上与90年代大同小异&＃xff0c;而图形驱动程序&＃xff08;应用程序和硬件之间的软件&＃xff09;会将其转换为可以在GPU上运行的东西。
随着GPU变得越来越复杂和强大&＃xff0c;最终图形驱动程序不得不肩负很多非常复杂的工作。这会加剧图形驱动程序出现故障的概率&＃xff0c;而且在许多情况下还会变慢&＃xff0c;因为它们必须即时进行所有的工作。类似的命运也降临在DirectX身上&＃xff0c;尽管可能程度要轻一些&＃xff0c;因为微软有能力在整个DirectX的生命周期中进行重大升级。在之后的数十年里&＃xff0c;OpenGL的向后兼容性让人尤为头疼。
VULKAN
遇到无法克服的困难&＃xff0c;我们只能寻找替代方案。于是&＃xff0c;OpenGL背后的团队Khronos于2016年提出了全新的、完全重新设计的现代图形API&＃xff1a;Vulkan。这个API更加接近底层、更快、更简单&＃xff0c;而且更适合现代硬件。
然而&＃xff0c;这也意味着应用程序为了支持这个API&＃xff0c;必须完全重写所有图形处理代码。这种技术上的根本性转变需要花费数年的时间才能完成&＃xff0c;所以至今我们仍然能在很多地方看见OpenGL。
尽管Vulkan的设计目标是成为能在所有系统上运行的标准API&＃xff0c;但作为长期的标准&＃xff0c;苹果提出了适用于iOS和macOS的Metal&＃xff0c;微软也提出了针对Windows和Xbox的DirectX 12。两者的出发点与Vulkan差不多&＃xff1a;抛掉所有的历史包袱&＃xff0c;设计一个新的底层API更加接近现代硬件的工作方式。
再来说说WEBGPU
随着图形处理技术迈向新一代API&＃xff0c;接下来我们要面对的问题就是通过Web做些什么。WebGL其实就是带有很多相同缺陷的OpenGL&＃xff0c;而诸如Construct之类的高性能Web游戏引擎则可以从新一代图形API中受益良多。
不幸的是&＃xff0c;与OpenGL不同&＃xff0c;Vulkan遇到了麻烦&＃xff0c;由于苹果的问题未能真正实现跨平台。尽管有第三方库&＃xff0c;但iOS和macOS仅支持Metal&＃xff0c;而Vulkan没有得到苹果官方支持。此外&＃xff0c;就连Vulkan本身也不是特别适合Web&＃xff1a;它太底层&＃xff0c;甚至涉及GPU内存分配器之类的细节&＃xff0c;以致于3A游戏引擎无法发挥最大的性能。并非Vulkan的所有功能都适用于Web平台&＃xff0c;安全性也是浏览器中更为重要的关注点。
因此&＃xff0c;解决办法是专为Web设计全新的API&＃xff0c;不仅能够满足浏览器的使用和安全&＃xff0c;而且还能在Vulkan、Metal和DirectX 12任何一个之上实现。这就是WebGPU&＃xff0c;而且它似乎是唯一真正的跨平台现代底层图形API。虽然仍在开发中&＃xff0c;但所有主流的浏览器供应商都在使用&＃xff08;包括苹果&＃xff09;&＃xff0c;而且都在试验实现。另外&＃xff0c;我一直在为Construct构建WebGPU渲染器的原型&＃xff01;今后会越做越好。
总结
本文涵盖了Web图形技术的发展历史&＃xff0c;还介绍了WebGPU的最新进展。请注意&＃xff0c;WebGPU仍是一项正在积极开发中的实验性技术。在正式发布之前&＃xff0c;还有很多工作要做&＃xff0c;所以就让我们拭目以待吧。
原文链接&＃xff1a;
https://www.construct.net/en/blogs/ashleys-blog-2/brief-history-graphics-web-1517
本文为CSDN翻译文章&＃xff0c;转载请注明出处。
更多精彩推荐☞华为海思超越高通&＃xff0c;一季度国内占有率第一&＃xff1b;苹果 iOS 13.5 优化 Face ID&＃xff1b;Ruby 2.4 结束支持 | 极客头条
☞10 款值得珍藏的 Chrome 浏览器插件
☞当互联网码农遇见国企老同学
☞AI图像智能修复老照片&＃xff0c;效果惊艳到我了
☞程序员内功修炼系列&＃xff1a;10 张图解谈 Linux 物理内存和虚拟内存
☞当 DeFi 遇上 Rollup&＃xff0c;将擦出怎样的火花&＃xff1f;
你点的每个“在看”&＃xff0c;我都认真当成了喜欢
京公网安备 11010802041100号