Etusivu Tutki Apua
Kirjaudu sisään
javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git
2
0
Fork 0
Tiedostot Ongelmat 0 Wiki
Selaa lähdekoodia

Made simpler postprocessing example a bit less simple :P

Mr.doob 12 vuotta sitten
vanhempi
d0adb01f5e
commit
fc94af26dd
3 muutettua tiedostoa jossa 460 lisäystä ja 448 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 55 337
      examples/webgl_postprocessing.html
  2. 405 0
      examples/webgl_postprocessing_advanced.html
  3. 0 111
      examples/webgl_postprocessing_cube.html

+ 55 - 337
examples/webgl_postprocessing.html
Näytä tiedosto 

@@ -3,403 +3,121 @@
 
 	<head>
 
 	<head>
 
 		<title>three.js webgl - postprocessing</title>
 
 		<title>three.js webgl - postprocessing</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
-		    body {
 
-			color: #000;
 
-			font-family:Monospace;
 
-			font-size:13px;
 
-			text-align:center;
 
-			font-weight: bold;
 
-
 
-			background-color: #000;
 
-			margin: 0px;
 
-			overflow: hidden;
 
-		    }
 
-
 
-		    #info {
 
-			color:#fff;
 
-			background-color: rgba( 0, 0, 0, 0.5 );
 
-			position: relative;
 
-			margin: 0 auto -2.1em;
 
-			top: 0px;
 
-			width: 550px;
 
-			padding: 5px;
 
-			z-index:100;
 
-		    }
 
-
 
-		    a { color: red; }
 
+			body {
 
+				margin: 0px;
 
+				background-color: #000000;
 
+				overflow: hidden;
 
+			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank">three.js</a> - webgl postprocessing example -
 
-			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 
-		</div>
 
-
 
-		<div id="container"></div>
 
-
 
 		<script src="../build/three.min.js"></script>
 
 		<script src="../build/three.min.js"></script>
 
 
 
-		<script src="js/shaders/BleachBypassShader.js"></script>
 
-		<script src="js/shaders/ColorifyShader.js"></script>
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
 
 		<script src="js/shaders/CopyShader.js"></script>
 
 		<script src="js/shaders/CopyShader.js"></script>
 
 		<script src="js/shaders/DotScreenShader.js"></script>
 
 		<script src="js/shaders/DotScreenShader.js"></script>
 
-		<script src="js/shaders/FilmShader.js"></script>
 
-		<script src="js/shaders/HorizontalBlurShader.js"></script>
 
-		<script src="js/shaders/SepiaShader.js"></script>
 
-		<script src="js/shaders/VerticalBlurShader.js"></script>
 
-		<script src="js/shaders/VignetteShader.js"></script>
 
+		<script src="js/shaders/RGBShiftShader.js"></script>
 
 
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 
 		<script src="js/postprocessing/RenderPass.js"></script>
 
 		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/BloomPass.js"></script>
 
-		<script src="js/postprocessing/FilmPass.js"></script>
 
-		<script src="js/postprocessing/DotScreenPass.js"></script>
 
-		<script src="js/postprocessing/TexturePass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
 		<script src="js/postprocessing/MaskPass.js"></script>
 
 		<script src="js/postprocessing/MaskPass.js"></script>
 
+		<script src="js/postprocessing/ShaderPass.js"></script>
 
 
 
-		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
 
 
 		<script>
 
 		<script>
 
 
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-
 
-			var container, stats;
 
-
 
-			var composerScene, composer1, composer2, composer3, composer4;
 
-
 
-			var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
 
-
 
-			var width = window.innerWidth || 2;
 
-			var height = window.innerHeight || 2;
 
-
 
-			var halfWidth = width / 2;
 
-			var halfHeight = height / 2;
 
-
 
-			var materialColor, material2D, quadBG, quadMask, renderScene;
 
-
 
-			var delta = 0.01;
 
+			var camera, scene, renderer, composer;
 
+			var object, light;
 
 
 
 			init();
 
 			init();
 
 			animate();
 
 			animate();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
-				container = document.getElementById( 'container' );
 
-
 
-				//
 
-
 
-				cameraOrtho = new THREE.OrthographicCamera( -halfWidth, halfWidth, halfHeight, -halfHeight, -10000, 10000 );
 
-				cameraOrtho.position.z = 100;
 
-
 
-				cameraPerspective = new THREE.PerspectiveCamera( 50, width / height, 1, 10000 );
 
-				cameraPerspective.position.z = 900;
 
-
 
-				//
 
-
 
-				sceneModel = new THREE.Scene();
 
-				sceneBG = new THREE.Scene();
 
-
 
-				//
 
-
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
 
-				directionalLight.position.set( 0, -0.1, 1 ).normalize();
 
-				sceneModel.add( directionalLight );
 
-
 
-				loader = new THREE.JSONLoader( true );
 
-				document.body.appendChild( loader.statusDomElement );
 
-				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createMesh( geometry, sceneModel, 100 ) } );
 
