iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 34

[Re:PixiJS - Day34] 不同手機使用 PixiJS 的各種問題

PixiJS 使用 canvas / WebGL 渲染畫面,只要支援 canvas / WebGL 的裝置大部分來說沒有問題,
但還是會在一些細節部分有差異


Samsung 手機使用 PixiJS 會是全黑的畫面:


製作專案時有遇到同樣問題,遇到問題的機型是 Samsung Galaxy S8

討論與解決方式:


Google Pixel 特別容易觸發感應:

不一定會對專案造成影響,但因為不同手機操作起來有差異
對於使用者體驗上有差

先前文章有討論過:


iOS 與 android 效能差異:

就效能上的測試,iPhone 6 Plus 測試的效能確實較差
相關討論:

也許是硬體與優化上的差異,同年度差不多等級的手機來說 android 系統可能較 iOS 表現較佳


官方效能優化建議:

有些細節在先前文章討論過,就不在這篇特別說明


官方效能測試工具:

測試一些設定下,跑一定數量的元件時的效能表現


自己的一些優化心得:

  • 優化 CPU 使用:如果畫面上有成千上萬的物件時,可能這時候跑不動的是 CPU 而不是 GPU,
    優化物件數量使用方式可優化效能
  • 優化 GPU 使用:各式濾鏡的實作為 GPU,減少濾鏡使用是優化 GPU 的方式
  • 頁面上有多個 PixiJS 實體時,將沒在使用的 PixiJS 停止PIXI.Application.stop()

今日小結:
列了一些不同手機的差異,提到了效能差異
想表示的是 canvas / WebGL 並無法無限上綱,還是會有效能的問題
除此之外,使用 canvas / WebGL 仍是個好的畫面呈現方式,視時機使用了


上一篇
[Re:PixiJS - Day33] 畫弧形時可能會有鋸齒的問圖
下一篇
[Re:PixiJS - Day35] PixiJS v5 預設不支援不支援 WebGL 的瀏覽器
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言