Examples: Clean up

examples/webgl_materials_transparency.html

@@ -38,15 +38,6 @@
 
 		<script src="js/libs/dat.gui.min.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 src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/shaders/ConvolutionShader.js"></script>
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
@@ -71,7 +62,7 @@
 
 				//
 
-				var geometry = new THREE.SphereGeometry( 18, 30, 30 );
+				var geometry = new THREE.SphereBufferGeometry( 18, 30, 30 );
 
 				var material1 = new THREE.MeshStandardMaterial( {
 					opacity: params.opacity,
@@ -141,7 +132,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
@@ -198,7 +189,7 @@
 
 					var object = scene.children[ i ];
 
-					if ( object.geometry instanceof THREE.SphereGeometry ) {
+					if ( object.geometry instanceof THREE.SphereBufferGeometry ) {
 
 						object.rotation.x = performance.now() * 0.0002;
 						object.rotation.y = - performance.now() * 0.0002;

examples/webgl_materials_wireframe.html

@@ -70,7 +70,7 @@
 
 				//
 
-				geometry = new THREE.BoxGeometry( size, size, size );
+				geometry = new THREE.BoxBufferGeometry( size, size, size );
 				material = new THREE.MeshBasicMaterial( { wireframe: true } );
 
 				mesh = new THREE.Mesh( geometry, material );
@@ -79,7 +79,8 @@
 
 				//
 
-				geometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( size, size, size ) );
+				geometry = new THREE.BoxBufferGeometry( size, size, size );
+				geometry = geometry.toNonIndexed();
 
 				setupAttributes( geometry );
 
@@ -97,7 +98,8 @@
 
 				//
 
-				geometry = new THREE.BufferGeometry().fromGeometry( new THREE.SphereGeometry( size / 2, 32, 16 ) );
+				geometry = new THREE.SphereBufferGeometry( size / 2, 32, 16 );
+				geometry = geometry.toNonIndexed();
 
 				setupAttributes( geometry );
 

examples/webgl_mirror.html

@@ -64,7 +64,7 @@
 				var container = document.getElementById( 'container' );
 
 				// renderer
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 				container.appendChild( renderer.domElement );
@@ -116,13 +116,13 @@
 				sphereGroup = new THREE.Object3D();
 				scene.add( sphereGroup );
 
-				var geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
+				var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
 				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
 				var sphereCap = new THREE.Mesh( geometry, material );
-				sphereCap.position.y = -15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
-				sphereCap.rotateX(-Math.PI);
+				sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
+				sphereCap.rotateX( - Math.PI );
 
-				var geometry = new THREE.SphereGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
+				var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
 				var halfSphere = new THREE.Mesh( geometry, material );
 				halfSphere.add( sphereCap );
 				halfSphere.rotateX( - Math.PI / 180 * 135 );
@@ -131,7 +131,7 @@
 
 				sphereGroup.add( halfSphere );
 
-				var geometry = new THREE.IcosahedronGeometry( 5, 0 );
+				var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
 				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 				smallSphere = new THREE.Mesh( geometry, material );
 				scene.add(smallSphere);

examples/webgl_mirror_nodes.html

@@ -236,13 +236,13 @@
 			sphereGroup = new THREE.Object3D();
 			scene.add( sphereGroup );
 
-			var geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
+			var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
 			var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
 			var sphereCap = new THREE.Mesh( geometry, material );
 			sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
 			sphereCap.rotateX( - Math.PI );
 
-			var geometry = new THREE.SphereGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
+			var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
 			var halfSphere = new THREE.Mesh( geometry, material );
 			halfSphere.add( sphereCap );
 			halfSphere.rotateX( - Math.PI / 180 * 135 );
@@ -251,7 +251,7 @@
 
 			sphereGroup.add( halfSphere );
 
-			var geometry = new THREE.IcosahedronGeometry( 5, 0 );
+			var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
 			var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 			smallSphere = new THREE.Mesh( geometry, material );
 			scene.add( smallSphere );

examples/webgl_multiple_elements.html

@@ -98,10 +98,10 @@
 				canvas = document.getElementById( "c" );
 
 				var geometries = [
-					new THREE.BoxGeometry( 1, 1, 1 ),
-					new THREE.SphereGeometry( 0.5, 12, 8 ),
-					new THREE.DodecahedronGeometry( 0.5 ),
-					new THREE.CylinderGeometry( 0.5, 0.5, 1, 12 )
+					new THREE.BoxBufferGeometry( 1, 1, 1 ),
+					new THREE.SphereBufferGeometry( 0.5, 12, 8 ),
+					new THREE.DodecahedronBufferGeometry( 0.5 ),
+					new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 12 )
 				];
 
 				var template = document.getElementById( "template" ).text;
@@ -168,7 +168,7 @@
 				var width = canvas.clientWidth;
 				var height = canvas.clientHeight;
 
-				if ( canvas.width !== width || canvas.height != height ) {
+				if ( canvas.width !== width || canvas.height !== height ) {
 
 					renderer.setSize( width, height, false );
 
@@ -197,7 +197,7 @@
 				scenes.forEach( function( scene ) {
 
 					// so something moves
-					scene.children[0].rotation.y = Date.now() * 0.001;
+					scene.children[ 0 ].rotation.y = Date.now() * 0.001;
 
 					// get the element that is a place holder for where we want to
 					// draw the scene

examples/webgl_octree.html

@@ -80,7 +80,7 @@
 				// create object to show search radius and add to scene
 
 				searchMesh = new THREE.Mesh(
-					new THREE.SphereGeometry( radiusSearch ),
+					new THREE.SphereBufferGeometry( radiusSearch ),
 					new THREE.MeshBasicMaterial( { color: 0x00FF00, transparent: true, opacity: 0.4 } )
 				);
 				scene.add( searchMesh );
@@ -122,7 +122,7 @@
 
 			}
 
-			var geometry = new THREE.BoxGeometry( 50, 50, 50 );
+			var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
 
 			function modifyOctree() {
 

examples/webgl_performance_doublesided.html

@@ -81,7 +81,7 @@
 
 				var material = new THREE.MeshPhongMaterial( { specular: 0x101010, shininess: 100, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.1, side: THREE.DoubleSide } );
 
-				var geometry = new THREE.SphereGeometry( 1, 32, 16, 0, Math.PI );
+				var geometry = new THREE.SphereBufferGeometry( 1, 32, 16, 0, Math.PI );
 
 				for ( var i = 0; i < 5000; i ++ ) {
 

examples/webgl_rtt.html

@@ -153,7 +153,7 @@
 				quad.position.z = -100;
 				sceneRTT.add( quad );
 
-				var geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
+				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
 
 				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
 				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
@@ -173,7 +173,7 @@
 				sceneScreen.add( quad );
 
 				var n = 5,
-					geometry = new THREE.SphereGeometry( 10, 64, 32 ),
+					geometry = new THREE.SphereBufferGeometry( 10, 64, 32 ),
 					material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: rtTexture.texture } );
 
 				for( var j = 0; j < n; j ++ ) {

examples/webgl_sandbox.html

@@ -96,7 +96,7 @@
 
 				];
 
-				var geometry = new THREE.SphereGeometry( 50, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 50, 32, 16 );
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
@@ -123,7 +123,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias : true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_shadowmap_pcss.html

@@ -183,7 +183,7 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var geometry = new THREE.SphereGeometry( 0.3, 20, 20 );
+				var geometry = new THREE.SphereBufferGeometry( 0.3, 20, 20 );
 
 				for ( var i = 0; i < 20; i ++ ) {
 

examples/webgl_shadowmap_pointlight.html

@@ -67,7 +67,7 @@
 					pointLight.shadow.camera.far = 60;
 					pointLight.shadow.bias = - 0.005; // reduces self-shadowing on double-sided objects
 
-					var geometry = new THREE.SphereGeometry( 0.3, 12, 6 );
+					var geometry = new THREE.SphereBufferGeometry( 0.3, 12, 6 );
 					var material = new THREE.MeshBasicMaterial( { color: color } );
 					material.color.multiplyScalar( intensity );
 					var sphere = new THREE.Mesh( geometry, material );
@@ -79,7 +79,7 @@
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.repeat.set( 1, 3.5 );
 
-					var geometry = new THREE.SphereGeometry( 2, 32, 8 );
+					var geometry = new THREE.SphereBufferGeometry( 2, 32, 8 );
 					var material = new THREE.MeshPhongMaterial( {
 						side: THREE.DoubleSide,
 						alphaMap: texture,
@@ -110,7 +110,7 @@
 
 				//
 
-				var geometry = new THREE.BoxGeometry( 30, 30, 30 );
+				var geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
 
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0xa0adaf,

examples/webgl_shadowmesh.html

@@ -103,27 +103,27 @@
 				scene.add( arrowHelper3 );
 
 				// LIGHTBULB
-				var lightSphereGeometry = new THREE.SphereGeometry( 0.09 );
+				var lightSphereGeometry = new THREE.SphereBufferGeometry( 0.09 );
 				var lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
 				lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
 				scene.add( lightSphere );
 				lightSphere.visible = false;
 
-				var lightHolderGeometry = new THREE.CylinderGeometry( 0.05, 0.05, 0.13 );
+				var lightHolderGeometry = new THREE.CylinderBufferGeometry( 0.05, 0.05, 0.13 );
 				var lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
 				lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
 				scene.add( lightHolder );
 				lightHolder.visible = false;
 
 				// GROUND
-				var groundGeometry = new THREE.BoxGeometry( 30, 0.01, 40 );
+				var groundGeometry = new THREE.BoxBufferGeometry( 30, 0.01, 40 );
 				var groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
 				groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
 				groundMesh.position.y = 0.0; //this value must be slightly lower than the planeConstant (0.01) parameter above
 				scene.add( groundMesh );
 
 				// RED CUBE and CUBE's SHADOW
-				var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
+				var cubeGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 				var cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
 				cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
 				cube.position.z = - 1;
@@ -133,7 +133,7 @@
 				scene.add( cubeShadow );
 
 				// BLUE CYLINDER and CYLINDER's SHADOW
-				var cylinderGeometry = new THREE.CylinderGeometry( 0.3, 0.3, 2 );
+				var cylinderGeometry = new THREE.CylinderBufferGeometry( 0.3, 0.3, 2 );
 				var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
 				cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
 				cylinder.position.z = - 2.5;
@@ -143,7 +143,7 @@
 				scene.add( cylinderShadow );
 
 				// MAGENTA TORUS and TORUS' SHADOW
-				var torusGeometry = new THREE.TorusGeometry( 1, 0.2, 10, 16, TWO_PI );
+				var torusGeometry = new THREE.TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
 				var torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
 				torus = new THREE.Mesh( torusGeometry, torusMaterial );
 				torus.position.z = - 6;
@@ -153,7 +153,7 @@
 				scene.add( torusShadow );
 
 				// WHITE SPHERE and SPHERE'S SHADOW
-				var sphereGeometry = new THREE.SphereGeometry( 0.5, 20, 10 );
+				var sphereGeometry = new THREE.SphereBufferGeometry( 0.5, 20, 10 );
 				var sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
 				sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 				sphere.position.set( 4, 0.5, 2 );
@@ -163,7 +163,7 @@
 				scene.add( sphereShadow );
 
 				// YELLOW PYRAMID and PYRAMID'S SHADOW
-				var pyramidGeometry = new THREE.CylinderGeometry( 0, 0.5, 2, 4 );
+				var pyramidGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 2, 4 );
 				var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
 				pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
 				pyramid.position.set( - 4, 1, 2 );

examples/webgldeferred_animation.html

@@ -144,7 +144,7 @@
 				var distance = 20;
 
 				var c = new THREE.Vector3();
-				var geometry = new THREE.SphereGeometry( 1, 1, 1 );
+				var geometry = new THREE.SphereBufferGeometry( 1, 1, 1 );
 
 				for ( var i = 0; i < numLights; i ++ ) {
 

examples/webvr_video.html

@@ -87,19 +87,15 @@
 
 				// left
 
-				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
-				var uvs = geometry.faceVertexUvs[ 0 ];
+				var uvs = geometry.attributes.uv.array;
 
-				for ( var i = 0; i < uvs.length; i ++ ) {
+				for ( var i = 0; i < uvs.length; i += 2 ) {
 
-					for ( var j = 0; j < 3; j ++ ) {
-
-						uvs[ i ][ j ].x *= 0.5;
-
-					}
+					uvs[ i ] *= 0.5;
 
 				}
 
@@ -112,19 +108,14 @@
 
 				// right
 
-				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 				geometry.scale( - 1, 1, 1 );
 
-				var uvs = geometry.faceVertexUvs[ 0 ];
+				var uvs = geometry.attributes.uv.array;
 
-				for ( var i = 0; i < uvs.length; i ++ ) {
+				for ( var i = 0; i < uvs.length; i += 2 ) {
 
-					for ( var j = 0; j < 3; j ++ ) {
-
-						uvs[ i ][ j ].x *= 0.5;
-						uvs[ i ][ j ].x += 0.5;
-
-					}
+					uvs[ i ] *= 0.5;
 
 				}