PixiJS V5 教學 (2) - WebGL 以及 Renderer
前言
這一篇會介紹一下前一篇沒有介紹的地方,舉例來講 WebGL 是什麼以及 Renderer 等語法跟說明。
WebGL
WebGL 在前面有介紹是 JavaScript 的 API 的一種,簡單講 WebGL 可以將影像、圖片處理和特效都採用 GPU 進行渲染並成為網頁 Canvas 的一部分,這時候你可能還會說「我知道 CPU,但是 GPU 是什麼?」
CPU 全名為 Central Processing Unit,中文是中央處理器,簡單講就是電腦的心臟啦~
那 GPU 呢?GPU 則是 Graphics Processing Unit,中文是圖形處理器,也就是你 PC 電腦中常見的顯示卡。
而 WebGL 就是使用你的顯示卡來處理 Canvas 的影像進而達到較好的體驗效果,否則使用原本的 Canvas 是有可能會較延遲。
Renderer
為什麼要特別拉回來講 WebGL 呢?
主要原因是在前面我們有使用到 app.renderer.backgroundColor = 0x00CC99;
、app.renderer.resize(400, 400);
等語法,其中 Renderer 的意思就是渲染的意思,而 PIXI Renderer 的渲染有兩種方式,讓我們翻一下 PIXI 原始碼
官方註解就有寫很多,我這邊就擷取一小段稍微弱弱的翻譯就好。
1 | This helper function will automatically detect which renderer you should be using. |
該功能將會幫助你自動選擇要使用哪一種渲染方式。
而 WebGL 是首要選項,主要原因是他的速度較快,所以你可以體驗到較好的使用者體驗。
假使若瀏覽器不支援 WebGL,將會自動改使用原生的 Canvas 來渲染。
而主要關鍵程式碼說明在這裡
1 | @return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer |
在前一篇我們有了解到該如何查看目前版本以及使用的引擎,只需要開啟瀏覽器查看 Console devTools
另一種方式則是使用程式碼的方式
1 | document.getElementById('webgl').textContent = `是否支援 WebGL: ${PIXI.utils.isWebGLSupported()}`; |
See the Pen PIXI 查看版本(3) by HF (@hsiangfeng) on CodePen.