Merge pull request #28 from galacean/feat/addPixi

Add sprte and text benchmark for pixi.js

package.json

@@ -16,6 +16,7 @@
     "@types/three": "^0.164.0",
     "babylonjs": "^7.6.0",
     "dat.gui": "^0.7.9",
+    "pixi.js": "^8.1.8",
     "stats.js": "^0.17.0",
     "three": "^0.164.1",
     "three-nebula": "^10.0.3",

src/galacean/sprite-benchmark.ts

@@ -8,13 +8,14 @@ import {
   Camera,
   Script,
   Sprite,
+  SpriteAtlas,
   SpriteRenderer,
   Texture2D,
   WebGLEngine,
 } from "@galacean/engine";
 
 class Rotate extends Script {
-  speed = 30;
+  speed = 60;
   onUpdate(dt: number): void {
     this.entity.transform.rotation.z += this.speed * dt;
   }
@@ -35,16 +36,17 @@ WebGLEngine.create({
   camera.orthographicSize = (engine.canvas.height * 0.5) / 100;
 
   engine.resourceManager
-    .load<Texture2D>({
-      url: "https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*YwyMRq8_O-4AAAAAAAAAAAAADjCHAQ/original",
-      type: AssetType.Texture2D,
+    .load<SpriteAtlas>({
+      url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*s_FUSawb0sgAAAAAAAAAAAAADkp5AQ/SpriteAtlas.json",
+      type: AssetType.SpriteAtlas,
     })
-    .then((texture: Texture2D) => {
-      const sprite = new Sprite(engine, texture);
+    .then((atlas: SpriteAtlas) => {
+      const sprite1 = atlas.getSprite("/tex1-spr.png");
+      const sprite2 = atlas.getSprite("/tex2-spr.png");
 
-      const col = 22;
+      const col = 88;
       const row = 90;
-      const offsetX = 0.38;
+      const offsetX = 0.1;
       const offsetY = 0.2;
       // 中心点所在行列
       const centerX = col * 0.5;
@@ -55,10 +57,11 @@ WebGLEngine.create({
           const entity = rootEntity.createChild(`sprite-${i}`);
           const sr = entity.addComponent(SpriteRenderer);
           entity.addComponent(Rotate);
-          sr.sprite = sprite;
+          sr.sprite = i % 2 === 0 ? sprite1 : sprite2;
           sr && (sr.priority = index++);
           const transform = entity.transform;
-          transform.setScale(0.2, 0.2, 0.2);
+          const scale = 0.075;
+          transform.setScale(scale, scale, scale);
           transform.setPosition(
             (j - centerX) * offsetX,
             (i - centerY) * offsetY,

src/pixi/sprite-benchmark.ts

@@ -0,0 +1,63 @@
+/**
+ * @title Sprite
+ * @category Benchmark
+ */
+
+import * as PIXI from "pixi.js";
+
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+const app = new PIXI.Application();
+app
+  .init({
+    canvas: canvas,
+    resizeTo: window,
+    width: canvas.width,
+    height: canvas.height,
+  })
+  .then(() => {
+    PIXI.Assets.load([
+      {
+        src: "https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*YwyMRq8_O-4AAAAAAAAAAAAADjCHAQ/original",
+        loadParser: "loadTextures",
+      },
+      {
+        src: "https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*ClJLS6U4HtsAAAAAAAAAAAAADjCHAQ/original",
+        loadParser: "loadTextures",
+      },
+    ]).then((textureRecord) => {
+      const col = 88;
+      const row = 90;
+      const offsetX = 5;
+      const offsetY = 10;
+      // 中心点所在行列
+      const centerX = col * 0.5;
+      const centerY = row * 0.5;
+      // 屏幕宽高
+      const screen = app.screen;
+      const halfWidth = screen.width * 0.5;
+      const halfHeight = screen.height * 0.5;
+      const sprites = [];
+      const texture1 =
+        textureRecord[
+          "https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*YwyMRq8_O-4AAAAAAAAAAAAADjCHAQ/original"
+        ];
+      const texture2 = textureRecord['https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*ClJLS6U4HtsAAAAAAAAAAAAADjCHAQ/original'];
+      for (let i = 0; i < row; ++i) {
+        for (let j = 0; j < col; ++j) {
+          const sprite = new PIXI.Sprite(i % 2 === 0 ? texture1 : texture2);
+          app.stage.addChild(sprite);
+          sprite.scale = 0.045;
+          sprite.anchor.set(0.5, 0.5);
+          sprite.x = halfWidth + (j - centerX) * offsetX + 5;
+          sprite.y = halfHeight + (i - centerY) * offsetY + 10;
+          sprites.push(sprite);
+        }
+      }
+
+      app.ticker.add((time) => {
+        for (let i = 0, n = sprites.length; i < n; ++i) {
+          sprites[i].rotation += 0.01 * time.deltaTime;
+        }
+      });
+    });
+  });

src/pixi/text-benchmark.ts

@@ -0,0 +1,55 @@
+/**
+ * @title Text
+ * @category Benchmark
+ */
+
+import * as PIXI from "pixi.js";
+
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+const app = new PIXI.Application();
+app
+  .init({
+    canvas: canvas,
+    resizeTo: window,
+    width: canvas.width,
+    height: canvas.height,
+  })
+  .then(() => {
+    const col = 22;
+    const row = 90;
+    const offsetX = 20;
+    const offsetY = 10;
+    // 中心点所在行列
+    const centerX = col * 0.5;
+    const centerY = row * 0.5;
+    // 屏幕宽高
+    const screen = app.screen;
+    const halfWidth = screen.width * 0.5;
+    const halfHeight = screen.height * 0.5;
+    const texts = [];
+    const style = new PIXI.TextStyle({
+      fontFamily: "Arial",
+      fontSize: 20,
+      fill: 0xffffff,
+    });
+    for (let i = 0; i < row; ++i) {
+      for (let j = 0; j < col; ++j) {
+        const text = new PIXI.Text({
+          text: "hello",
+          style,
+        });
+        app.stage.addChild(text);
+        text.anchor.set(0.5, 0.5);
+        text.scale = 0.8;
+        text.x = halfWidth + (j - centerX) * offsetX + 10;
+        text.y = halfHeight + (i - centerY) * offsetY + 10;
+        texts.push(text);
+      }
+    }
+
+    app.ticker.add((time) => {
+      for (let i = 0, n = texts.length; i < n; ++i) {
+        texts[i].rotation += 0.01 * time.deltaTime;
+      }
+    });
+  });