From bd4ddf678edc65fd71575a2da380fb384d5855f5 Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Wed, 27 Dec 2017 15:00:22 -0800
Subject: [PATCH] Examples clean up.

---
 examples/webgl_loader_texture_ktx.html   |  72 ++---
 examples/webgl_postprocessing_pixel.html | 317 +++++++++++------------
 2 files changed, 193 insertions(+), 196 deletions(-)
diff --git a/examples/webgl_loader_texture_ktx.html b/examples/webgl_loader_texture_ktx.html
index 7a9ca297f0..e6773850b7 100644
--- a/examples/webgl_loader_texture_ktx.html
+++ b/examples/webgl_loader_texture_ktx.html
@@ -1,36 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>three.js webgl - materials - compressed textures</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 {
-            margin: 0px;
-            background-color: #050505;
-            color: #fff;
-            overflow: hidden;
-        }
-
-        a { color: #e00 }
-
-        #info {
-            position: absolute;
-            top: 0px; width: 100%;
-            color: #ffffff;
-            padding: 5px;
-            font-family:Monospace;
-            font-size:13px;
-            text-align:center;
-            z-index:1000;
-        }
-    </style>
+	<title>three.js webgl - materials - compressed textures</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 {
+			margin: 0px;
+			background-color: #050505;
+			color: #fff;
+			overflow: hidden;
+		}
+
+		a { color: #e00 }
+
+		#info {
+			position: absolute;
+			top: 0px; width: 100%;
+			color: #ffffff;
+			padding: 5px;
+			font-family:Monospace;
+			font-size:13px;
+			text-align:center;
+			z-index:1000;
+		}
+	</style>
 </head>
 <body>
 
 <div id="info">
-    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - compressed KTX textures -
-    <a href="http://opengameart.org/node/10505">Khronos Texture</a> is a lightweight file format for OpenGL
+	<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - compressed KTX textures -
+	<a href="http://opengameart.org/node/10505">Khronos Texture</a> is a lightweight file format for OpenGL
 </div>
 
 <script src="../build/three.js"></script>
@@ -41,19 +41,19 @@
 <script>
 
 	/*
-    This is how compressed textures are supposed to be used:
+	This is how compressed textures are supposed to be used:
 
-    best for desktop:
-    BC1(DXT1) - opaque textures
-    BC3(DXT5) - transparent textures with full alpha range
+	best for desktop:
+	BC1(DXT1) - opaque textures
+	BC3(DXT5) - transparent textures with full alpha range
 
-    best for iOS:
-    PVR2, PVR4 - opaque textures or alpha
+	best for iOS:
+	PVR2, PVR4 - opaque textures or alpha
 
-    best for Android:
-    ETC1 - opaque textures
-    ASTC_4x4, ASTC8x8 - transparent textures with full alpha range
-    */
+	best for Android:
+	ETC1 - opaque textures
+	ASTC_4x4, ASTC8x8 - transparent textures with full alpha range
+	*/
 
 	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