-
 
-				//
 
-
 
-				var materialColor = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/cube/SwedishRoyalCastle/pz.jpg" ), depthTest: false } );
 
-
 
-				quadBG = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), materialColor );
 
-				quadBG.position.z = -500;
 
-				quadBG.scale.set( width, height, 1 );
 
-				sceneBG.add( quadBG );
 
-
 
-				//
 
-
 
-				var sceneMask = new THREE.Scene();
 
-
 
-				quadMask = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } )  );
 
-				quadMask.position.z = -300;
 
-				quadMask.scale.set( width / 2, height / 2, 1 );
 
-				sceneMask.add( quadMask );
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
-				renderer.setSize( width, height );
 
-				renderer.setClearColorHex( 0x000000, 1 );
 
-				renderer.autoClear = false;
 
-
 
-				//
 
-
 
-				renderer.gammaInput = true;
 
-				renderer.gammaOutput = true;
 
-
 
-				//
 
-
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				//container.appendChild( stats.domElement );
 
-
 
-				//
 
-
 
-				var shaderBleach = THREE.BleachBypassShader;
 
-				var shaderSepia = THREE.SepiaShader;
 
-				var shaderVignette = THREE.VignetteShader;
 
-				var shaderCopy = THREE.CopyShader;
 
-
 
-				var effectBleach = new THREE.ShaderPass( shaderBleach );
 
-				var effectSepia = new THREE.ShaderPass( shaderSepia );
 
-				var effectVignette = new THREE.ShaderPass( shaderVignette );
 
-				var effectCopy = new THREE.ShaderPass( shaderCopy );
 
-
 
-				effectBleach.uniforms[ "opacity" ].value = 0.95;
 
-
 
-				effectSepia.uniforms[ "amount" ].value = 0.9;
 
-
 
-				effectVignette.uniforms[ "offset" ].value = 0.95;
 
-				effectVignette.uniforms[ "darkness" ].value = 1.6;
 
-
 
-				var effectBloom = new THREE.BloomPass( 0.5 );
 
-				var effectFilm = new THREE.FilmPass( 0.35, 0.025, 648, false );
 
-				var effectFilmBW = new THREE.FilmPass( 0.35, 0.5, 2048, true );
 
-				var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
 
-
 
-				var effectHBlur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
 
-				var effectVBlur = new THREE.ShaderPass( THREE.VerticalBlurShader );
 
-				effectHBlur.uniforms[ 'h' ].value = 2 / ( width / 2 );
 
-				effectVBlur.uniforms[ 'v' ].value = 2 / ( height / 2 );
 
-
 
-				var effectColorify1 = new THREE.ShaderPass( THREE.ColorifyShader );
 
-				var effectColorify2 = new THREE.ShaderPass( THREE.ColorifyShader );
 
-				effectColorify1.uniforms[ 'color' ].value.setRGB( 1, 0.8, 0.8 );
 
-				effectColorify2.uniforms[ 'color' ].value.setRGB( 1, 0.75, 0.5 );
 
