Extended basic / lambert / phong materials to handle skinning.

src/animation/Animation.js

@@ -218,20 +218,26 @@ THREE.Animation.prototype.update = function( time ) {
 		
 				if( type === "rot" ) {
 		
-					if( scale < 0 || scale > 1 )
+					if( scale < 0 || scale > 1 ) {
+						
 						console.log( "Scale out of bounds:" + scale ); 
+						scale = scale < 0 ? 0 : 1;
+					
+					}
 		
 					THREE.Quaternion.slerp( prevXYZ, nextXYZ, object.quaternion, scale );
+
 				}
 				
 				// lerp pos/scl 
-							
+
 				else {
 					
 					vector   = type === "pos" ? object.position : object.scale; 
 					vector.x = prevXYZ[ 0 ] + ( nextXYZ[ 0 ] - prevXYZ[ 0 ] ) * scale;
 					vector.y = prevXYZ[ 1 ] + ( nextXYZ[ 1 ] - prevXYZ[ 1 ] ) * scale;
 					vector.z = prevXYZ[ 2 ] + ( nextXYZ[ 2 ] - prevXYZ[ 2 ] ) * scale;
+
 				}
 			}		
 		}
@@ -241,13 +247,12 @@ THREE.Animation.prototype.update = function( time ) {
 	// update JIT?
 	
 	if( JIThierarchy[ 0 ][ frame ] === undefined ) {
-
-		console.log(this.hierarchy);
 		
 		this.hierarchy[ 0 ].update( undefined, true );
 	
 		for( var h = 0; h < this.hierarchy.length; h++ ) 
 			JIThierarchy[ h ][ frame ] = this.hierarchy[ h ].skinMatrix.clone();
+
 	}
 
 };
@@ -274,9 +279,11 @@ THREE.Animation.prototype.getNextKeyWith = function( type, h, key ) {
 		
 		if( keys[ key ][ type ] !== undefined )
 			return keys[ key ];
+
 	}
 
 	return this.data.hierarchy[ h ].keys[ 0 ];
+
 }
 
 

src/materials/MeshBasicMaterial.js

@@ -21,7 +21,8 @@
  *  wireframe: <boolean>,
  *  wireframe_linewidth: <float>,
  
- *  vertex_colors: <bool>
+ *  vertex_colors: <bool>,
+ *  skinning: <bool>
  * }
  */
 
