Use smaller bone texture size for models with smaller skeletons.

build/custom/ThreeExtras.js

@@ -106,16 +106,14 @@ THREE.AnimationHandler=function(){var b=[],a={},c={update:function(a){for(var c=
 0;if(b.hierarchy[c].keys[d].rot!==void 0&&!(b.hierarchy[c].keys[d].rot instanceof THREE.Quaternion)){var h=b.hierarchy[c].keys[d].rot;b.hierarchy[c].keys[d].rot=new THREE.Quaternion(h[0],h[1],h[2],h[3])}}if(b.hierarchy[c].keys.length&&b.hierarchy[c].keys[0].morphTargets!==void 0){h={};for(d=0;d<b.hierarchy[c].keys.length;d++)for(var i=0;i<b.hierarchy[c].keys[d].morphTargets.length;i++){var j=b.hierarchy[c].keys[d].morphTargets[i];h[j]=-1}b.hierarchy[c].usedMorphTargets=h;for(d=0;d<b.hierarchy[c].keys.length;d++){var l=
 {};for(j in h){for(i=0;i<b.hierarchy[c].keys[d].morphTargets.length;i++)if(b.hierarchy[c].keys[d].morphTargets[i]===j){l[j]=b.hierarchy[c].keys[d].morphTargetsInfluences[i];break}i===b.hierarchy[c].keys[d].morphTargets.length&&(l[j]=0)}b.hierarchy[c].keys[d].morphTargetsInfluences=l}}for(d=1;d<b.hierarchy[c].keys.length;d++)if(b.hierarchy[c].keys[d].time===b.hierarchy[c].keys[d-1].time){b.hierarchy[c].keys.splice(d,1);d--}for(d=0;d<b.hierarchy[c].keys.length;d++)b.hierarchy[c].keys[d].index=d}d=parseInt(b.length*
 b.fps,10);b.JIT={};b.JIT.hierarchy=[];for(c=0;c<b.hierarchy.length;c++)b.JIT.hierarchy.push(Array(d));b.initialized=true}},get:function(b){if(typeof b==="string"){if(a[b])return a[b];console.log("THREE.AnimationHandler.get: Couldn't find animation "+b);return null}},parse:function(a){var b=[];if(a instanceof THREE.SkinnedMesh)for(var c=0;c<a.bones.length;c++)b.push(a.bones[c]);else d(a,b);return b}},d=function(a,b){b.push(a);for(var c=0;c<a.children.length;c++)d(a.children[c],b)};c.LINEAR=0;c.CATMULLROM=
