Add ChainableEffect

examples/js/effects/ChainableEffect.js

@@ -0,0 +1,37 @@
+/**
+ * @author takahirox / http://github.com/takahirox/
+ *
+ * ChainableEffect provides an abilily to apply two or more Effects
+ * by enabling Effects which inherit ChainableEffect
+ * to be used from other Effects.
+ *
+ * How to use: example - applies both VREffect and OutlineEffect
+ *             (OutlineEffect inherits ChainableEffect)
+ *
+ *	function init() {
+ *
+ *		renderer = new THREE.WebGLRenderer();
+ *		effect = new THREE.VREffect( new THREE.OutlineEffect( renderer ) );
+ *
+ *	}
+ *
+ *	function render() {
+ *
+ *		effect.render( scene, camera );
+ *
+ *	}
+ */
+
+THREE.ChainableEffect = function ( renderer ) {
+
+	var keys = Object.keys( renderer );
+
+	for ( var i = 0, il = keys.length; i < il; i ++ ) {
+
+		var key = keys[ i ];
+
+		this[ key ] = ( typeof( renderer[ key ] ) === 'function' ) ? renderer[ key ].bind( renderer ) : renderer[ key ];
+
+	}
+
+};

examples/js/effects/OutlineEffect.js

@@ -3,6 +3,9 @@
  *
  * Reference: https://en.wikipedia.org/wiki/Cel_shading
  *
