[ts][three] Fix texture edge artifacts. Completed dark tint.

spine-ts/spine-threejs/example/physics.html

@@ -44,7 +44,7 @@
       let controls;
       let lastFrameTime = Date.now() / 1000;
 
-      let pma = false;
+      let pma = true;
       let baseUrl = "assets/";
       let skeletonFile = "celestial-circus-pro.json";
       let atlasFile = `celestial-circus${pma ? "-pma" : ""}.atlas`;
@@ -98,20 +98,26 @@
             assetManager.require(skeletonFile)
           );
 
-          // Create a SkeletonMesh from the data and attach it to the scene
-          skeletonMesh = new spine.SkeletonMesh(
-            skeletonData,
-            (parameters) => {
-              parameters.depthTest = true;
-              parameters.depthWrite = true;
-              parameters.alphaTest = 0.001;
-            }
-          );
-          skeletonMesh.state.setAnimation(0, "swing", true);
-          skeletonMesh.state.setAnimation(1, "eyeblink-long", true);
-          mesh.add(skeletonMesh);
-
-          skeletonMesh.position.y = -300;
+            // Create a SkeletonMesh from the data and attach it to the scene
+            skeletonMesh = new spine.SkeletonMesh({
+              skeletonData,
+              materialFactory: (parameters) => {
+                return new THREE.MeshBasicMaterial({
+                  ...parameters,
+                  // transparent: true,
+                  // depthWrite: true,
+                  // depthTest: true,
+                  // alphaTest: 0.001,
+                  // vertexColors: true,
+                });
+              },
+              twoColorTint: false,
+            });
+            skeletonMesh.state.setAnimation(0, "swing", true);
+            skeletonMesh.state.setAnimation(1, "eyeblink-long", true);
+            mesh.add(skeletonMesh);
+
+          skeletonMesh.position.y = -200;
 
           requestAnimationFrame(render);
         } else requestAnimationFrame(load);

spine-ts/spine-threejs/example/shadow.html

@@ -39,18 +39,13 @@
       import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 
       let scene, camera, renderer;
-      let geometry, material, mesh, skeletonMesh, atlas, atlasLoader, atlas2, atlasLoader2, skeletonMesh2;
+      let geometry, material, mesh, skeletonMesh, atlas, atlasLoader, atlas2, atlasLoader2, skeletonMesh2, atlas3, atlasLoader3, skeletonMesh3;
       let assetManager;
       let canvas;
       let controls;
       let lastFrameTime = Date.now() / 1000;
 
-        let pma = true;
-
-        // let baseUrl = "assets/";
-        // let skeletonFile = "raptor-pro.json";
-        // let atlasFile = "raptor.atlas";
-        // let animation = "walk";
+      let pma = false;
 
       let baseUrl = "assets/";
       let skeletonFile = "raptor-pro.json";
@@ -61,6 +56,10 @@
       let atlasFile2 = "celestial-circus.atlas";
       let animation2 = "swing";
 
