Merge pull request #13873 from Mugen87/dev4

Examples: Clean up

examples/css3d_sandbox.html

@@ -82,7 +82,7 @@
 					object.scale.y = Math.random() + 0.5;
 					scene2.add( object );
 
-					var geometry = new THREE.PlaneGeometry( 100, 100 );
+					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
@@ -93,7 +93,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/files.js

@@ -233,6 +233,7 @@ var files = {
 		"webgl_postprocessing_ssaa_unbiased",
 		"webgl_postprocessing_nodes",
 		"webgl_postprocessing_outline",
+		"webgl_postprocessing_pixel",
 		"webgl_postprocessing_procedural",
 		"webgl_postprocessing_sao",
 		"webgl_postprocessing_smaa",

examples/js/postprocessing/SAOPass.js

@@ -161,7 +161,7 @@ THREE.SAOPass = function ( scene, camera, depthTexture, useNormals, resolution )
 
 	this.quadCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.quadScene = new THREE.Scene();
-	this.quad = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), null );
+	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
 	this.quadScene.add( this.quad );
 
 };

examples/js/postprocessing/SSAARenderPass.js

@@ -42,7 +42,7 @@ THREE.SSAARenderPass = function ( scene, camera, clearColor, clearAlpha ) {
 
 	this.camera2 = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene2	= new THREE.Scene();
-	this.quad2 = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), this.copyMaterial );
+	this.quad2 = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), this.copyMaterial );
 	this.quad2.frustumCulled = false; // Avoid getting clipped
 	this.scene2.add( this.quad2 );
 

examples/webaudio_sandbox.html

@@ -39,22 +39,16 @@
 			navigate with WASD / arrows / mouse
 		</div>
 
-
-		<div id="container"></div>
-
 		<script src="../build/three.js"></script>
 
 		<script src="js/controls/FirstPersonControls.js"></script>
-
 		<script src="js/Detector.js"></script>
-
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container;
 			var camera, controls, scene, renderer;
 			var light, pointLight;
 
@@ -69,8 +63,6 @@
 
 			function init() {
 
-				container = document.getElementById( 'container' );
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 25, 0 );
 
@@ -84,7 +76,7 @@
 				light.position.set( 0, 0.5, 1 ).normalize();
 				scene.add( light );
 
-				var sphere = new THREE.SphereGeometry( 20, 32, 16 );
+				var sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
 
 				material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );
 				material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );
@@ -122,7 +114,6 @@
 
 				//
 
-
 				var mesh3 = new THREE.Mesh( sphere, material3 );
 				mesh3.position.set( 0, 30, -250 );
 				scene.add( mesh3 );
@@ -131,11 +122,11 @@
 				var oscillator = listener.context.createOscillator();
 				oscillator.type = 'sine';
 				oscillator.frequency.setValueAtTime( 144, sound3.context.currentTime );
-				oscillator.start(0);
-				sound3.setNodeSource(oscillator);
+				oscillator.start( 0 );
+				sound3.setNodeSource( oscillator );
 				sound3.setRefDistance( 20 );
-				sound3.setVolume(0.5);
-				mesh3.add(sound3);
+				sound3.setVolume( 0.5 );
+				mesh3.add( sound3 );
 
 				// analysers
 
@@ -160,58 +151,79 @@
 				scene.add( helper );
 
 				//