@@ -52,6 +53,7 @@ THREE.MeshBasicMaterial = function ( parameters ) {
 	this.wireframe_linejoin = 'round';	// implemented just in CanvasRenderer
 
 	this.vertex_colors = false;
+	this.skinning = false;
 	
 	if ( parameters ) {
 
@@ -78,6 +80,7 @@ THREE.MeshBasicMaterial = function ( parameters ) {
 		if ( parameters.wireframe_linejoin !== undefined ) this.wireframe_linejoin = parameters.wireframe_linejoin;
 		
 		if ( parameters.vertex_colors !== undefined ) this.vertex_colors = parameters.vertex_colors;
+		if ( parameters.skinning !== undefined ) this.skinning = parameters.skinning;
 
 	}
 
@@ -110,6 +113,7 @@ THREE.MeshBasicMaterial.prototype = {
 			'wireframe_linejoin: ' + this.wireframe_linejoin +'<br/>' +
 			
 			'vertex_colors: ' + this.vertex_colors + '<br/>' +
+			'skinning: ' + this.skinning + '<br/>' +
 			')';
 
 	}

src/materials/MeshLambertMaterial.js

@@ -21,7 +21,8 @@
  *  wireframe: <boolean>,
  *  wireframe_linewidth: <float>,
  
- *  vertex_colors: <bool>
+ *  vertex_colors: <bool>,
+ *  skinning: <bool>
  * }
  */
 
@@ -52,6 +53,7 @@ THREE.MeshLambertMaterial = function ( parameters ) {
 	this.wireframe_linejoin = 'round';	// implemented just in CanvasRenderer
 
 	this.vertex_colors = false;
+	this.skinning = false;
 	
 	if ( parameters ) {
 
@@ -78,6 +80,7 @@ THREE.MeshLambertMaterial = function ( parameters ) {
 		if ( parameters.wireframe_linejoin !== undefined ) this.wireframe_linejoin = parameters.wireframe_linejoin;
 
 		if ( parameters.vertex_colors !== undefined ) this.vertex_colors = parameters.vertex_colors;
+		if ( parameters.skinning !== undefined ) this.skinning = parameters.skinning;
 		
 	}
 
@@ -111,6 +114,7 @@ THREE.MeshLambertMaterial.prototype = {
 			'wireframe_linejoin: ' + this.wireframe_linejoin +'<br/>' +
 			
 			'vertex_colors: ' + this.vertex_colors + '<br/>' +
+			'skinning: ' + this.skinning + '<br/>' +
 			' )';
 
 	}

src/materials/MeshPhongMaterial.js

@@ -25,7 +25,8 @@
  *  wireframe: <boolean>,
  *  wireframe_linewidth: <float>,
  
- *  vertex_colors: <bool>
+ *  vertex_colors: <bool>,
+ *  skinning: <bool>
  * }
  */
 
@@ -60,6 +61,7 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 	this.wireframe_linejoin = 'round';	// implemented just in CanvasRenderer
 	
 	this.vertex_colors = false;
+	this.skinning = false;
 
 	if ( parameters ) {
 
@@ -90,6 +92,7 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 		if ( parameters.wireframe_linejoin !== undefined ) this.wireframe_linejoin = parameters.wireframe_linejoin;
 		
 		if ( parameters.vertex_colors !== undefined ) this.vertex_colors = parameters.vertex_colors;
+		if ( parameters.skinning !== undefined ) this.skinning = parameters.skinning;
 
 	}
 
@@ -125,6 +128,7 @@ THREE.MeshPhongMaterial.prototype = {
 			'wireframe_linejoin: ' + this.wireframe_linejoin +'<br/>' +
 			
 			'vertex_colors: ' + this.vertex_colors + '<br/>' +
+			'skinning: ' + this.skinning + '<br/>' +
 			')';
 
 	}

src/materials/MeshShaderMaterial.js

@@ -14,7 +14,8 @@
  *  wireframe: <boolean>,
  *  wireframe_linewidth: <float>,
  
- *  vertex_colors: <bool>
+ *  vertex_colors: <bool>,
+ *  skinning: <bool>
  * }
  */
 
@@ -38,6 +39,7 @@ THREE.MeshShaderMaterial = function ( parameters ) {
 	this.wireframe_linejoin = 'round';  // not implemented in WebGLRenderer (and this material doesn't make sense in CanvasRenderer)
 
 	this.vertex_colors = false; // must set this if shader wants to use "color" attribute stream
+	this.skinning = false;	// must set this is shader wants to use skinning attribute streams
 
 	if ( parameters ) {
 
@@ -58,6 +60,7 @@ THREE.MeshShaderMaterial = function ( parameters ) {
 		if ( parameters.wireframe_linejoin !== undefined ) this.wireframe_linejoin = parameters.wireframe_linejoin;
 		
 		if ( parameters.vertex_colors !== undefined ) this.vertex_colors = parameters.vertex_colors;
+		if ( parameters.skinning !== undefined ) this.skinning = parameters.skinning;
 
 	}
 
@@ -79,6 +82,7 @@ THREE.MeshShaderMaterial.prototype = {
 			'wireframe_linejoin: ' + this.wireframe_linejoin +'<br/>' +
 		
 			'vertex_colors: ' + this.vertex_colors + '<br/>' +
+			'skinning: ' + this.skinning + '<br/>' +
 			')';
 
 	}

src/renderers/WebGLRenderer.js

@@ -65,7 +65,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	this.domElement = _canvas;
 	this.autoClear = true;
-	this.sortObjects = true;
+	this.sortObjects = false;
 
 	initGL( antialias, clearColor, clearAlpha );
 
@@ -1272,7 +1272,9 @@ THREE.WebGLRenderer = function ( parameters ) {
 		maxLightCount = allocateLights( lights, 4 );
 
 		parameters = { fog: fog, map: material.map, env_map: material.env_map, light_map: material.light_map, vertex_colors: material.vertex_colors,
+					   skinning: material.skinning,
 					   maxDirLights: maxLightCount.directional, maxPointLights: maxLightCount.point };
+		
 		material.program = buildProgram( material.fragment_shader, material.vertex_shader, parameters );
 
 		identifiers = [ 'viewMatrix', 'modelViewMatrix', 'projectionMatrix', 'normalMatrix', 'objectMatrix', 'cameraPosition', 
@@ -1295,8 +1297,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 	
 	this.setProgram = function( camera, lights, fog, material, object ) {
 		
-		var skinning = true; // hack for testing
-		
 		if ( !material.program ) this.initMaterial( material, lights, fog );
 
 		var program = material.program, 
@@ -1386,7 +1386,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		
 		if ( material instanceof THREE.MeshShaderMaterial ||
 			 material.env_map ||
-			 skinning ) {
+			 material.skinning ) {
 				 
 			_gl.uniformMatrix4fv( p_uniforms.objectMatrix, false, object._objectMatrixArray );
 		
@@ -1395,15 +1395,16 @@ THREE.WebGLRenderer = function ( parameters ) {
 		if ( material instanceof THREE.MeshPhongMaterial ||
 			 material instanceof THREE.MeshLambertMaterial ||
 			 material instanceof THREE.MeshShaderMaterial ||
-			 skinning ) {
-			 
+			 material.skinning ) {
+
 			_gl.uniformMatrix4fv( p_uniforms.viewMatrix, false, _viewMatrixArray );
 			
 		}
 		
-		if ( skinning ) {
+		if ( material.skinning ) {
 			
 			_gl.uniformMatrix4fv( p_uniforms.cameraInverseMatrix, false, _cameraInverseMatrixArray );
+			
 			_gl.uniformMatrix4fv( p_uniforms["uBoneGlobalMatrices[0]"], false, object.boneMatrices[0]() );
 			_gl.uniformMatrix4fv( p_uniforms["uBoneGlobalMatrices[1]"], false, object.boneMatrices[1]() );
 			_gl.uniformMatrix4fv( p_uniforms["uBoneGlobalMatrices[2]"], false, object.boneMatrices[2]() );
@@ -2326,6 +2327,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			parameters.env_map ? "#define USE_ENVMAP" : "",
 			parameters.light_map ? "#define USE_LIGHTMAP" : "",
 			parameters.vertex_colors ? "#define USE_COLOR" : "",
+			parameters.skinning ? "#define USE_SKINNING" : "",
 
 			"uniform mat4 objectMatrix;",
 			"uniform mat4 modelViewMatrix;",
@@ -3246,8 +3248,39 @@ THREE.Snippets = {
 
 	"#endif"
 
-	].join("\n")
+	].join("\n"),
+	
+	// skinning
+	
+	skinning_pars_vertex: [
+	
+	"#ifdef USE_SKINNING",
+		
+		"uniform mat4 uBoneGlobalMatrices[20];",
+		
+	"#endif"
+		
+	].join("\n"),
+		
+	skinning_vertex: [
+	
+	"#ifdef USE_SKINNING",
+
+		"gl_Position  = ( uBoneGlobalMatrices[ int( skinIndex.x ) ] * skinVertexA ) * skinWeight.x;",
+		"gl_Position += ( uBoneGlobalMatrices[ int( skinIndex.y ) ] * skinVertexB ) * skinWeight.y;",
+		
+		// this doesn't work, no idea why
+		//"gl_Position  = projectionMatrix * cameraInverseMatrix * objectMatrix * gl_Position;",
+		
+		"gl_Position  = projectionMatrix * viewMatrix * objectMatrix * gl_Position;",
 	
+	"#else",
+		
+		"gl_Position = projectionMatrix * mvPosition;",
+		
+	"#endif"
+	
+	].join("\n")
 
 };
 
@@ -3407,6 +3440,7 @@ THREE.ShaderLib = {
 			THREE.Snippets[ "lightmap_pars_vertex" ],
 			THREE.Snippets[ "envmap_pars_vertex" ],
 			THREE.Snippets[ "color_pars_vertex" ],
+			THREE.Snippets[ "skinning_pars_vertex" ],
 
 			"void main() {",
 
@@ -3416,8 +3450,7 @@ THREE.ShaderLib = {
 				THREE.Snippets[ "lightmap_vertex" ],
 				THREE.Snippets[ "envmap_vertex" ],
 				THREE.Snippets[ "color_vertex" ],
-
-				"gl_Position = projectionMatrix * mvPosition;",
+				THREE.Snippets[ "skinning_vertex" ],
 
 			"}"
 
@@ -3467,8 +3500,7 @@ THREE.ShaderLib = {
 			THREE.Snippets[ "envmap_pars_vertex" ],
 			THREE.Snippets[ "lights_pars_vertex" ],
 			THREE.Snippets[ "color_pars_vertex" ],
-
-			"uniform mat4 uBoneGlobalMatrices[20];",
+			THREE.Snippets[ "skinning_pars_vertex" ],
 
 			"void main() {",
 
@@ -3482,18 +3514,7 @@ THREE.ShaderLib = {
 				"vec3 transformedNormal = normalize( normalMatrix * normal );",
 
 				THREE.Snippets[ "lights_vertex" ],
-
-				//"gl_Position = projectionMatrix * mvPosition;",
-				
-				// skinning
-
-				"gl_Position  = ( uBoneGlobalMatrices[ int( skinIndex.x ) ] * skinVertexA ) * skinWeight.x;",
-				"gl_Position += ( uBoneGlobalMatrices[ int( skinIndex.y ) ] * skinVertexB ) * skinWeight.y;",
-				
-				// this doesn't work, no idea why
-				//"gl_Position  = projectionMatrix * cameraInverseMatrix * objectMatrix * gl_Position;",
-				
-				"gl_Position  = projectionMatrix * viewMatrix * objectMatrix * gl_Position;",
+				THREE.Snippets[ "skinning_vertex" ],
 
 			"}"
 
@@ -3559,6 +3580,7 @@ THREE.ShaderLib = {
 			THREE.Snippets[ "envmap_pars_vertex" ],
 			THREE.Snippets[ "lights_pars_vertex" ],
 			THREE.Snippets[ "color_pars_vertex" ],
+			THREE.Snippets[ "skinning_pars_vertex" ],
 
 			"void main() {",
 
@@ -3579,8 +3601,7 @@ THREE.ShaderLib = {
 				"vNormal = transformedNormal;",
 
 				THREE.Snippets[ "lights_vertex" ],
-
-				"gl_Position = projectionMatrix * mvPosition;",
+				THREE.Snippets[ "skinning_vertex" ],
 
 			"}"