iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 24

[PixiJS - Day-24] 在專案上運用 PixiJS,以及各版本瀏覽器相容的作法

在專案上使用 PixiJS,大致上分做幾種情況:
1. 全站 PixiJS:
alt
適用情形:使用 PixiJS 開發遊戲類型的網站
前幾天上線的 【 奔跑吧!台北 】跌倒以後,爬起來再繼續跑就好!
就是全站都是 PixiJS 的開發方式
https://game.glory.taipei/
alt


2. 網站內同時有 PixiJS 與各種 HTML 元素:
alt

PixiJS 可以實做出很多功能,但實際上不一定要全站皆使用 PixiJS 製作。
UI 部分使用 <li><input> 等 HTML Elements 製作,就能活用各種 HTML Elements 的特性,也能讓 PixiJS 專注在處理畫面

先前介紹的 Google Doodle - 奧斯卡費辛格 117 歲冥誕
就是同時有 PixiJS 與各種 HTML 元素的開發方式
https://www.google.com/doodles/oskar-fischingers-117th-birthday

alt
alt


3. 頁面上多個 PixiJS:
alt
3. 與 2. 基本上沒有太多差異,主要是將 PixiJS 的角色再縮小.僅把 PixiJS 當作部分元件製作(例如按鈕)

客戶想要掃光的按鈕時,使用 PixiJS 製作也是種方法


瀏覽器相容
由於 PixiJS 使用 WebGL 技術,而 WebGL 在 canvas 上運作

處理瀏覽器相容時,考量為:

  • 支援 WebGL 的情形
  • 不支援 WebGL 但支援 canvas 時
  • 不支援 WebGL 與 canvas 時

- 支援 WebGL 的情形:
目前主流 PC / 手機瀏覽器都支援 WebGL

PC:

  • IE 11 以上:支援

  • IE 10:可運作 WebGL,但效能不太好

  • IE 10 以下: 不支援 WebGL,可在 PixiJS 程式碼裡檢查瀏覽器是否支援 WebGL

  • Safari 8 以上:支援

手機:

  • iOS8以上版本

從頁面上檢查 PixiJS 運作的版本:
方法1:

app.renderer instanceof PIXI.WebGLRenderer

檢查 app.renderer 是否為 PIXI.WebGLRenderer

方法2:

PIXI.utils.isWebGLSupported()

實際上 PIXI 在初始化 renderer 時也是使用 PIXI.utils.isWebGLSupported 來檢查瀏覽器是否支援 WebGL。
可參考先前文章 - 起手式:View 與 Renderer


- 不支援 WebGL 但支援 canvas 的情形:

在先前文章 - PixiJS 粒子效果例子裡,就算都是用 PC 看,看到的物件數量不同
alt
頁面上做了 renderer 的判斷,如果是 WebGL 模式,運算的元件數量與使用的效果會比較多

var totalSprites = app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;

有的網頁在不支援 WebGL 的瀏覽器時,另外製作了適合 canvas 瀏覽,
而非單純簡化 WebGL 效果的頁面

- 不支援 WebGL 與 canvas 的瀏覽器:
通常使用 WebGL 的網頁,會建議使用者使用建議的瀏覽器版本
如果使用的瀏覽器不支援 WebGL,頁面上也會提示使用者換個瀏覽器瀏覽


瀏覽器相容:
之前執行過考慮瀏覽器支援的專案:
頁面上有數個 PixiJS 製作的按鈕
alt
alt
分作三層:

  • 粒子效果是 PixiJS
  • 閃爍部分是 CSS Animation
  • 連結與點擊事件是 <a>

支援 WebGL 頁面時就會看到如 Gif 的效果,
僅支援 canvas 但不支援 WebGL 時,有 CSS Animation 的效果
都不支援的時候, <a> 也可正常執行


接下來會到系列文的第三部分:PixiJS 實作

大部分我使用過的功能已在前面的文章討論過,實作的部份會分享我在思考執行某些效果時,將各個部分拆開來處理的心得


上一篇
[PixiJS - Day-23] 將 PixiJS 的畫面匯出
下一篇
[PixiJS - Day-25] 實作:基本繪圖、動態與使用 dat.GUI 測試
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

尚未有邦友留言

立即登入留言