PixiJS V5 教學 (2) - WebGL 以及 Renderer

發表於 更新於 分類於
這一篇會介紹一下前一篇沒有介紹的地方，舉例來講 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.

參考文獻