+      let skeletonFile3 = "coin-tint.json";
+      let atlasFile3 = "coin-tint.atlas";
+      let animation3 = "animation";
+
 
       function init() {
         // create the THREE.JS camera, scene and renderer (WebGL)
@@ -84,7 +83,7 @@
         scene.add(ambientLight)
 
         // LIGHTS - spotLight
-        const spotLight = new THREE.SpotLight(0xffffff, 10, 1200, Math.PI / 4, 0, 0)
+        const spotLight = new THREE.SpotLight(0xffffff, 5, 1200, Math.PI / 4, 0, 0)
         spotLight.position.set(0, 1000, 0)
         spotLight.castShadow = true
         spotLight.shadow.mapSize.set(8192, 8192)
@@ -96,7 +95,7 @@
         scene.add(spotLightHepler)
 
         // BOX
-        const boxGeometry = new THREE.BoxGeometry(400, 10, 100)
+        const boxGeometry = new THREE.BoxGeometry(400, 10, 10)
         const boxMaterial = new THREE.MeshStandardMaterial({
           transparent: true,
           metalness: 0.5,
@@ -118,14 +117,17 @@
         plane.receiveShadow = true
         scene.add(plane)
 
-          // load the assets required to display the Raptor model
-          assetManager = new spine.AssetManager(baseUrl, undefined, pma);
-          assetManager.loadText(skeletonFile);
-          assetManager.loadTextureAtlas(atlasFile);
+        // load the assets required to display the Raptor model
+        assetManager = new spine.AssetManager(baseUrl, undefined, pma);
+        assetManager.loadText(skeletonFile);
+        assetManager.loadTextureAtlas(atlasFile);
 
         assetManager.loadText(skeletonFile2);
         assetManager.loadTextureAtlas(atlasFile2);
 
+        assetManager.loadText(skeletonFile3);
+        assetManager.loadTextureAtlas(atlasFile3);
+
         requestAnimationFrame(load);
       }
 
@@ -136,14 +138,17 @@
           // The function passed to TextureAtlas is used to resolve relative paths.
           atlas = assetManager.require(atlasFile);
           atlas2 = assetManager.require(atlasFile2);
+          atlas3 = assetManager.require(atlasFile3);
 
           // Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
           atlasLoader = new spine.AtlasAttachmentLoader(atlas);
           atlasLoader2 = new spine.AtlasAttachmentLoader(atlas2);
+          atlasLoader3 = new spine.AtlasAttachmentLoader(atlas3);
 
           // Create a SkeletonJson instance for parsing the .json file.
           let skeletonJson = new spine.SkeletonJson(atlasLoader);
           let skeletonJson2 = new spine.SkeletonJson(atlasLoader2);
+          let skeletonJson3 = new spine.SkeletonJson(atlasLoader3);
 
           // Set the scale to apply during parsing, parse the file, and create a new skeleton.
           skeletonJson.scale = 0.4;
@@ -155,6 +160,11 @@
             assetManager.require(skeletonFile2)
           );
 
+          skeletonJson3.scale = 0.4;
+          let skeletonData3 = skeletonJson3.readSkeletonData(
+            assetManager.require(skeletonFile3)
+          );
+
           // Create a SkeletonMesh from the data and attach it to the scene
           skeletonMesh = new spine.SkeletonMesh({
             skeletonData,
@@ -187,8 +197,10 @@
 
           skeletonMesh2 = new spine.SkeletonMesh({
             skeletonData: skeletonData2,
+            premultipliedAlpha: true,
             materialFactory: param => {
               param.alphaTest = 0.001;
+              param.premultipliedAlpha = true;
               return new THREE.MeshStandardMaterial(param);
             }
           });
@@ -203,6 +215,28 @@
           skeletonMesh2.castShadow = true;
           skeletonMesh2.receiveShadow = true;
 
+
+
+          skeletonMesh3 = new spine.SkeletonMesh({
+            skeletonData: skeletonData3,
+            premultipliedAlpha: true,
+            materialFactory: param => {
+              param.alphaTest = 0.001;
+              param.premultipliedAlpha = true;
+              return new THREE.MeshStandardMaterial(param);
+            }
+          });
+
+          skeletonMesh3.state.setAnimation(0, animation3, true);
+          scene.add(skeletonMesh3);
+          skeletonMesh3.update(0)
+
+          skeletonMesh3.rotation.set(-Math.PI / 2.4, 0, 0);
+          skeletonMesh3.position.set(100, 150, 50);
+
+          skeletonMesh3.castShadow = true;
+          skeletonMesh3.receiveShadow = true;
+
           requestAnimationFrame(render);
         } else requestAnimationFrame(load);
       }
@@ -223,6 +257,7 @@
         // update the animation
         skeletonMesh.update(delta);
         skeletonMesh2.update(delta);
+        skeletonMesh3.update(delta);
 
         // render the scene
         renderer.render(scene, camera);