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][webgl] Allow to define a custom Shader for SceneRenderer.

Browse Source
This commit is contained in:
Davide Tantillo 2024-10-02 14:59:09 +02:00
parent c07d8a3bf4
commit 3136e1d33f
5 changed files with 357 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
spine-ts/spine-player/example/custom-shader.html Normal file
View File

@ -0,0 +1,137 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="../css/spine-player.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../index.css" />
</head>
<body class="flex flex-col justify-center items-center">
<div id="container-raptor" style="max-width:640px; aspect-ratio: 16/9"></div>
<div style="color: white;">
Red: <input id="red-input" type="range" min="0" max="100" value="100" style="appearance: revert;" /> <output id="red-value"></output>
<br>
Green: <input id="green-input" type="range" min="0" max="100" value="100" style="appearance: revert;" /> <output id="green-value"></output>
<br>
Blue: <input id="blue-input" type="range" min="0" max="100" value="100" style="appearance: revert;" /> <output id="blue-value"></output>
</div>
</body>
<script>
const inputToValue = input => parseFloat(input) / 100
const redInput = document.querySelector("#red-input");
const redValue = document.querySelector("#red-value");
redValue.textContent = redInput.value;
const greenInput = document.querySelector("#green-input");
const greenValue = document.querySelector("#green-value");
greenValue.textContent = greenInput.value;
const blueInput = document.querySelector("#blue-input");
const blueValue = document.querySelector("#blue-value");
blueValue.textContent = blueInput.value;
redInput.addEventListener("input", (event) => {
redValue.textContent = event.target.value;
});
greenInput.addEventListener("input", (event) => {
greenValue.textContent = event.target.value;
});
blueInput.addEventListener("input", (event) => {
blueValue.textContent = event.target.value;
});
redInput.addEventListener("input", (event) => {
redValue.textContent = event.target.value;
});
greenInput.addEventListener("input", (event) => {
greenValue.textContent = event.target.value;
});
blueInput.addEventListener("input", (event) => {
blueValue.textContent = event.target.value;
});
let vertexShader = `
attribute vec4 ${spine.Shader.POSITION};
attribute vec4 ${spine.Shader.COLOR};
attribute vec4 ${spine.Shader.COLOR2};
attribute vec2 ${spine.Shader.TEXCOORDS};
uniform mat4 ${spine.Shader.MVP_MATRIX};
varying vec4 v_light;
varying vec4 v_dark;
varying vec2 v_texCoords;
void main () {
v_light = ${spine.Shader.COLOR};
v_dark = ${spine.Shader.COLOR2};
v_texCoords = ${spine.Shader.TEXCOORDS};
gl_Position = ${spine.Shader.MVP_MATRIX} * ${spine.Shader.POSITION};
}
`;
let fragmentShader = `
#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif
varying LOWP vec4 v_light;
varying LOWP vec4 v_dark;
varying vec2 v_texCoords;
uniform sampler2D u_texture;
uniform float red_multiplier;
uniform float green_multiplier;
uniform float blue_multiplier;
void main () {
vec4 texColor = texture2D(u_texture, v_texCoords);
gl_FragColor.a = texColor.a * v_light.a;
vec3 multipliers = vec3(clamp(red_multiplier, 0.0, 1.0), clamp(green_multiplier, 0.0, 1.0), clamp(blue_multiplier, 0.0, 1.0));
gl_FragColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb * multipliers;
}
`;
// Creates a new spine player with a transparent background,
// so content from the website shines through. Hides the controls.
// Instead, the user can control the animation via buttons.
var jsControlledPlayer = new spine.SpinePlayer("container-raptor", {
skeleton: "assets/raptor-pro.json",
atlas: "assets/raptor-pma.atlas",
animation: "walk",
showControls: false,
premultipliedAlpha: true,
backgroundColor: "#00000000",
alpha: true,
defaultMix: 1,
controlBones: ["root"],
success: (player) => {
const inputToValue = input => parseFloat(input) / 100;
player.sceneRenderer.setCustomBatcherShader(new spine.CustomShader(
player.sceneRenderer.context,
vertexShader,
fragmentShader,
(shader) => {
shader.setUniformf("red_multiplier", inputToValue(redInput.value));
shader.setUniformf("green_multiplier", inputToValue(greenInput.value));
shader.setUniformf("blue_multiplier", inputToValue(blueInput.value));
},
));
const head = player.skeleton.findSlot("head");
console.log(head.color)
setTimeout(() => {
head.color.set(1, 0, 0, 1)
player.skeleton.setToSetupPose()
})
}
});
</script>
</body>
</html>