diff --git a/examples/webgl_postprocessing_pixel.html b/examples/webgl_postprocessing_pixel.html
index 689c915b81..41071ae61e 100644
--- a/examples/webgl_postprocessing_pixel.html
+++ b/examples/webgl_postprocessing_pixel.html
@@ -1,197 +1,194 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>three.js webgl - postprocessing - pixel shader</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 {
-                background-color: #000000;
-                margin: 0px;
-                overflow: hidden;
-                font-family:Monospace;
-                font-size:13px;
-                /*text-align:center;*/
-                font-weight: lighter;
-            }
-
-            a {
-                color: gray;
-                font-weight: bold;
-            }
-
-            #info {
-                color: gray;
-                position: absolute;
-                bottom: 0px;
-                width: 100%;
-                padding: 15px;
-            }
-            
-            .dg.ac {
-                z-index: 1 !important;
-            }
-        </style>
-    </head>
-    <body>
-
-        <script src="../build/three.js"></script>
-
-        <script src="js/shaders/CopyShader.js"></script>
-        <script src="js/shaders/PixelShader.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/controls/TrackballControls.js"></script>
-        <script src='js/libs/dat.gui.min.js'></script>
-
-        <div id="container"></div>
-
-        <div id="info">
-            <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - pixel shader example<br/>
-            shader by <a href="http://wongbryan.github.io">wongbryan</a>
-        </div>
-
-        <script>
-
-            var camera, scene, renderer, gui, composer;
-            var pixelPass, params;
-
-            var geomData = [], group;
-
-            init();
-            animate();
-
-            function updateGUI() {
-
-                pixelPass.uniforms.pixelSize.value = params.pixelSize;
-
-            }
-
-            function resize() {
-
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize( window.innerWidth, window.innerHeight );
-
-                pixelPass.uniforms.resolution.value.set( window.innerWidth, window.innerHeight ).multiplyScalar( window.devicePixelRatio );
-
-            }
+	<head>
+		<title>three.js webgl - postprocessing - pixel shader</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 {
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				/*text-align:center;*/
+				font-weight: lighter;
+			}
+
+			a {
+				color: gray;
+				font-weight: bold;
+			}
+
+			#info {
+				color: gray;
+				position: absolute;
+				bottom: 0px;
+				width: 100%;
+				padding: 15px;
+			}
+
+			.dg.ac {
+				z-index: 1 !important;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/PixelShader.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/controls/TrackballControls.js"></script>
+		<script src='js/libs/dat.gui.min.js'></script>
+
+		<div id="container"></div>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - pixel shader example<br/>
+			shader by <a href="http://wongbryan.github.io">wongbryan</a>
+		</div>
+
+		<script>
+
+			var camera, scene, renderer, gui, composer;
+			var pixelPass, params;
+
+			var group;
+
+			init();
+			animate();
+
+			function updateGUI() {
+
+				pixelPass.uniforms.pixelSize.value = params.pixelSize;
 
-            function init() {
+			}
+
+			function resize() {
 
-                var container = document.getElementById( 'container' );
-                renderer = new THREE.WebGLRenderer( { antialias: true } );
-                renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth, window.innerHeight );
-                renderer.setClearColor( 0xbfe7ff );
-                container.appendChild( renderer.domElement );
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
-                camera.position.set( 0, 0, 30 );
-                controls = new THREE.TrackballControls( camera, renderer.domElement );
-                controls.rotateSpeed = 2.0;
-                controls.panSpeed = 0.8;
-                controls.zoomSpeed = 1.5;
+				pixelPass.uniforms.resolution.value.set( window.innerWidth, window.innerHeight ).multiplyScalar( window.devicePixelRatio );
 
-                scene = new THREE.Scene();
+			}
 
-                var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
-                scene.add( hemisphereLight );
+			function init() {
 
-                var dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
-                dirLight.position.set( 150, 75, 150 );
-                scene.add( dirLight );
+				var container = document.getElementById( 'container' );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0xbfe7ff );
+				container.appendChild( renderer.domElement );
 
-                var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
-                dirLight2.position.set( - 150, 75, - 150 );
-                scene.add( dirLight2 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 0, 0, 30 );
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls.rotateSpeed = 2.0;
+				controls.panSpeed = 0.8;
+				controls.zoomSpeed = 1.5;
 
-                var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
-                dirLight3.position.set( 0, 125, 0 );
-                scene.add( dirLight3 );
+				scene = new THREE.Scene();
 
-                scene.add( hemisphereLight );
-                scene.add( dirLight );
-                scene.add( dirLight2 );
-                scene.add( dirLight3 );
+				var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
+				scene.add( hemisphereLight );
 
-                geomData.push( new THREE.SphereGeometry( 1, 64, 64 ) );
-                geomData.push( new THREE.BoxGeometry( 1, 1, 1 ) );
-                geomData.push( new THREE.ConeGeometry( 1, 1, 32 ) );
-                geomData.push( new THREE.TetrahedronGeometry( 1 ) );
-                geomData.push( new THREE.TorusKnotGeometry( 1, .4 ) );
+				var dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
+				dirLight.position.set( 150, 75, 150 );
+				scene.add( dirLight );
 
-                var numShapes = 25;
-                group = new THREE.Group();
+				var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
+				dirLight2.position.set( - 150, 75, - 150 );
+				scene.add( dirLight2 );
 
-                for ( var i = 0; i < numShapes; i ++ ) {
+				var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
+				dirLight3.position.set( 0, 125, 0 );
+				scene.add( dirLight3 );
 
-                    var geom = geomData[ Math.floor( Math.random() * geomData.length ) ];
-                    var color = new THREE.Color();
-                    color.setHSL( Math.random(), .7 + .2 * Math.random(), .5 + .1 * Math.random() );
-                    var mat = new THREE.MeshPhongMaterial( { color: color, shininess: 200 } );
-                    var mesh = new THREE.Mesh( geom, mat );
-                    var s = 4 + Math.random() * 10;
-                    mesh.scale.set( s, s, s );
+				var geometries = [
+					new THREE.SphereGeometry( 1, 64, 64 ),
+					new THREE.BoxGeometry( 1, 1, 1 ),
+					new THREE.ConeGeometry( 1, 1, 32 ),
+					new THREE.TetrahedronGeometry( 1 ),
+					new THREE.TorusKnotGeometry( 1, .4 )
+				];
 
-                    mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
-                    mesh.position.multiplyScalar( Math.random() * 200 );
-                    mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
-                    group.add( mesh );
+				group = new THREE.Group();
 
-                }
+				for ( var i = 0; i < 25; i ++ ) {
 
-                scene.add( group );
+					var geom = geometries[ Math.floor( Math.random() * geometries.length ) ];
+					var color = new THREE.Color();
+					color.setHSL( Math.random(), .7 + .2 * Math.random(), .5 + .1 * Math.random() );
+					var mat = new THREE.MeshPhongMaterial( { color: color, shininess: 200 } );
+					var mesh = new THREE.Mesh( geom, mat );
+					var s = 4 + Math.random() * 10;
+					mesh.scale.set( s, s, s );
 
-                composer = new THREE.EffectComposer( renderer );
-                composer.addPass( new THREE.RenderPass( scene, camera ) );
+					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
+					mesh.position.multiplyScalar( Math.random() * 200 );
+					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
+					group.add( mesh );
 
-                pixelPass = new THREE.ShaderPass( THREE.PixelShader );
-                pixelPass.uniforms.resolution.value = new THREE.Vector2( window.innerWidth, window.innerHeight );
-                pixelPass.uniforms.resolution.value.multiplyScalar( window.devicePixelRatio );
-                pixelPass.renderToScreen = true;
-                composer.addPass( pixelPass );
+				}
 
-                window.addEventListener( 'resize', resize );
+				scene.add( group );
 
-                params = {
-                    pixelSize: 128,
-                    postprocessing: true
-                };
-                gui = new dat.GUI();
-                gui.add( params, 'pixelSize' ).min( 2 ).max( 256 ).step( 2 );
-                gui.add( params, 'postprocessing' );
+				composer = new THREE.EffectComposer( renderer );
+				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
-            }
+				pixelPass = new THREE.ShaderPass( THREE.PixelShader );
+				pixelPass.uniforms.resolution.value = new THREE.Vector2( window.innerWidth, window.innerHeight );
+				pixelPass.uniforms.resolution.value.multiplyScalar( window.devicePixelRatio );
+				pixelPass.renderToScreen = true;
+				composer.addPass( pixelPass );
 
-            function update() {
+				window.addEventListener( 'resize', resize );
 
-                controls.update();
-                updateGUI();
-                group.rotation.y += .0015;
-                group.rotation.z += .001;
+				params = {
+					pixelSize: 128,
+					postprocessing: true
+				};
+				gui = new dat.GUI();
+				gui.add( params, 'pixelSize' ).min( 2 ).max( 256 ).step( 2 );
+				gui.add( params, 'postprocessing' );
 
-            }
+			}
 
-            function animate() {
+			function update() {
 
-                update();
+				controls.update();
+				updateGUI();
 
-                if ( params.postprocessing ) {
+				group.rotation.y += .0015;
+				group.rotation.z += .001;
 
-                    composer.render();
+			}
 
-                } else {
+			function animate() {
 
-                    renderer.render( scene, camera );
+				update();
 
-                }
+				if ( params.postprocessing ) {
 
-                window.requestAnimationFrame( animate );
+					composer.render();
 
-            }
+				} else {
 
-        </script>
-    </body>
+					renderer.render( scene, camera );
+
+				}
+
+				window.requestAnimationFrame( animate );
+
+			}
+
+		</script>
+	</body>
 </html>
-- 
GitLab

