Simplified and improved msaa and smaa examples.

examples/webgl_postprocessing_msaa.html

@@ -51,28 +51,14 @@
 		<script>
 
 			var camera, scene, renderer, composer, copyPass, msaaPass;
-			var geometry, material, gui, object, stats, texture;
+			var gui, stats, texture;
 
 			var param = { MSAASampleLevel: 2 };
 
-			var textureLoader = new THREE.TextureLoader();
-
-			container = document.getElementById( "container" );
-
-			stats = new Stats();
-			stats.domElement.style.position = 'absolute';
-			stats.domElement.style.top = '0px';
-			container.appendChild( stats.domElement );
-
-			textureLoader.load( "./textures/brick_diffuse.jpg", function( meshTexture ) {
-				init( meshTexture );
-				texture = meshTexture;
-				animate();
-				clearGui();
-
-
-			});
+			init();
+			animate();
 
+			clearGui();
 
 			function clearGui() {
 
@@ -99,29 +85,45 @@
 
 			}
 
-			function init( meshTexture ) {
+			function init() {
 
-				meshTexture.minFilter = THREE.NearestFilter;
-				meshTexture.magFilter = THREE.NearestFilter;
-				meshTexture.anisotropy = 1;
-				meshTexture.generateMipmaps = false;
+				container = document.getElementById( "container" );
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				//
+
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.z = 400;
+				camera.position.z = 300;
 
 				scene = new THREE.Scene();
 
-				geometry = new THREE.BoxGeometry( 200, 200, 200 );
-				material = new THREE.MeshBasicMaterial( { map: meshTexture } );
+				var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = - 100;
+				scene.add( mesh );
+
+				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+				texture.minFilter = THREE.NearestFilter;
+				texture.magFilter = THREE.NearestFilter;
+				texture.anisotropy = 1;
+				texture.generateMipmaps = false;
 
-				object = new THREE.Mesh( geometry, material );
+				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
-				scene.add( object );
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = 100;
+				scene.add( mesh );
 
 				// postprocessing
 
@@ -161,8 +163,14 @@
 
 				requestAnimationFrame( animate );
 
-				object.rotation.x += 0.005;
-				object.rotation.y += 0.01;
+				for ( var i = 0; i < scene.children.length; i ++ ) {
+
+					var child = scene.children[ i ];
+
+					child.rotation.x += 0.005;
+					child.rotation.y += 0.01;
+
+				}
 
 				composer.render();
 

examples/webgl_postprocessing_smaa.html

@@ -32,43 +32,46 @@
 		<script>
 
 			var camera, scene, renderer, composer, pass, stats;
-			var geometry, material, object;
 
-			var textureLoader = new THREE.TextureLoader();
-
-			container = document.getElementById( "container" );
-
-			stats = new Stats();
-			stats.domElement.style.position = 'absolute';
-			stats.domElement.style.top = '0px';
-			container.appendChild( stats.domElement );
-
-			textureLoader.load( "./textures/brick_diffuse.jpg", function( meshTexture ) {
-				init( meshTexture );
-				animate();
-			});
+			init();
+			animate();
 
 			function init( meshTexture ) {
 
+				container = document.getElementById( "container" );
+
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
 				//
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.z = 400;
+				camera.position.z = 300;
 
 				scene = new THREE.Scene();
 
-				geometry = new THREE.BoxGeometry( 200, 200, 200 );
-				material = new THREE.MeshBasicMaterial( { map: meshTexture } );
-				meshTexture.anisotropy = 4;
+				var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				object = new THREE.Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = - 100;
+				scene.add( mesh );
 
-				scene.add( object );
+				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+				texture.anisotropy = 4;
+
+				var material = new THREE.MeshBasicMaterial( { map: texture } );
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = 100;
+				scene.add( mesh );
 
 				// postprocessing
 
@@ -105,8 +108,14 @@
 
 				requestAnimationFrame( animate );
 
-				object.rotation.x += 0.005;
-				object.rotation.y += 0.01;
+				for ( var i = 0; i < scene.children.length; i ++ ) {
+
+					var child = scene.children[ i ];
+
+					child.rotation.x += 0.005;
+					child.rotation.y += 0.01;
+
+				}
 
 				composer.render();