From 3512e3ddffc1b0323afe87ef371201d9f425603f Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Thu, 14 Nov 2024 10:51:32 +0100
Subject: [PATCH] [ts][pixi] Add bunnymark example to compare performance among
 releases.

---
 spine-ts/index.html                           |   2 +
 spine-ts/spine-pixi-v7/example/bunnymark.html | 152 ++++++++++++++++
 spine-ts/spine-pixi-v8/example/bunnymark.html | 162 ++++++++++++++++++
 3 files changed, 316 insertions(+)
 create mode 100644 spine-ts/spine-pixi-v7/example/bunnymark.html
 create mode 100644 spine-ts/spine-pixi-v8/example/bunnymark.html
diff --git a/spine-ts/index.html b/spine-ts/index.html
index 981f3f8c4..ff3905f0c 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -53,6 +53,7 @@
         <li><a href="/spine-pixi-v7/example/physics3.html">Physics III</a></li>
         <li><a href="/spine-pixi-v7/example/physics4.html">Physics IV</a></li>
         <li><a href="/spine-pixi-v7/example/slot-objects.html">Slot Objects</a></li>
+        <li><a href="/spine-pixi-v7/example/bunnymark.html?count=500">Bunny Mark</a></li>
       </ul>
       <li>PixiJS v8</li>
       <ul>
@@ -78,6 +79,7 @@
         <li><a href="/spine-pixi-v8/example/physics3.html">Physics III</a></li>
         <li><a href="/spine-pixi-v8/example/physics4.html">Physics IV</a></li>
         <li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a></li>
+        <li><a href="/spine-pixi-v8/example/bunnymark.html?count=500&renderer=webgpu">Bunny Mark</a></li>
       </ul>
       <li>Phaser</li>
       <ul>
