pixi與lottie-web的benchmark測試

 生產版本

 

"dependencies" : {      "lottie-web" :  "^5.5.7" ,      "pixi-spine" :  "^1.5.23" ,      "pixi.js" :  "^4.8.8" }

 

講座項目對資源作對比

ps:測試網絡環境:fast 3g

庫	gzip大小	打包使用的資源	資源數	加載方式	繪製	FP	onload
pixi&pixi-spine	34.08+77.04 = 121.12kb	147kb	4	xhr	webGL/canvas	1409ms	15147ms
lottie-web	61.5kb	291 +41 = 332kb	30	非xhr	canvas/svg	1416ms	13978ms

pixi

      Pixi 是一個至關完善的基於 WebGL 的 2D 渲染層，對不支持 WebGL 瀏覽器可採用 Canvas 墊背（2D WebGL renderer with canvas fallback）。

       設計理念 Pixi.js的設計理念不少程度來源於它的定位，只作渲染器，要把渲染功能作到最強。而這樣的定位，則會讓Pixi.js成爲其餘引擎的渲染內核。Pixi.js中的顯示架構徹底參考Flash設計，全部顯示對象組合爲一個樹狀數據結構，但內部已針對WebGL渲染方式進行過優化，上層使用起來和Flash並沒有太大差異。

業界使用

Phaser並無本身的渲染內核，而是直接引用了Pixi.js。

 

渲染壓力測試

測試內容爲同屏渲染對象數量相同的狀況下進行幀頻數據對比，爲了保證測試的公平性，我使用同一臺電腦，相同版本的Chrome瀏覽器進行測試，遊戲場景尺寸均爲800*600，顯示的圖片也爲同一張。

100、300、500、600、1000、2000、3000個顯示對象渲染。

 電腦配置

 

庫/顯示對象數量	100	300	500	600	1000	2000	2500	3000
pixi	60	60	60	59.9	59	35	32	28
lottie-web(canvas)	55	40	36	24	10	-	-	-
lottie-web(svg)	40	25	10	-	-	-	-	-

結論

對與顯示對象小於600的,pixi與lottie在可接受範圍內,對於大於600個渲染對象的項目,須要使用pixi

對於小於100個顯示對象的,三種渲染方式均可行,但pixi要優於lottie-web

 

 測試代碼

require('pixi.js')
 
var renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 
document.body.appendChild(renderer.view);
 
var stage = new PIXI.Container();
 
var texture = PIXI.Texture.fromImage('./lottie-assets/images/img_0.png');
 
var tnum = 1000;
 
console.log("render Object Number:", tnum);
 
var bunnys = [];
 
for (var i = 0; i < tnum; i++) {
 
  var bunny = new PIXI.Sprite(texture);
 
  bunny.position.x = Math.random() * 800;
 
  bunny.position.y = Math.random() * 600;
 
  stage.addChild(bunny);
 
  bunnys.push(bunny);
 
}
 
animate();
 
function animate() {
 
  requestAnimationFrame(animate);
 
  for (var i = 0; i < tnum; i++) {
 
    // bunnys[i].rotation += 0.1;
 
  }
  renderer.render(stage);
}

　　

import lottie from 'lottie-web'
 
animate();
 
function animate() {
 
  requestAnimationFrame(animate);
  lottie.loadAnimation({
    container: document.body, // the dom element that will contain the animation
    renderer: 'canvas',
    loop: false,
    autoplay: true,
    path: './lottie-assets/data1.json' // the path to the animation json
  });
  var timer = null;
  clearTimeout(timer)
  timer = setTimeout(function () {
    lottie.destroy();
  },2000)
}