Add spine benchmark for pixi threejs and new galacean spine version

package.json

@@ -9,11 +9,13 @@
     "@babylonjs/gui": "^7.8.0",
     "@babylonjs/havok": "^1.3.4",
     "@babylonjs/loaders": "^7.6.0",
-    "@galacean/engine": "^1.2.0-beta.5",
-    "@galacean/engine-physics-lite": "^1.2.0-beta.5",
-    "@galacean/engine-physics-physx": "^1.2.0-beta.5",
+    "@esotericsoftware/spine-pixi-v8": "~4.2.0",
+    "@esotericsoftware/spine-threejs": "^4.2.70",
+    "@galacean/engine": "alpha",
+    "@galacean/engine-physics-lite": "^1.3.0",
+    "@galacean/engine-physics-physx": "^1.3.0",
+    "@galacean/engine-spine": "alpha",
     "@galacean/engine-toolkit": "^1.2.0-beta",
-    "@galacean/engine-spine": "1.1.0-beta.23",
     "@types/three": "^0.164.0",
     "babylonjs": "^7.6.0",
     "dat.gui": "^0.7.9",

src/galacean/spine-benchmark.ts

@@ -4,7 +4,7 @@
  */
 
 import { Camera, Vector3, WebGLEngine } from "@galacean/engine";
-import { SpineRenderer } from "@galacean/engine-spine";
+import { SpineAnimationRenderer, SpineResource } from "@galacean/engine-spine";
 
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   engine.canvas.resizeByClientSize();
@@ -14,30 +14,22 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
   // camera
   const cameraEntity = rootEntity.createChild("camera_node");
   const camera = cameraEntity.addComponent(Camera);
-  cameraEntity.transform.position = new Vector3(0, 0, 10);
-  camera.isOrthographic = true;
-  camera.orthographicSize = 3.5;
+  cameraEntity.transform.position = new Vector3(0, 0, 20);
 
   engine.resourceManager
     .load({
-      urls: [
-        "https://gw.alipayobjects.com/os/OasisHub/a66ef194-6bc8-4325-9a59-6ea9097225b1/1620888427489.json",
-        "https://gw.alipayobjects.com/os/OasisHub/a1e3e67b-a783-4832-ba1b-37a95bd55291/1620888427490.atlas",
-        "https://gw.alipayobjects.com/zos/OasisHub/a3ca8f62-1068-43a5-bb64-5c9a0f823dde/1620888427490.png",
-      ],
+      url: "/spineboy.json",
       type: "spine",
     })
-    .then((spineResouce: any) => {
-      const spineEntity = rootEntity.createChild("spine");
-      spineEntity.transform.setPosition(-1.75, -1, 0);
-      spineEntity.transform.setScale(0.5, 0.5, 0.5);
-      const spineRenderer = spineEntity.addComponent(SpineRenderer);
-      spineRenderer.resource = spineResouce;
-      spineRenderer.scale = 0.01;
-      spineRenderer.animationName = "run";
+    .then((spineResouce: SpineResource) => {
+      const spineEntity = spineResouce.instantiate();
+      const spine = spineEntity.getComponent(SpineAnimationRenderer) as SpineAnimationRenderer;
+      spine.defaultConfig.animationName = 'walk';
       for (let i = 0; i < 300; i++) {
         const clone = spineEntity.clone();
-        clone.transform.setPosition(-1.75 + i * 0.01, -1, 0);
+        clone.transform.setPosition(-3 + i * 0.02, -2, 0);
+        const renderer = clone.getComponent(SpineAnimationRenderer) as SpineAnimationRenderer;
+        renderer.priority = i;
         rootEntity.addChild(clone);
       }
     });

src/pixi/spine-benchmark.ts

@@ -0,0 +1,40 @@
+/**
+ * @title Spine
+ * @category Benchmark
+ */
+
+import * as PIXI from "pixi.js";
+import { Spine } from '@esotericsoftware/spine-pixi-v8';
+
+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.add({alias: "spineboyData", src: "/spineboy.json"});
+    PIXI.Assets.add({alias: "spineboyAtlas", src: "/spineboy.atlas"});
+    PIXI.Assets.load(["spineboyData", "spineboyAtlas"]).then(() => {
+      const spineboy = Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas",
+        scale: 0.5,
+      });
+      spineboy.state.setAnimation(0, "run", true);
+      spineboy.x = window.innerWidth / 2;
+      spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+      const clones = 300; // Number of clones
+      for (let i = 1; i < clones; i++) {
+        const clone = Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas",
+          scale: 0.8,
+        });
+        clone.state.setAnimation(0, "walk", true);
+        clone.x = -180 + spineboy.x + i * 1.5;
+        clone.y = spineboy.y;
+        app.stage.addChild(clone);
+      }
+    });
+  });

src/three/spine-benchmark.ts