diff --git a/spine-ts/spine-pixi-v7/example/bunnymark.html b/spine-ts/spine-pixi-v7/example/bunnymark.html
new file mode 100644
index 000000000..ef2cfc6af
--- /dev/null
+++ b/spine-ts/spine-pixi-v7/example/bunnymark.html
@@ -0,0 +1,152 @@
+<!-- This example is adapted from https://github.com/GoodBoyDigital/pixi-bunnymark -->
+<!DOCTYPE html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi-v7 bunnymark</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi-v7.js"></script>
+    <link rel="stylesheet" href="../../index.css">
+  </head>
+
+  <body>
+    <script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);stats.dom.children[1].style.display='block';stats.dom.children[2].style.display='block';requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()</script>
+    <script>
+      (async function () {
+        const params = new URLSearchParams(window.location.search);
+        const totalBunnies = parseInt(params.get('count')) || 100;
+
+        const bunnyPool = [];
+
+        const renderer = new PIXI.Renderer({
+            clearBeforeRender: true,
+            backgroundAlpha: 1,
+            backgroundColor: 0xFFFFFF,
+            width: 800,
+            height: 600,
+            resolution: 1,
+            antialias: false,
+        })
+
+        document.body.appendChild(renderer.view)
+
+        const stage = new PIXI.Container();
+
+        PIXI.Assets.add({ alias: "spineboyData", src: "assets/spineboy-pro.skel" });
+        PIXI.Assets.add({ alias: "spineboyAtlas", src: "assets/spineboy-pma.atlas" });
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        const bounds = new PIXI.Rectangle(0, 0, 800, 600);
+
+        const bunnies = []
+
+        function addBunny() {
+
+          const bunny = new BunnyV7(bounds)
+
+          stage.addChild(bunny.view);
+          bunnies.push(bunny);
+          }
+
+          for (let i = 0; i < totalBunnies; i++) {
+          addBunny();
+          }
+
+          let pause = false;
+
+          renderer.view.addEventListener('mousedown', () => {
+          pause = !pause
+          addBunny();
+          })
+
+          function renderUpdate() {
+
+            if (!pause) {
+                for (let i = 0; i < bunnies.length; i++) {
+                    bunnies[i].update();
+                }
+            }
+
+            renderer.render(stage);
+            requestAnimationFrame(renderUpdate)
+          }
+
+          renderUpdate()
+      })();
+
+      class BunnyV7 {
+
+        view;
+
+        gravity = 0.75
+
+        speedX = Math.random() * 10;
+        speedY = (Math.random() * 10) - 5;
+
+        positionX = 0;
+        positionY = 0;
+
+        bounds;
+
+        constructor(bounds) {
+            const spineboy = spine.Spine.from({
+                atlas: "spineboyAtlas",
+                skeleton: "spineboyData",
+                scale: 0.125,
+            });
+
+            // Set the default mix time to use when transitioning
+            // from one animation to the next.
+            spineboy.state.data.defaultMix = 0.2;
+
+            // Center the spine object on screen.
+            spineboy.x = window.innerWidth / 2;
+            spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+            // Set animation "cape-follow-example" on track 0, looped.
+            spineboy.state.setAnimation(0, "run", true);
+
+            this.view = spineboy
+            this.bounds = bounds;
+        }
+
+        update() {
+            let pX = this.positionX;
+            let pY = this.positionY;
+
+            pX += this.speedX;
+            pY += this.speedY;
+            this.speedY += this.gravity;
+
+            if (pX > this.bounds.right) {
+                this.speedX *= -1;
+                pX = this.bounds.right;
+            }
+            else if (pX < this.bounds.left) {
+                this.speedX *= -1;
+                pX = this.bounds.left;
+            }
+
+            if (pY > this.bounds.bottom) {
+                this.speedY *= -0.85;
+                pY = this.bounds.bottom;
+                if (Math.random() > 0.5) {
+                    this.speedY -= Math.random() * 6;
+                }
+            }
+            else if (pY < this.bounds.top) {
+                this.speedY = 0;
+                pY = this.bounds.top;
+            }
+
+            this.view.position.x = this.positionX = pX;
+            this.view.position.y = this.positionY = pY;
+        }
+
+        reset() {
+            this.positionX = 0;
+            this.positionY = 0;
+        }
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-pixi-v8/example/bunnymark.html b/spine-ts/spine-pixi-v8/example/bunnymark.html
new file mode 100644
index 000000000..0ae99aa4c
--- /dev/null
+++ b/spine-ts/spine-pixi-v8/example/bunnymark.html
@@ -0,0 +1,162 @@
+<!-- This example is adapted from https://github.com/GoodBoyDigital/pixi-bunnymark -->
+<!DOCTYPE html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi-v8 bunnymark</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi-v8.js"></script>
+    <link rel="stylesheet" href="../../index.css">
+  </head>
+
+  <body>
+    <script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);stats.dom.children[1].style.display='block';if (stats.dom.children[2]) stats.dom.children[2].style.display='block';requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()</script>
+    <script>
+      (async function () {
+        const params = new URLSearchParams(window.location.search);
+        const totalBunnies = parseInt(params.get('count')) || 100;
+        const preference = params.get('renderer') || 'webgl';
+
+        const bunnyPool = [];
+
+        const renderer = await PIXI.autoDetectRenderer({
+          preference,
+          clearBeforeRender: true,
+          backgroundAlpha: 1,
+          backgroundColor: 0xFFFFFF,
+          width: 800,
+          height: 600,
+          resolution: 1,
+          antialias: false,
+          hello: true,
+        })
+
+        document.body.appendChild(renderer.view.canvas);
+
+        const stage = new PIXI.Container();
+
+        PIXI.Assets.add({ alias: "spineboyData", src: "assets/spineboy-pro.skel" });
+        PIXI.Assets.add({ alias: "spineboyAtlas", src: "assets/spineboy-pma.atlas" });
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        const bounds = new PIXI.Rectangle(0, 0, 800, 600);
+
+        const bunnies = []
+
+        function addBunny() {
+
+          const bunny = bunnyPool.pop() || new BunnyV8(bounds)
+
+          bunny.reset();
+
+          stage.addChild(bunny.view);
+          bunnies.push(bunny);
+        }
+
+        for (let i = 0; i < totalBunnies; i++) {
+          addBunny();
+        }
+
+        let pause = false;
+
+        renderer.view.canvas.addEventListener('mousedown', () => {
+          pause = !pause
+        })
+
+
+        function renderUpdate() {
+
+          if (!pause) {
+              for (let i = 0; i < bunnies.length; i++) {
+                  bunnies[i].update();
+              }
+          }
+
+          // bunnies[0].view.visible = !bunnies[0].view.visible;
+
+          renderer.render(stage);
+          requestAnimationFrame(renderUpdate)
+        }
+
+        renderUpdate();
+      })();
+
+
+
+
+      class BunnyV8 {
+
+        view;
+
+        gravity = 0.75
+
+        speedX = Math.random() * 10;
+        speedY = (Math.random() * 10) - 5;
+
+        positionX = 0;
+        positionY = 0;
+
+        bounds;
+
+        constructor(bounds) {
+            const spineboy = spine.Spine.from({
+                atlas: "spineboyAtlas",
+                skeleton: "spineboyData",
+                scale: 0.125,
+            });
+
+            // Set the default mix time to use when transitioning
+            // from one animation to the next.
+            spineboy.state.data.defaultMix = 0.2;
+
+            // Center the spine object on screen.
+            spineboy.x = window.innerWidth / 2;
+            spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+            // Set animation "cape-follow-example" on track 0, looped.
+            spineboy.state.setAnimation(0, "run", true);
+
+            this.view = spineboy
+            this.bounds = bounds;
+        }
+
+        update() {
+            let pX = this.positionX;
+            let pY = this.positionY;
+
+            pX += this.speedX;
+            pY += this.speedY;
+            this.speedY += this.gravity;
+
+            if (pX > this.bounds.right) {
+                this.speedX *= -1;
+                pX = this.bounds.right;
+            }
+            else if (pX < this.bounds.left) {
+                this.speedX *= -1;
+                pX = this.bounds.left;
+            }
+
+            if (pY > this.bounds.bottom) {
+                this.speedY *= -0.85;
+                pY = this.bounds.bottom;
+                if (Math.random() > 0.5) {
+                    this.speedY -= Math.random() * 6;
+                }
+            }
+            else if (pY < this.bounds.top) {
+                this.speedY = 0;
+                pY = this.bounds.top;
+            }
+
+            this.view.position.x = this.positionX = pX;
+            this.view.position.y = this.positionY = pY;
+        }
+
+        reset() {
+            this.positionX = 0;
+            this.positionY = 0;
+        }
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file