+ * Dependencies
+ *  - THREE.ChainableEffect
+ *
  * // How to set default outline parameters
  * new THREE.OutlineEffect( renderer, {
  * 	defaultThickNess: 0.01,
@@ -25,11 +28,11 @@
 
 THREE.OutlineEffect = function ( renderer, parameters ) {
 
-	var _this = this;
+	THREE.ChainableEffect.call( this, renderer );
 
 	parameters = parameters || {};
 
-	this.autoClear = parameters.autoClear !== undefined ? parameters.autoClear : true;
+	this.enabled = true;
 
 	var defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003;
 	var defaultColor = parameters.defaultColor !== undefined ? parameters.defaultColor : new THREE.Color( 0x000000 );
@@ -257,13 +260,14 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 
 	}
 
-	this.setSize = function ( width, height ) {
+	this.render = function ( scene, camera, renderTarget, forceClear ) {
 
-		renderer.setSize( width, height );
+		if ( this.enabled === false ) {
 
-	};
+			renderer.render( scene, camera, renderTarget, forceClear );
+			return;
 
-	this.render = function ( scene, camera, renderTarget, forceClear ) {
+		}
 
 		var currentAutoClear = renderer.autoClear;
 		renderer.autoClear = this.autoClear;
@@ -292,3 +296,6 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 	};
 
 };
+
+THREE.OutlineEffect.prototype = Object.create( THREE.ChainableEffect.prototype );
+THREE.OutlineEffect.prototype.constructor = THREE.OutlineEffect;

examples/js/loaders/MMDLoader.js

@@ -2396,6 +2396,7 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress
 
 				};
 
+				// parameters for OutlineEffect
 				m.outlineParameters = {
 					thickness: p2.edgeFlag === 1 ? 0.003 : 0.0,
 					color: new THREE.Color( 0.0, 0.0, 0.0 ),
@@ -2422,6 +2423,7 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress
 
 			} else {
 
+				// parameters for OutlineEffect
 				m.outlineParameters = {
 					thickness: p2.edgeSize / 300,
 					color: new THREE.Color( p2.edgeColor[ 0 ], p2.edgeColor[ 1 ], p2.edgeColor[ 2 ] ),
@@ -3778,15 +3780,7 @@ THREE.MMDGrantSolver.prototype = {
 
 };
 
-THREE.MMDHelper = function ( renderer ) {
-
-	this.renderer = renderer;
-
-	this.outlineEffect = null;
-
-	this.effect = null;
-
-	this.autoClear = true;
+THREE.MMDHelper = function () {
 
 	this.meshes = [];
 
@@ -3794,29 +3788,17 @@ THREE.MMDHelper = function ( renderer ) {
 	this.doIk = true;
 	this.doGrant = true;
 	this.doPhysics = true;
-	this.doOutlineDrawing = true;
 	this.doCameraAnimation = true;
 
 	this.audioManager = null;
 	this.camera = null;
 
-	this.init();
-
 };
 
 THREE.MMDHelper.prototype = {
 
 	constructor: THREE.MMDHelper,
 
-	init: function () {
-
-		this.outlineEffect = new THREE.OutlineEffect( this.renderer );
-
-		var size = this.renderer.getSize();
-		this.setSize( size.width, size.height );
-
-	},
-
 	add: function ( mesh ) {
 
 		if ( ! ( mesh instanceof THREE.SkinnedMesh ) ) {
@@ -3836,23 +3818,6 @@ THREE.MMDHelper.prototype = {
 
 	},
 
-	setSize: function ( width, height ) {
-
-		this.outlineEffect.setSize( width, height );
-
-	},
-
-	/*
-	 * Note: There may be a possibility that Outline wouldn't work well with Effect.
-	 *       In such a case, try to set doOutlineDrawing = false or
-	 *       manually comment out renderer.clear() in *Effect.render().
-	 */
-	setEffect: function ( effect ) {
-
-		this.effect = effect;
-
-	},
-
 	setAudio: function ( audio, listener, params ) {
 
 		this.audioManager = new THREE.MMDAudioManager( audio, listener, params );
@@ -4148,138 +4113,6 @@ THREE.MMDHelper.prototype = {
 
 	},
 
-	render: function ( scene, camera ) {
-
-		if ( this.effect === null ) {
-
-			if ( this.doOutlineDrawing ) {
-
-				this.outlineEffect.autoClear = this.autoClear;
-				this.outlineEffect.render( scene, camera );
-
-			} else {
-
-				var currentAutoClear = this.renderer.autoClear;
-				this.renderer.autoClear = this.autoClear;
-				this.renderer.render( scene, camera );
-				this.renderer.autoClear = currentAutoClear;
-
-			}
-
-		} else {
-
-			var currentAutoClear = this.renderer.autoClear;
-			this.renderer.autoClear = this.autoClear;
-
-			if ( this.doOutlineDrawing ) {
-
-				this.renderWithEffectAndOutline( scene, camera );
-
-			} else {
-
-				this.effect.render( scene, camera );
-
-			}
-
-			this.renderer.autoClear = currentAutoClear;
-
-		}
-
-	},
-
-	/*
-	 * Currently(r82 dev) there's no way to render with two Effects
-	 * then attempt to get them to coordinately run by myself.
-	 *
-	 * What this method does
-	 * 1. let OutlineEffect make outline materials (only once)
-	 * 2. render normally with effect
-	 * 3. set outline materials
-	 * 4. render outline with effect
-	 * 5. restore original materials
-	 */
-	renderWithEffectAndOutline: function ( scene, camera ) {
-
-		var hasOutlineMaterial = false;
-
-		function checkIfObjectHasOutlineMaterial ( object ) {
-
-			if ( object.material === undefined ) return;
-
-			if ( object.userData.outlineMaterial !== undefined ) hasOutlineMaterial = true;
-
-		}
-
-		function setOutlineMaterial ( object ) {
-
-			if ( object.material === undefined ) return;
-
-			if ( object.userData.outlineMaterial === undefined ) return;
-
-			object.userData.originalMaterial = object.material;
-
-			object.material = object.userData.outlineMaterial;
-
-		}
-
-		function restoreOriginalMaterial ( object ) {
-
-			if ( object.material === undefined ) return;
-
-			if ( object.userData.originalMaterial === undefined ) return;
-
-			object.material = object.userData.originalMaterial;
-
-		}
-
-		return function renderWithEffectAndOutline( scene, camera ) {
-
-			hasOutlineMaterial = false;
-
-			var forceClear = false;
-
-			scene.traverse( checkIfObjectHasOutlineMaterial );
-
-			if ( ! hasOutlineMaterial ) {
-
-				this.outlineEffect.render( scene, camera );
-
-				forceClear = true;
-
-				scene.traverse( checkIfObjectHasOutlineMaterial );
-
-			}
-
-			if ( hasOutlineMaterial ) {
-
-				this.renderer.autoClear = this.autoClear || forceClear;
-
-				this.effect.render( scene, camera );
-
-				scene.traverse( setOutlineMaterial );
-
-				var currentShadowMapEnabled = this.renderer.shadowMap.enabled;
-
-				this.renderer.autoClear = false;
-				this.renderer.shadowMap.enabled = false;
-
-				this.effect.render( scene, camera );
-
-				this.renderer.shadowMap.enabled = currentShadowMapEnabled;
-
-				scene.traverse( restoreOriginalMaterial );
-
-			} else {
-
-				this.outlineEffect.autoClear = this.autoClear || forceClear;
-				this.outlineEffect.render( scene, camera );
-
-			}
-
-		}
-
-	}(),
-
 	poseAsVpd: function ( mesh, vpd, params ) {
 
 		if ( ! ( params && params.preventResetPose === true ) ) {

examples/webgl_loader_mmd.html

@@ -40,6 +40,7 @@
 
 		<script src="js/loaders/TGALoader.js"></script>
 		<script src="js/loaders/MMDLoader.js"></script>
+		<script src="js/effects/ChainableEffect.js"></script>
 		<script src="js/effects/OutlineEffect.js"></script>
 		<script src="js/animation/CCDIKSolver.js"></script>
 		<script src="js/animation/MMDPhysics.js"></script>
@@ -51,7 +52,7 @@
 
 			var container, stats;
 
-			var mesh, camera, scene, renderer;
+			var mesh, camera, scene, renderer, effect;
 			var helper;
 
 			var mouseX = 0, mouseY = 0;
@@ -91,6 +92,8 @@
 				renderer.setClearColor( new THREE.Color( 0xffffff ) );
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.OutlineEffect( renderer );
+
 				// model
 
 				var onProgress = function ( xhr ) {
@@ -106,7 +109,7 @@
 				var modelFile = 'models/mmd/miku/miku_v2.pmd';
 				var vmdFiles = [ 'models/mmd/vmd/wavefile_v2.vmd' ];
 
-				helper = new THREE.MMDHelper( renderer );
+				helper = new THREE.MMDHelper();
 
 				var loader = new THREE.MMDLoader();
 				loader.setDefaultTexturePath( './models/mmd/default/' );
@@ -153,7 +156,7 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				helper.setSize( window.innerWidth, window.innerHeight );
+				effect.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -180,16 +183,8 @@
 
 				camera.lookAt( scene.position );
 
-				if ( mesh ) {
-
-					helper.animate( clock.getDelta() );
-					helper.render( scene, camera );
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
+				helper.animate( clock.getDelta() );
+				effect.render( scene, camera );
 
 			}
 

examples/webgl_loader_mmd_audio.html

@@ -43,6 +43,7 @@
 
 		<script src="js/loaders/TGALoader.js"></script>
 		<script src="js/loaders/MMDLoader.js"></script>
+		<script src="js/effects/ChainableEffect.js"></script>
 		<script src="js/effects/OutlineEffect.js"></script>
 		<script src="js/animation/CCDIKSolver.js"></script>
 		<script src="js/animation/MMDPhysics.js"></script>
@@ -54,7 +55,7 @@
 
 			var container, stats;
 
-			var mesh, camera, scene, renderer;
+			var mesh, camera, scene, renderer, effect;
 			var helper;
 
 			var ready = false;
@@ -95,6 +96,8 @@
 				renderer.setClearColor( new THREE.Color( 0xffffff ) );
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.OutlineEffect( renderer );
+
 				// model
 
 				var onProgress = function ( xhr ) {
@@ -114,7 +117,7 @@
 				var audioFile = 'models/mmd/audio/wavefile_short.mp3';
 				var audioParams = { delayTime: 160 * 1 / 30 };
 
-				helper = new THREE.MMDHelper( renderer );
+				helper = new THREE.MMDHelper();
 
 				var loader = new THREE.MMDLoader();
 				loader.setDefaultTexturePath( './models/mmd/default/' );
@@ -190,7 +193,7 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				helper.setSize( window.innerWidth, window.innerHeight );
+				effect.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -214,16 +217,12 @@
 
 				if ( ready ) {
 
-					var delta = clock.getDelta();
-					helper.animate( delta );
-					helper.render( scene, camera );
-
-				} else {
-
-					renderer.render( scene, camera );
+					helper.animate( clock.getDelta() );
 
 				}
 
+				effect.render( scene, camera );
+
 			}
 
 			// easy mobile device detection

examples/webgl_loader_mmd_pose.html

@@ -40,6 +40,7 @@
 
 		<script src="js/loaders/TGALoader.js"></script>
 		<script src="js/loaders/MMDLoader.js"></script>
+		<script src="js/effects/ChainableEffect.js"></script>
 		<script src="js/effects/OutlineEffect.js"></script>
 		<script src="js/animation/CCDIKSolver.js"></script>
 		<script src="js/animation/MMDPhysics.js"></script>
@@ -52,7 +53,7 @@
 
 			var container, stats;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, effect;
 			var helper;
 
 			var vpds = [];
@@ -96,6 +97,8 @@
 				renderer.setClearColor( new THREE.Color( 0xffffff ) );
 				container.appendChild( renderer.domElement );
 
+				effect = new THREE.OutlineEffect( renderer );
+
 				// model
 
 				var onProgress = function ( xhr ) {
@@ -123,7 +126,7 @@
 					'models/mmd/vpd/11.vpd'
 				];
 
-				helper = new THREE.MMDHelper( renderer );
+				helper = new THREE.MMDHelper();
 
 				var loader = new THREE.MMDLoader();
 				loader.setDefaultTexturePath( './models/mmd/default/' );
@@ -134,8 +137,6 @@
 
 					mesh.position.y = -10;
 
-					helper.add( mesh );
-
 					scene.add( mesh );
 
 					var vpdIndex = 0;
@@ -295,7 +296,7 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				helper.setSize( window.innerWidth, window.innerHeight );
+				effect.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
@@ -322,15 +323,7 @@
 
 				camera.lookAt( scene.position );
 */
-				if ( ready ) {
-
-					helper.render( scene, camera );
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
+				effect.render( scene, camera );
 
 			}