-
 
-				var clearMask = new THREE.ClearMaskPass();
 
-				var renderMask = new THREE.MaskPass( sceneModel, cameraPerspective );
 
-				var renderMaskInverse = new THREE.MaskPass( sceneModel, cameraPerspective );
 
-
 
-				renderMaskInverse.inverse = true;
 
-
 
-				//effectFilm.renderToScreen = true;
 
-				//effectFilmBW.renderToScreen = true;
 
-				//effectDotScreen.renderToScreen = true;
 
-				//effectBleach.renderToScreen = true;
 
-				effectVignette.renderToScreen = true;
 
-				//effectCopy.renderToScreen = true;
 
-
 
-				//
 
-
 
-				var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: true };
 
-
 
-				var rtWidth  = width / 2;
 
-				var rtHeight = height / 2;
 
-
 
-				//
 
-
 
-				var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
 
-				var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
 
-
 
-				renderModel.clear = false;
 
-
 
-				composerScene = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth * 2, rtHeight * 2, rtParameters ) );
 
-
 
-				composerScene.addPass( renderBackground );
 
-				composerScene.addPass( renderModel );
 
-				composerScene.addPass( renderMaskInverse );
 
-				composerScene.addPass( effectHBlur );
 
-				composerScene.addPass( effectVBlur );
 
-				composerScene.addPass( clearMask );
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
 
 
 				//
 
 				//
 
 
 
-				renderScene = new THREE.TexturePass( composerScene.renderTarget2 );
 
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera.position.z = 400;
 
 
 
-				//
 
+				scene = new THREE.Scene();
 
+				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
 
 
 
-				composer1 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+				object = new THREE.Object3D();
 
+				scene.add( object );
 
 
 
-				composer1.addPass( renderScene );
 
-				//composer1.addPass( renderMask );
 
-				composer1.addPass( effectFilmBW );
 
-				//composer1.addPass( clearMask );
 
-				composer1.addPass( effectVignette );
 
+				var geometry = new THREE.SphereGeometry( 1, 4, 4 );
 
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
 
 
 
-				//
 
+				for ( var i = 0; i < 500; i ++ ) {
 
 
 
-				composer2 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+					var mesh = new THREE.Mesh( geometry, material );
 
+					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 
+					mesh.position.multiplyScalar( Math.random() * 400 );
 
+					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
 
+					object.add( mesh );
 
 
 
-				composer2.addPass( renderScene );
 
-				composer2.addPass( effectDotScreen );
 
-				composer2.addPass( renderMask );
 
-				composer2.addPass( effectColorify1 );
 
-				composer2.addPass( clearMask );
 
-				composer2.addPass( renderMaskInverse );
 
-				composer2.addPass( effectColorify2 );
 
-				composer2.addPass( clearMask );
 
-				composer2.addPass( effectVignette );
 
+				}
 
 
 
-				//
 
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
 
 
-				composer3 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+				light = new THREE.DirectionalLight( 0xffffff );
 
+				light.position.set( 1, 1, 1 );
 
+				scene.add( light );
 
 
 
-				composer3.addPass( renderScene );
 
-				//composer3.addPass( renderMask );
 
-				composer3.addPass( effectSepia );
 
-				composer3.addPass( effectFilm );
 
-				//composer3.addPass( clearMask );
 
-				composer3.addPass( effectVignette );
 
+				// postprocessing
 
 
 
-				//
 
+				composer = new THREE.EffectComposer( renderer );
 
+				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
 
 
-				composer4 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+				var effect = new THREE.ShaderPass( THREE.DotScreenShader );
 
+				effect.uniforms[ 'scale' ].value = 4;
 
+				composer.addPass( effect );
 
 
 
-				composer4.addPass( renderScene );
 
-				//composer4.addPass( renderMask );
 
-				composer4.addPass( effectBloom );
 
-				composer4.addPass( effectFilm );
 
-				composer4.addPass( effectBleach );
 
-				//composer4.addPass( clearMask );
 
