Merge pull request #11210 from Mugen87/dev

Examples: Clean up

examples/webgl_clipping.html

@@ -16,17 +16,19 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
-
+		<script src="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script>
 
-			var camera, scene, renderer, startTime, object;
+			var camera, scene, renderer, startTime, object, stats;
+
+			init();
+			animate();
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera(
-						36, window.innerWidth / window.innerHeight, 0.25, 16 );
+				camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
 				camera.position.set( 0, 1.3, 3 );
 
@@ -64,8 +66,8 @@
 
 				// ***** Clipping planes: *****
 
-				var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 ),
-					globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
+				var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
+				var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
 
 				// Geometry
 
@@ -78,9 +80,9 @@
 						clippingPlanes: [ localPlane ],
 						clipShadows: true
 
-					} ),
+					} );
 
-					geometry = new THREE.TorusKnotGeometry( 0.4, 0.08, 95, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
 
 				object = new THREE.Mesh( geometry, material );
 				object.castShadow = true;
@@ -88,13 +90,18 @@
 
 				var ground = new THREE.Mesh(
 						new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
-						new THREE.MeshPhongMaterial( {
-							color: 0xa0adaf, shininess: 150 } ) );
+						new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
+					);
 
 				ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
 				ground.receiveShadow = true;
 				scene.add( ground );
 
+				// Stats
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
 				// Renderer
 
 				renderer = new THREE.WebGLRenderer();
@@ -119,7 +126,7 @@
 				// GUI
 
 				var gui = new dat.GUI(),
-					folderLocal = gui.addFolder( "Local Clipping" ),
+					folderLocal = gui.addFolder( 'Local Clipping' ),
 					propsLocal = {
 
 						get 'Enabled'() { return renderer.localClippingEnabled; },
@@ -133,7 +140,7 @@
 
 					},
 
-					folderGlobal = gui.addFolder( "Global Clipping" ),
+					folderGlobal = gui.addFolder( 'Global Clipping' ),
 					propsGlobal = {
 
 						get 'Enabled'() { return renderer.clippingPlanes !== Empty; },
@@ -169,8 +176,8 @@
 
 			function animate() {
 
-				var currentTime = Date.now(),
-					time = ( currentTime - startTime ) / 1000;
+				var currentTime = Date.now();
+				var time = ( currentTime - startTime ) / 1000;
 
 				requestAnimationFrame( animate );
 
@@ -179,13 +186,12 @@
 				object.rotation.y = time * 0.2;
 				object.scale.setScalar( Math.cos( time ) * 0.125 + 0.875 );
 
+				stats.begin();
 				renderer.render( scene, camera );
+				stats.end();
 
 			}
 
-			init();
-			animate();
-
 		</script>
 
 	</body>

examples/webgl_decals.html

@@ -37,13 +37,14 @@
 		<script src="../build/three.js"></script>
 		<script src="js/geometries/DecalGeometry.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script>
 
 		var container = document.getElementById( 'container' );
 
-		var renderer, scene, camera, fov = 45;
+		var renderer, scene, camera, stats;
 		var mesh, decal;
 		var raycaster;
 		var line;
@@ -101,9 +102,12 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );
 
+			stats = new Stats();
+			container.appendChild( stats.dom );
+
 			scene = new THREE.Scene();
 
-			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 			camera.position.z = 120;
 			camera.target = new THREE.Vector3();
 
@@ -299,6 +303,8 @@
 
 			renderer.render( scene, camera );
 
+			stats.update();
+
 		}
 
 		</script>

examples/webgl_depth_texture.html

@@ -95,10 +95,11 @@
 		<script src="../build/three.js"></script>
 		<script src="js/shaders/SSAOShader.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/libs/stats.min.js"></script>
 
 		<script>
 
-			var camera, scene, renderer, controls;
+			var camera, scene, renderer, controls, stats;
 			var target;
 			var postScene, postCamera;
 			var supportsExtension = true;
@@ -108,12 +109,14 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { canvas: document.querySelector('canvas') } );
+				renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
+
+				if ( !renderer.extensions.get( 'WEBGL_depth_texture' ) ) {
 
-				if ( !renderer.extensions.get('WEBGL_depth_texture') ) {
 					supportsExtension = false;
-					document.querySelector('#error').style.display = 'block';
+					document.querySelector( '#error' ).style.display = 'block';
 					return;
+
 				}
 
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -121,6 +124,9 @@
 
 				//
 
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 				camera.position.z = -4;
 
@@ -155,10 +161,10 @@
 			function setupPost () {
 
 				// Setup post processing stage
-				postCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-				var postMaterial = new THREE.ShaderMaterial({
-					vertexShader: document.querySelector('#post-vert').textContent.trim(),
-					fragmentShader: document.querySelector('#post-frag').textContent.trim(),
+				postCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
+				var postMaterial = new THREE.ShaderMaterial( {
+					vertexShader: document.querySelector( '#post-vert' ).textContent.trim(),
+					fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
 					uniforms: {
 						cameraNear: { value: camera.near },
 						cameraFar:  { value: camera.far },
@@ -166,20 +172,21 @@
 						tDepth:     { value: target.depthTexture }
 					}
 				});
-				var postPlane = new THREE.PlaneGeometry(2, 2);
-				var postQuad = new THREE.Mesh(postPlane, postMaterial);
+				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
+				var postQuad = new THREE.Mesh( postPlane, postMaterial );
 				postScene = new THREE.Scene();
-				postScene.add(postQuad);
+				postScene.add( postQuad );
 
 			}
 
 			function setupScene () {
-				var diffuse = new THREE.TextureLoader().load('textures/brick_diffuse.jpg');
+
+				var diffuse = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
 				diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping;
 
 				// Setup some geometries
-				var geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 64);
-				var material = new THREE.MeshBasicMaterial({ color: 'blue' });
+				var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
+				var material = new THREE.MeshBasicMaterial( { color: 'blue' } );
 
 				var count = 50;
 				var scale = 5;
@@ -187,17 +194,17 @@
 				for ( var i = 0; i < count; i ++ ) {
 
 					var r = Math.random() * 2.0 * Math.PI;
-					var z = (Math.random() * 2.0) - 1.0;
-					var zScale = Math.sqrt(1.0 - z * z) * scale;
+					var z = ( Math.random() * 2.0 ) - 1.0;
+					var zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					var mesh = new THREE.Mesh(geometry, material);
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set(
-						Math.cos(r) * zScale,
-						Math.sin(r) * zScale,
+						Math.cos( r ) * zScale,
+						Math.sin( r ) * zScale,
 						z * scale
 					);
-					mesh.rotation.set(Math.random(), Math.random(), Math.random());
-					scene.add(mesh);
+					mesh.rotation.set( Math.random(), Math.random(), Math.random() );
+					scene.add( mesh );
 
 				}
 
@@ -228,6 +235,8 @@
 				// render post FX
 				renderer.render( postScene, postCamera );
 
+				stats.update();
+
 			}
 
 		</script>