From 8c515501ee00b17d0662ec7ffaaf5b467d839ece Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Tue, 19 Mar 2024 11:53:14 +0100
Subject: [PATCH] [ts][webgl] Additional physics samples

---
 spine-ts/index.html                        | 357 ++++++++++-----------
 spine-ts/spine-webgl/example/physics3.html |  89 +++++
 spine-ts/spine-webgl/example/physics4.html |  88 +++++
 3 files changed, 338 insertions(+), 196 deletions(-)
 create mode 100644 spine-ts/spine-webgl/example/physics3.html
 create mode 100644 spine-ts/spine-webgl/example/physics4.html
diff --git a/spine-ts/index.html b/spine-ts/index.html
index e33e09acf..a4ca5c265 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -1,201 +1,166 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>spine-ts Examples</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="index.css" />
-  </head>
 
-  <body>
-    <div style="width: 300px; margin: 0 auto">
-      <h1>spine-ts Examples</h1>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>spine-ts Examples</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="index.css" />
+</head>
+
+<body>
+  <div style="width: 300px; margin: 0 auto">
+    <h1>spine-ts Examples</h1>
+    <ul>
+      <li>Canvas</li>
       <ul>
-        <li>Canvas</li>
-        <ul>
-          <li><a href="/spine-canvas/example">Example</a></li>
-          <li>
-            <a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
-          </li>
-        </ul>
-        <li>Pixi</li>
-        <ul>
-          <li><a href="/spine-pixi/example/index.html">Basic example</a></li>
-          <li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
-          <li>
-            <a href="/spine-pixi/example/events-example.html">Events example</a>
-          </li>
-          <li>
-            <a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
-          </li>
-          <li>
-            <a href="/spine-pixi/example/simple-input.html">Simple input</a>
-          </li>
-          <li>
-            <a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
-          </li>
-        </ul>
-        <li>Phaser</li>
-        <ul>
-          <li>
-            <a href="/spine-phaser/example/basic-example.html">Basic example</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/events-example.html"
-              >Events example</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/mix-and-match-example.html"
-              >Mix and match example</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/arcade-physics-example.html"
-              >Arcade physics example</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/control-bones-example.html"
-              >Control bones example</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/batching-test.html">Batching test</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/multi-scene-test.html"
-              >Multi-scene test</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/visibility-test.html"
-              >Visibility test</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/visibility-test-container.html"
-              >Visibility test (container)</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/blend-test.html">Blend test</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/camera-pipeline-test.html"
-              >Camera pipeline test</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/extended-class-test.html"
-              >Extended class</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/depth-test.html">Depth test</a>
-          </li>
-          <li>
-            <a href="/spine-phaser/example/render-to-texture-test.html"
-              >Render to texture test</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/custom-spine-object-type.html"
-              >Custom object factory name</a
-            >
-          </li>
-          <li>
-            <a href="/spine-phaser/example/add-existing.html"
-              >Add existing object</a
-            >
-          </li>
-        </ul>
-        <li>Player</li>
-        <ul>
-          <li><a href="/spine-player/example/example.html">Example</a></li>
-          <li><a href="/spine-player/example/physics.html">Physics</a></li>
-          <li><a href="/spine-player/example/editor.html">Editor</a></li>
-          <li>
-            <a href="/spine-player/example/embedding-binary-example.html"
-              >Embedding binary</a
-            >
-          </li>
-          <li>
-            <a href="/spine-player/example/embedding-json-example.html"
-              >Embedding JSON</a
-            >
-          </li>
-          <li>
-            <a href="/spine-player/example/dispose.html">Disposing a player</a>
-          </li>
-        </ul>
-        <li>WebGL</li>
-        <ul>
-          <li><a href="/spine-webgl/example">Example</a></li>
-          <li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
-          <li><a href="/spine-webgl/example/physics.html">Physics</a></li>
-          <li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
-          <li>
-            <a href="/spine-webgl/example/mix-and-match.html"
-              >Mix &amp; match</a
-            >
-          </li>
-          <li>
-            <a href="/spine-webgl/example/custom-attachment.html"
-              >Custom attachment</a
-            >
-          </li>
-          <li>
-            <a href="/spine-webgl/example/drag-and-drop.html"
-              >Drag &amp; drop</a
-            >
-          </li>
-          <li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
-          <li>
-            <a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
-          </li>
-          <li>
-            <a href="/spine-webgl/demos/additiveblending.html"
-              >Additive blending</a
-            >
-          </li>
-          <li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
-          <li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
-          <li>
-            <a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
-          </li>
-          <li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
-          <li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
-          <li>
-            <a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
-          </li>
-          <li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
-          <li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
-          <li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
-          <li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
-          <li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
-        </ul>
-        <li>THREE.JS</li>
-        <ul>
-          <li><a href="/spine-threejs/example/index.html">Example</a></li>
-          <li>
-            <a href="/spine-threejs/example/coordinate-transform.html"
-              >Coordinate transform</a
-            >
-          </li>
-          <li>
-            <a href="/spine-threejs/example/logarithmic-depth-buffer.html"
-              >Logarithmic depth buffer</a
-            >
-          </li>
-        </ul>
+        <li><a href="/spine-canvas/example">Example</a></li>
+        <li>
+          <a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
+        </li>
       </ul>