-    			var SoundControls = function() {
-					   this.master = listener.getMasterVolume();
-					   this.firstSphere =  sound1.getVolume();
-					   this.secondSphere =  sound2.getVolume();
-					   this.thirdSphere = sound3.getVolume();
-					   this.Ambient =  sound4.getVolume();
+
+				var SoundControls = function() {
+
+					this.master = listener.getMasterVolume();
+					this.firstSphere =  sound1.getVolume();
+					this.secondSphere =  sound2.getVolume();
+					this.thirdSphere = sound3.getVolume();
+					this.Ambient =  sound4.getVolume();
+
 				};
+
 				var GeneratorControls = function() {
-					   this.frequency = oscillator.frequency.value;
-					   this.wavetype = oscillator.type;
+
+					this.frequency = oscillator.frequency.value;
+					this.wavetype = oscillator.type;
+
 				};
-      			var gui = new dat.GUI();
+
+				var gui = new dat.GUI();
 				var soundControls = new SoundControls();
 				var generatorControls = new GeneratorControls();
-				var volumeFolder = gui.addFolder('sound volume');
-				var generatorFolder = gui.addFolder('sound generator');
-				volumeFolder.add(soundControls, 'master').min(0.0).max(1.0).step(0.01).onChange(function() {
-					listener.setMasterVolume(soundControls.master);
-				});
-				volumeFolder.add(soundControls, 'firstSphere').min(0.0).max(1.0).step(0.01).onChange(function() {
-					sound1.setVolume(soundControls.firstSphere);
-				});
-				volumeFolder.add(soundControls, 'secondSphere').min(0.0).max(1.0).step(0.01).onChange(function() {
-					sound2.setVolume(soundControls.secondSphere);
-				});
+				var volumeFolder = gui.addFolder( 'sound volume' );
+				var generatorFolder = gui.addFolder( 'sound generator' );
 
-				volumeFolder.add(soundControls, 'thirdSphere').min(0.0).max(1.0).step(0.01).onChange(function() {
-					sound3.setVolume(soundControls.thirdSphere);
-				});
-				volumeFolder.add(soundControls, 'Ambient').min(0.0).max(1.0).step(0.01).onChange(function() {
-					sound4.setVolume(soundControls.Ambient);
-				});
+				volumeFolder.add( soundControls, 'master' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
+
+					listener.setMasterVolume( soundControls.master );
+
+				} );
+				volumeFolder.add( soundControls, 'firstSphere' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
+
+					sound1.setVolume( soundControls.firstSphere );
+
+				} );
+				volumeFolder.add( soundControls, 'secondSphere' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
+
+					sound2.setVolume( soundControls.secondSphere );
+
+				} );
+
+				volumeFolder.add( soundControls, 'thirdSphere' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
+
+					sound3.setVolume( soundControls.thirdSphere );
+
+				} );
+				volumeFolder.add( soundControls, 'Ambient' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
+
+					sound4.setVolume( soundControls.Ambient );
+
+				} );
 				volumeFolder.open();
-				generatorFolder.add(generatorControls, 'frequency').min(50.0).max(5000.0).step(1.0).onChange(function() {
-					oscillator.frequency.value = generatorControls.frequency;
-				});
-				generatorFolder.add(generatorControls, 'wavetype', ['sine', 'square', 'sawtooth', 'triangle']).onChange(function() {
+				generatorFolder.add( generatorControls, 'frequency' ).min( 50.0 ).max( 5000.0 ).step( 1.0 ).onChange( function () {
+
+					oscillator.frequency.setValueAtTime( generatorControls.frequency, listener.context.currentTime );
+
+				} );
+				generatorFolder.add( generatorControls, 'wavetype', [ 'sine', 'square', 'sawtooth', 'triangle' ] ).onChange( function () {
+
 					oscillator.type = generatorControls.wavetype;
-				});
-				generatorFolder.open();
 
+				} );
 
+				generatorFolder.open();
 
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container.innerHTML = "";
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				//
+
 				controls = new THREE.FirstPersonControls( camera, renderer.domElement );
 
 				controls.movementSpeed = 70;
@@ -219,7 +231,7 @@
 				controls.noFly = true;
 				controls.lookVertical = false;
 
-
+				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
 

examples/webgl_geometries.html

@@ -30,7 +30,6 @@
 	</head>
 	<body>
 
-		<div id="container"></div>
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</div>
 
 		<script src="../build/three.js"></script>
@@ -49,8 +48,6 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
-
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.y = 400;
 
@@ -73,43 +70,43 @@
 
 				//
 
-				object = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material );
+				object = new THREE.Mesh( new THREE.SphereBufferGeometry( 75, 20, 10 ), material );
 				object.position.set( - 300, 0, 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material );
+				object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 1 ), material );
 				object.position.set( - 100, 0, 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material );
+				object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 2 ), material );
 				object.position.set( 100, 0, 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
+				object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( 300, 0, 200 );
 				scene.add( object );
 
 				//
 
-				object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material );
+				object = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ), material );
 				object.position.set( - 300, 0, 0 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material );
