Avatar optimizer 2 [WIP]

avatar-spriter.js

@@ -1,11 +1,12 @@
 import * as THREE from 'three';
 // import easing from './easing.js';
 import metaversefile from 'metaversefile';
-const {useApp, useFrame, useLocalPlayer, usePhysics, useGeometries, useMaterials, useAvatarAnimations, useCleanup} = metaversefile;
+// const {useApp, useFrame, useLocalPlayer, usePhysics, useGeometries, useMaterials, useAvatarAnimations, useCleanup} = metaversefile;
 // import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import {DoubleSidedPlaneGeometry, CameraGeometry} from './geometries.js';
 import {WebaverseShaderMaterial} from './materials.js';
 import Avatar from './avatars/avatars.js';
+import {mod, angleDifference} from './util.js';
 
 const preview = false; // whether to draw debug meshes
 
@@ -53,7 +54,7 @@ const alphaTest = 0.9;
 
 const planeSpriteMeshes = [];
 const spriteAvatarMeshes = [];
-class SpritePlaneMesh extends THREE.Mesh {
+class SpriteAnimationPlaneMesh extends THREE.Mesh {
   constructor(tex, {angleIndex}) {
     const planeSpriteMaterial = new WebaverseShaderMaterial({
       uniforms: {
@@ -188,7 +189,7 @@ class SpritePlaneMesh extends THREE.Mesh {
     return this;
   }
 }
-class SpriteAvatarMesh extends THREE.Mesh {
+class SpriteAnimation360Mesh extends THREE.Mesh {
   constructor(tex) {
     const avatarSpriteMaterial = new WebaverseShaderMaterial({
       uniforms: {
@@ -320,13 +321,12 @@ class SpriteAvatarMesh extends THREE.Mesh {
     this.customPostMaterial = new AvatarSpriteDepthMaterial(undefined, {
       tex,
     });
-    // return spriteAvatarMesh;
 
     this.lastSpriteSpecName = '';
     this.lastSpriteSpecTimestamp = 0;
   }
 }
-class SpriteMegaAvatarMesh extends THREE.Mesh {
+class SpriteAvatarMesh extends THREE.Mesh {
   constructor(texs) {
     const tex = texs[0];
     const avatarMegaSpriteMaterial = new WebaverseShaderMaterial({
@@ -462,7 +462,9 @@ class SpriteMegaAvatarMesh extends THREE.Mesh {
     this.texs = texs;
   }
   setTexture(name) {
-    const tex = this.texs.find(t => t.name === name);
+    const spriteSpecs = getSpriteSpecs();
+    const spriteSpecIndex = spriteSpecs.findIndex(spriteSpec => spriteSpec.name === name);
+    const tex = this.texs[spriteSpecIndex];
     if (tex) {
       this.material.uniforms.uTex.value = tex;
       this.material.uniforms.uTex.needsUpdate = true;
@@ -682,14 +684,6 @@ class SpriteMegaAvatarMesh extends THREE.Mesh {
   }
 }
 
-function mod(a, n) {
-  return ((a % n) + n) % n;
-}
-function angleDifference(angle1, angle2) {
-  let a = angle2 - angle1;
-  a = mod(a + Math.PI, Math.PI*2) - Math.PI;
-  return a;
-}
 const animationAngles = [
   {name: 'left', angle: Math.PI/2},
   {name: 'right', angle: -Math.PI/2},
@@ -782,7 +776,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               // positionOffset -= walkSpeed/1000 * timeDiffMs;
 
@@ -806,7 +799,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset -= walkSpeed/1000 * timeDiffMs;
 
@@ -830,7 +822,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset -= walkSpeed/1000 * timeDiffMs;
 
@@ -854,7 +845,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset += walkSpeed/1000 * timeDiffMs;
 
@@ -878,7 +868,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset += walkSpeed/1000 * timeDiffMs;
 
@@ -902,7 +891,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset -= runSpeed/1000 * timeDiffMs;
 
@@ -926,7 +914,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset -= runSpeed/1000 * timeDiffMs;
 
@@ -950,7 +937,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset += runSpeed/1000 * timeDiffMs;
 
@@ -974,7 +960,6 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
           return {
-            reset() {},
             update(timestamp, timeDiffMs) {
               positionOffset += runSpeed/1000 * timeDiffMs;
 
@@ -1014,7 +999,6 @@ const getSpriteSpecs = () => {
 
               localRig.update(timestamp, timeDiffMs);
             },
-            reset() {},
             cleanup() {
               localRig.crouchTime = maxCrouchTime;
             },
@@ -1043,7 +1027,6 @@ const getSpriteSpecs = () => {
 
               localRig.update(timestamp, timeDiffMs);
             },
-            reset() {},
             cleanup() {
               localRig.crouchTime = maxCrouchTime;
             },
@@ -1072,7 +1055,6 @@ const getSpriteSpecs = () => {
 
               localRig.update(timestamp, timeDiffMs);
             },
-            reset() {},
             cleanup() {
               localRig.crouchTime = maxCrouchTime;
             },
@@ -1101,7 +1083,6 @@ const getSpriteSpecs = () => {
 
               localRig.update(timestamp, timeDiffMs);
             },
-            reset() {},
             cleanup() {
               localRig.crouchTime = maxCrouchTime;
             },
@@ -1130,7 +1111,6 @@ const getSpriteSpecs = () => {
 
               localRig.update(timestamp, timeDiffMs);
             },
-            reset() {},
             cleanup() {
               localRig.crouchTime = maxCrouchTime;
             },
@@ -1180,8 +1160,7 @@ const getSpriteSpecs = () => {
         init({angle, avatar: localRig}) {
           let positionOffset = 0;
 
-          const defaultJumpTime = 0;
-          let jumpTime = defaultJumpTime;
+          let jumpTime = 0;
           // const jumpIncrementSpeed = 400;
 
           return {
@@ -1209,7 +1188,7 @@ const getSpriteSpecs = () => {
               localRig.update(timestamp, timeDiffMs);
             },
             reset() {
-              jumpTime = defaultJumpTime;
+              jumpTime = 0;
             },
             cleanup() {
               localRig.jumpState = false;
@@ -1507,7 +1486,7 @@ class AvatarSpriteDepthMaterial extends THREE.MeshNormalMaterial {
   }
 }
 
-const _renderSpriteImages = skinnedVrm => {
+export const renderSpriteImages = skinnedVrm => {
   const localRig = new Avatar(skinnedVrm, {
     fingers: true,
     hair: true,
@@ -1583,12 +1562,13 @@ const _renderSpriteImages = skinnedVrm => {
     const canvas = document.createElement('canvas');
     canvas.width = size;
     canvas.height = size;
-    // canvas.style.cssText = `position: fixed; top: ${canvasIndex2*1024}px; left: 0; width: 1024px; height: 1024px; z-index: 10;`;
     const ctx = canvas.getContext('2d');
-    const tex = new THREE.Texture(canvas);
-    tex.name = name;
-    // tex.minFilter = THREE.NearestFilter;
-    // tex.magFilter = THREE.NearestFilter;
+
+    let tex;
+    if (preview) {
+      tex = new THREE.Texture(canvas);
+      tex.name = name;
+    }
     let canvasIndex = 0;
 
     // console.log('generate sprite', name);
@@ -1616,7 +1596,6 @@ const _renderSpriteImages = skinnedVrm => {
       // pre-run the animation one cycle first, to stabilize the hair physics
       let now = 0;
       const startAngleIndex = angleIndex;
-      // localRig.springBoneManager.reset();
       {
         const startNow = now;
         for (let j = 0; j < numFrames; j++) {
@@ -1628,7 +1607,7 @@ const _renderSpriteImages = skinnedVrm => {
       }
       const initialPositionOffset = localRig.inputs.hmd.position.z;
 
-      spriteGenerator.reset();
+      spriteGenerator.reset && spriteGenerator.reset();
 
       // now perform the real capture
       const startNow = now;
@@ -1658,13 +1637,15 @@ const _renderSpriteImages = skinnedVrm => {
           0, renderer.domElement.height - texSize, texSize, texSize,
           x * texSize, y * texSize, texSize, texSize
         );
-        tex.needsUpdate = true;
+        if (preview) {
+          tex.needsUpdate = true;
+        }
 
         // await _timeout(50);
       }
 
       if (preview) {
-        const planeSpriteMesh = new SpritePlaneMesh(tex, {
+        const planeSpriteMesh = new SpriteAnimationPlaneMesh(tex, {
           angleIndex: startAngleIndex,
         });
         planeSpriteMesh.position.set(-canvasIndex*worldSize, 2, -canvasIndex2*worldSize);
@@ -1680,7 +1661,7 @@ const _renderSpriteImages = skinnedVrm => {
     }
 
     if (preview) {
-      const spriteAvatarMesh = new SpriteAvatarMesh(tex);
+      const spriteAvatarMesh = new SpriteAnimation360Mesh(tex);
       spriteAvatarMesh.position.set(
         -canvasIndex*worldSize,
         0,
@@ -1694,18 +1675,21 @@ const _renderSpriteImages = skinnedVrm => {
 
     canvasIndex2++;
 
-    spriteImages.push(tex);
+    spriteImages.push(canvas);
   }
-  // console.timeEnd('render');
 
   return spriteImages;
 };
-function createSpriteMegaMesh(skinnedVrm) {
-  const spriteImages = _renderSpriteImages(skinnedVrm);
-  const spriteMegaAvatarMesh = new SpriteMegaAvatarMesh(spriteImages);
-  return spriteMegaAvatarMesh;
-}
-
-export {
-  createSpriteMegaMesh
+export const createSpriteAvatarMeshFromTextures = spriteImages => {
+  const spriteTextures = spriteImages.map(img => {
+    const t = new THREE.Texture(img);
+    t.needsUpdate = true;
+    return t;
+  });
+  const spriteAvatarMesh = new SpriteAvatarMesh(spriteTextures);
+  return spriteAvatarMesh;
 };
+export const createSpriteAvatarMesh = skinnedVrm => {
+  const spriteImages = renderSpriteImages(skinnedVrm);
+  return createSpriteAvatarMeshFromTextures(spriteImages);
+};