Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge branch 'post-bokeh-pass' of https://github.com/jpweeks/three.js into dev

Mr.doob 11 years ago
parent
c135af2ec9 f429f02cab
commit
1228df6f3d
2 changed files with 139 additions and 45 deletions
Split View Show Diff Stats
  1. 96 0
      examples/js/postprocessing/BokehPass.js
  2. 43 45
      examples/webgl_postprocessing_dof.html

+ 96 - 0
examples/js/postprocessing/BokehPass.js
View File 

@@ -0,0 +1,96 @@
 
+/**
 
+ * Depth-of-field post-process with bokeh shader
 
+ */
 
+
 
+
 
+THREE.BokehPass = function ( scene, camera, params ) {
 
+
 
+	this.scene = scene;
 
+	this.camera = camera;
 
+
 
+	var focus = ( params.focus !== undefined ) ? params.focus : 1.0;
 
+	var aspect = ( params.aspect !== undefined ) ? params.aspect : camera.aspect;
 
+	var aperture = ( params.aperture !== undefined ) ? params.aperture : 0.025;
 
+	var maxblur = ( params.maxblur !== undefined ) ? params.maxblur : 1.0;
 
+
 
+	// render targets
 
+
 
+	var width = params.width || window.innerWidth || 1;
 
+	var height = params.height || window.innerHeight || 1;
 
+
 
+	this.renderTargetColor = new THREE.WebGLRenderTarget( width, height, {
 
+		minFilter: THREE.LinearFilter,
 
+		magFilter: THREE.LinearFilter,
 
+		format: THREE.RGBFormat
 
+	} );
 
+
 
+	this.renderTargetDepth = this.renderTargetColor.clone();
 
+
 
+	// depth material
 
+
 
+	this.materialDepth = new THREE.MeshDepthMaterial();
 
+
 
+	// bokeh material
 
+
 
+	if ( THREE.BokehShader === undefined ) {
 
+		console.error( "THREE.BokehPass relies on THREE.BokehShader" );
 
+	}
 
+	
+	var bokehShader = THREE.BokehShader;
 
+	var bokehUniforms = THREE.UniformsUtils.clone( bokehShader.uniforms );
 
+
 
+	bokehUniforms[ "tDepth" ].value = this.renderTargetDepth;
 
+
 
+	bokehUniforms[ "focus" ].value = focus;
 
+	bokehUniforms[ "aspect" ].value = aspect;
 
+	bokehUniforms[ "aperture" ].value = aperture;
 
+	bokehUniforms[ "maxblur" ].value = maxblur;
 
+
 
+	this.materialBokeh = new THREE.ShaderMaterial({
 
+		uniforms: bokehUniforms,
 
+		vertexShader: bokehShader.vertexShader,
 
+		fragmentShader: bokehShader.fragmentShader
 
+	});
 
+
 
+	this.uniforms = bokehUniforms;
 
+	this.enabled = true;
 
+	this.needsSwap = false;
 
+	this.renderToScreen = false;
 
+	this.clear = false;
 
+
 
+};
 
+
 
+THREE.BokehPass.prototype = {
 
+
 
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
+
 
+		var composer = THREE.EffectComposer;
 
+
 
+		composer.quad.material = this.materialBokeh;
 
+
 
+		// Render depth into texture
 
+
 
+		this.scene.overrideMaterial = this.materialDepth;
 
+
 
+		renderer.render( this.scene, this.camera, this.renderTargetDepth, true );
 
+
 
+		// Render bokeh composite
 
+
 
+		this.uniforms[ "tColor" ].value = readBuffer;
 
+
 
+		if ( this.renderToScreen ) {
 
+
 
+			renderer.render( composer.scene, composer.camera );
 
+
 
+		} else {
 
+
 
+			renderer.render( composer.scene, composer.camera, writeBuffer, this.clear );
 
+
 
+		}
 
+
 
+		this.scene.overrideMaterial = null;
 
+
 
+	}
 
+
 
+};
 
+

+ 43 - 45
examples/webgl_postprocessing_dof.html
View File 

@@ -33,10 +33,17 @@
 
 	</head>
 
 
 	<body>
 
-		<script src="../build/three.min.js"></script>
 
+		<script src="../build/three.js"></script>
 
 
+		<script src="js/shaders/CopyShader.js"></script>
 
 		<script src="js/shaders/BokehShader.js"></script>
 
 
+		<script src="js/postprocessing/EffectComposer.js"></script>
 
+		<script src="js/postprocessing/RenderPass.js"></script>
 
