From 6887aa617a09ecc0e980fe823342ba57ff49b08a Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Tue, 8 Mar 2022 22:03:01 +0100 Subject: [PATCH 1/2] [threejs] Fix clipping not being ended, better alpha test support. --- CHANGELOG.md | 1 + spine-ts/.vscode/launch.json | 16 ++++++++++++++- spine-ts/spine-threejs/src/SkeletonMesh.ts | 20 +++++++++++++++---- .../spine-webgl/example/drag-and-drop.html | 2 ++ spine-ts/spine-webgl/example/drag-and-drop.js | 14 ++++++++++--- 5 files changed, 45 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 146ff44c9..0abd44897 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -238,6 +238,7 @@ * `SkeletonMesh` now takes an optional `SkeletonMeshMaterialParametersCustomizer` function that allows you to modify the `ShaderMaterialParameters` before the material is finalized. Use it to modify things like THREEJS' `Material.depthTest` etc. See #1590. * **Breaking change:** the global object `spine.canvas` no longer exists. All classes and functions are now exposed on the global `spine` object directly. Simply replace any reference to `spine.threejs.` in your source code with `spine.`. * **Breaking change:** the default fragment shader of `SkeletonMeshMaterial` now explicitely discards fragments with alpha < 0.5. See https://github.com/EsotericSoftware/spine-runtimes/issues/1985 +* **Breaking change:** reversal of the previous breaking change: the default fragment shader of `SkeletonMeshMaterial` does no longer discard fragments with alpha < 0.5. Pass a `SkeletonMeshMaterialParametersCustomizer` to the `SkeletonMesh` constructor, and modify `parameters.alphaTest` to be > 0. ### Player * Added `SpinePlayerConfig.rawDataURIs`. Allows to embed data URIs for skeletons, atlases and atlas page images directly in the HTML/JS without needing to load it from a separate file. See the example for a demonstration. diff --git a/spine-ts/.vscode/launch.json b/spine-ts/.vscode/launch.json index 109a37100..08d870cc9 100644 --- a/spine-ts/.vscode/launch.json +++ b/spine-ts/.vscode/launch.json @@ -17,6 +17,20 @@ "name": "drag-and-drop", "url": "http://localhost:8080/spine-webgl/example/drag-and-drop.html", "webRoot": "${workspaceFolder}" + }, + { + "type": "pwa-chrome", + "request": "launch", + "name": "barebones-dragon", + "url": "http://localhost:8080/spine-webgl/example/barebones-dragon.html", + "webRoot": "${workspaceFolder}" + }, + { + "type": "pwa-chrome", + "request": "launch", + "name": "threejs-example", + "url": "http://localhost:8080/spine-threejs/example/index.html", + "webRoot": "${workspaceFolder}" } ] -} \ No newline at end of file +} diff --git a/spine-ts/spine-threejs/src/SkeletonMesh.ts b/spine-ts/spine-threejs/src/SkeletonMesh.ts index e76b088d7..f004315bb 100644 --- a/spine-ts/spine-threejs/src/SkeletonMesh.ts +++ b/spine-ts/spine-threejs/src/SkeletonMesh.ts @@ -50,26 +50,35 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { `; let fragmentShader = ` uniform sampler2D map; + #ifdef USE_ALPHATEST + uniform float alphaTest; + #endif varying vec2 vUv; varying vec4 vColor; void main(void) { gl_FragColor = texture2D(map, vUv)*vColor; - if (gl_FragColor.a < 0.5) discard; + #ifdef USE_ALPHATEST + if (gl_FragColor.a < alphaTest) discard; + #endif } `; let parameters: THREE.ShaderMaterialParameters = { uniforms: { - map: { type: "t", value: null } as any + map: { value: null }, }, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.DoubleSide, transparent: true, depthWrite: false, - alphaTest: 0.5 + alphaTest: 0.0 }; customizer(parameters); + if (parameters.alphaTest > 0) { + parameters.defines = { "USE_ALPHATEST": 1 }; + parameters.uniforms["alphaTest"] = { value: parameters.alphaTest }; + } super(parameters); }; } @@ -194,7 +203,10 @@ export class SkeletonMesh extends THREE.Object3D { let clip = (attachment); clipper.clipStart(slot, clip); continue; - } else continue; + } else { + clipper.clipEndWithSlot(slot); + continue; + } if (texture != null) { let skeleton = slot.bone.skeleton; diff --git a/spine-ts/spine-webgl/example/drag-and-drop.html b/spine-ts/spine-webgl/example/drag-and-drop.html index 13cc10f40..c0fc4308e 100644 --- a/spine-ts/spine-webgl/example/drag-and-drop.html +++ b/spine-ts/spine-webgl/example/drag-and-drop.html @@ -12,6 +12,8 @@
+ +
diff --git a/spine-ts/spine-webgl/example/drag-and-drop.js b/spine-ts/spine-webgl/example/drag-and-drop.js index f635e001f..f7b5eebea 100644 --- a/spine-ts/spine-webgl/example/drag-and-drop.js +++ b/spine-ts/spine-webgl/example/drag-and-drop.js @@ -3,6 +3,7 @@ class App { this.skeleton = null; this.animationState = null; this.canvas = null; + this.pma = true; } loadAssets(canvas) { @@ -20,7 +21,13 @@ class App { // Setup listener for animation selection box let animationSelectBox = document.body.querySelector("#animations"); animationSelectBox.onchange = () => { - this.animationState.setAnimation(0, animationSelectBox.value, true); + // this.animationState.setAnimation(0, animationSelectBox.value, true); + } + + // Setup listener for the PMA checkbox + let pmaCheckbox = document.body.querySelector("#pma"); + pmaCheckbox.onchange = () => { + this.pma = pmaCheckbox.checked; } // Setup the drag and drop listener @@ -117,7 +124,7 @@ class App { animationSelectBox.appendChild(option); } - if (animationName) this.animationState.setAnimation(0, animationName, true); + // if (animationName) this.animationState.setAnimation(0, animationName, true); // Center the skeleton in the viewport this.centerSkeleton(); @@ -153,10 +160,11 @@ class App { renderer.resize(spine.ResizeMode.Expand); canvas.clear(0.2, 0.2, 0.2, 1); + renderer.begin(); renderer.line(-10000, 0, 10000, 0, spine.Color.RED); renderer.line(0, -10000, 0, 10000, spine.Color.GREEN); - renderer.drawSkeleton(this.skeleton, true); + renderer.drawSkeleton(this.skeleton, this.pma); renderer.end(); } } From d485ce069614463fc042489fdfe764656c4913af Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Tue, 8 Mar 2022 22:05:22 +0100 Subject: [PATCH 2/2] [ts] 4.0.21 release. --- spine-ts/package-lock.json | 98 ++++++++++++++--------------- spine-ts/package.json | 2 +- spine-ts/spine-canvas/package.json | 4 +- spine-ts/spine-core/package.json | 2 +- spine-ts/spine-player/package.json | 4 +- spine-ts/spine-threejs/package.json | 4 +- spine-ts/spine-webgl/package.json | 4 +- 7 files changed, 59 insertions(+), 59 deletions(-) diff --git a/spine-ts/package-lock.json b/spine-ts/package-lock.json index 3fe133835..468694517 100644 --- a/spine-ts/package-lock.json +++ b/spine-ts/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esotericsoftware/spine-ts", - "version": "4.0.20", + "version": "4.0.21", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esotericsoftware/spine-ts", - "version": "4.0.20", + "version": "4.0.21", "license": "LicenseRef-LICENSE", "workspaces": [ "spine-core", @@ -58,13 +58,13 @@ "integrity": "sha512-XqBrP/+kbs+o0CYRhCVVE95v7FaL2bO5Z7+3VQJE0nEyjo+9LoLfeNgZITOnndKHxM+7ltEciAIR7uE0SZlsOg==" }, "node_modules/accepts": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", - "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", "dev": true, "dependencies": { - "mime-types": "~2.1.24", - "negotiator": "0.6.2" + "mime-types": "~2.1.34", + "negotiator": "0.6.3" }, "engines": { "node": ">= 0.6" @@ -1125,9 +1125,9 @@ } }, "node_modules/http-parser-js": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.5.tgz", - "integrity": "sha512-x+JVEkO2PoM8qqpbPbOL3cqHPwerep7OwzK7Ay+sMQjKzaKCqWvjoXm5tqMP9tXWWTnTzAjIhXg+J99XYuPhPA==", + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.6.tgz", + "integrity": "sha512-vDlkRPDJn93swjcjqMSaGSPABbIarsr1TLAui/gLDXzV5VsJNdXNzMYDyNBLQkjWQCJ1uizu8T2oDMhmGt0PRA==", "dev": true }, "node_modules/inflight": { @@ -1489,9 +1489,9 @@ } }, "node_modules/minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "dependencies": { "brace-expansion": "^1.1.7" @@ -1623,9 +1623,9 @@ } }, "node_modules/negotiator": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", - "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", "dev": true, "engines": { "node": ">= 0.6" @@ -7693,9 +7693,9 @@ "dev": true }, "node_modules/typescript": { - "version": "4.5.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", - "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz", + "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -7951,41 +7951,41 @@ }, "spine-canvas": { "name": "@esotericsoftware/spine-canvas", - "version": "4.0.20", + "version": "4.0.21", "license": "LicenseRef-LICENSE", "dependencies": { - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } }, "spine-core": { "name": "@esotericsoftware/spine-core", - "version": "4.0.20", + "version": "4.0.21", "license": "LicenseRef-LICENSE" }, "spine-player": { "name": "@esotericsoftware/spine-player", - "version": "4.0.20", + "version": "4.0.21", "license": "LicenseRef-LICENSE", "dependencies": { - "@esotericsoftware/spine-webgl": "^4.0.20" + "@esotericsoftware/spine-webgl": "^4.0.21" } }, "spine-threejs": { "name": "@esotericsoftware/spine-threejs", - "version": "4.0.20", + "version": "4.0.21", "license": "LicenseRef-LICENSE", "dependencies": { - "@esotericsoftware/spine-core": "^4.0.20", + "@esotericsoftware/spine-core": "^4.0.21", "@types/three": "^0.133.1", "three": "^0.133.1" } }, "spine-webgl": { "name": "@esotericsoftware/spine-webgl", - "version": "4.0.20", + "version": "4.0.21", "license": "LicenseRef-LICENSE", "dependencies": { - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } } }, @@ -7993,7 +7993,7 @@ "@esotericsoftware/spine-canvas": { "version": "file:spine-canvas", "requires": { - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } }, "@esotericsoftware/spine-core": { @@ -8002,13 +8002,13 @@ "@esotericsoftware/spine-player": { "version": "file:spine-player", "requires": { - "@esotericsoftware/spine-webgl": "^4.0.20" + "@esotericsoftware/spine-webgl": "^4.0.21" } }, "@esotericsoftware/spine-threejs": { "version": "file:spine-threejs", "requires": { - "@esotericsoftware/spine-core": "^4.0.20", + "@esotericsoftware/spine-core": "^4.0.21", "@types/three": "^0.133.1", "three": "^0.133.1" } @@ -8016,7 +8016,7 @@ "@esotericsoftware/spine-webgl": { "version": "file:spine-webgl", "requires": { - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } }, "@types/offscreencanvas": { @@ -8031,13 +8031,13 @@ "integrity": "sha512-XqBrP/+kbs+o0CYRhCVVE95v7FaL2bO5Z7+3VQJE0nEyjo+9LoLfeNgZITOnndKHxM+7ltEciAIR7uE0SZlsOg==" }, "accepts": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", - "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", "dev": true, "requires": { - "mime-types": "~2.1.24", - "negotiator": "0.6.2" + "mime-types": "~2.1.34", + "negotiator": "0.6.3" } }, "ansi-regex": { @@ -8884,9 +8884,9 @@ } }, "http-parser-js": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.5.tgz", - "integrity": "sha512-x+JVEkO2PoM8qqpbPbOL3cqHPwerep7OwzK7Ay+sMQjKzaKCqWvjoXm5tqMP9tXWWTnTzAjIhXg+J99XYuPhPA==", + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.6.tgz", + "integrity": "sha512-vDlkRPDJn93swjcjqMSaGSPABbIarsr1TLAui/gLDXzV5VsJNdXNzMYDyNBLQkjWQCJ1uizu8T2oDMhmGt0PRA==", "dev": true }, "inflight": { @@ -9169,9 +9169,9 @@ } }, "minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "requires": { "brace-expansion": "^1.1.7" @@ -9277,9 +9277,9 @@ } }, "negotiator": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", - "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", "dev": true }, "noms": { @@ -14061,9 +14061,9 @@ "dev": true }, "typescript": { - "version": "4.5.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", - "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz", + "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==", "dev": true }, "union-value": { diff --git a/spine-ts/package.json b/spine-ts/package.json index 11a3b8dd4..3a7b79cb2 100644 --- a/spine-ts/package.json +++ b/spine-ts/package.json @@ -1,6 +1,6 @@ { "name": "@esotericsoftware/spine-ts", - "version": "4.0.20", + "version": "4.0.21", "description": "The official Spine Runtimes for the web.", "files": [ "README.md" diff --git a/spine-ts/spine-canvas/package.json b/spine-ts/spine-canvas/package.json index daa137dd8..36f57770b 100644 --- a/spine-ts/spine-canvas/package.json +++ b/spine-ts/spine-canvas/package.json @@ -1,6 +1,6 @@ { "name": "@esotericsoftware/spine-canvas", - "version": "4.0.20", + "version": "4.0.21", "description": "The official Spine Runtimes for the web.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -30,6 +30,6 @@ }, "homepage": "https://github.com/esotericsoftware/spine-runtimes#readme", "dependencies": { - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } } \ No newline at end of file diff --git a/spine-ts/spine-core/package.json b/spine-ts/spine-core/package.json index b61797c6e..4a2ca99f3 100644 --- a/spine-ts/spine-core/package.json +++ b/spine-ts/spine-core/package.json @@ -1,6 +1,6 @@ { "name": "@esotericsoftware/spine-core", - "version": "4.0.20", + "version": "4.0.21", "description": "The official Spine Runtimes for the web.", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/spine-ts/spine-player/package.json b/spine-ts/spine-player/package.json index 85345e6cb..e45e2e3c3 100644 --- a/spine-ts/spine-player/package.json +++ b/spine-ts/spine-player/package.json @@ -1,6 +1,6 @@ { "name": "@esotericsoftware/spine-player", - "version": "4.0.20", + "version": "4.0.21", "description": "The official Spine Runtimes for the web.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -30,6 +30,6 @@ }, "homepage": "https://github.com/esotericsoftware/spine-runtimes#readme", "dependencies": { - "@esotericsoftware/spine-webgl": "^4.0.20" + "@esotericsoftware/spine-webgl": "^4.0.21" } } \ No newline at end of file diff --git a/spine-ts/spine-threejs/package.json b/spine-ts/spine-threejs/package.json index e24d89906..db0ef4458 100644 --- a/spine-ts/spine-threejs/package.json +++ b/spine-ts/spine-threejs/package.json @@ -1,6 +1,6 @@ { "name": "@esotericsoftware/spine-threejs", - "version": "4.0.20", + "version": "4.0.21", "description": "The official Spine Runtimes for the web.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -32,6 +32,6 @@ "dependencies": { "@types/three": "^0.133.1", "three": "^0.133.1", - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } } \ No newline at end of file diff --git a/spine-ts/spine-webgl/package.json b/spine-ts/spine-webgl/package.json index 66a00b073..caf701afb 100644 --- a/spine-ts/spine-webgl/package.json +++ b/spine-ts/spine-webgl/package.json @@ -1,6 +1,6 @@ { "name": "@esotericsoftware/spine-webgl", - "version": "4.0.20", + "version": "4.0.21", "description": "The official Spine Runtimes for the web.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -30,6 +30,6 @@ }, "homepage": "https://github.com/esotericsoftware/spine-runtimes#readme", "dependencies": { - "@esotericsoftware/spine-core": "^4.0.20" + "@esotericsoftware/spine-core": "^4.0.21" } } \ No newline at end of file