2D BlendSpace Modes & Weights

Author: sketchpunk

code/template_tweakpanel.html

@@ -26,7 +26,7 @@
     // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     Debug.pnt.add( [0,0.5,0], 0x00ff00, 5, 2 );
     Debug.ln.add( [0,0.5,0], [0,1,0], 0xffffff );
-    
+
     // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     // App.createRenderLoop( onPreRender ).start();
     App.renderLoop();
@@ -35,7 +35,7 @@
 
 function onPreRender( dt, et ){}
 
-async function buildUI(){    
+async function buildUI(){
     appendGithubLink( false );
     // ! https://github.com/tallneil/tweakpane-plugin-inputs
     // https://github.com/dgxyzw/tweakpane-plugin-gradient
@@ -44,7 +44,7 @@
     // https://github.com/donmccurdy/tweakpane-plugin-thumbnail-list?tab=readme-ov-file
     // https://github.com/tweakpane/plugin-camerakit
     // https://github.com/0b5vr/tweakpane-plugin-rotation
-    // https://github.com/cocopon/tweakpane/issues/508  Example of reset control 
+    // https://github.com/cocopon/tweakpane/issues/508  Example of reset control
     // https://github.com/0b5vr/tweakpane-plugin-profiler
     // https://github.com/brunoimbrizi/tweakpane-plugin-chromatic
     // https://github.com/LuchoTurtle/tweakpane-plugin-file-import
@@ -83,7 +83,7 @@
     // f2.addBinding( Ref, 'Yellow', { readonly: true, });
     // f2.addBinding( Ref, 'L_click', { readonly: true, });
     // f2.addBinding( Ref, 'R_click', { readonly: true, });
-    
+
     // f0.addBinding( Ref, 'showGizmo', {  label: 'Gizmo' } ).on( "change", e=>{
     //     if( e.value ) Gizmo.show();
     //     else          Gizmo.hide();
@@ -106,6 +106,17 @@
     //     y           : { step:0.01, min:-1, max:1, inverted:true },
     // });
 
+    // state.sel = 0
+    // f.addBinding( state, 'sel', {
+    //     label   : 'Modes',
+    //     options : {
+    //         Quadrants   : 0,
+    //         Diamond     : 1,
+    //         Corners     : 2,
+    //         Triangle    : 3,
+    //     },
+    // });
+
     // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     Ref.pane = p;
 }
@@ -124,4 +135,4 @@
 .ppane .tp-sldtxtv_t { max-width: 40px; }
 .ppane .tp-sglv_i{ color:white; }
 </style>
-</body></html>
+</body></html>

code/webgl/anim/001_char_0_root.html

@@ -40,7 +40,7 @@
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Animation Tree
 https://docs.godotengine.org/en/latest/tutorials/animation/animation_tree.html
-https://www.youtube.com/watch?v=iElHZhOxGYA 
+https://www.youtube.com/watch?v=iElHZhOxGYA
 https://www.youtube.com/watch?v=km4SGFzpEc0
 https://godotforums.org/d/33975-programmatically-setup-animation-trees/2
 https://kidscancode.org/godot_recipes/4.x/animation/using_animation_sm/index.html
@@ -92,29 +92,26 @@
         loadAnimations( `${url}/anim_land_traverse.gltf` ),
     ]);
 
-    
-    
+    // aryAnim.forEach( (o,i)=>console.log( i, o.name ) );
+
     // Add character to scene
     App.scene.add( root );
     Ref.skel = skinned.skeleton;
     Ref.root = root;
 
     // Execute Animation
-    const clip = aryAnim[19]; 
+    const clip = aryAnim[19];
     Ref.mixer  = new THREE.AnimationMixer( skinned );
     Ref.action = Ref.mixer.clipAction( clip );
     Ref.action.play();
-    
+
     await TEST();
 
     Ref.frame0 = clipFramePosition( clip, 'origin', 0 );
     Ref.frameX = clipFramePosition( clip, 'origin', -1 );
 
-
     // console.log( Ref.frame0, Ref.frameX );
 
-    
-
     // skinned.skeleton.bones.forEach( (v,i)=>console.log( i, v.name ) );
     // aryAnim.forEach( (v,i)=>console.log( i, v.name ) );
 
@@ -142,7 +139,7 @@
             // NEW LOOP, RESET PREV
 
             // Delta between last pos in prev loop to last frame
-            DELTA.fromSub( Ref.frameX, PREV ); 
+            DELTA.fromSub( Ref.frameX, PREV );
             DELTA[1] = 0;
 
             // Copy current postion as new PREV for next frame
@@ -155,13 +152,13 @@
 
             // Add Both deltas !!!!
             DELTA2.add( DELTA );
-            
+
             Ref.root.position.x += DELTA2[0];
             Ref.root.position.z += DELTA2[2];
         }else{
             // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
             // CURRENT LOOP
-            
+
             // Compute position delta
             CURR.copyObj( rBone.position );
             CURR[1] = 0;
@@ -198,8 +195,8 @@
     let skinned;
     let mat = null;
     for( const m of util.traverseFind( tf.scene, o=> (o.type === 'SkinnedMesh') ) ){
-        if( opt.phong != null ) mat = new THREE.MeshPhongMaterial( { color: opt.phong } ); 
-        if( opt.toon ) mat = new THREE.MeshToonMaterial( { map: m.material.map, normalMap: m.material.normalMap } ); 
+        if( opt.phong != null ) mat = new THREE.MeshPhongMaterial( { color: opt.phong } );
+        if( opt.toon ) mat = new THREE.MeshToonMaterial( { map: m.material.map, normalMap: m.material.normalMap } );
 
         if( mat )       m.material = mat;
         // if( !skel )     skel = m.skeleton;  // First skeleton
@@ -219,7 +216,7 @@
     if( opt.skelHelper ){
         App.scene.add( new THREE.SkeletonHelper( skel.bones[0] ) );
     }
-    
+
     // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     return [ tf.scene, skinned ];
 }
@@ -264,7 +261,7 @@
     App.scene.add( root );
 
     // Execute Animation
-    const clip = aryAnim[19]; 
+    const clip = aryAnim[19];
     Ref.mixer2  = new THREE.AnimationMixer( skinned );
     Ref.action2 = Ref.mixer2.clipAction( clip );
     Ref.action2.play();