+				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
 				object.position.set( - 100, 0, 0 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
+				object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
 				object.position.set( 100, 0, 0 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
+				object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
 				object.position.set( 300, 0, 0 );
 				scene.add( object );
 
 				//
 
-				object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
+				object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
 				object.position.set( - 300, 0, - 200 );
 				scene.add( object );
 
@@ -121,15 +118,15 @@
 
 				}
 
-				object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
+				object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
 				object.position.set( - 100, 0, - 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material );
+				object = new THREE.Mesh( new THREE.TorusBufferGeometry( 50, 20, 20, 20 ), material );
 				object.position.set( 100, 0, - 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material );
+				object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
 				object.position.set( 300, 0, - 200 );
 				scene.add( object );
 
@@ -138,11 +135,10 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				//
 

examples/webgl_geometry_extrude_splines.html

@@ -195,7 +195,7 @@
 
 			// debug camera
 
-			cameraEye = new THREE.Mesh( new THREE.SphereGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
+			cameraEye = new THREE.Mesh( new THREE.SphereBufferGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
 			parent.add( cameraEye );
 
 			cameraHelper.visible = params.cameraHelper;

examples/webgl_geometry_spline_editor.html

@@ -57,13 +57,13 @@
 			var splineHelperObjects = [], splineOutline;
 			var splinePointsLength = 4;
 			var positions = [];
+			var point = new THREE.Vector3();
 			var options;
 
-			var geometry = new THREE.BoxGeometry( 20, 20, 20 );
+			var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 			var transformControl;
 
 			var ARC_SEGMENTS = 200;
-			var splineMesh;
 
 			var splines = {};
 
@@ -102,7 +102,7 @@
 				scene.add( light );
 				spotlight = light;
 
-				var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
+				var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
 				planeGeometry.rotateX( - Math.PI / 2 );
 				var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
 
@@ -230,7 +230,6 @@
 
 				}
 
-
 				/*******
 				 * Curves
 				 *********/
@@ -249,13 +248,8 @@
 
 				}
 
-				var geometry = new THREE.Geometry();
-
-				for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
-
-					geometry.vertices.push( new THREE.Vector3() );
-
-				}
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
 
 				var curve = new THREE.CatmullRomCurve3( positions );
 				curve.curveType = 'catmullrom';
@@ -357,17 +351,18 @@
 
 					var spline = splines[ k ];
 
-					splineMesh = spline.mesh;
+					var splineMesh = spline.mesh;
+					var position = splineMesh.geometry.attributes.position;
 
 					for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
 
-						var p = splineMesh.geometry.vertices[ i ];
 						var t = i /  ( ARC_SEGMENTS - 1 );
-						spline.getPoint( t, p );
+						spline.getPoint( t, point );
+						position.setXYZ( i, point.x, point.y, point.z );
 
 					}
 
-					splineMesh.geometry.verticesNeedUpdate = true;
+					position.needsUpdate = true;
 
 				}
 

examples/webgl_interactive_lines.html

@@ -50,14 +50,15 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var geometry = new THREE.SphereGeometry( 5 );
+				var geometry = new THREE.SphereBufferGeometry( 5 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
 				sphereInter = new THREE.Mesh( geometry, material );
 				sphereInter.visible = false;
 				scene.add( sphereInter );
 
-				var geometry = new THREE.Geometry();
+				var lineGeometry = new THREE.BufferGeometry();
+				var points = [];
 
 				var point = new THREE.Vector3();
 				var direction = new THREE.Vector3();
@@ -70,11 +71,12 @@
 					direction.normalize().multiplyScalar( 10 );
 
 					point.add( direction );
-
-					geometry.vertices.push( point.clone() );
+					points.push( point.x, point.y, point.z );
 
 				}
 
+				lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );
+
 				parentTransform = new THREE.Object3D();
 				parentTransform.position.x = Math.random() * 40 - 20;
 				parentTransform.position.y = Math.random() * 40 - 20;