+		<script src="js/postprocessing/ShaderPass.js"></script>
 
+		<script src="js/postprocessing/MaskPass.js"></script>
 
+		<script src="js/postprocessing/BokehPass.js"></script>
 
+
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
@@ -64,6 +71,7 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
+			var width = window.innerWidth;
 
 			var height = window.innerHeight - 300;
 
 
 			var postprocessing = { enabled  : true };
 
@@ -76,13 +84,13 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / height, 1, 3000 );
 
+				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 3000 );
 
 				camera.position.z = 200;
 
 
 				scene = new THREE.Scene();
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
-				renderer.setSize( window.innerWidth, height );
 
+				renderer.setSize( width, height );
 
 				container.appendChild( renderer.domElement );
 
 
 				renderer.sortObjects = false;
 
@@ -177,6 +185,8 @@
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
 				var effectController  = {
 
 
 					focus: 		1.0,
 
@@ -187,9 +197,9 @@
 
 
 				var matChanger = function( ) {
 
 
-					postprocessing.bokeh_uniforms[ "focus" ].value = effectController.focus;
 
-					postprocessing.bokeh_uniforms[ "aperture" ].value = effectController.aperture;
 
-					postprocessing.bokeh_uniforms[ "maxblur" ].value = effectController.maxblur;
 
+					postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
 
+					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture;
 
+					postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur;
 
 
 				};
 
 
@@ -233,39 +243,43 @@
 
 
 			}
 
 
-			function initPostprocessing() {
 
+			function onWindowResize() {
 
 
-				postprocessing.scene = new THREE.Scene();
 
+				windowHalfX = window.innerWidth / 2;
 
+				windowHalfY = window.innerHeight / 2;
 
 
-				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
 
-				postprocessing.camera.position.z = 100;
 
+				width = window.innerWidth;
 
+				height = window.innerHeight - 300;
 
 
-				postprocessing.scene.add( postprocessing.camera );
 
+				camera.aspect = width / height;
 
+				camera.updateProjectionMatrix();
 
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
 
-				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
 
+				renderer.setSize( width, height );
 
+				postprocessing.composer.setSize( width, height );
 
+
 
+			}
 
 
-				var bokeh_shader = THREE.BokehShader;
 
+			function initPostprocessing() {
 
+				var renderPass = new THREE.RenderPass( scene, camera );
 
 
-				postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
 
+				var bokehPass = new THREE.BokehPass( scene, camera, {
 
+					focus: 		1.0,
 
+					aperture:	0.025,
 
+					maxblur:	1.0,
 
 
-				postprocessing.bokeh_uniforms[ "tColor" ].value = postprocessing.rtTextureColor;
 
-				postprocessing.bokeh_uniforms[ "tDepth" ].value = postprocessing.rtTextureDepth;
 
-				postprocessing.bokeh_uniforms[ "focus" ].value = 1.1;
 
-				postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerWidth / height;
 
+					width: width,
 
+					height: height
 
+				} );
 
 
-				postprocessing.materialBokeh = new THREE.ShaderMaterial( {
 
+				bokehPass.renderToScreen = true;
 
 
-					uniforms: postprocessing.bokeh_uniforms,
 
-					vertexShader: bokeh_shader.vertexShader,
 
-					fragmentShader: bokeh_shader.fragmentShader
 
+				var composer = new THREE.EffectComposer( renderer );
 
 
-				} );
 
+				composer.addPass( renderPass );
 
+				composer.addPass( bokehPass );
 
 
-				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
 
-				postprocessing.quad.position.z = - 500;
 
-				postprocessing.scene.add( postprocessing.quad );
 
+				postprocessing.composer = composer;
 
+				postprocessing.bokeh = bokehPass;
 
 
 			}
 
 
@@ -300,22 +314,7 @@
 
 
 				if ( postprocessing.enabled ) {
 
 
-					renderer.clear();
 
-
 
-					// Render scene into texture
 
-
 
-					scene.overrideMaterial = null;
 
-					renderer.render( scene, camera, postprocessing.rtTextureColor, true );
 
-
 
-					// Render depth into texture
 
-
 
-					scene.overrideMaterial = material_depth;
 
-					renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
 
-
 
-					// Render bokeh composite
 
-
 
-					renderer.render( postprocessing.scene, postprocessing.camera );
 
-
 
+					postprocessing.composer.render( 0.1 );
 
 
 				} else {
 
 
@@ -326,7 +325,6 @@
 
 
 			}
 
 
-
 
 		</script>
 
 	</body>
 
 </html>