Examples: Clean up

examples/js/objects/Mirror.js

@@ -6,20 +6,17 @@ THREE.Mirror = function ( width, height, options ) {
 
 	THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) );
 
-	var scope = this;
+	this.type = 'Mirror';
 
-	scope.name = 'mirror_' + scope.id;
+	var scope = this;
 
 	options = options || {};
 
-	var viewport = new THREE.Vector4();
-
-	var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
-	var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
-
-	var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
-	var mirrorColor = options.color !== undefined ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
-
+	var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
+	var textureWidth = options.textureWidth || 512;
+	var textureHeight = options.textureHeight || 512;
+	var clipBias = options.clipBias || 0;
+	var shader = options.shader || THREE.DefaultMirrorShader;
 	var recursion = options.recursion !== undefined ? options.recursion : 0;
 
 	//
@@ -31,14 +28,14 @@ THREE.Mirror = function ( width, height, options ) {
 	var rotationMatrix = new THREE.Matrix4();
 	var lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
 	var clipPlane = new THREE.Vector4();
+	var viewport = new THREE.Vector4();
 
 	var view = new THREE.Vector3();
 	var target = new THREE.Vector3();
 	var q = new THREE.Vector4();
 
 	var textureMatrix = new THREE.Matrix4();
-
-	var mirrorCamera = new THREE.PerspectiveCamera();
+	var virtualCamera = new THREE.PerspectiveCamera();
 
 	var parameters = {
 		minFilter: THREE.LinearFilter,
@@ -55,59 +52,15 @@ THREE.Mirror = function ( width, height, options ) {
 
 	}
 
-	var mirrorShader = {
-
-		uniforms: {
-			mirrorColor: { value: new THREE.Color( 0x7F7F7F ) },
-			mirrorSampler: { value: null },
-			textureMatrix: { value: new THREE.Matrix4() }
-		},
-
-		vertexShader: [
-			'uniform mat4 textureMatrix;',
-			'varying vec4 mirrorCoord;',
-
-			'void main() {',
-
-			'	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
-			'	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',
-			'	mirrorCoord = textureMatrix * worldPosition;',
-
-			'	gl_Position = projectionMatrix * mvPosition;',
-
-			'}'
-		].join( '\n' ),
-
-		fragmentShader: [
-			'uniform vec3 mirrorColor;',
-			'uniform sampler2D mirrorSampler;',
-			'varying vec4 mirrorCoord;',
-
-			'float blendOverlay(float base, float blend) {',
-			'	return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );',
-			'}',
-
-			'void main() {',
-			'	vec4 color = texture2DProj(mirrorSampler, mirrorCoord);',
-			'	color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);',
-			'	gl_FragColor = color;',
-			'}'
-		].join( '\n' )
-
-	};
-
-	var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
-
 	var material = new THREE.ShaderMaterial( {
-
-		fragmentShader: mirrorShader.fragmentShader,
-		vertexShader: mirrorShader.vertexShader,
-		uniforms: mirrorUniforms
+		uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
+		fragmentShader: shader.fragmentShader,
+		vertexShader: shader.vertexShader,
 
 	} );
 
-	material.uniforms.mirrorSampler.value = renderTarget.texture;
-	material.uniforms.mirrorColor.value = mirrorColor;
+	material.uniforms.tDiffuse.value = renderTarget.texture;
+	material.uniforms.color.value = color;
 	material.uniforms.textureMatrix.value = textureMatrix;
 
 	scope.material = material;
@@ -149,18 +102,18 @@ THREE.Mirror = function ( width, height, options ) {
 		target.reflect( normal ).negate();
 		target.add( mirrorWorldPosition );
 
-		mirrorCamera.position.copy( view );
-		mirrorCamera.up.set( 0, 1, 0 );
-		mirrorCamera.up.applyMatrix4( rotationMatrix );
-		mirrorCamera.up.reflect( normal );
-		mirrorCamera.lookAt( target );
+		virtualCamera.position.copy( view );
+		virtualCamera.up.set( 0, 1, 0 );
+		virtualCamera.up.applyMatrix4( rotationMatrix );
+		virtualCamera.up.reflect( normal );
+		virtualCamera.lookAt( target );
 
-		mirrorCamera.far = camera.far; // Used in WebGLBackground
+		virtualCamera.far = camera.far; // Used in WebGLBackground
 
-		mirrorCamera.updateMatrixWorld();
-		mirrorCamera.projectionMatrix.copy( camera.projectionMatrix );
+		virtualCamera.updateMatrixWorld();
+		virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
 
-		mirrorCamera.userData.recursion = 0;
+		virtualCamera.userData.recursion = 0;
 
 		// Update the texture matrix
 		textureMatrix.set(
@@ -169,17 +122,18 @@ THREE.Mirror = function ( width, height, options ) {
 			0.0, 0.0, 0.5, 0.5,
 			0.0, 0.0, 0.0, 1.0
 		);
-		textureMatrix.multiply( mirrorCamera.projectionMatrix );
-		textureMatrix.multiply( mirrorCamera.matrixWorldInverse );
+		textureMatrix.multiply( virtualCamera.projectionMatrix );
+		textureMatrix.multiply( virtualCamera.matrixWorldInverse );
+		textureMatrix.multiply( scope.matrixWorld );
 
 		// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
 		// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
 		mirrorPlane.setFromNormalAndCoplanarPoint( normal, mirrorWorldPosition );
-		mirrorPlane.applyMatrix4( mirrorCamera.matrixWorldInverse );
+		mirrorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
 
 		clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
 
-		var projectionMatrix = mirrorCamera.projectionMatrix;
+		var projectionMatrix = virtualCamera.projectionMatrix;
 
 		q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
 		q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
@@ -207,7 +161,7 @@ THREE.Mirror = function ( width, height, options ) {
 		renderer.vr.enabled = false; // Avoid camera modification and recursion
 		renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
 
-		renderer.render( scene, mirrorCamera, renderTarget, true );
+		renderer.render( scene, virtualCamera, renderTarget, true );
 
 		renderer.vr.enabled = currentVrEnabled;
 		renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
@@ -240,3 +194,63 @@ THREE.Mirror = function ( width, height, options ) {
 
 THREE.Mirror.prototype = Object.create( THREE.Mesh.prototype );
 THREE.Mirror.prototype.constructor = THREE.Mirror;
+
+THREE.DefaultMirrorShader = {
+
+	uniforms: {
+
+		'color': {
+			type: 'c',
+			value: null
+		},
+
+		'tDiffuse': {
+			type: 't',
+			value: null
+		},
+
+		'textureMatrix': {
+			type: 'm4',
+			value: null
+		}
+
+	},
+
+	vertexShader: [
+		'uniform mat4 textureMatrix;',
+		'varying vec4 vUv;',
+
+		'void main() {',
+
+		'	vUv = textureMatrix * vec4( position, 1.0 );',
+
+		'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+		'}'
+	].join( '\n' ),
+
+	fragmentShader: [
+		'uniform vec3 color;',
+		'uniform sampler2D tDiffuse;',
+		'varying vec4 vUv;',
+
+		'float blendOverlay( float base, float blend ) {',
+
+		'	return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );',
+
+		'}',
+
+		'vec3 blendOverlay( vec3 base, vec3 blend ) {',
+
+		'	return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ),blendOverlay( base.b, blend.b ) );',
+
+		'}',
+
+		'void main() {',
+
+		'	vec4 base = texture2DProj( tDiffuse, vUv );',
+		'	gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );',
+
+		'}'
+	].join( '\n' )
+};

examples/js/objects/Refractor.js

@@ -11,7 +11,9 @@ THREE.Refractor = function ( width, height, options ) {
 
 	var scope = this;
 
-	var color = options.color || new THREE.Color( 0x7f7f7f );
+	options = options || {};
+
+	var color = ( options.color !== undefined ) !== undefined ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
 	var textureWidth = options.textureWidth || 512;
 	var textureHeight = options.textureHeight || 512;
 	var clipBias = options.clipBias || 0;

examples/webgl_refraction.html

@@ -78,7 +78,7 @@
 			// refractor
 
 			refractor = new THREE.Refractor( 10, 10, {
-				color: new THREE.Color( 0x999999 ),
+				color: 0x999999,
 				textureWidth: 1024,
 				textureHeight: 1024,
 				shader: THREE.WaterRefractionShader