Simplified SkeletonHelper. Skinning blending example went from 1661 drawcalls to 73.

examples/js/BlendCharacter.js

@@ -33,7 +33,7 @@ THREE.BlendCharacter = function () {
 
 			// Create the debug visualization
 
-			scope.skeletonHelper = new THREE.SkeletonHelper( scope.skeleton, 0.5, 1 );
+			scope.skeletonHelper = new THREE.SkeletonHelper( scope.skeleton );
 			scope.add( scope.skeletonHelper );
 
 			scope.showSkeleton( true );
@@ -236,7 +236,7 @@ THREE.BlendCharacter = function () {
 
 	this.showSkeleton = function( boolean ) {
 
-		this.skeletonHelper.setVisible( boolean );
+		this.skeletonHelper.visible = boolean;
 
 	}
 

src/extras/helpers/SkeletonHelper.js

 /**
  * @author Sean Griffin / http://twitter.com/sgrif
  * @author Michael Guerrero / http://realitymeltdown.com
+ * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.SkeletonHelper = function ( skeleton, jointBoxSize, scaleRatio ) {
+THREE.SkeletonHelper = function ( skeleton ) {
 
-	THREE.Object3D.call( this );
+	var geometry = new THREE.Geometry();
 
-	this.scaleRatio = ( scaleRatio !== undefined ) ? scaleRatio : 1;
-	this.skeleton = skeleton;
-
-	if ( jointBoxSize === undefined ) jointBoxSize = 1;
-	
-	var boxSize = jointBoxSize * this.scaleRatio;
-
-	for ( var i = 0; i < skeleton.bones.length; ++i ) {
+	for ( var i = 0; i < skeleton.bones.length; i ++ ) {
 
 		var bone = skeleton.bones[ i ];
-		var boxGeometry = new THREE.BoxGeometry( boxSize, boxSize, boxSize );
-		var boxMaterial = new THREE.MeshBasicMaterial( { depthTest: false, depthWrite: false, transparent: true } );
-
-		bone.helper = {};
-		bone.helper.box = new THREE.Mesh( boxGeometry, boxMaterial );
-		bone.helper.axes = new THREE.AxisHelper( jointBoxSize * 3 );
-
-		this.add( bone.helper.box );
-		this.add( bone.helper.axes );
 
 		if ( bone.parent instanceof THREE.Bone ) {
 
-			var lineMaterial = new THREE.LineBasicMaterial( { vertexColors: true, depthTest: false, depthWrite: false, transparent: true } );
-			var lineGeometry = new THREE.Geometry();
-
-			lineGeometry.vertices.push( new THREE.Vector3() );
-			lineGeometry.vertices.push( new THREE.Vector3() );
-			lineGeometry.colors.push( new THREE.Color( 0, 0, 1 ) );
-			lineGeometry.colors.push( new THREE.Color( 0, 1, 0 ) );
-
-			bone.helper.line = new THREE.Line( lineGeometry, lineMaterial );
-			this.add( bone.helper.line );
+			geometry.vertices.push( new THREE.Vector3() );
+			geometry.vertices.push( new THREE.Vector3() );
+			geometry.colors.push( new THREE.Color( 0, 0, 1 ) );
+			geometry.colors.push( new THREE.Color( 0, 1, 0 ) );
 
 		}
 
 	}
 
+	var material = new THREE.LineBasicMaterial( { vertexColors: true, depthTest: false, depthWrite: false, transparent: true } );
+
+	THREE.Line.call( this, geometry, material, THREE.LinePieces );
+
+	this.skeleton = skeleton;
+
 	this.update();
 
 };
 
 
-THREE.SkeletonHelper.prototype = Object.create( THREE.Object3D.prototype );
+THREE.SkeletonHelper.prototype = Object.create( THREE.Line.prototype );
 
 THREE.SkeletonHelper.prototype.update = function () {
 
-	for ( var i = 0; i < this.skeleton.bones.length; i ++ ) {
-
-		var bone = this.skeleton.bones[ i ];
+	var geometry = this.geometry;
 
-		if ( this.visible && bone.parent instanceof THREE.Bone ) {
+	var j = 0;
 
-			bone.skinMatrix.decompose( bone.helper.box.position, bone.helper.box.quaternion, bone.helper.box.scale );
-			bone.helper.box.position.multiplyScalar( this.scaleRatio );
+	for ( var i = 0; i < this.skeleton.bones.length; i ++ ) {
 
-			bone.helper.axes.quaternion = bone.helper.box.quaternion;
-			bone.helper.axes.position = bone.helper.box.position;
-			bone.helper.axes.scale = bone.helper.box.scale;
+		var bone = this.skeleton.bones[ i ];
 
-			bone.helper.line.geometry.vertices[ 0 ].setFromMatrixPosition( bone.skinMatrix );
-			bone.helper.line.geometry.vertices[ 0 ].multiplyScalar( this.scaleRatio );
+		if ( bone.parent instanceof THREE.Bone ) {
 
-			bone.helper.line.geometry.vertices[ 1 ].setFromMatrixPosition( bone.parent.skinMatrix );
-			bone.helper.line.geometry.vertices[ 1 ].multiplyScalar( this.scaleRatio );
+			geometry.vertices[ j ].setFromMatrixPosition( bone.skinMatrix );
+			geometry.vertices[ j + 1 ].setFromMatrixPosition( bone.parent.skinMatrix );
 
-			bone.helper.line.geometry.verticesNeedUpdate = true;
+			j += 2;
 
 		}
 
 	}
 
-};
-
-THREE.SkeletonHelper.prototype.setVisible = function ( boolean ) {
-
-	for ( var i = 0; i < this.skeleton.bones.length; i ++ ) {
-
-		var bone = this.skeleton.bones[ i ];
-
-		if ( bone.helper ) {
+	geometry.verticesNeedUpdate = true;
 
-			bone.helper.box.visible = boolean;
-			bone.helper.axes.visible = boolean;
+	geometry.computeBoundingSphere();
 
-			if ( bone.parent instanceof THREE.Bone ) {
-
-				 bone.helper.line.visible = boolean;
-
-			}
-
-		}
-
-	}
-}
+};