UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][pixi-v8] Added example shadow-projection-shader

Browse Source
This commit is contained in:
Harm 2026-01-17 15:11:02 +01:00
parent 6105ba2e33
commit ec0158aab7
3 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/index.html
View File

@ -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/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/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/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.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/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> <li><a href="/spine-pixi-v8/example/bounds.html">Bounds</a> - (<a href="/spine-pixi-v7/example/bounds.html">v7</a>)</li>

112
spine-ts/spine-pixi-v7/example/shadow-projection-shader.html Normal file
View File

@ -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>

140
spine-ts/spine-pixi-v8/example/shadow-projection-shader.html Normal file
View File

@ -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>