From 7c67cfb3013315dd358f227ec219e20a0900ab8d Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Sun, 15 Sep 2013 18:00:54 -0700 Subject: [PATCH] Added Mirror. See #3856. --- examples/index.html | 1 + examples/js/Mirror.js | 286 +++++++++++++++++++++++++++++++++++++ examples/webgl_mirror.html | 215 ++++++++++++++++++++++++++++ 3 files changed, 502 insertions(+) create mode 100644 examples/js/Mirror.js create mode 100644 examples/webgl_mirror.html diff --git a/examples/index.html b/examples/index.html index 1ab7bb6a22..ffbe1863dd 100644 --- a/examples/index.html +++ b/examples/index.html @@ -219,6 +219,7 @@ "webgl_materials_texture_manualmipmap", "webgl_materials_video", "webgl_materials_wireframe", + "webgl_mirror", "webgl_morphnormals", "webgl_morphtargets", "webgl_morphtargets_horse", diff --git a/examples/js/Mirror.js b/examples/js/Mirror.js new file mode 100644 index 0000000000..b81c61467d --- /dev/null +++ b/examples/js/Mirror.js @@ -0,0 +1,286 @@ +/** + * @author Slayvin / http://slayvin.net + */ + +THREE.ShaderLib['mirror'] = { + + uniforms: { "mirrorColor": { type: "c", value: new THREE.Color(0x7F7F7F) }, + "mirrorSampler": { type: "t", value: null }, + "textureMatrix" : { type: "m4", 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") + +}; + +THREE.Mirror = function ( renderer, camera, options ) { + + THREE.Object3D.call( this ); + this.name = 'mirror_' + this.id; + + function isPowerOfTwo ( value ) { + return ( value & ( value - 1 ) ) === 0; + }; + + options = options || {}; + + this.matrixNeedsUpdate = true; + + var width = options.textureWidth !== undefined ? options.textureWidth : 512; + var height = options.textureHeight !== undefined ? options.textureHeight : 512; + + this.clipBias = options.clipBias !== undefined ? options.clipBias : 0.0; + + var mirrorColor = options.color !== undefined ? new THREE.Color(options.color) : new THREE.Color(0x7F7F7F); + + this.renderer = renderer; + this.mirrorPlane = new THREE.Plane(); + this.normal = new THREE.Vector3( 0, 0, 1 ); + this.mirrorWorldPosition = new THREE.Vector3(); + this.cameraWorldPosition = new THREE.Vector3(); + this.rotationMatrix = new THREE.Matrix4(); + this.lookAtPosition = new THREE.Vector3(0, 0, -1); + this.clipPlane = new THREE.Vector4(); + + // For debug only, show the normal and plane of the mirror + var debugMode = options.debugMode !== undefined ? options.debugMode : false; + if (debugMode){ + var arrow = new THREE.ArrowHelper(new THREE.Vector3( 0, 0, 1 ), new THREE.Vector3( 0, 0, 0 ), 10, 0xffff80 ); + var planeGeometry = new THREE.Geometry(); + planeGeometry.vertices.push( new THREE.Vector3( -10, -10, 0 ) ); + planeGeometry.vertices.push( new THREE.Vector3( 10, -10, 0 ) ); + planeGeometry.vertices.push( new THREE.Vector3( 10, 10, 0 ) ); + planeGeometry.vertices.push( new THREE.Vector3( -10, 10, 0 ) ); + planeGeometry.vertices.push( planeGeometry.vertices[0] ); + var plane = new THREE.Line( planeGeometry, new THREE.LineBasicMaterial( { color: 0xffff80 } ) ); + + this.add(arrow); + this.add(plane); + } + + if ( camera instanceof THREE.PerspectiveCamera ) + this.camera = camera; + else { + this.camera = new THREE.PerspectiveCamera(); + console.log(this.name + ': camera is not a Perspective Camera!') + } + + this.textureMatrix = new THREE.Matrix4(); + + this.mirrorCamera = this.camera.clone(); + + this.texture = new THREE.WebGLRenderTarget( width, height ); + this.tempTexture = new THREE.WebGLRenderTarget( width, height ); + + var mirrorShader = THREE.ShaderLib[ "mirror" ]; + var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms ); + + this.material = new THREE.ShaderMaterial( { + fragmentShader: mirrorShader.fragmentShader, + vertexShader: mirrorShader.vertexShader, + uniforms: mirrorUniforms + } ); + + this.material.uniforms.mirrorSampler.value = this.texture; + this.material.uniforms.mirrorColor.value = mirrorColor; + this.material.uniforms.textureMatrix.value = this.textureMatrix; + + if ( !isPowerOfTwo(width) || !isPowerOfTwo(height) ) { + + this.texture.generateMipmaps = false; + this.tempTexture.generateMipmaps = false; + + } + + this.updateTextureMatrix(); + this.render(); + +}; + +THREE.Mirror.prototype = Object.create( THREE.Object3D.prototype ); + +THREE.Mirror.prototype.renderWithMirror = function (otherMirror) { + + // update the mirror matrix to mirror the current view + this.updateTextureMatrix(); + this.matrixNeedsUpdate = false; + + // set the camera of the other mirror so the mirrored view is the reference view + var tempCamera = otherMirror.camera; + otherMirror.camera = this.mirrorCamera; + + // render the other mirror in temp texture + otherMirror.renderTemp(); + otherMirror.material.uniforms.mirrorSampler.value = otherMirror.tempTexture; + + // render the current mirror + this.render(); + this.matrixNeedsUpdate = true; + + // restore material and camera of other mirror + otherMirror.material.uniforms.mirrorSampler.value = otherMirror.texture; + otherMirror.camera = tempCamera; + + // restore texture matrix of other mirror + otherMirror.updateTextureMatrix(); +}; + +THREE.Mirror.prototype.updateTextureMatrix = function () { + + function sign(x) { return x ? x < 0 ? -1 : 1 : 0; } + + this.updateMatrixWorld(); + this.camera.updateMatrixWorld(); + + this.mirrorWorldPosition.getPositionFromMatrix( this.matrixWorld ); + this.cameraWorldPosition.getPositionFromMatrix( this.camera.matrixWorld ); + + this.rotationMatrix.extractRotation( this.matrixWorld ); + + this.normal.set( 0, 0, 1 ); + this.normal.applyMatrix4( this.rotationMatrix ); + + var view = this.mirrorWorldPosition.clone().sub( this.cameraWorldPosition ); + var reflectView = view.reflect( this.normal ); + reflectView.add( this.mirrorWorldPosition ); + + this.rotationMatrix.extractRotation( this.camera.matrixWorld ); + + this.lookAtPosition.set(0, 0, -1); + this.lookAtPosition.applyMatrix4( this.rotationMatrix ); + this.lookAtPosition.add( this.cameraWorldPosition ); + + var target = this.mirrorWorldPosition.clone().sub( this.lookAtPosition ); + var reflectTarget = target.reflect( this.normal ); + reflectTarget.add( this.mirrorWorldPosition ); + + this.up.set( 0, -1, 0 ); + this.up.applyMatrix4( this.rotationMatrix ); + var reflectUp = this.up.reflect( this.normal ); + + this.mirrorCamera.position.copy(reflectView); + this.mirrorCamera.up = reflectUp; + this.mirrorCamera.lookAt( reflectTarget ); + + this.mirrorCamera.updateProjectionMatrix(); + this.mirrorCamera.updateMatrixWorld(); + this.mirrorCamera.matrixWorldInverse.getInverse( this.mirrorCamera.matrixWorld ); + + // Update the texture matrix + this.textureMatrix.set( 0.5, 0.0, 0.0, 0.5, + 0.0, 0.5, 0.0, 0.5, + 0.0, 0.0, 0.5, 0.5, + 0.0, 0.0, 0.0, 1.0 ); + this.textureMatrix.multiply( this.mirrorCamera.projectionMatrix ); + this.textureMatrix.multiply( this.mirrorCamera.matrixWorldInverse ); + + // 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 + this.mirrorPlane.setFromNormalAndCoplanarPoint( this.normal, this.mirrorWorldPosition ); + this.mirrorPlane.applyMatrix4( this.mirrorCamera.matrixWorldInverse ); + + this.clipPlane.set( this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant ); + + var q = new THREE.Vector4(); + var projectionMatrix = this.mirrorCamera.projectionMatrix; + + q.x = (sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0]; + q.y = (sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5]; + q.z = -1.0; + q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; + + // Calculate the scaled plane vector + var c = new THREE.Vector4(); + c = this.clipPlane.multiplyScalar( 2.0 / this.clipPlane.dot(q) ); + + // Replacing the third row of the projection matrix + projectionMatrix.elements[2] = c.x; + projectionMatrix.elements[6] = c.y; + projectionMatrix.elements[10] = c.z + 1.0 - this.clipBias; + projectionMatrix.elements[14] = c.w; + +}; + +THREE.Mirror.prototype.render = function () { + + if ( this.matrixNeedsUpdate ) this.updateTextureMatrix(); + + this.matrixNeedsUpdate = true; + + // Render the mirrored view of the current scene into the target texture + var scene = this; + + while ( scene.parent !== undefined ) { + + scene = scene.parent; + + } + + if ( scene !== undefined && scene instanceof THREE.Scene) { + + this.renderer.render( scene, this.mirrorCamera, this.texture, true ); + + } + +}; + +THREE.Mirror.prototype.renderTemp = function () { + + if ( this.matrixNeedsUpdate ) this.updateTextureMatrix(); + + this.matrixNeedsUpdate = true; + + // Render the mirrored view of the current scene into the target texture + var scene = this; + + while ( scene.parent !== undefined ) { + + scene = scene.parent; + + } + + if ( scene !== undefined && scene instanceof THREE.Scene) { + + this.renderer.render( scene, this.mirrorCamera, this.tempTexture, true ); + + } + +}; diff --git a/examples/webgl_mirror.html b/examples/webgl_mirror.html new file mode 100644 index 0000000000..4d3b2a8911 --- /dev/null +++ b/examples/webgl_mirror.html @@ -0,0 +1,215 @@ + + + + three.js webgl - mirror + + + + + + +
+
three.js - mirror +
+ + + + + + + + -- GitLab