-				composer4.addPass( effectVignette );
 
+				var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
 
+				effect.uniforms[ 'amount' ].value = 0.0015;
 
+				effect.renderToScreen = true;
 
+				composer.addPass( effect );
 
 
 
 				//
 
 				//
 
 
 
-				//onWindowResize();
 
-
 
-				renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2;
 
-
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
 
 			}
 
 			}
 
 
 
-			function onWindowResize( event ) {
 
-
 
-				halfWidth = window.innerWidth / 2;
 
-				halfHeight = window.innerHeight / 2;
 
+			function onWindowResize() {
 
 
 
-				cameraPerspective.aspect = window.innerWidth / window.innerHeight;
 
-				cameraPerspective.updateProjectionMatrix();
 
-
 
-				cameraOrtho.left = -halfWidth;
 
-				cameraOrtho.right = halfWidth;
 
-				cameraOrtho.top = halfHeight;
 
-				cameraOrtho.bottom = -halfHeight;
 
-
 
-				cameraOrtho.updateProjectionMatrix();
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
-				composerScene.setSize( halfWidth * 2, halfHeight * 2 );
 
-
 
-				composer1.setSize( halfWidth, halfHeight );
 
-				composer2.setSize( halfWidth, halfHeight );
 
-				composer3.setSize( halfWidth, halfHeight );
 
-				composer4.setSize( halfWidth, halfHeight );
 
-
 
-				renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2;
 
-
 
-				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 
-				quadMask.scale.set( window.innerWidth / 2, window.innerHeight / 2, 1 );
 
-
 
-			}
 
-
 
-			function getText( id ) {
 
-
 
-				return document.getElementById( id ).textContent;
 
-
 
 			}
 
 			}
 
 
 
-			function createMesh( geometry, scene, scale ) {
 
-
 
-				geometry.computeTangents();
 
-
 
-				var ambient = 0x444444, diffuse = 0x999999, specular = 0x080808, shininess = 20;
 
-
 
-				var shader = THREE.ShaderUtils.lib[ "normal" ];
 
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
-
 
-				uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
-				uniforms[ "uNormalScale" ].value.set( 0.75, 0.75 );
 
-
 
-				uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
 
-
 
-				uniforms[ "enableAO" ].value = false;
 
-				uniforms[ "enableDiffuse" ].value = true;
 
-
 
-				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 
-				uniforms[ "uSpecularColor" ].value.setHex( specular );
 
-				uniforms[ "uAmbientColor" ].value.setHex( ambient );
 
-
 
-				uniforms[ "uShininess" ].value = shininess;
 
-
 
-				uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
 
-				uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
 
-				uniforms[ "uAmbientColor" ].value.convertGammaToLinear();
 
-
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
 
-				var mat2 = new THREE.ShaderMaterial( parameters );
 
-
 
-				mesh = new THREE.Mesh( geometry, mat2 );
 
-				mesh.position.set( 0, -50, 0 );
 
-				mesh.scale.set( scale, scale, scale );
 
-
 
-				scene.add( mesh );
 
-
 
-				loader.statusDomElement.style.display = "none";
 
-
 
-			}
 
-
 
-			//
 
-
 
 			function animate() {
 
 			function animate() {
 
 
 
 				requestAnimationFrame( animate );
 
 				requestAnimationFrame( animate );
 
 
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				var time = Date.now() * 0.0004;
 
+				var time = Date.now();
 
 
 
-				if ( mesh ) mesh.rotation.y = -time;
 
+				object.rotation.x += 0.005;
 
+				object.rotation.y += 0.01;
 
+				object.traverse( function ( child ) {
 
+					if ( child === object ) return;
 
+					var scale = ( Math.sin( ( child.position.distanceTo( object.position ) * 10 - time ) * 0.002 ) + 1 ) * 20;
 
+					child.scale.x = child.scale.y = child.scale.z = scale;
 
+					child.rotation.y = scale * 0.1;
 
+				} );
 
 
 
-				renderer.setViewport( 0, 0, 2 * halfWidth, 2 * halfHeight );
 
-
 
-				renderer.clear();
 
-				composerScene.render( delta );
 
-
 
-				renderer.setViewport( 0, 0, halfWidth, halfHeight );
 
-				composer1.render( delta );
 
-
 
-				renderer.setViewport( halfWidth, 0, halfWidth, halfHeight );
 
-				composer2.render( delta );
 
-
 
-				renderer.setViewport( 0, halfHeight, halfWidth, halfHeight );
 
-				composer3.render( delta );
 
-
 
-				renderer.setViewport( halfWidth, halfHeight, halfWidth, halfHeight );
 
-				composer4.render( delta );
 
+				composer.render();
 
 
 
 			}
 
 			}
 
 
 
 		</script>
 
 		</script>
 
