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
2
3
This helper function will automatically detect which renderer you should be using.
WebGL is the preferred renderer as it is a lot faster. If WebGL is not supported by
the browser then this function will return a canvas renderer

該功能將會幫助你自動選擇要使用哪一種渲染方式。
而 WebGL 是首要選項,主要原因是他的速度較快,所以你可以體驗到較好的使用者體驗。
假使若瀏覽器不支援 WebGL,將會自動改使用原生的 Canvas 來渲染。


而主要關鍵程式碼說明在這裡

1
@return {PIXI.Renderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer

在前一篇我們有了解到該如何查看目前版本以及使用的引擎,只需要開啟瀏覽器查看 Console devTools

目前版本以及使用的引擎

另一種方式則是使用程式碼的方式

1
2
3
4
5
6
document.getElementById('webgl').textContent = `是否支援 WebGL: ${PIXI.utils.isWebGLSupported()}`;

// 0:unknown
// 1:WebGL
// 2:canvas
document.getElementById('type').textContent = `目前模式:${app.renderer.type}`;

See the Pen PIXI 查看版本(3) by HF (@hsiangfeng) on CodePen.

參考文獻