From 738217f8c15cbdcafca1148a6d442a48a1376a2c Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Wed, 2 Feb 2022 12:11:48 +0100 Subject: [PATCH 1/2] [threejs] Explicitely discard fragments with alpha < 0.5, closes #1985 --- CHANGELOG.md | 1 + spine-ts/spine-threejs/src/SkeletonMesh.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35b8fae27..f5739e836 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -234,6 +234,7 @@ ### Three.js backend * `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 ### 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/spine-threejs/src/SkeletonMesh.ts b/spine-ts/spine-threejs/src/SkeletonMesh.ts index 2b5ccde7a..e76b088d7 100644 --- a/spine-ts/spine-threejs/src/SkeletonMesh.ts +++ b/spine-ts/spine-threejs/src/SkeletonMesh.ts @@ -54,6 +54,7 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { varying vec4 vColor; void main(void) { gl_FragColor = texture2D(map, vUv)*vColor; + if (gl_FragColor.a < 0.5) discard; } `; From 70319823334200b7eacf7c115bbdb1bb74fd7845 Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Wed, 2 Feb 2022 12:11:48 +0100 Subject: [PATCH 2/2] [threejs] Explicitely discard fragments with alpha < 0.5, closes #1985 --- CHANGELOG.md | 1 + spine-ts/spine-threejs/src/SkeletonMesh.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index efbde5933..7583f1a7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -328,6 +328,7 @@ ### Three.js backend * `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 ### 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/spine-threejs/src/SkeletonMesh.ts b/spine-ts/spine-threejs/src/SkeletonMesh.ts index 6ac2fdb3c..dd1a2280e 100644 --- a/spine-ts/spine-threejs/src/SkeletonMesh.ts +++ b/spine-ts/spine-threejs/src/SkeletonMesh.ts @@ -54,6 +54,7 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { varying vec4 vColor; void main(void) { gl_FragColor = texture2D(map, vUv)*vColor; + if (gl_FragColor.a < 0.5) discard; } `;