From ec0158aab7fb28152c140d7b5f27b7acccd0bb78 Mon Sep 17 00:00:00 2001
From: Harm <no_spam@me.com>
Date: Sat, 17 Jan 2026 15:11:02 +0100
Subject: [PATCH] [ts][pixi-v8] Added example shadow-projection-shader

---
 spine-ts/index.html                           |   1 +
 .../example/shadow-projection-shader.html     | 112 ++++++++++++++
 .../example/shadow-projection-shader.html     | 140 ++++++++++++++++++
 3 files changed, 253 insertions(+)
 create mode 100644 spine-ts/spine-pixi-v7/example/shadow-projection-shader.html
 create mode 100644 spine-ts/spine-pixi-v8/example/shadow-projection-shader.html
diff --git a/spine-ts/index.html b/spine-ts/index.html
index 4b101afe3..3c9c89812 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -42,6 +42,7 @@
         <li><a href="/spine-pixi-v8/example/physics2.html">Physics II</a> - (<a href="/spine-pixi-v7/example/physics2.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/physics3.html">Physics III</a> - (<a href="/spine-pixi-v7/example/physics3.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/physics4.html">Physics IV</a> - (<a href="/spine-pixi-v7/example/physics4.html">v7</a>)</li>
+        <li><a href="/spine-pixi-v8/example/shadow-projection-shader.html">Shadow projection shader</a> - (<a href="/spine-pixi-v7/example/shadow-projection-shader.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a> - (<a href="/spine-pixi-v7/example/slot-objects.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/slot-objects-scale-rotation.html">Slot Objects (Rotation, scale test)</a> - (<a href="/spine-pixi-v7/example/slot-objects-scale-rotation.html">v7</a>)</li>
         <li><a href="/spine-pixi-v8/example/bounds.html">Bounds</a> - (<a href="/spine-pixi-v7/example/bounds.html">v7</a>)</li>
diff --git a/spine-ts/spine-pixi-v7/example/shadow-projection-shader.html b/spine-ts/spine-pixi-v7/example/shadow-projection-shader.html
new file mode 100644
index 000000000..a34e3c381
--- /dev/null
+++ b/spine-ts/spine-pixi-v7/example/shadow-projection-shader.html
@@ -0,0 +1,112 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</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>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x7CFC00,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "/assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "/assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas",
+          scale: 0.5,
+        });
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "walk", true);
+
+        // 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;
+
+        // Default v4 vertex shader
+        const vertexShader = `
+        attribute vec2 aVertexPosition;
+        attribute vec2 aTextureCoord;
+
+        uniform mat3 projectionMatrix;
+
+        varying vec2 vTextureCoord;
+
+        void main(void) {
+            gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
+            vTextureCoord = aTextureCoord;
+        }
+        `;
+
+        const fragmentShader = `
+        varying vec2 vTextureCoord;
+
+        uniform sampler2D uSampler;
+        uniform vec4 inputSize;
+        uniform vec4 outputFrame;
+        uniform vec2 shadowDirection;
+        uniform float floorY;
+
+        void main(void) {
+            //1. get the screen coordinate
+            vec2 screenCoord = vTextureCoord * inputSize.xy + outputFrame.xy;
+            //2. calculate Y shift of our dimension vector
+            vec2 shadow;
+            //shadow coordinate system is a bit skewed, but it has to be the same for screenCoord.y = floorY
+            float paramY = (screenCoord.y - floorY) / shadowDirection.y;
+            shadow.y = paramY + floorY;
+            shadow.x = screenCoord.x + paramY * shadowDirection.x;
+            vec2 bodyFilterCoord = (shadow - outputFrame.xy) * inputSize.zw; // same as / inputSize.xy
+
+            vec4 originalColor = texture2D(uSampler, vTextureCoord);
+            vec4 shadowColor = texture2D(uSampler, bodyFilterCoord);
+            shadowColor.rgb = vec3(0.0);
+            shadowColor.a *= 0.5;
+
+            // normal blend mode coefficients (1, 1-src_alpha)
+            // shadow is destination (backdrop), original is source
+            gl_FragColor = originalColor + shadowColor * (1.0 - originalColor.a);
+        }
+        `;
+        
+        const shadowFilter = new PIXI.Filter(vertexShader, fragmentShader);
+        
+        // first is the horizontal shift, positive is to the right
+        // second is the same as scaleY
+        shadowFilter.uniforms.shadowDirection = [0.4, 0.5];
+        shadowFilter.uniforms.floorY = 0.0;
+
+        // padding is the max shadow shift to the sides
+        shadowFilter.padding = 200;
+
+        spineboy.filters = [shadowFilter];
+
+        app.ticker.add(() => {
+            // take ground Y in screen coords to uniforms
+            shadowFilter.uniforms.floorY = spineboy.toGlobal(new PIXI.Point(0, 0)).y;
+        });
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-pixi-v8/example/shadow-projection-shader.html b/spine-ts/spine-pixi-v8/example/shadow-projection-shader.html
new file mode 100644
index 000000000..e4350da4e
--- /dev/null
+++ b/spine-ts/spine-pixi-v8/example/shadow-projection-shader.html
@@ -0,0 +1,140 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi-v8</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/dist/pixi.js"></script>
+    <script src="../dist/iife/spine-pixi-v8.js"></script>
+    <link rel="stylesheet" href="../../index.css">
+  </head>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application();
+        await app.init({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x7CFC00,
+          hello: true,
+        })
+        document.body.appendChild(app.canvas);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        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"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas",
+          scale: 0.5,
+        });
+
+        // Set the default mix time to use when transitioning from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "walk", true);
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        const vertexShader = /* glsl */ `#version 300 es
+        precision highp float;
+        
+        in vec2 aPosition;
+        
+        uniform vec4 uInputSize;
+        uniform vec4 uOutputFrame;
+        uniform vec4 uOutputTexture;
+        
+        out vec2 vTextureCoord;
+        
+        void main() {
+          vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+          position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+          position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+          gl_Position = vec4(position, 0.0, 1.0);
+          vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);
+        }
+      `;
+
+      const fragmentShader = /* glsl */ `#version 300 es
+        precision highp float;
+        
+        in vec2 vTextureCoord;
+        
+        uniform sampler2D uTexture;
+        uniform vec4 uInputSize;
+        uniform vec4 uOutputFrame;
+        uniform vec2 uShadowDirection;
+        uniform vec3 uShadowColor;
+        uniform float uFloorY;
+        uniform float uAlpha;
+        
+        out vec4 finalColor;
+        
+        void main() {
+          vec2 screenCoord = vTextureCoord * uInputSize.xy + uOutputFrame.xy;
+          
+          // Shadow projection logic
+          float paramY = (screenCoord.y - uFloorY) / uShadowDirection.y;
+          vec2 shadow;
+          shadow.y = paramY + uFloorY;
+          shadow.x = screenCoord.x + paramY * uShadowDirection.x;
+          
+          vec2 bodyFilterCoord = (shadow - uOutputFrame.xy) * uInputSize.zw;
+          
+          vec4 originalColor = texture(uTexture, vTextureCoord);
+          
+          // Boundary Check: Prevents "streaking" if shadow goes outside texture bounds
+          // We strictly check 0.0 to 1.0 range
+          bool outside = bodyFilterCoord.x < 0.0 || bodyFilterCoord.x > 1.0 || 
+                        bodyFilterCoord.y < 0.0 || bodyFilterCoord.y > 1.0;
+                        
+          if (outside) {
+            finalColor = originalColor;
+          } else {
+            vec4 shadowSample = texture(uTexture, bodyFilterCoord);
+            
+            // Apply custom shadow color and alpha
+            vec4 shadowColor = vec4(uShadowColor, shadowSample.a * uAlpha);
+            
+            // Composite: Shadow (backdrop) + Original (source)
+            finalColor = originalColor + shadowColor * (1.0 - originalColor.a);
+          }
+        }
+        `;
+
+        const { Filter, GlProgram } = PIXI;
+        const shadowFilter = new Filter({
+          glProgram: GlProgram.from({ vertex: vertexShader, fragment: fragmentShader }),
+          resources: {
+            shadowUniforms: {
+              uShadowDirection: { value: [0.4, 0.5], type: "vec2<f32>" },
+              uShadowColor: { value: [0.0, 0.0, 0.0], type: "vec3<f32>" },
+              uFloorY: { value: [0.0], type: "f32" },
+              uAlpha: { value: [0.4], type: "f32" },
+            },
+          },
+        })
+        
+        // Padding is the max shadow shift to the sides
+        shadowFilter.padding = 200;
+
+        spineboy.filters = [shadowFilter];
+
+        app.ticker.add(() => {
+            // Calculate global Y of the spine's origin (feet)
+            shadowFilter.resources.shadowUniforms.uniforms.uFloorY = spineboy.toGlobal({ x: 0, y: 0 }).y
+        });
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>
\ No newline at end of file