-1;c.CATMULLROM_FORWARD=2;return c}();THREE.Animation=function(b,a,c,d){this.root=b;this.data=THREE.AnimationHandler.get(a);this.hierarchy=THREE.AnimationHandler.parse(b);this.currentTime=0;this.timeScale=1;this.isPlaying=false;this.loop=this.isPaused=true;this.interpolationType=c!==void 0?c:THREE.AnimationHandler.LINEAR;this.JITCompile=d!==void 0?d:true;this.points=[];this.target=new THREE.Vector3};
-THREE.Animation.prototype.play=function(b,a){if(!this.isPlaying){this.isPlaying=true;this.loop=b!==void 0?b:true;this.currentTime=a!==void 0?a:0;var c,d=this.hierarchy.length,e;for(c=0;c<d;c++){e=this.hierarchy[c];if(this.interpolationType!==THREE.AnimationHandler.CATMULLROM_FORWARD)e.useQuaternion=true;e.matrixAutoUpdate=true;if(e.animationCache===void 0){e.animationCache={};e.animationCache.prevKey={pos:0,rot:0,scl:0};e.animationCache.nextKey={pos:0,rot:0,scl:0};e.animationCache.originalMatrix=
+1;c.CATMULLROM_FORWARD=2;return c}();THREE.Animation=function(b,a,c){this.root=b;this.data=THREE.AnimationHandler.get(a);this.hierarchy=THREE.AnimationHandler.parse(b);this.currentTime=0;this.timeScale=1;this.isPlaying=false;this.loop=this.isPaused=true;this.interpolationType=c!==void 0?c:THREE.AnimationHandler.LINEAR;this.points=[];this.target=new THREE.Vector3};
+THREE.Animation.prototype.play=function(b,a){if(this.isPlaying===false){this.isPlaying=true;this.loop=b!==void 0?b:true;this.currentTime=a!==void 0?a:0;var c,d=this.hierarchy.length,e;for(c=0;c<d;c++){e=this.hierarchy[c];if(this.interpolationType!==THREE.AnimationHandler.CATMULLROM_FORWARD)e.useQuaternion=true;e.matrixAutoUpdate=true;if(e.animationCache===void 0){e.animationCache={};e.animationCache.prevKey={pos:0,rot:0,scl:0};e.animationCache.nextKey={pos:0,rot:0,scl:0};e.animationCache.originalMatrix=
 e instanceof THREE.Bone?e.skinMatrix:e.matrix}var f=e.animationCache.prevKey;e=e.animationCache.nextKey;f.pos=this.data.hierarchy[c].keys[0];f.rot=this.data.hierarchy[c].keys[0];f.scl=this.data.hierarchy[c].keys[0];e.pos=this.getNextKeyWith("pos",c,1);e.rot=this.getNextKeyWith("rot",c,1);e.scl=this.getNextKeyWith("scl",c,1)}this.update(0)}this.isPaused=false;THREE.AnimationHandler.addToUpdate(this)};
-THREE.Animation.prototype.pause=function(){this.isPaused?THREE.AnimationHandler.addToUpdate(this):THREE.AnimationHandler.removeFromUpdate(this);this.isPaused=!this.isPaused};
-THREE.Animation.prototype.stop=function(){this.isPaused=this.isPlaying=false;THREE.AnimationHandler.removeFromUpdate(this);for(var b=0;b<this.hierarchy.length;b++)if(this.hierarchy[b].animationCache!==void 0){this.hierarchy[b]instanceof THREE.Bone?this.hierarchy[b].skinMatrix=this.hierarchy[b].animationCache.originalMatrix:this.hierarchy[b].matrix=this.hierarchy[b].animationCache.originalMatrix;delete this.hierarchy[b].animationCache}};
-THREE.Animation.prototype.update=function(b){if(this.isPlaying){var a=["pos","rot","scl"],c,d,e,f,g,h,i,j,l=this.data.JIT.hierarchy,m,n;n=this.currentTime=this.currentTime+b*this.timeScale;m=this.currentTime=this.currentTime%this.data.length;j=parseInt(Math.min(m*this.data.fps,this.data.length*this.data.fps),10);for(var k=0,o=this.hierarchy.length;k<o;k++){b=this.hierarchy[k];i=b.animationCache;if(this.JITCompile&&l[k][j]!==void 0)if(b instanceof THREE.Bone){b.skinMatrix=l[k][j];b.matrixAutoUpdate=
-false;b.matrixWorldNeedsUpdate=false}else{b.matrix=l[k][j];b.matrixAutoUpdate=false;b.matrixWorldNeedsUpdate=true}else{if(this.JITCompile)b instanceof THREE.Bone?b.skinMatrix=b.animationCache.originalMatrix:b.matrix=b.animationCache.originalMatrix;for(var q=0;q<3;q++){c=a[q];g=i.prevKey[c];h=i.nextKey[c];if(h.time<=n){if(m<n)if(this.loop){g=this.data.hierarchy[k].keys[0];for(h=this.getNextKeyWith(c,k,1);h.time<m;){g=h;h=this.getNextKeyWith(c,k,h.index+1)}}else{this.stop();return}else{do{g=h;h=this.getNextKeyWith(c,
-k,h.index+1)}while(h.time<m)}i.prevKey[c]=g;i.nextKey[c]=h}b.matrixAutoUpdate=true;b.matrixWorldNeedsUpdate=true;d=(m-g.time)/(h.time-g.time);e=g[c];f=h[c];if(d<0||d>1){console.log("THREE.Animation.update: Warning! Scale out of bounds:"+d+" on bone "+k);d=d<0?0:1}if(c==="pos"){c=b.position;if(this.interpolationType===THREE.AnimationHandler.LINEAR){c.x=e[0]+(f[0]-e[0])*d;c.y=e[1]+(f[1]-e[1])*d;c.z=e[2]+(f[2]-e[2])*d}else if(this.interpolationType===THREE.AnimationHandler.CATMULLROM||this.interpolationType===
-THREE.AnimationHandler.CATMULLROM_FORWARD){this.points[0]=this.getPrevKeyWith("pos",k,g.index-1).pos;this.points[1]=e;this.points[2]=f;this.points[3]=this.getNextKeyWith("pos",k,h.index+1).pos;d=d*0.33+0.33;e=this.interpolateCatmullRom(this.points,d);c.x=e[0];c.y=e[1];c.z=e[2];if(this.interpolationType===THREE.AnimationHandler.CATMULLROM_FORWARD){d=this.interpolateCatmullRom(this.points,d*1.01);this.target.set(d[0],d[1],d[2]);this.target.subSelf(c);this.target.y=0;this.target.normalize();d=Math.atan2(this.target.x,
-this.target.z);b.rotation.set(0,d,0)}}}else if(c==="rot")THREE.Quaternion.slerp(e,f,b.quaternion,d);else if(c==="scl"){c=b.scale;c.x=e[0]+(f[0]-e[0])*d;c.y=e[1]+(f[1]-e[1])*d;c.z=e[2]+(f[2]-e[2])*d}}}}if(this.JITCompile&&l[0][j]===void 0){this.hierarchy[0].updateMatrixWorld(true);for(k=0;k<this.hierarchy.length;k++)l[k][j]=this.hierarchy[k]instanceof THREE.Bone?this.hierarchy[k].skinMatrix.clone():this.hierarchy[k].matrix.clone()}}};
+THREE.Animation.prototype.pause=function(){this.isPaused===true?THREE.AnimationHandler.addToUpdate(this):THREE.AnimationHandler.removeFromUpdate(this);this.isPaused=!this.isPaused};THREE.Animation.prototype.stop=function(){this.isPaused=this.isPlaying=false;THREE.AnimationHandler.removeFromUpdate(this)};
+THREE.Animation.prototype.update=function(b){if(this.isPlaying!==false){var a=["pos","rot","scl"],c,d,e,f,g,h,i,j,l;l=this.currentTime=this.currentTime+b*this.timeScale;j=this.currentTime=this.currentTime%this.data.length;parseInt(Math.min(j*this.data.fps,this.data.length*this.data.fps),10);for(var m=0,n=this.hierarchy.length;m<n;m++){b=this.hierarchy[m];i=b.animationCache;for(var k=0;k<3;k++){c=a[k];g=i.prevKey[c];h=i.nextKey[c];if(h.time<=l){if(j<l)if(this.loop){g=this.data.hierarchy[m].keys[0];
+for(h=this.getNextKeyWith(c,m,1);h.time<j;){g=h;h=this.getNextKeyWith(c,m,h.index+1)}}else{this.stop();return}else{do{g=h;h=this.getNextKeyWith(c,m,h.index+1)}while(h.time<j)}i.prevKey[c]=g;i.nextKey[c]=h}b.matrixAutoUpdate=true;b.matrixWorldNeedsUpdate=true;d=(j-g.time)/(h.time-g.time);e=g[c];f=h[c];if(d<0||d>1){console.log("THREE.Animation.update: Warning! Scale out of bounds:"+d+" on bone "+m);d=d<0?0:1}if(c==="pos"){c=b.position;if(this.interpolationType===THREE.AnimationHandler.LINEAR){c.x=e[0]+
+(f[0]-e[0])*d;c.y=e[1]+(f[1]-e[1])*d;c.z=e[2]+(f[2]-e[2])*d}else if(this.interpolationType===THREE.AnimationHandler.CATMULLROM||this.interpolationType===THREE.AnimationHandler.CATMULLROM_FORWARD){this.points[0]=this.getPrevKeyWith("pos",m,g.index-1).pos;this.points[1]=e;this.points[2]=f;this.points[3]=this.getNextKeyWith("pos",m,h.index+1).pos;d=d*0.33+0.33;e=this.interpolateCatmullRom(this.points,d);c.x=e[0];c.y=e[1];c.z=e[2];if(this.interpolationType===THREE.AnimationHandler.CATMULLROM_FORWARD){d=
+this.interpolateCatmullRom(this.points,d*1.01);this.target.set(d[0],d[1],d[2]);this.target.subSelf(c);this.target.y=0;this.target.normalize();d=Math.atan2(this.target.x,this.target.z);b.rotation.set(0,d,0)}}}else if(c==="rot")THREE.Quaternion.slerp(e,f,b.quaternion,d);else if(c==="scl"){c=b.scale;c.x=e[0]+(f[0]-e[0])*d;c.y=e[1]+(f[1]-e[1])*d;c.z=e[2]+(f[2]-e[2])*d}}}}};
 THREE.Animation.prototype.interpolateCatmullRom=function(b,a){var c=[],d=[],e,f,g,h,i,j;e=(b.length-1)*a;f=Math.floor(e);e=e-f;c[0]=f===0?f:f-1;c[1]=f;c[2]=f>b.length-2?f:f+1;c[3]=f>b.length-3?f:f+2;f=b[c[0]];h=b[c[1]];i=b[c[2]];j=b[c[3]];c=e*e;g=e*c;d[0]=this.interpolate(f[0],h[0],i[0],j[0],e,c,g);d[1]=this.interpolate(f[1],h[1],i[1],j[1],e,c,g);d[2]=this.interpolate(f[2],h[2],i[2],j[2],e,c,g);return d};
 THREE.Animation.prototype.interpolate=function(b,a,c,d,e,f,g){b=(c-b)*0.5;d=(d-a)*0.5;return(2*(a-c)+b+d)*g+(-3*(a-c)-2*b-d)*f+b*e+a};THREE.Animation.prototype.getNextKeyWith=function(b,a,c){for(var d=this.data.hierarchy[a].keys,c=this.interpolationType===THREE.AnimationHandler.CATMULLROM||this.interpolationType===THREE.AnimationHandler.CATMULLROM_FORWARD?c<d.length-1?c:d.length-1:c%d.length;c<d.length;c++)if(d[c][b]!==void 0)return d[c];return this.data.hierarchy[a].keys[0]};
 THREE.Animation.prototype.getPrevKeyWith=function(b,a,c){for(var d=this.data.hierarchy[a].keys,c=this.interpolationType===THREE.AnimationHandler.CATMULLROM||this.interpolationType===THREE.AnimationHandler.CATMULLROM_FORWARD?c>0?c:0:c>=0?c:c+d.length;c>=0;c--)if(d[c][b]!==void 0)return d[c];return this.data.hierarchy[a].keys[d.length-1]};
@@ -138,7 +136,7 @@ THREE.CombinedCamera.prototype.setSize=function(b,a){this.cameraP.aspect=b/a;thi
 THREE.CombinedCamera.prototype.setLens=function(b,a){var c=2*Math.atan((a!==void 0?a:24)/(b*2))*(180/Math.PI);this.setFov(c);return c};THREE.CombinedCamera.prototype.setZoom=function(b){this.zoom=b;this.inPerspectiveMode?this.toPerspective():this.toOrthographic()};THREE.CombinedCamera.prototype.toFrontView=function(){this.rotation.x=0;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.CombinedCamera.prototype.toBackView=function(){this.rotation.x=0;this.rotation.y=Math.PI;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toLeftView=function(){this.rotation.x=0;this.rotation.y=-Math.PI/2;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toRightView=function(){this.rotation.x=0;this.rotation.y=Math.PI/2;this.rotation.z=0;this.rotationAutoUpdate=false};
 THREE.CombinedCamera.prototype.toTopView=function(){this.rotation.x=-Math.PI/2;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};THREE.CombinedCamera.prototype.toBottomView=function(){this.rotation.x=Math.PI/2;this.rotation.y=0;this.rotation.z=0;this.rotationAutoUpdate=false};
-THREE.FirstPersonControls=function(b,a){function c(a,b){return function(){b.apply(a,arguments)}}this.object=b;this.target=new THREE.Vector3(0,0,0);this.domElement=a!==void 0?a:document;this.movementSpeed=1;this.lookSpeed=0.0050;this.noFly=false;this.lookVertical=true;this.autoForward=false;this.activeLook=true;this.heightSpeed=false;this.heightCoef=1;this.heightMin=0;this.constrainVertical=false;this.verticalMin=0;this.verticalMax=Math.PI;this.theta=this.phi=this.lon=this.lat=this.mouseY=this.mouseX=
+THREE.FirstPersonControls=function(b,a){function c(a,b){return function(){b.apply(a,arguments)}}this.object=b;this.target=new THREE.Vector3(0,0,0);this.domElement=a!==void 0?a:document;this.movementSpeed=1;this.lookSpeed=0.0050;this.lookVertical=true;this.autoForward=false;this.activeLook=true;this.heightSpeed=false;this.heightCoef=1;this.heightMin=0;this.heightMax=1;this.constrainVertical=false;this.verticalMin=0;this.verticalMax=Math.PI;this.theta=this.phi=this.lon=this.lat=this.mouseY=this.mouseX=
 this.autoSpeedFactor=0;this.mouseDragOn=this.freeze=this.moveRight=this.moveLeft=this.moveBackward=this.moveForward=false;this.viewHalfY=this.viewHalfX=0;this.domElement!==document&&this.domElement.setAttribute("tabindex",-1);this.handleResize=function(){if(this.domElement===document){this.viewHalfX=window.innerWidth/2;this.viewHalfY=window.innerHeight/2}else{this.viewHalfX=this.domElement.offsetWidth/2;this.viewHalfY=this.domElement.offsetHeight/2}};this.onMouseDown=function(a){this.domElement!==
 document&&this.domElement.focus();a.preventDefault();a.stopPropagation();if(this.activeLook)switch(a.button){case 0:this.moveForward=true;break;case 2:this.moveBackward=true}this.mouseDragOn=true};this.onMouseUp=function(a){a.preventDefault();a.stopPropagation();if(this.activeLook)switch(a.button){case 0:this.moveForward=false;break;case 2:this.moveBackward=false}this.mouseDragOn=false};this.onMouseMove=function(a){if(this.domElement===document){this.mouseX=a.pageX-this.viewHalfX;this.mouseY=a.pageY-
 this.viewHalfY}else{this.mouseX=a.pageX-this.domElement.offsetLeft-this.viewHalfX;this.mouseY=a.pageY-this.domElement.offsetTop-this.viewHalfY}};this.onKeyDown=function(a){switch(a.keyCode){case 38:case 87:this.moveForward=true;break;case 37:case 65:this.moveLeft=true;break;case 40:case 83:this.moveBackward=true;break;case 39:case 68:this.moveRight=true;break;case 82:this.moveUp=true;break;case 70:this.moveDown=true;break;case 81:this.freeze=!this.freeze}};this.onKeyUp=function(a){switch(a.keyCode){case 38:case 87:this.moveForward=

src/objects/SkinnedMesh.js

@@ -68,14 +68,30 @@ THREE.SkinnedMesh = function ( geometry, material ) {
 
 		//
 
+		var nBones = this.bones.length;
+
 		if ( this.useVertexTexture ) {
 
 			// layout (1 matrix = 4 pixels)
 			//	RGBA RGBA RGBA RGBA (=> column1, column2, column3, column4)
-			//  with 64x64 pixel texture max 1024 bones (64 * 64 / 4)
+			//  with  8x8  pixel texture max   16 bones  (8 * 8  / 4)
+			//  	 16x16 pixel texture max   64 bones (16 * 16 / 4)
+			//  	 32x32 pixel texture max  256 bones (32 * 32 / 4)
+			//  	 64x64 pixel texture max 1024 bones (64 * 64 / 4)
+
+			var size;
+
+			if ( nBones > 256 )
+				size = 64;
+			else if ( nBones > 64 )
+				size = 32;
+			else if ( nBones > 16 )
+				size = 16;
+			else
+				size = 8;
 
-			this.boneTextureWidth = 64;
-			this.boneTextureHeight = 64;
+			this.boneTextureWidth = size;
+			this.boneTextureHeight = size;
 
 			this.boneMatrices = new Float32Array( this.boneTextureWidth * this.boneTextureHeight * 4 ); // 4 floats per RGBA pixel
 			this.boneTexture = new THREE.DataTexture( this.boneMatrices, this.boneTextureWidth, this.boneTextureHeight, THREE.RGBAFormat, THREE.FloatType );
@@ -86,7 +102,7 @@ THREE.SkinnedMesh = function ( geometry, material ) {
 
 		} else {
 
-			this.boneMatrices = new Float32Array( 16 * this.bones.length );
+			this.boneMatrices = new Float32Array( 16 * nBones );
 
 		}
 

src/renderers/WebGLRenderer.js

@@ -4526,6 +4526,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			skinning: material.skinning,
 			maxBones: maxBones,
+			boneTextureWidth: object.boneTextureWidth,
+			boneTextureHeight: object.boneTextureHeight,
 
 			morphTargets: material.morphTargets,
 			morphNormals: material.morphNormals,
@@ -5697,6 +5699,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			parameters.skinning ? "#define USE_SKINNING" : "",
 			_supportsBoneTextures ? "#define BONE_TEXTURE" : "",
+			parameters.boneTextureWidth ? "#define N_BONE_PIXEL_X " + parameters.boneTextureWidth.toFixed( 1 ) : "",
+			parameters.boneTextureHeight ? "#define N_BONE_PIXEL_Y " + parameters.boneTextureHeight.toFixed( 1 ) : "",
 
 			parameters.morphTargets ? "#define USE_MORPHTARGETS" : "",
 			parameters.morphNormals ? "#define USE_MORPHNORMALS" : "",

src/renderers/WebGLShaders.js

@@ -961,17 +961,14 @@ THREE.ShaderChunk = {
 
 				"uniform sampler2D boneTexture;",
 
-				"#define N_SKIN_PIXEL_X 64.0",
-				"#define N_SKIN_PIXEL_Y 64.0",
-
 				"mat4 getBoneMatrix( const in float i ) {",
 
 					"float j = i * 4.0;",
-					"float x = mod( j, N_SKIN_PIXEL_X );",
-					"float y = floor( j / N_SKIN_PIXEL_X );",
+					"float x = mod( j, N_BONE_PIXEL_X );",
+					"float y = floor( j / N_BONE_PIXEL_X );",
 
-					"const float dx = 1.0 / N_SKIN_PIXEL_X;",
-					"const float dy = 1.0 / N_SKIN_PIXEL_Y;",
+					"const float dx = 1.0 / N_BONE_PIXEL_X;",
+					"const float dy = 1.0 / N_BONE_PIXEL_Y;",
 
 					"y = dy * ( y + 0.5 );",