186
spine-ts/spine-webgl/example/custom-shader.html Normal file
View File

@ -0,0 +1,186 @@
<!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>
<div style="position: absolute; color: white;">
Red: <input id="red-input" type="range" min="0" max="100" value="100" /> <output id="red-value"></output>
<br>
Green: <input id="green-input" type="range" min="0" max="100" value="100" /> <output id="green-value"></output>
<br>
Blue: <input id="blue-input" type="range" min="0" max="100" value="100" /> <output id="blue-value"></output>
</div>
<script>
class App {
constructor() {
this.skeleton = null;
this.animationState = null;
this.shaderValues = { r: 0, g: 0, b: 0, growing: true, color: "r" };
}
loadAssets(canvas) {
// Load the skeleton file.
canvas.assetManager.loadBinary("assets/raptor-pro.skel");
// Load the atlas and its pages.
canvas.assetManager.loadTextureAtlas("assets/raptor-pma.atlas");
}
initialize(canvas) {
let assetManager = canvas.assetManager;
// Create the texture atlas.
var atlas = assetManager.require("assets/raptor-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.6;
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/raptor-pro.skel"));
this.skeleton = new spine.Skeleton(skeletonData);
// Create an AnimationState, and set the "cape-follow-example" animation in looping mode.
var animationStateData = new spine.AnimationStateData(skeletonData);
this.animationState = new spine.AnimationState(animationStateData);
this.animationState.setAnimation(0, "walk", true);
// Center the camera on the skeleton
const offset = new spine.Vector2();
const size = new spine.Vector2();
this.skeleton.setToSetupPose();
this.skeleton.update(0);
this.skeleton.updateWorldTransform(spine.Physics.update);
this.skeleton.getBounds(offset, size);
canvas.renderer.camera.position.x = offset.x + size.x / 2;
canvas.renderer.camera.position.y = offset.y + size.y / 2;
}
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();
// updateShader(canvas.shader, this.shaderValues);
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
// Complete rendering.
renderer.end();
}
}
// Vertex and Fragment shader has been copied from src/Shader.ts#newTwoColoredTextured
// Fragment shader has been slightly changed to add uniform red_multiplier, green_multiplier, blue_multiplier uniforms
// that are used to multiply the rgb colors
let vertexShader = `
attribute vec4 ${spine.Shader.POSITION};
attribute vec4 ${spine.Shader.COLOR};
attribute vec4 ${spine.Shader.COLOR2};
attribute vec2 ${spine.Shader.TEXCOORDS};
uniform mat4 ${spine.Shader.MVP_MATRIX};
varying vec4 v_light;
varying vec4 v_dark;
varying vec2 v_texCoords;
void main () {
v_light = ${spine.Shader.COLOR};
v_dark = ${spine.Shader.COLOR2};
v_texCoords = ${spine.Shader.TEXCOORDS};
gl_Position = ${spine.Shader.MVP_MATRIX} * ${spine.Shader.POSITION};
}
`;
let fragmentShader = `
#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif
varying LOWP vec4 v_light;
varying LOWP vec4 v_dark;
varying vec2 v_texCoords;
uniform sampler2D u_texture;
uniform float red_multiplier;
uniform float green_multiplier;
uniform float blue_multiplier;
void main () {
vec4 texColor = texture2D(u_texture, v_texCoords);
gl_FragColor.a = texColor.a * v_light.a;
vec3 multipliers = vec3(clamp(red_multiplier, 0.0, 1.0), clamp(green_multiplier, 0.0, 1.0), clamp(blue_multiplier, 0.0, 1.0));
gl_FragColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb * multipliers;
}
`;
const inputToValue = input => parseFloat(input) / 100;
const redInput = document.querySelector("#red-input");
const redValue = document.querySelector("#red-value");
redValue.textContent = redInput.value;
const greenInput = document.querySelector("#green-input");
const greenValue = document.querySelector("#green-value");
greenValue.textContent = greenInput.value;
const blueInput = document.querySelector("#blue-input");
const blueValue = document.querySelector("#blue-value");
blueValue.textContent = blueInput.value;
redInput.addEventListener("input", (event) => {
redValue.textContent = event.target.value;
});
greenInput.addEventListener("input", (event) => {
greenValue.textContent = event.target.value;
});
blueInput.addEventListener("input", (event) => {
blueValue.textContent = event.target.value;
});
const shader = {
vertexShader,
fragmentShader,
setUniformCallback: (shader) => {
shader.setUniformf("red_multiplier", inputToValue(redInput.value));
shader.setUniformf("green_multiplier", inputToValue(greenInput.value));
shader.setUniformf("blue_multiplier", inputToValue(blueInput.value));
}
}
const app = new spine.SpineCanvas(document.getElementById("canvas"), {
app: new App(),
shader,
})
</script>
</body>
</html>