+
 
 	</body>
 
 	</body>
 
 </html>
 
 </html>

+ 405 - 0
examples/webgl_postprocessing_advanced.html
Näytä tiedosto 

@@ -0,0 +1,405 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - postprocessing</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+		    body {
 
+			color: #000;
 
+			font-family:Monospace;
 
+			font-size:13px;
 
+			text-align:center;
 
+			font-weight: bold;
 
+
 
+			background-color: #000;
 
+			margin: 0px;
 
+			overflow: hidden;
 
+		    }
 
+
 
+		    #info {
 
+			color:#fff;
 
+			background-color: rgba( 0, 0, 0, 0.5 );
 
+			position: relative;
 
+			margin: 0 auto -2.1em;
 
+			top: 0px;
 
+			width: 550px;
 
+			padding: 5px;
 
+			z-index:100;
 
+		    }
 
+
 
+		    a { color: red; }
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - webgl postprocessing example -
 
+			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
 
+		</div>
 
+
 
+		<div id="container"></div>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+
 
+		<script src="js/shaders/BleachBypassShader.js"></script>
 
+		<script src="js/shaders/ColorifyShader.js"></script>
 
+		<script src="js/shaders/ConvolutionShader.js"></script>
 
+		<script src="js/shaders/CopyShader.js"></script>
 
+		<script src="js/shaders/DotScreenShader.js"></script>
 
+		<script src="js/shaders/FilmShader.js"></script>
 
+		<script src="js/shaders/HorizontalBlurShader.js"></script>
 
+		<script src="js/shaders/SepiaShader.js"></script>
 
+		<script src="js/shaders/VerticalBlurShader.js"></script>
 
+		<script src="js/shaders/VignetteShader.js"></script>
 
+
 
+		<script src="js/postprocessing/EffectComposer.js"></script>
 
+		<script src="js/postprocessing/RenderPass.js"></script>
 
+		<script src="js/postprocessing/BloomPass.js"></script>
 
+		<script src="js/postprocessing/FilmPass.js"></script>
 
+		<script src="js/postprocessing/DotScreenPass.js"></script>
 
+		<script src="js/postprocessing/TexturePass.js"></script>
 
+		<script src="js/postprocessing/ShaderPass.js"></script>
 
+		<script src="js/postprocessing/MaskPass.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			var container, stats;
 
+
 
+			var composerScene, composer1, composer2, composer3, composer4;
 
+
 
+			var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
 
+
 
+			var width = window.innerWidth || 2;
 
+			var height = window.innerHeight || 2;
 
+
 
+			var halfWidth = width / 2;
 
+			var halfHeight = height / 2;
 
+
 
+			var materialColor, material2D, quadBG, quadMask, renderScene;
 
+
 
+			var delta = 0.01;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.getElementById( 'container' );
 
+
 
+				//
 
+
 
+				cameraOrtho = new THREE.OrthographicCamera( -halfWidth, halfWidth, halfHeight, -halfHeight, -10000, 10000 );
 
+				cameraOrtho.position.z = 100;
 
+
 
+				cameraPerspective = new THREE.PerspectiveCamera( 50, width / height, 1, 10000 );
 
+				cameraPerspective.position.z = 900;
 
+
 
