Examples: Simplified MarchingCubes example.

examples/webgl_marchingcubes.html

@@ -58,18 +58,6 @@
 
 	<script src="js/controls/OrbitControls.js"></script>
 
-	<script src="js/shaders/CopyShader.js"></script>
-	<script src="js/shaders/FXAAShader.js"></script>
-	<script src="js/shaders/HorizontalTiltShiftShader.js"></script>
-	<script src="js/shaders/VerticalTiltShiftShader.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/ShaderPass.js"></script>
-	<script src="js/postprocessing/MaskPass.js"></script>
-	<script src="js/postprocessing/SavePass.js"></script>
-
 	<script src="js/MarchingCubes.js"></script>
 	<script src="js/ShaderToon.js"></script>
 
@@ -85,11 +73,6 @@
 
 		}
 
-		var MARGIN = 0;
-
-		var SCREEN_WIDTH = window.innerWidth;
-		var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
-
 		var container, stats;
 
 		var camera, scene, renderer;
@@ -100,8 +83,6 @@
 
 		var effect, resolution;
 
-		var composer, effectFXAA, hblur, vblur;
-
 		var effectController;
 
 		var time = 0;
@@ -116,7 +97,7 @@
 
 			// CAMERA
 
-			camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.set( - 500, 500, 1500 );
 
 			// SCENE
@@ -158,20 +139,16 @@
 			// RENDERER
 
 			renderer = new THREE.WebGLRenderer();
+			renderer.gammaOutput = true;
 			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.domElement.style.position = "absolute";
-			renderer.domElement.style.top = MARGIN + "px";
+			renderer.domElement.style.top = "0px";
 			renderer.domElement.style.left = "0px";
 
 			container.appendChild( renderer.domElement );
 
-			//
-
-			renderer.gammaInput = true;
-			renderer.gammaOutput = true;
-
 			// CONTROLS
 
 			var controls = new THREE.OrbitControls( camera, renderer.domElement );
@@ -181,41 +158,6 @@
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
-			// COMPOSER
-
-			renderer.autoClear = false;
-
-			var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
-			var renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
-
-			effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-
-			hblur = new THREE.ShaderPass( THREE.HorizontalTiltShiftShader );
-			vblur = new THREE.ShaderPass( THREE.VerticalTiltShiftShader );
-
-			var bluriness = 8;
-
-			hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
-			vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;
-
-			hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.5;
-
-			effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
-
-			var renderModel = new THREE.RenderPass( scene, camera );
-
-			vblur.renderToScreen = true;
-			//effectFXAA.renderToScreen = true;
-
-			composer = new THREE.EffectComposer( renderer, renderTarget );
-
-			composer.addPass( renderModel );
-
-			composer.addPass( effectFXAA );
-
-			composer.addPass( hblur );
-			composer.addPass( vblur );
-
 			// GUI
 
 			setupGui();
@@ -230,19 +172,10 @@
 
 		function onWindowResize() {
 
-			SCREEN_WIDTH = window.innerWidth;
-			SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
-
-			camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();
 
-			renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-			composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-
-			hblur.uniforms[ 'h' ].value = 4 / SCREEN_WIDTH;
-			vblur.uniforms[ 'v' ].value = 4 / SCREEN_HEIGHT;
-
-			effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 		}
 
@@ -261,122 +194,86 @@
 			var cubeTextureLoader = new THREE.CubeTextureLoader();
 
 			var reflectionCube = cubeTextureLoader.load( urls );
-			reflectionCube.format = THREE.RGBFormat;
-
 			var refractionCube = cubeTextureLoader.load( urls );
-			reflectionCube.format = THREE.RGBFormat;
 			refractionCube.mapping = THREE.CubeRefractionMapping;
 
 			// toons
 
-			var toonMaterial1 = createShaderMaterial( "toon1", light, ambientLight ),
-				toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight ),
-				hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight ),
-				hatchingMaterial2 = createShaderMaterial( "hatching", light, ambientLight ),
-				dottedMaterial = createShaderMaterial( "dotted", light, ambientLight ),
-				dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
-
-			hatchingMaterial2.uniforms[ "uBaseColor" ].value.setRGB( 0, 0, 0 );
-			hatchingMaterial2.uniforms[ "uLineColor1" ].value.setHSL( 0, 0.8, 0.5 );
-			hatchingMaterial2.uniforms[ "uLineColor2" ].value.setHSL( 0, 0.8, 0.5 );
-			hatchingMaterial2.uniforms[ "uLineColor3" ].value.setHSL( 0, 0.8, 0.5 );
-			hatchingMaterial2.uniforms[ "uLineColor4" ].value.setHSL( 0.1, 0.8, 0.5 );
-
-			dottedMaterial2.uniforms[ "uBaseColor" ].value.setRGB( 0, 0, 0 );
-			dottedMaterial2.uniforms[ "uLineColor1" ].value.setHSL( 0.05, 1.0, 0.5 );
+			var toonMaterial1 = createShaderMaterial( "toon1", light, ambientLight );
+			var toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight );
+			var hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight );
+			var dottedMaterial = createShaderMaterial( "dotted", light, ambientLight );
 
 			var texture = new THREE.TextureLoader().load( "textures/UV_Grid_Sm.jpg" );