-    </div>
-  </body>
-</html>
+      <li>Pixi</li>
+      <ul>
+        <li><a href="/spine-pixi/example/index.html">Basic example</a></li>
+        <li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
+        <li>
+          <a href="/spine-pixi/example/events-example.html">Events example</a>
+        </li>
+        <li>
+          <a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
+        </li>
+        <li>
+          <a href="/spine-pixi/example/simple-input.html">Simple input</a>
+        </li>
+        <li>
+          <a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
+        </li>
+      </ul>
+      <li>Phaser</li>
+      <ul>
+        <li>
+          <a href="/spine-phaser/example/basic-example.html">Basic example</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/events-example.html">Events example</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/mix-and-match-example.html">Mix and match example</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/arcade-physics-example.html">Arcade physics example</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/control-bones-example.html">Control bones example</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/batching-test.html">Batching test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/multi-scene-test.html">Multi-scene test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/visibility-test.html">Visibility test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/visibility-test-container.html">Visibility test (container)</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/blend-test.html">Blend test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/camera-pipeline-test.html">Camera pipeline test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/extended-class-test.html">Extended class</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/depth-test.html">Depth test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/render-to-texture-test.html">Render to texture test</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/custom-spine-object-type.html">Custom object factory name</a>
+        </li>
+        <li>
+          <a href="/spine-phaser/example/add-existing.html">Add existing object</a>
+        </li>
+      </ul>
+      <li>Player</li>
+      <ul>
+        <li><a href="/spine-player/example/example.html">Example</a></li>
+        <li><a href="/spine-player/example/physics.html">Physics</a></li>
+        <li><a href="/spine-player/example/editor.html">Editor</a></li>
+        <li>
+          <a href="/spine-player/example/embedding-binary-example.html">Embedding binary</a>
+        </li>
+        <li>
+          <a href="/spine-player/example/embedding-json-example.html">Embedding JSON</a>
+        </li>
+        <li>
+          <a href="/spine-player/example/dispose.html">Disposing a player</a>
+        </li>
+      </ul>
+      <li>WebGL</li>
+      <ul>
+        <li><a href="/spine-webgl/example">Example</a></li>
+        <li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
+        <li><a href="/spine-webgl/example/physics.html">Physics</a></li>
+        <li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
+        <li><a href="/spine-webgl/example/physics3.html">Physics III</a></li>
+        <li><a href="/spine-webgl/example/physics4.html">Physics IV</a></li>
+        <li>
+          <a href="/spine-webgl/example/mix-and-match.html">Mix &amp; match</a>
+        </li>
+        <li>
+          <a href="/spine-webgl/example/custom-attachment.html">Custom attachment</a>
+        </li>
+        <li>
+          <a href="/spine-webgl/example/drag-and-drop.html">Drag &amp; drop</a>
+        </li>
+        <li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
+        <li>
+          <a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
+        </li>
+        <li>
+          <a href="/spine-webgl/demos/additiveblending.html">Additive blending</a>
+        </li>
+        <li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
+        <li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
+        <li>
+          <a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
+        </li>
+        <li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
+        <li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
+        <li>
+          <a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
+        </li>
+        <li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
+        <li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
+        <li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
+        <li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
+        <li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
+      </ul>
+      <li>THREE.JS</li>
+      <ul>
+        <li><a href="/spine-threejs/example/index.html">Example</a></li>
+        <li>
+          <a href="/spine-threejs/example/coordinate-transform.html">Coordinate transform</a>
+        </li>
+        <li>
+          <a href="/spine-threejs/example/logarithmic-depth-buffer.html">Logarithmic depth buffer</a>
+        </li>
+      </ul>
+    </ul>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-webgl/example/physics3.html b/spine-ts/spine-webgl/example/physics3.html
new file mode 100644
index 000000000..2d3a12750
--- /dev/null
+++ b/spine-ts/spine-webgl/example/physics3.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<script src="../dist/iife/spine-webgl.js"></script>
+<style>
+	* {
+		margin: 0;
+		padding: 0;
+	}
+</style>
+
+<body>
+	<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
+	<script>
+		class App {
+			constructor() {
+				this.skeleton = null;
+				this.animationState = null;
+			}
+
+			loadAssets(canvas) {
+				// Load the skeleton file.
+				canvas.assetManager.loadBinary("assets/snowglobe-pro.skel");
+				// Load the atlas and its pages.
+				canvas.assetManager.loadTextureAtlas("assets/snowglobe-pma.atlas");
+			}
+
+			initialize(canvas) {
+				let assetManager = canvas.assetManager;
+
+				// Create the texture atlas.
+				var atlas = assetManager.require("assets/snowglobe-pma.atlas");
+
+				// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+				// Create a SkeletonBinary instance for parsing the .skel file.
+				var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+
+				// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+				skeletonBinary.scale = 0.5;
+				var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/snowglobe-pro.skel"));
+				this.skeleton = new spine.Skeleton(skeletonData);
+
+				// Create an AnimationState, and set the "run" animation in looping mode.
+				var animationStateData = new spine.AnimationStateData(skeletonData);
+				this.animationState = new spine.AnimationState(animationStateData);
+				this.animationState.setAnimation(0, "shake", true);
+			}
+
+			update(canvas, delta) {
+
+				// Update the animation state using the delta time.
+				this.animationState.update(delta);
+				// Apply the animation state to the skeleton.
+				this.animationState.apply(this.skeleton);
+				// Let the skeleton update the transforms of its bones and apply physics
+				this.skeleton.update(delta);
+				this.skeleton.updateWorldTransform(spine.Physics.update);
+			}
+
+			render(canvas) {
+				let renderer = canvas.renderer;
+				// Resize the viewport to the full canvas.
+				renderer.resize(spine.ResizeMode.Expand);
+
+				// Clear the canvas with a light gray color.
+				canvas.clear(0.2, 0.2, 0.2, 1);
+
+				// Begin rendering.
+				renderer.begin();
+				// Draw the skeleton
+				renderer.drawSkeleton(this.skeleton, true);
+				// Complete rendering.
+				renderer.end();
+			}
+		}
+
+		new spine.SpineCanvas(document.getElementById("canvas"), {
+			app: new App()
+		})
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-webgl/example/physics4.html b/spine-ts/spine-webgl/example/physics4.html
new file mode 100644
index 000000000..f8c169c26
--- /dev/null
+++ b/spine-ts/spine-webgl/example/physics4.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<script src="../dist/iife/spine-webgl.js"></script>
+<style>
+	* {
+		margin: 0;
+		padding: 0;
+	}
+</style>
+
+<body>
+	<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
+	<script>
+		class App {
+			constructor() {
+				this.skeleton = null;
+				this.animationState = null;
+			}
+
+			loadAssets(canvas) {
+				// Load the skeleton file.
+				canvas.assetManager.loadBinary("assets/cloud-pot.skel");
+				// Load the atlas and its pages.
+				canvas.assetManager.loadTextureAtlas("assets/cloud-pot-pma.atlas");
+			}
+
+			initialize(canvas) {
+				let assetManager = canvas.assetManager;
+
+				// Create the texture atlas.
+				var atlas = assetManager.require("assets/cloud-pot-pma.atlas");
+
+				// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+				var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+				// Create a SkeletonBinary instance for parsing the .skel file.
+				var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
+
+				// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+				skeletonBinary.scale = 0.5;
+				var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/cloud-pot.skel"));
+				this.skeleton = new spine.Skeleton(skeletonData);
+
+				// Create an AnimationState, and set the "run" animation in looping mode.
+				var animationStateData = new spine.AnimationStateData(skeletonData);
+				this.animationState = new spine.AnimationState(animationStateData);
+				this.animationState.setAnimation(0, "playing-in-the-rain", true);
+			}
+
+			update(canvas, delta) {
+				// Update the animation state using the delta time.
+				this.animationState.update(delta);
+				// Apply the animation state to the skeleton.
+				this.animationState.apply(this.skeleton);
+				// Let the skeleton update the transforms of its bones and apply physics
+				this.skeleton.update(delta);
+				this.skeleton.updateWorldTransform(spine.Physics.update);
+			}
+
+			render(canvas) {
+				let renderer = canvas.renderer;
+				// Resize the viewport to the full canvas.
+				renderer.resize(spine.ResizeMode.Expand);
+
+				// Clear the canvas with a light gray color.
+				canvas.clear(0.2, 0.2, 0.2, 1);
+
+				// Begin rendering.
+				renderer.begin();
+				// Draw the skeleton
+				renderer.drawSkeleton(this.skeleton, true);
+				// Complete rendering.
+				renderer.end();
+			}
+		}
+
+		new spine.SpineCanvas(document.getElementById("canvas"), {
+			app: new App()
+		})
+	</script>
+</body>
+
+</html>
\ No newline at end of file
