作者 | ASHLEY
譯者 | 彎月，責編 | 夕顏
出品 | CSDN（ID:CSDNnews）
近年來，圖形技術（包括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從歷史發展來看，通常我們無法在Web上獲得高性能的圖形。瀏覽器通常都會使用軟件渲染，因此圖形的處理速度往往非常慢。它們還缺少適當的功能，這意味著遊戲不得不採用效率低下的方式來實現圖形功能，例如移動HTML元素來實現動畫。
Flash是當時最佳的處理技術，因此也成為了Web遊戲的核心技術。
HTML5 CanvasConstruct 2於2011年2月首次發佈，當時HTML5剛剛開始起步。對於遊戲來說，HTML5最關鍵的功能就是元素。這個元素提供了繪製圖像的屏幕區域，而遊戲製作就需要這樣的繪圖區域。
最初，元素只支持“2d”上下文（通常稱為canvas2d），僅提供了基本的“在某個位置上繪製圖像”的功能，非常有限，而且速度還比不上DirectX或OpenGL等其他低級的圖形API。其速度主要取決於CPU向GPU發出繪圖命令的效率如何。在使用canvas2d的時候，你只能反覆說“在這個位置上繪製這個圖像”（通過drawImage），這個過程需要大量的函數調用，並且會產生大量的性能開銷。獲得良好渲染性能的關鍵在於分批處理這些命令，也就是說通過一條命令就可以完成“在這些位置繪製這些圖像”。如此一來，GPU一次就可以完成了多項工作，非常適合大型並行處理器。
就連canvas2d最初都是軟件渲染，但是瀏覽器製造商很快就想到，可以通過在瀏覽器中增加硬件加速來製作速度更快的遊戲，從而取代Flash之類的插件。儘管如此，Construct 2仍然推出了canvas2d渲染器，併成為了第一批能夠提供性能合理的HTML5遊戲引擎的渲染器，同時還不需要任何插件。
我情不自禁又陷入了懷舊的心情，當時我們以為這種渲染器只能在臺式機上使用。按照今天的標準，2011年的移動設備在硬件和軟件方面都非常弱。在移動瀏覽器中運行高性能遊戲的想法在當時是不可想象的。我們經歷了很長的一段努力！
WEBGLWeb圖形發展史上的另一個“大人物”是WebGL，它在出現不久後迅速問世。從本質上來說，WebGL是面向Web的OpenGL（嚴格來說是OpenGL ES 2.0）。OpenGL是類似於DirectX的低級原生級圖形API。如果你十分看重高性能的圖形技術，那麼WebGL是不二的選擇。很明顯，WebG是當時Web遊戲引擎的基本功能。
WebGL首次出現在2011年初發布的Chrome 9和Firefox 4中。同年11月，我們首次在Construct 2 r68中發佈了對WebGL渲染的支持。最初的基準測試表明，WebGL比canvas2d快4倍，後來又提高到可10-20倍之多，這是一個巨大的提升！
此外，WebGL的功能比較多，而且還支持漂亮的著色效果。我們可以利用WebGL生成複雜的批處理命令，例如一次性繪製幾百個sprite，這就是為什麼它這麼快的原因。早在2014年，我就寫了一篇文章描述Construct 2 WebGL的渲染器，儘管有段時間了，但依然可以透過這篇文章一窺WebGL渲染的優化以及批處理工作的原理。
過了幾年後，瀏覽器才開始全面支持WebGL。直到2014年iOS才添加了WebGL，之後所有的臺式機和移動瀏覽器才開始支持WebGL。起初甚至有些桌面系統都不支持WebGL，IE11於2013年才添加了WebGL，而等到每個人都升級到支持WebGL的IE11又是多年以後的事情了。因此，我們不得不在Construct中同時支持canvas2d和WebGL。
實際上，直到2018年底啟動C3運行時後，我們才算真正全面刪除了canvas2d——我們全面轉向WebGL，並刪除了所有canvas2d代碼。那時WebGL已無處不在，所以我們並沒有真正的損失，而且還大大簡化了我們的代碼庫，從那以後我們終於可以只關注一個渲染器了。（實際上，Construct 3的C2運行時中仍保留了canvas2d的代碼！！但是，到2021年7月C2運行時將與Construct 2一起退休，屆時我們將在歷時十年之後正式告別古老的canvas2d代碼。）
WEBGL 2WebGL 2是一項將WebGL的功能提高到與OpenGL ES 3.0同等水平的更新（WebGL 1與OpenGL ES 2.0同等水平）。WebGL 2在API中添加了很多功能，但對於Construct來說，這次更新的規模很小，僅增加了一些次要的限制，而且還允許我們通過調整引擎的某些部分來提高效率。對於2D遊戲而言，這次更新並不是那麼重要，但對於3D遊戲而言，這次更新可能更為重要。
WebGL 2最早出現在2017的Chrome 56和Firefox 51。從未得到過Internet Explorer或Edge的支持，直到Edge切換到與Chrome相同的瀏覽器引擎（今年才發佈）。令人驚訝的是，到目前為止，Safari仍未添加對WebGL 2的支持。儘管似乎仍在開發中，但並不是特別重要，因為如上所述，WebGL 2只是Construct的一個不太重要的更新。同時，蘋果似乎確實在積極開發WebGPU（一種更高級的API），因此從長遠來看重要性可能會更低，但到後期可能會有所幫助。
由於在Construct中添加對WebGL 2的支持僅需一些簡單的改動，因此渲染器本身基本上沒有變化。大多數現代設備都支持WebGL 2，但如果不支持，則Construct會切換回WebGL 1，並且所有功能在很大程度上都相同。雖然我們不清楚具體的數字，但大概有60%-80%的設備都支持WebGL 2，因此需要WebGL 1的地方仍然很多，但是與canvas2d不同，支持WebGL 2無需大費周折。
WEBGPU轉眼，我們就說到了現如今的情況：使用WebGL 2或WebGL 1，在Construct中獲得高性能的圖形處理。但是，技術在不斷改進，目前正在開發的WebGPU可以為Web提供更快、更強大的圖形技術！但是在瞭解WebGPU之前，我們必須回顧一下原生圖形技術的簡要歷史。OPENGLOpenGL是跨平臺低層高性能圖形技術，WebGL就源於此，這項技術非常古老。最初於1990年代初期開發。對於計算機來說，這已經屬於老古董了！實際上，現代GPU的工作方式與當時截然不同，但是OpenGL的許多核心概念並未改變。因此，應用程序使用OpenGL的方式基本上與90年代大同小異，而圖形驅動程序（應用程序和硬件之間的軟件）會將其轉換為可以在GPU上運行的東西。
隨著GPU變得越來越複雜和強大，最終圖形驅動程序不得不肩負很多非常複雜的工作。這會加劇圖形驅動程序出現故障的概率，而且在許多情況下還會變慢，因為它們必須即時進行所有的工作。類似的命運也降臨在DirectX身上，儘管可能程度要輕一些，因為微軟有能力在整個DirectX的生命週期中進行重大升級。在之後的數十年裡，OpenGL的向後兼容性讓人尤為頭疼。
VULKAN
遇到無法克服的困難，我們只能尋找替代方案。於是，OpenGL背後的團隊Khronos於2016年提出了全新的、完全重新設計的現代圖形API：Vulkan。這個API更加接近底層、更快、更簡單，而且更適合現代硬件。
然而，這也意味著應用程序為了支持這個API，必須完全重寫所有圖形處理代碼。這種技術上的根本性轉變需要花費數年的時間才能完成，所以至今我們仍然能在很多地方看見OpenGL。
儘管Vulkan的設計目標是成為能在所有系統上運行的標準API，但作為長期的標準，蘋果提出了適用於iOS和macOS的Metal，微軟也提出了針對Windows和Xbox的DirectX 12。兩者的出發點與Vulkan差不多：拋掉所有的歷史包袱，設計一個新的底層API更加接近現代硬件的工作方式。
再來說說WEBGPU隨著圖形處理技術邁向新一代API，接下來我們要面對的問題就是通過Web做些什麼。WebGL其實就是帶有很多相同缺陷的OpenGL，而諸如Construct之類的高性能Web遊戲引擎則可以從新一代圖形API中受益良多。
不幸的是，與OpenGL不同，Vulkan遇到了麻煩，由於蘋果的問題未能真正實現跨平臺。儘管有第三方庫，但iOS和macOS僅支持Metal，而Vulkan沒有得到蘋果官方支持。此外，就連Vulkan本身也不是特別適合Web：它太底層，甚至涉及GPU內存分配器之類的細節，以致於3A遊戲引擎無法發揮最大的性能。並非Vulkan的所有功能都適用於Web平臺，安全性也是瀏覽器中更為重要的關注點。
因此，解決辦法是專為Web設計全新的API，不僅能夠滿足瀏覽器的使用和安全，而且還能在Vulkan、Metal和DirectX 12任何一個之上實現。這就是WebGPU，而且它似乎是唯一真正的跨平臺現代底層圖形API。雖然仍在開發中，但所有主流的瀏覽器供應商都在使用（包括蘋果），而且都在試驗實現。另外，我一直在為Construct構建WebGPU渲染器的原型！今後會越做越好。
總結
本文涵蓋了Web圖形技術的發展歷史，還介紹了WebGPU的最新進展。請注意，WebGPU仍是一項正在積極開發中的實驗性技術。在正式發佈之前，還有很多工作要做，所以就讓我們拭目以待吧。
原文鏈接：
https://www.construct.net/en/blogs/ashleys-blog-2/brief-history-graphics-web-1517
本文為CSDN翻譯文章，轉載請註明出處。
☞華為海思超越高通，一季度國內佔有率第一；蘋果 iOS 13.5 優化 Face ID；Ruby 2.4 結束支持 | 極客頭條 ☞10 款值得珍藏的 Chrome 瀏覽器插件 ☞當互聯網碼農遇見國企老同學 ☞AI圖像智能修復老照片，效果驚豔到我了 ☞程序員內功修煉系列：10 張圖解談 Linux 物理內存和虛擬內存 ☞當 DeFi 遇上 Rollup，將擦出怎樣的火花？