+				//
 
+
 
+				sceneModel = new THREE.Scene();
 
+				sceneBG = new THREE.Scene();
 
+
 
+				//
 
+
 
+				directionalLight = new THREE.DirectionalLight( 0xffffff );
 
+				directionalLight.position.set( 0, -0.1, 1 ).normalize();
 
+				sceneModel.add( directionalLight );
 
+
 
+				loader = new THREE.JSONLoader( true );
 
+				document.body.appendChild( loader.statusDomElement );
 
+				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createMesh( geometry, sceneModel, 100 ) } );
 
+
 
+				//
 
+
 
+				var materialColor = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "textures/cube/SwedishRoyalCastle/pz.jpg" ), depthTest: false } );
 
+
 
+				quadBG = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), materialColor );
 
+				quadBG.position.z = -500;
 
+				quadBG.scale.set( width, height, 1 );
 
+				sceneBG.add( quadBG );
 
+
 
+				//
 
+
 
+				var sceneMask = new THREE.Scene();
 
+
 
+				quadMask = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } )  );
 
+				quadMask.position.z = -300;
 
+				quadMask.scale.set( width / 2, height / 2, 1 );
 
+				sceneMask.add( quadMask );
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
 
+				renderer.setSize( width, height );
 
+				renderer.setClearColorHex( 0x000000, 1 );
 
+				renderer.autoClear = false;
 
+
 
+				//
 
+
 
+				renderer.gammaInput = true;
 
+				renderer.gammaOutput = true;
 
+
 
+				//
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				//container.appendChild( stats.domElement );
 
+
 
+				//
 
+
 
+				var shaderBleach = THREE.BleachBypassShader;
 
+				var shaderSepia = THREE.SepiaShader;
 
+				var shaderVignette = THREE.VignetteShader;
 
+				var shaderCopy = THREE.CopyShader;
 
+
 
+				var effectBleach = new THREE.ShaderPass( shaderBleach );
 
+				var effectSepia = new THREE.ShaderPass( shaderSepia );
 
+				var effectVignette = new THREE.ShaderPass( shaderVignette );
 
+				var effectCopy = new THREE.ShaderPass( shaderCopy );
 
+
 
+				effectBleach.uniforms[ "opacity" ].value = 0.95;
 
+
 
+				effectSepia.uniforms[ "amount" ].value = 0.9;
 
+
 
+				effectVignette.uniforms[ "offset" ].value = 0.95;
 
+				effectVignette.uniforms[ "darkness" ].value = 1.6;
 
+
 
+				var effectBloom = new THREE.BloomPass( 0.5 );
 
+				var effectFilm = new THREE.FilmPass( 0.35, 0.025, 648, false );
 
+				var effectFilmBW = new THREE.FilmPass( 0.35, 0.5, 2048, true );
 
+				var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
 
+
 
+				var effectHBlur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
 
+				var effectVBlur = new THREE.ShaderPass( THREE.VerticalBlurShader );
 
+				effectHBlur.uniforms[ 'h' ].value = 2 / ( width / 2 );
 
+				effectVBlur.uniforms[ 'v' ].value = 2 / ( height / 2 );
 
+
 
+				var effectColorify1 = new THREE.ShaderPass( THREE.ColorifyShader );
 
+				var effectColorify2 = new THREE.ShaderPass( THREE.ColorifyShader );
 
+				effectColorify1.uniforms[ 'color' ].value.setRGB( 1, 0.8, 0.8 );
 
+				effectColorify2.uniforms[ 'color' ].value.setRGB( 1, 0.75, 0.5 );
 
+
 
+				var clearMask = new THREE.ClearMaskPass();
 
+				var renderMask = new THREE.MaskPass( sceneModel, cameraPerspective );
 
+				var renderMaskInverse = new THREE.MaskPass( sceneModel, cameraPerspective );
 
+
 
+				renderMaskInverse.inverse = true;
 
+
 
+				//effectFilm.renderToScreen = true;
 
+				//effectFilmBW.renderToScreen = true;
 