@@ -0,0 +1,95 @@
+/**
+ * @title Spine
+ * @category Benchmark
+ */
+
+import * as THREE from "three";
+import * as spine from "@esotericsoftware/spine-threejs";
+
+let scene, camera, renderer;
+let geometry, material, mesh, skeletonMesh;
+let atlas;
+let atlasLoader;
+let assetManager;
+let canvas;
+let controls;
+let lastFrameTime = Date.now() / 1000;
+
+let baseUrl = "/";
+let skeletonFile = "spineboy.json";
+let atlasFile = "spineboy.atlas";
+let animation = "walk";
+
+let cloneGroup = [];
+let cloneCount = 100;
+
+function init() {
+    canvas = document.getElementById("canvas") as HTMLCanvasElement;
+    let width = window.innerWidth,
+    height = window.innerHeight;
+    camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
+    camera.position.z = 400;
+    scene = new THREE.Scene();
+    renderer = new THREE.WebGLRenderer({ canvas });
+    renderer.setSize(width, height);
+
+    assetManager = new spine.AssetManager(baseUrl);
+    assetManager.loadText(skeletonFile);
+    assetManager.loadTextureAtlas(atlasFile);
+
+    requestAnimationFrame(load);
+}
+
+function load() {
+    if (assetManager.isLoadingComplete()) {
+    atlas = assetManager.require(atlasFile);
+    atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+    let skeletonJson = new spine.SkeletonJson(atlasLoader);
+    skeletonJson.scale = 0.4;
+    let skeletonData = skeletonJson.readSkeletonData(
+        assetManager.require(skeletonFile)
+    );
+    for (let i = 0; i < cloneCount; i ++) {
+      const clone = new spine.SkeletonMesh({ skeletonData });
+      clone.position.x = -100 + i * 2;
+      clone.position.y = -100
+      clone.state.setAnimation(0, animation, true);
+      scene.add(clone);
+      cloneGroup.push(clone);
+    }
+    requestAnimationFrame(render);
+    } else requestAnimationFrame(load);
+}
+
+function render() {
+    let now = Date.now() / 1000;
+    let delta = now - lastFrameTime;
+    lastFrameTime = now;
+
+    resize();
+
+    for (let i = 0; i < cloneGroup.length; i ++) {
+      cloneGroup[i].update(delta);
+    }
+
+    renderer.render(scene, camera);
+
+    requestAnimationFrame(render);
+}
+
+function resize() {
+    let w = window.innerWidth;
+    let h = window.innerHeight;
+    if (canvas.width != w || canvas.height != h) {
+    canvas.width = w;
+    canvas.height = h;
+    }
+
+    camera.aspect = w / h;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(w, h);
+}
+
+init();
+

template/public/spineboy.atlas

@@ -0,0 +1,94 @@
+spineboy.png
+	size: 1024, 256
+	filter: Linear, Linear
+	scale: 0.5
+crosshair
+	bounds: 352, 7, 45, 45
+eye-indifferent
+	bounds: 862, 105, 47, 45
+eye-surprised
+	bounds: 505, 79, 47, 45
+front-bracer
+	bounds: 826, 66, 29, 40
+front-fist-closed
+	bounds: 786, 65, 38, 41
+front-fist-open
+	bounds: 710, 51, 43, 44
+	rotate: 90
+front-foot
+	bounds: 210, 6, 63, 35
+front-shin
+	bounds: 665, 128, 41, 92
+	rotate: 90
+front-thigh
+	bounds: 2, 2, 23, 56
+	rotate: 90
+front-upper-arm
+	bounds: 250, 205, 23, 49
+goggles
+	bounds: 665, 171, 131, 83
+gun
+	bounds: 798, 152, 105, 102
+head
+	bounds: 2, 27, 136, 149
+hoverboard-board
+	bounds: 2, 178, 246, 76
+hoverboard-thruster
+	bounds: 722, 96, 30, 32
+	rotate: 90
+hoverglow-small
+	bounds: 275, 81, 137, 38
+mouth-grind
+	bounds: 614, 97, 47, 30
+mouth-oooo
+	bounds: 612, 65, 47, 30
+mouth-smile
+	bounds: 661, 64, 47, 30
+muzzle-glow
+	bounds: 382, 54, 25, 25
+muzzle-ring
+	bounds: 275, 54, 25, 105
+	rotate: 90
+muzzle01
+	bounds: 911, 95, 67, 40
+	rotate: 90
+muzzle02
+	bounds: 792, 108, 68, 42
+muzzle03
+	bounds: 956, 171, 83, 53
+	rotate: 90
+muzzle04
+	bounds: 275, 7, 75, 45
+muzzle05
+	bounds: 140, 3, 68, 38
+neck
+	bounds: 250, 182, 18, 21
+portal-bg
+	bounds: 140, 43, 133, 133
+portal-flare1
+	bounds: 554, 65, 56, 30
+portal-flare2
+	bounds: 759, 112, 57, 31
+	rotate: 90
+portal-flare3
+	bounds: 554, 97, 58, 30
+portal-shade
+	bounds: 275, 121, 133, 133
+portal-streaks1
+	bounds: 410, 126, 126, 128
+portal-streaks2
+	bounds: 538, 129, 125, 125
+rear-bracer
+	bounds: 857, 67, 28, 36
+rear-foot
+	bounds: 663, 96, 57, 30
+rear-shin
+	bounds: 414, 86, 38, 89
+	rotate: 90
+rear-thigh
+	bounds: 756, 63, 28, 47
+rear-upper-arm
+	bounds: 60, 5, 20, 44
+	rotate: 90
+torso
+	bounds: 905, 164, 49, 90