@@ -94,11 +96,11 @@
 
 					if ( Math.random() > 0.5 ) {
 
-						object = new THREE.Line( geometry );
+						object = new THREE.Line( lineGeometry );
 
 					} else {
 
-						object = new THREE.LineSegments( geometry );
+						object = new THREE.LineSegments( lineGeometry );
 
 					}
 

examples/webgl_interactive_raycasting_points.html

@@ -247,7 +247,7 @@
 
 				//
 
-				var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
+				var sphereGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
 				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
 				for ( var i = 0; i < 40; i++ ) {
@@ -260,7 +260,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_lights_hemisphere.html

@@ -141,7 +141,7 @@
 				dirLight.shadow.camera.far = 3500;
 				dirLight.shadow.bias = -0.0001;
 
-				dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 ) 
+				dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 );
 				scene.add( dirLightHeper );
 
 				// GROUND
@@ -171,7 +171,7 @@
 
 				scene.fog.color.copy( uniforms.bottomColor.value );
 
-				var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
+				var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
 				var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );
 
 				var sky = new THREE.Mesh( skyGeo, skyMat );

examples/webgl_lights_pointlights2.html

@@ -114,9 +114,7 @@
 
 				// OBJECTS
 
-				//var objectGeometry = new THREE.BoxGeometry( 0.5, 1, 1 );
-				//var objectGeometry = new THREE.SphereGeometry( 1.5, 16, 8 );
-				var objectGeometry = new THREE.TorusGeometry( 1.5, 0.4, 8, 16 );
+				var objectGeometry = new THREE.TorusBufferGeometry( 1.5, 0.4, 8, 16 );
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
@@ -143,7 +141,7 @@
 
 				var c1 = 0xff0040, c2 = 0x0040ff, c3 = 0x80ff80, c4 = 0xffaa00, c5 = 0x00ffaa, c6 = 0xff1100;
 
-				var sphere = new THREE.SphereGeometry( 0.25, 16, 8 );
+				var sphere = new THREE.SphereBufferGeometry( 0.25, 16, 8 );
 
 				light1 = new THREE.PointLight( c1, intensity, distance, decay );
 				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c1 } ) ) );
@@ -175,7 +173,7 @@
 
 				// RENDERER
 
-				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_lights_rectarealight.html

@@ -117,14 +117,14 @@
 				rectLightMeshBack.rotation.y = Math.PI;
 				rectLightMesh.add( rectLightMeshBack );
 
-				var geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
+				var geoFloor = new THREE.BoxBufferGeometry( 2000, 0.1, 2000 );
 				var matStdFloor = new THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
 				var mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
 				scene.add( mshStdFloor );
 
 				var matStdObjects = new THREE.MeshStandardMaterial( { color: 0xA00000, roughness: 0, metalness: 0 } );
 
-				var geoBox = new THREE.BoxGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
+				var geoBox = new THREE.BoxBufferGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
 				var mshStdBox = new THREE.Mesh( geoBox, matStdObjects );
 				mshStdBox.position.set( 0, 5, 0 );
 				mshStdBox.rotation.set( 0, Math.PI / 2.0, 0 );
@@ -132,14 +132,14 @@
 				mshStdBox.receiveShadow = true;
 				scene.add( mshStdBox );
 
-				var geoSphere = new THREE.SphereGeometry( 1.5, 32, 32 );
+				var geoSphere = new THREE.SphereBufferGeometry( 1.5, 32, 32 );
 				var mshStdSphere = new THREE.Mesh( geoSphere, matStdObjects );
 				mshStdSphere.position.set( - 5, 5, 0 );
 				mshStdSphere.castShadow = true;
 				mshStdSphere.receiveShadow = true;
 				scene.add( mshStdSphere );
 
-				var geoKnot = new THREE.TorusKnotGeometry( 1.5, 0.5, 100, 16 );
+				var geoKnot = new THREE.TorusKnotBufferGeometry( 1.5, 0.5, 100, 16 );
 				var mshStdKnot = new THREE.Mesh( geoKnot, matStdObjects );
 				mshStdKnot.position.set( 5, 5, 0 );
 				mshStdKnot.castShadow = true;

examples/webgl_loader_collada_kinematics.html

