IK Retargeting initial demo

.gitignore

@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

README.md

@@ -1 +1,23 @@
-# ossos_demo
+# Ossos Demo ( v.0.0.4 alpha )
+[![npm](https://img.shields.io/badge/Sponsor-donate-blue?style=flat-square&logo=github)](https://github.com/sponsors/sketchpunklabs)
+[![x](https://img.shields.io/badge/Twitter-profile-blue?style=flat-square&logo=x)](https://x.com/SketchpunkLabs)
+[![youtube](https://img.shields.io/badge/Youtube-subscribe-red?style=flat-square&logo=youtube)](https://youtube.com/c/sketchpunklabs)
+[![Ko-Fi](https://img.shields.io/badge/Ko_Fi-donate-orange?style=flat-square&logo=youtube)](https://ko-fi.com/sketchpunk)
+[![Patreon](https://img.shields.io/badge/Patreon-donate-red?style=flat-square&logo=youtube)](https://www.patreon.com/sketchpunk)
+
+### Character Animation Library ###
+
+This is the demo repo for the Ossos project. You can view it at:
+
+https://sketchpunklabs.github.io/ossos_demo
+
+The library can be found at:
+https://github.com/sketchpunklabs/ossos/tree/ossos_next
+
+### Repo Setup ###
+
+```sh
+git clone --recurse-submodules --depth=1 https://github.com/sketchpunklabs/ossos_demo
+npm install
+npm run start
+```

_lib/customSkinning/MatrixSkinMaterial.js

@@ -0,0 +1,177 @@
+import * as THREE from '@three';
+
+export default function MatrixSkinMaterial( val='cyan', skin ){
+    const isTex    = ( val instanceof THREE.Texture || val.isTexture );
+    const uniforms = {
+        pose : { value: skin?.offsetBuffer },
+    };
+
+    if( !isTex ){
+        let color;
+        switch( typeof val ){
+            case 'string':
+            case 'number': color = new THREE.Color( val ); break;
+            case 'object': if( Array.isArray( val ) ) color = new THREE.Color( val[0], val[1], val[2] ); break;
+            default: color = new THREE.Color( 'red' ); break;
+        }
+
+        uniforms.color     = { type: 'vec3', value: color };
+    }else{
+        uniforms.texBase   = { type: 'sampler2D', value: val };
+    }
+
+    const matConfig = {
+        side            : THREE.DoubleSide,
+        uniforms        : uniforms,
+        vertexShader    : VERT_SRC,
+        fragmentShader	: ( !isTex )? FRAG_COL : FRAG_TEX,
+    }
+
+    const mat       = new THREE.RawShaderMaterial( matConfig );
+    mat.extensions  = { derivatives : true }; // If not using WebGL2.0 and Want to use dfdx or fwidth, Need to load extension
+
+    Object.defineProperty( mat, 'map', {
+        set( c ){ mat.uniforms.texBase.value = c ; },
+    });
+
+    return mat;
+}
+
+// #region SHADER CODE
+
+// HANDLE SKINNING
+const VERT_SRC = `#version 300 es
+in vec3 position;   // Vertex Position
+in vec3 normal;     // Vertex Normal
+in vec2 uv;         // Vertex Texcoord
+in vec4 skinWeight; // Bone Weights
+in vec4 skinIndex;  // Bone Indices
+
+#define MAXBONES 110             // Arrays can not be dynamic, so must set a size
+uniform mat4 pose[ MAXBONES ];
+
+uniform mat4 modelMatrix;       // Matrices should be filled in by THREE.JS Automatically.
+uniform mat4 viewMatrix;
+uniform mat4 projectionMatrix;
+
+out vec3 frag_wpos;             // Fragment World Space Position
+out vec3 frag_norm;             // Fragment Normal
+out vec2 frag_uv;               // Fragment Texcoord
+
+////////////////////////////////////////////////////////////////////////
+
+mat4 getBoneMatrix( mat4[ MAXBONES ] pose, vec4 idx, vec4 wgt ){
+    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    NORMALIZE BONE WEIGHT VECTOR - INCASE MODEL WASN'T PREPARED LIKE THAT
+    If Weights are not normalized, Merging the Bone Offsets will create artifacts */
+    int a = int( idx.x ),
+        b = int( idx.y ),
+        c = int( idx.z ),
+        d = int( idx.w );
+    
+    wgt *= 1.0 / ( wgt.x + wgt.y + wgt.z + wgt.w );
+
+    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    // MERGE THE BONE OFFSETS BASED ON WEIGHT
+    mat4 bone_wgt =
+        pose[ a ] * wgt.x +  
+        pose[ b ] * wgt.y +
+        pose[ c ] * wgt.z +
+        pose[ d ] * wgt.w;
+
+    return bone_wgt;
+}
+
+////////////////////////////////////////////////////////////////////////
+
+void main() {
+    mat4 boneMatrix = getBoneMatrix( pose, skinIndex, skinWeight );         // Get the Skinning Matrix
+    mat4 mbMatrix   = modelMatrix * boneMatrix;                             // Merge Model and Bone Matrices together
+
+    vec4 wpos       = mbMatrix * vec4( position, 1.0 );                     // Use new Matrix to Transform Vertices
+    frag_wpos       = wpos.xyz;                                             // Save WorldSpace Position for Fragment Shader
+    frag_norm       = mat3( transpose( inverse( mbMatrix ) ) ) * normal;    // Transform Normals using bone + model matrix
+    frag_uv         = uv;
+
+    gl_Position     = projectionMatrix * viewMatrix * wpos;
+    //gl_Position     = projectionMatrix * viewMatrix * vec4( position, 1.0 );
+}`;
+
+// FRAGMENT THAT HANDLES BASE COLOR & LIGHTING
+const FRAG_COL = `#version 300 es
+precision mediump float;
+
+////////////////////////////////////////////////////////////////////////
+
+out     vec4 out_color;
+in      vec3 frag_wpos;
+in      vec3 frag_norm;
+
+uniform vec3 color;
+
+////////////////////////////////////////////////////////////////////////
+
+#define LITCNT 2
+const vec3[] light_pos = vec3[](
+    vec3( 0.0, 0.5, 1.0 ),
+    vec3( -1.0, 0.0, 1.0 )
+);
+
+float computePointLights( vec3[LITCNT] lights, vec3 norm ){
+    vec3 light_vec;
+    vec3 light_dir;
+
+    float dist;
+    float attenuation;
+    float diffuse     = 0.0;
+    float constant    = 0.5;
+    float linear      = 0.5;
+    float quadratic   = 0.5;
+    
+    for( int i=0; i < LITCNT; i++ ){
+        light_vec       = lights[i].xyz - frag_wpos;
+        light_dir       = normalize( light_vec );
+        dist            = length( light_vec );
+        attenuation     = 1.0 / ( constant + linear * dist + quadratic * (dist * dist) );
+        diffuse        += max( dot( norm, light_dir ), 0.0 ) * attenuation;
+    }
+
+    return diffuse;
+}
+
+const vec3 sun_pos = vec3( 10.0, 10.0, 10.0 );
+float computeDirLight( vec3 lPos, vec3 norm ){
+    return max( dot( norm, normalize( lPos ) ), 0.0 );
+}
+
+void main(){
+    //vec3 norm   = normalize( cross( dFdx(frag_wpos), dFdy(frag_wpos) ) ); // Low Poly Normals
+    vec3 norm     = normalize( frag_norm ); // Model's Normals            
+    
+    float diffuse = 0.15; // ambient light
+    diffuse      += computePointLights( light_pos, norm );
+    diffuse      += computeDirLight( sun_pos, norm );
+
+    out_color     = vec4( color * diffuse, 1.0 );
+
+    //out_color.rgb = vec3( 1.0, 0.0, 0.0 );
+}`;
+
+// FRAGMENT THAT ONLY RENDERS TEXTURE
+const FRAG_TEX = `#version 300 es
+precision mediump float;
+
+////////////////////////////////////////////////////////////////////////
+
+out     vec4 out_color;
+in      vec2 frag_uv;
+
+uniform sampler2D texBase;
+
+////////////////////////////////////////////////////////////////////////
+
+void main(){
+    out_color = texture( texBase, frag_uv );
+}`;
+
+// #endregion