-			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
 
 			var materials = {
 
-				"chrome":
-			{
-				m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
-				h: 0, s: 0, l: 1
-			},
-
-				"liquid":
-			{
-				m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
-				h: 0, s: 0, l: 1
-			},
-
-				"shiny":
-			{
-				m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
-				h: 0, s: 0.8, l: 0.2
-			},
-
-				"matte":
-			{
-				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
-				h: 0, s: 0, l: 1
-			},
-
-				"flat":
-			{
-				m: new THREE.MeshLambertMaterial( { color: 0x000000, flatShading: true } ),
-				h: 0, s: 0, l: 1
-			},
-
-				"textured":
-			{
-				m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
-				h: 0, s: 0, l: 1
-			},
-
-				"colors":
-			{
-				m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: THREE.VertexColors } ),
-				h: 0, s: 0, l: 1
-			},
-				"multiColors":
-			{
-				m: new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: THREE.VertexColors } ),
-				h: 0, s: 0, l: 1
-			},
-				"plastic":
-			{
-				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
-				h: 0.6, s: 0.8, l: 0.1
-			},
-
-				"toon1":
-			{
-				m: toonMaterial1,
-				h: 0.2, s: 1, l: 0.75
-			},
-
-				"toon2":
-			{
-				m: toonMaterial2,
-				h: 0.4, s: 1, l: 0.75
-			},
-
-				"hatching":
-			{
-				m: hatchingMaterial,
-				h: 0.2, s: 1, l: 0.9
-			},
-
-				"hatching2":
-			{
-				m: hatchingMaterial2,
-				h: 0.0, s: 0.8, l: 0.5
-			},
-
-				"dotted":
-			{
-				m: dottedMaterial,
-				h: 0.2, s: 1, l: 0.9
-			},
-
-				"dotted2":
-			{
-				m: dottedMaterial2,
-				h: 0.1, s: 1, l: 0.5
-			}
+				"chrome": {
+					m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"liquid": {
+					m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"shiny": {
+					m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
+					h: 0, s: 0.8, l: 0.2
+				},
+
+				"matte": {
+					m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"flat": {
+					m: new THREE.MeshLambertMaterial( { color: 0x000000, flatShading: true } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"textured": {
+					m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"colors": {
+					m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: THREE.VertexColors } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"multiColors": {
+					m: new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: THREE.VertexColors } ),
+					h: 0, s: 0, l: 1
+				},
+
+				"plastic": {
+					m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
+					h: 0.6, s: 0.8, l: 0.1
+				},
+
+				"toon1": {
+					m: toonMaterial1,
+					h: 0.2, s: 1, l: 0.75
+				},
+
+				"toon2": {
+					m: toonMaterial2,
+					h: 0.4, s: 1, l: 0.75
+				},
+
+				"hatching": {
+					m: hatchingMaterial,
+					h: 0.2, s: 1, l: 0.9
+				},
+
+				"dotted": {
+					m: dottedMaterial,
+					h: 0.2, s: 1, l: 0.9
+				}
 
 			};
 
@@ -458,8 +355,6 @@
 				ly: 0.5,
 				lz: 1.0,
 
-				postprocessing: false,
-
 				dummy: function () {}
 
 			};
@@ -516,11 +411,6 @@
 			h.add( effectController, "wallx" );
 			h.add( effectController, "wallz" );
 
-			// rendering
-
-			h = gui.addFolder( "Rendering" );
-			h.add( effectController, "postprocessing" );
-
 		}
 
 		// this controls content of marching cubes voxel field
@@ -549,16 +439,17 @@
 				ballx = Math.sin( i + 1.26 * time * ( 1.03 + 0.5 * Math.cos( 0.21 * i ) ) ) * 0.27 + 0.5;
 				bally = Math.abs( Math.cos( i + 1.12 * time * Math.cos( 1.22 + 0.1424 * i ) ) ) * 0.77; // dip into the floor
 				ballz = Math.cos( i + 1.32 * time * 0.1 * Math.sin( ( 0.92 + 0.53 * i ) ) ) * 0.27 + 0.5;
-				
-				if (current_material === "multiColors") {
+
+				if ( current_material === 'multiColors' ) {
 
 					object.addBall( ballx, bally, ballz, strength, subtract, rainbow[i % 7] );
-					
-							} else {
+
+				} else {
 
 					object.addBall( ballx, bally, ballz, strength, subtract );
-					
-							}
+
+				}
+
 			}
 
 			if ( floor ) object.addPlaneY( 2, 12 );
@@ -605,24 +496,7 @@
 
 			if ( effect.material instanceof THREE.ShaderMaterial ) {
 
-				if ( current_material === "dotted2" ) {
-
-					effect.material.uniforms[ "uLineColor1" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-
-				} else if ( current_material === "hatching2" ) {
-
-					var u = effect.material.uniforms;
-
-					u.uLineColor1.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-					u.uLineColor2.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-					u.uLineColor3.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-					u.uLineColor4.value.setHSL( ( effectController.hue + 0.2 % 1.0 ), effectController.saturation, effectController.lightness );
-
-				} else {
-
-					effect.material.uniforms[ "uBaseColor" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
-
-				}
+				effect.material.uniforms[ "uBaseColor" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 
 			} else {
 
@@ -639,16 +513,7 @@
 
 			// render
 
-			if ( effectController.postprocessing ) {
-
-				composer.render( delta );
-
-			} else {
-
-				renderer.clear();
-				renderer.render( scene, camera );
-
-			}
+			renderer.render( scene, camera );
 
 		}