@@ -102,7 +102,7 @@
 
 				scene.add( dae );
 
-				particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				scene.add( particleLight );
 
 				// Lights

examples/webgl_loader_fbx.html

@@ -90,7 +90,7 @@
 				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
 				// ground
-				var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
@@ -125,7 +125,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;

examples/webgl_materials_cubemap_dynamic.html

@@ -501,8 +501,8 @@
 
 				// OBJECTS
 
-				var cylinderGeometry = new THREE.CylinderGeometry( 2, 50, 1000, 32 );
-				var sphereGeometry = new THREE.SphereGeometry( 100, 32, 16 );
+				var cylinderGeometry = new THREE.CylinderBufferGeometry( 2, 50, 1000, 32 );
+				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
 				var sy1 = -500 + 38;
 				var sy2 = -88;

examples/webgl_materials_lightmap.html

@@ -112,7 +112,7 @@
 				};
 				uniforms.topColor.value.copy( light.color );
 
-				var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
+				var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
 				var skyMat = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: vertexShader,

examples/webgl_materials_shaders_fresnel.html

@@ -89,7 +89,7 @@
 
 				//
 
-				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
 				var shader = THREE.FresnelShader;
 				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

examples/webgl_postprocessing.html

@@ -51,7 +51,7 @@
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereGeometry( 1, 4, 4 );
+				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
 				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 100; i ++ ) {

examples/webgl_postprocessing_dof.html

@@ -110,7 +110,7 @@
 
 				if( singleMaterial ) zmaterial = [ cubeMaterial ];
 
-				var geo = new THREE.SphereGeometry( 1, 20, 10 );
+				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
 
 				var start = Date.now();
 

examples/webgl_postprocessing_glitch.html

@@ -76,7 +76,7 @@
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereGeometry( 1, 4, 4 );
+				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
 
 				for ( var i = 0; i < 100; i ++ ) {
 

examples/webgl_postprocessing_godrays.html

@@ -92,7 +92,7 @@
 				// tree
 
 				var loader = new THREE.OBJLoader();
-				loader.load( "models/obj/tree.obj", function ( object ) {
+				loader.load( 'models/obj/tree.obj', function ( object ) {
 
 					object.material = materialScene;
 					object.position.set( 0, -150, -150 );
@@ -103,7 +103,7 @@
 
 				// sphere
 
-				var geo = new THREE.SphereGeometry( 1, 20, 10 );
+				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
 				sphereMesh = new THREE.Mesh( geo, materialScene );
 				sphereMesh.scale.multiplyScalar( 20 );
 				scene.add( sphereMesh );

examples/webgl_postprocessing_nodes.html

@@ -534,7 +534,7 @@
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereGeometry( 1, 4, 4 );
+				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
 
 				for ( var i = 0; i < 100; i ++ ) {
 

examples/webgl_postprocessing_pixel.html

@@ -113,11 +113,11 @@
 				scene.add( dirLight3 );
 
 				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 )
+					new THREE.SphereBufferGeometry( 1, 64, 64 ),
+					new THREE.BoxBufferGeometry( 1, 1, 1 ),
+					new THREE.ConeBufferGeometry( 1, 1, 32 ),
+					new THREE.TetrahedronBufferGeometry( 1 ),
+					new THREE.TorusKnotBufferGeometry( 1, .4 )
 				];
 
 				group = new THREE.Group();

examples/webgl_postprocessing_procedural.html

@@ -87,7 +87,7 @@
 			var camera, postScene, renderer, postMaterial, noiseRandom1DMaterial, noiseRandon2DMaterial, noiseRandom3DMaterial, postQuad;
 			var gui, stats, texture;
 
-			var params = { procedure: "noiseRandom3D" };
+			var params = { procedure: 'noiseRandom3D' };
 
 			init();
 			animate();
@@ -114,22 +114,22 @@
 				container.appendChild( stats.dom );
 
 				// Setup post processing stage
-				postCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+				postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 				noiseRandom1DMaterial = new THREE.ShaderMaterial({
-					vertexShader: document.querySelector('#procedural-vert').textContent.trim(),
-					fragmentShader: document.querySelector('#noiseRandom1D-frag').textContent.trim()
+					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
+					fragmentShader: document.querySelector( '#noiseRandom1D-frag' ).textContent.trim()
 				});
 				noiseRandom2DMaterial = new THREE.ShaderMaterial({
-					vertexShader: document.querySelector('#procedural-vert').textContent.trim(),
-					fragmentShader: document.querySelector('#noiseRandom2D-frag').textContent.trim()
+					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
+					fragmentShader: document.querySelector( '#noiseRandom2D-frag' ).textContent.trim()
 				});
 				noiseRandom3DMaterial = new THREE.ShaderMaterial({
-					vertexShader: document.querySelector('#procedural-vert').textContent.trim(),
-					fragmentShader: document.querySelector('#noiseRandom3D-frag').textContent.trim()
+					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
+					fragmentShader: document.querySelector( '#noiseRandom3D-frag' ).textContent.trim()
 				});
 				postMaterial = noiseRandom3DMaterial;
-				var postPlane = new THREE.PlaneGeometry(2, 2);
-				postQuad = new THREE.Mesh(postPlane, postMaterial);
+				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
+				postQuad = new THREE.Mesh( postPlane, postMaterial );
 				postScene = new THREE.Scene();
 				postScene.add(postQuad);
 

examples/webgl_shaders_tonemapping.html

@@ -241,7 +241,7 @@
 					earthCloudsMat.needsUpdate = true;
 				} );
 
-				var earthGeo = new THREE.SphereGeometry( 600, 24, 24 );
+				var earthGeo = new THREE.SphereBufferGeometry( 600, 24, 24 );
 				var sphereMesh = new THREE.Mesh( earthGeo, earthMat );
 				scene.add( sphereMesh );
 

examples/webgl_shading_physical.html

@@ -149,9 +149,9 @@
 
 				// OBJECTS
 
-				var sphereGeometry = new THREE.SphereGeometry( 100, 64, 32 );
-				var torusGeometry = new THREE.TorusGeometry( 240, 60, 32, 64 );
-				var cubeGeometry = new THREE.BoxGeometry( 150, 150, 150 );
+				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 64, 32 );
+				var torusGeometry = new THREE.TorusBufferGeometry( 240, 60, 32, 64 );
+				var cubeGeometry = new THREE.BoxBufferGeometry( 150, 150, 150 );
 
 				addObject( torusGeometry, materialPhong, 0, 100, 0, 0 );
 				addObject( cubeGeometry, materialLambert, 350, 75, 300, 0 );
@@ -186,9 +186,9 @@
 
 				}
 
-				var bigCube = new THREE.BoxGeometry( 50, 500, 50 );
-				var midCube = new THREE.BoxGeometry( 50, 200, 50 );
-				var smallCube = new THREE.BoxGeometry( 100, 100, 100 );
+				var bigCube = new THREE.BoxBufferGeometry( 50, 500, 50 );
+				var midCube = new THREE.BoxBufferGeometry( 50, 200, 50 );
+				var smallCube = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
 				addObjectColor( bigCube,   0xff0000, -500, 250, 0, 0 );
 				addObjectColor( smallCube, 0xff0000, -500, 50, -150, 0 );
@@ -202,10 +202,10 @@
 				addObjectColor( midCube,   0xff00ff, 0, 100, 500, 0 );
 				addObjectColor( smallCube, 0xff00ff, -150, 50, 500, 0 );
 
-				addObjectColor( new THREE.BoxGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI/4 );
-				addObjectColor( new THREE.BoxGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
+				addObjectColor( new THREE.BoxBufferGeometry( 500, 10, 10 ), 0xffff00, 0, 600, 0, Math.PI/4 );
+				addObjectColor( new THREE.BoxBufferGeometry( 250, 10, 10 ), 0xffff00, 0, 600, 0, 0 );
 
-				addObjectColor( new THREE.SphereGeometry( 100, 32, 26 ), 0xffffff, -300, 100, 300, 0 );
+				addObjectColor( new THREE.SphereBufferGeometry( 100, 32, 26 ), 0xffffff, -300, 100, 300, 0 );
 
 				// MORPHS