+				//effectDotScreen.renderToScreen = true;
 
+				//effectBleach.renderToScreen = true;
 
+				effectVignette.renderToScreen = true;
 
+				//effectCopy.renderToScreen = true;
 
+
 
+				//
 
+
 
+				var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: true };
 
+
 
+				var rtWidth  = width / 2;
 
+				var rtHeight = height / 2;
 
+
 
+				//
 
+
 
+				var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
 
+				var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
 
+
 
+				renderModel.clear = false;
 
+
 
+				composerScene = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth * 2, rtHeight * 2, rtParameters ) );
 
+
 
+				composerScene.addPass( renderBackground );
 
+				composerScene.addPass( renderModel );
 
+				composerScene.addPass( renderMaskInverse );
 
+				composerScene.addPass( effectHBlur );
 
+				composerScene.addPass( effectVBlur );
 
+				composerScene.addPass( clearMask );
 
+
 
+				//
 
+
 
+				renderScene = new THREE.TexturePass( composerScene.renderTarget2 );
 
+
 
+				//
 
+
 
+				composer1 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+
 
+				composer1.addPass( renderScene );
 
+				//composer1.addPass( renderMask );
 
+				composer1.addPass( effectFilmBW );
 
+				//composer1.addPass( clearMask );
 
+				composer1.addPass( effectVignette );
 
+
 
+				//
 
+
 
+				composer2 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+
 
+				composer2.addPass( renderScene );
 
+				composer2.addPass( effectDotScreen );
 
+				composer2.addPass( renderMask );
 
+				composer2.addPass( effectColorify1 );
 
+				composer2.addPass( clearMask );
 
+				composer2.addPass( renderMaskInverse );
 
+				composer2.addPass( effectColorify2 );
 
+				composer2.addPass( clearMask );
 
+				composer2.addPass( effectVignette );
 
+
 
+				//
 
+
 
+				composer3 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+
 
+				composer3.addPass( renderScene );
 
+				//composer3.addPass( renderMask );
 
+				composer3.addPass( effectSepia );
 
+				composer3.addPass( effectFilm );
 
+				//composer3.addPass( clearMask );
 
+				composer3.addPass( effectVignette );
 
+
 
+				//
 
+
 
+				composer4 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
+
 
+				composer4.addPass( renderScene );
 
+				//composer4.addPass( renderMask );
 
+				composer4.addPass( effectBloom );
 
+				composer4.addPass( effectFilm );
 
+				composer4.addPass( effectBleach );
 
+				//composer4.addPass( clearMask );
 
+				composer4.addPass( effectVignette );
 
+
 
+				//
 
+
 
+				//onWindowResize();
 
+
 
+				renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2;
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize( event ) {
 
+
 
+				halfWidth = window.innerWidth / 2;
 
+				halfHeight = window.innerHeight / 2;
 
+
 
+				cameraPerspective.aspect = window.innerWidth / window.innerHeight;
 
+				cameraPerspective.updateProjectionMatrix();
 
+
 
+				cameraOrtho.left = -halfWidth;
 
+				cameraOrtho.right = halfWidth;
 
+				cameraOrtho.top = halfHeight;
 
+				cameraOrtho.bottom = -halfHeight;
 
+
 
+				cameraOrtho.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+				composerScene.setSize( halfWidth * 2, halfHeight * 2 );
 
+
 
+				composer1.setSize( halfWidth, halfHeight );
 
+				composer2.setSize( halfWidth, halfHeight );
 
+				composer3.setSize( halfWidth, halfHeight );
 
+				composer4.setSize( halfWidth, halfHeight );
 
+
 
+				renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2;
 
+
 
+				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 
+				quadMask.scale.set( window.innerWidth / 2, window.innerHeight / 2, 1 );
 
+
 
+			}
 
+
 
+			function getText( id ) {
 
+
 
+				return document.getElementById( id ).textContent;
 
+
 
+			}
 
+
 