13
spine-ts/spine-webgl/src/SceneRenderer.ts
View File

@ -31,7 +31,7 @@ import { Color, Disposable, Skeleton, MathUtils, TextureAtlasRegion } from "@eso
import { OrthoCamera } from "./Camera.js"; import { OrthoCamera } from "./Camera.js";
import { GLTexture } from "./GLTexture.js"; import { GLTexture } from "./GLTexture.js";
import { PolygonBatcher } from "./PolygonBatcher.js"; import { PolygonBatcher } from "./PolygonBatcher.js";
import { Shader } from "./Shader.js"; import { CustomShader, Shader } from "./Shader.js";
import { ShapeRenderer } from "./ShapeRenderer.js"; import { ShapeRenderer } from "./ShapeRenderer.js";
import { SkeletonDebugRenderer } from "./SkeletonDebugRenderer.js"; import { SkeletonDebugRenderer } from "./SkeletonDebugRenderer.js";
import { SkeletonRenderer, VertexTransformer } from "./SkeletonRenderer.js"; import { SkeletonRenderer, VertexTransformer } from "./SkeletonRenderer.js";
@ -60,11 +60,14 @@ export class SceneRenderer implements Disposable {
skeletonRenderer: SkeletonRenderer; skeletonRenderer: SkeletonRenderer;
skeletonDebugRenderer: SkeletonDebugRenderer; skeletonDebugRenderer: SkeletonDebugRenderer;
constructor (canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true) { constructor (canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, customShader?: Shader) {
this.canvas = canvas; this.canvas = canvas;
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
this.twoColorTint = twoColorTint; this.twoColorTint = twoColorTint;
this.camera = new OrthoCamera(canvas.width, canvas.height); this.camera = new OrthoCamera(canvas.width, canvas.height);
if (customShader)
this.batcherShader = customShader;
else
this.batcherShader = twoColorTint ? Shader.newTwoColoredTextured(this.context) : Shader.newColoredTextured(this.context); this.batcherShader = twoColorTint ? Shader.newTwoColoredTextured(this.context) : Shader.newColoredTextured(this.context);
this.batcher = new PolygonBatcher(this.context, twoColorTint); this.batcher = new PolygonBatcher(this.context, twoColorTint);
this.shapesShader = Shader.newColored(this.context); this.shapesShader = Shader.newColored(this.context);
@ -489,6 +492,10 @@ export class SceneRenderer implements Disposable {
this.camera.update(); this.camera.update();
} }
setCustomBatcherShader(shader: CustomShader) {
this.batcherShader = shader;
}
private enableRenderer (renderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer) { private enableRenderer (renderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer) {
if (this.activeRenderer === renderer) return; if (this.activeRenderer === renderer) return;
this.end(); this.end();
@ -496,6 +503,8 @@ export class SceneRenderer implements Disposable {
this.batcherShader.bind(); this.batcherShader.bind();
this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values); this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcherShader.setUniformi("u_texture", 0); this.batcherShader.setUniformi("u_texture", 0);
if (this.batcherShader instanceof CustomShader && this.batcherShader.setUniformsCallback !== undefined)
this.batcherShader.setUniformsCallback(this.batcherShader);
this.batcher.begin(this.batcherShader); this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher; this.activeRenderer = this.batcher;
} else if (renderer instanceof ShapeRenderer) { } else if (renderer instanceof ShapeRenderer) {

11
spine-ts/spine-webgl/src/Shader.ts
View File

@ -298,3 +298,14 @@ void main () {
return new Shader(context, vs, fs); return new Shader(context, vs, fs);
} }
} }
export class CustomShader extends Shader {
constructor (
context: ManagedWebGLRenderingContext | WebGLRenderingContext,
vertexShader: string,
fragmentShader: string,
public setUniformsCallback?: (shader: Shader) => void,
) {
super(context, vertexShader, fragmentShader);
}
}

13
spine-ts/spine-webgl/src/SpineCanvas.ts
View File

@ -27,7 +27,7 @@
* SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/ *****************************************************************************/
import { TimeKeeper, AssetManager, ManagedWebGLRenderingContext, SceneRenderer, Input, StringMap } from "./index.js"; import { TimeKeeper, AssetManager, ManagedWebGLRenderingContext, SceneRenderer, Input, StringMap, CustomShader, Shader } from "./index.js";
/** An app running inside a {@link SpineCanvas}. The app life-cycle /** An app running inside a {@link SpineCanvas}. The app life-cycle
* is as follows: * is as follows:
@ -56,6 +56,12 @@ export interface SpineCanvasConfig {
pathPrefix?: string; pathPrefix?: string;
/* The WebGL context configuration */ /* The WebGL context configuration */
webglConfig?: any; webglConfig?: any;
/** Your custom Shader configuration. See {@link CustomShader} */
shader?: {
vertexShader: string,
fragmentShader: string,
setUniformCallback: (shader: Shader) => void,
};
} }
/** Manages the life-cycle and WebGL context of a {@link SpineCanvasApp}. The app loads /** Manages the life-cycle and WebGL context of a {@link SpineCanvasApp}. The app loads
@ -75,6 +81,8 @@ export class SpineCanvas {
readonly assetManager: AssetManager; readonly assetManager: AssetManager;
/** The input processor used to listen to mouse, touch, and keyboard events. */ /** The input processor used to listen to mouse, touch, and keyboard events. */
readonly input: Input; readonly input: Input;
/** The custom shader, if {@link SpineCanvasConfig.shader} config is passed. */
readonly shader?: Shader;
private disposed = false; private disposed = false;
@ -93,7 +101,8 @@ export class SpineCanvas {
this.htmlCanvas = canvas; this.htmlCanvas = canvas;
this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig); this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig);
this.renderer = new SceneRenderer(canvas, this.context); this.shader = config.shader ? new CustomShader(this.context, config.shader.vertexShader, config.shader.fragmentShader, config.shader.setUniformCallback) : undefined;
this.renderer = new SceneRenderer(canvas, this.context, true, this.shader);
this.gl = this.context.gl; this.gl = this.context.gl;
this.assetManager = new AssetManager(this.context, config.pathPrefix); this.assetManager = new AssetManager(this.context, config.pathPrefix);
this.input = new Input(canvas); this.input = new Input(canvas);