+			function createMesh( geometry, scene, scale ) {
 
+
 
+				geometry.computeTangents();
 
+
 
+				var ambient = 0x444444, diffuse = 0x999999, specular = 0x080808, shininess = 20;
 
+
 
+				var shader = THREE.ShaderUtils.lib[ "normal" ];
 
+				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
+
 
+				uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
+				uniforms[ "uNormalScale" ].value.set( 0.75, 0.75 );
 
+
 
+				uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
 
+
 
+				uniforms[ "enableAO" ].value = false;
 
+				uniforms[ "enableDiffuse" ].value = true;
 
+
 
+				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 
+				uniforms[ "uSpecularColor" ].value.setHex( specular );
 
+				uniforms[ "uAmbientColor" ].value.setHex( ambient );
 
+
 
+				uniforms[ "uShininess" ].value = shininess;
 
+
 
+				uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
 
+				uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
 
+				uniforms[ "uAmbientColor" ].value.convertGammaToLinear();
 
+
 
+				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
 
+				var mat2 = new THREE.ShaderMaterial( parameters );
 
+
 
+				mesh = new THREE.Mesh( geometry, mat2 );
 
+				mesh.position.set( 0, -50, 0 );
 
+				mesh.scale.set( scale, scale, scale );
 
+
 
+				scene.add( mesh );
 
+
 
+				loader.statusDomElement.style.display = "none";
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var time = Date.now() * 0.0004;
 
+
 
+				if ( mesh ) mesh.rotation.y = -time;
 
+
 
+				renderer.setViewport( 0, 0, 2 * halfWidth, 2 * halfHeight );
 
+
 
+				renderer.clear();
 
+				composerScene.render( delta );
 
+
 
+				renderer.setViewport( 0, 0, halfWidth, halfHeight );
 
+				composer1.render( delta );
 
+
 
+				renderer.setViewport( halfWidth, 0, halfWidth, halfHeight );
 
+				composer2.render( delta );
 
+
 
+				renderer.setViewport( 0, halfHeight, halfWidth, halfHeight );
 
+				composer3.render( delta );
 
+
 
+				renderer.setViewport( halfWidth, halfHeight, halfWidth, halfHeight );
 
+				composer4.render( delta );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 0 - 111
examples/webgl_postprocessing_cube.html
Näytä tiedosto 

@@ -1,111 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - postprocessing - cube</title>
 
-		<meta charset="utf-8">
 
-		<style>
 
-			body {
 
-				margin: 0px;
 
-				background-color: #000000;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.min.js"></script>
 
-
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-		<script src="js/shaders/DotScreenShader.js"></script>
 
-
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/MaskPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-
 
-
 
-		<script>
 
-
 
-			var camera, scene, renderer, composer;
 
-			var object, light;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.z = 400;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				object = new THREE.Object3D();
 
-				scene.add( object );
 
-
 
-				var geometry = new THREE.SphereGeometry( 1, 4, 8 );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
 
-
 
-				for ( var i = 0; i < 200; i ++ ) {
 
-
 
-					var mesh = new THREE.Mesh( geometry, material );
 
-					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 
-					mesh.position.multiplyScalar( Math.random() * 400 );
 
-					mesh.rotation.set( Math.random(), Math.random(), Math.random() );
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
 
-					object.add( mesh );
 
-
 
-				}
 
-
 
-				scene.add( new THREE.AmbientLight( 0x000022 ) );
 
-
 
-				light = new THREE.DirectionalLight( 0xffffff );
 
-				light.position.set( 1, 1, 1 );
 
-				scene.add( light );
 
-
 
-				// postprocessing
 
-
 
-				composer = new THREE.EffectComposer( renderer );
 
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
-
 
-				var effect = new THREE.ShaderPass( THREE.DotScreenShader );
 
-				effect.uniforms[ 'scale' ].value = 4;
 
-				effect.renderToScreen = true;
 
-
 
-				composer.addPass( effect );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				object.rotation.x += 0.005;
 
-				object.rotation.y += 0.01;
 
-
 
-				composer.render();
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>