Merge pull request #13913 from Mugen87/dev11

Examples: Clean up

examples/js/pmrem/PMREMGenerator.js

@@ -53,7 +53,7 @@ THREE.PMREMGenerator = function ( sourceTexture, samplesPerLevel, resolution ) {
 
 	this.shader = this.getShader();
 	this.shader.defines[ 'SAMPLES_PER_LEVEL' ] = this.samplesPerLevel;
-	this.planeMesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2, 0 ), this.shader );
+	this.planeMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2, 0 ), this.shader );
 	this.planeMesh.material.side = THREE.DoubleSide;
 	this.scene = new THREE.Scene();
 	this.scene.add( this.planeMesh );

examples/webgl_loader_texture_ktx.html

@@ -82,7 +82,7 @@
 
 		scene = new THREE.Scene();
 
-		var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 		var material1, material2;
 
 		// TODO: add cubemap support

examples/webgl_materials_parallaxmap.html

@@ -56,10 +56,10 @@
 		<script src="js/shaders/ParallaxShader.js"></script>
 
 		<script>
+
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var stats;
-			var camera, scene, material, renderer;
+			var camera, scene, material, renderer, stats;
 
 			var effectController = {
 				'mode': 'relief',
@@ -81,7 +81,35 @@
 				camera.position.z = 2;
 				scene = new THREE.Scene();
 
-				initScene();
+				//
+
+				var shader = THREE.ParallaxShader;
+				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				var parameters = {
+					fragmentShader: shader.fragmentShader,
+					vertexShader: shader.vertexShader,
+					uniforms: uniforms
+				};
+
+				//
+
+				var textureLoader = new THREE.TextureLoader();
+
+				material = new THREE.ShaderMaterial( parameters );
+				material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
+				material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
+				material.map.anisotropy = 4;
+				material.bumpMap.anisotropy = 4;
+				uniforms[ 'map' ].value = material.map;
+				uniforms[ 'bumpMap' ].value = material.bumpMap;
+
+				//
+
+				var geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0 );
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -91,11 +119,17 @@
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
+				//
+
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				//
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -124,6 +158,7 @@
 				gui.add( effectController, 'maxLayers', 1.0, 30, 1 ).onChange( guiChanged );
 
 				guiChanged();
+
 			}
 
 			function onWindowResize() {
@@ -135,32 +170,6 @@
 
 			}
 
-			function initScene() {
-
-				var shader = THREE.ParallaxShader;
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-				var parameters = {
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: uniforms
-				};
-
-				var textureLoader = new THREE.TextureLoader();
-
-				material = new THREE.ShaderMaterial( parameters );
-				material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
-				material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
-				material.map.anisotropy = 4;
-				material.bumpMap.anisotropy = 4;
-				uniforms[ 'map' ].value = material.map;
-				uniforms[ 'bumpMap' ].value = material.bumpMap;
-
-				var geometry = new THREE.BoxGeometry( 1.0, 1.0, 1.0 );
-				var mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
-
-			}
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -175,6 +184,7 @@
 				renderer.render( scene, camera );
 
 			}
+			
 		</script>
 
 	</body>

examples/webgl_materials_texture_canvas.html

@@ -67,7 +67,7 @@
 
 				material = new THREE.MeshBasicMaterial();
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
+				mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -79,42 +79,53 @@
 
 			}
 
-			// Sets up the drawing canvas and adds it as the material map.
+			// Sets up the drawing canvas and adds it as the material map
+
 			function setupCanvasDrawing() {
+
 				// get canvas and context
+
 				var drawingCanvas = document.getElementById( 'drawing-canvas' );
 				var drawingContext = drawingCanvas.getContext( '2d' );
 
 				// draw white background
-				drawingContext.fillStyle = "#FFFFFF";
+
+				drawingContext.fillStyle = '#FFFFFF';
 				drawingContext.fillRect( 0, 0, 128, 128 );
 
 				// set canvas as material.map (this could be done to any map, bump, displacement etc.)
+
 				material.map = new THREE.Texture( drawingCanvas );
-				// need to flag the map as needing updating.
 				material.map.needsUpdate = true;
 
 				// set the variable to keep track of when to draw
+
 				var paint = false;
 
 				// add canvas event listeners
 				drawingCanvas.addEventListener( 'mousedown', function( e ) {
+
 					paint = true;
 					drawStartPos.set( e.offsetX, e.offsetY );
+
 				} );
 
 				drawingCanvas.addEventListener( 'mousemove', function( e ) {
-					if(paint){
-						draw( drawingContext, e.offsetX, e.offsetY );
-					}
+
+					if( paint ) draw( drawingContext, e.offsetX, e.offsetY );
+
 				} );
 
 				drawingCanvas.addEventListener( 'mouseup', function( e ) {
+
 					paint = false;
+
 				} );
 
 				drawingCanvas.addEventListener( 'mouseleave', function( e ) {
+
 					paint = false;
+
 				} );
 
 			}

examples/webgl_materials_texture_rotation.html

@@ -82,7 +82,7 @@
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
 
-				var geometry = new THREE.BoxGeometry( 10, 10, 10 );
+				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 
 				var loader = new THREE.TextureLoader();
 				var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );

examples/webgl_materials_video.html

@@ -131,7 +131,7 @@
 					ox = i;
 					oy = j;
 
-					geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
+					geometry = new THREE.BoxBufferGeometry( xsize, ysize, xsize );
 
 					change_uvs( geometry, ux, uy, ox, oy );
 
@@ -202,20 +202,12 @@
 
 			function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
 
-				var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
+				var uvs = geometry.attributes.uv.array;
 
-				for ( var i = 0; i < faceVertexUvs.length; i ++ ) {
+				for ( var i = 0; i < uvs.length; i += 2 ) {
 
-					var uvs = faceVertexUvs[ i ];
-
-					for ( var j = 0; j < uvs.length; j ++ ) {
-
-						var uv = uvs[ j ];
-
-						uv.x = ( uv.x + offsetx ) * unitx;
-						uv.y = ( uv.y + offsety ) * unity;
-
-					}
+					uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
+					uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
 
 				}
 

examples/webgl_postprocessing_unreal_bloom.html

@@ -105,7 +105,7 @@
 					metalness: 1.0
 				} );
 
-				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
 				torusMesh1.position.x = 0.0;
 				torusMesh1.castShadow = true;

examples/webgl_shaders_vector.html

@@ -74,26 +74,7 @@
 
 			var camera, scene, renderer, controls;
 
-			var group, text;
-
-			var t = false;
-
-			function toggle() {
-
-				if ( t ) {
-
-					text2.visible = 0;
-					text1.visible = 1;
-
-				} else {
-
-					text2.visible = 1;
-					text1.visible = 0;
-
-				}
-
-				t = !t;
-			}
+			var group;
 
 			var loader = new THREE.FontLoader();
 			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
@@ -106,36 +87,32 @@
 			function init( font ) {
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.set( 0, 100, 500 );
+				camera.position.set( 50, 100, 500 );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.target.set( 0, 100, 0 );
+				controls.target.set( 50, 100, 0 );
 				controls.update();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var theText = "&"; // i % & j b 8
+				var theText = '&'; // i % & j b 8
 
 				group = new THREE.Group();
 				scene.add( group );
 
-
 				var textMaterial = new THREE.MeshBasicMaterial( {
-					color: new THREE.Color(0, 0, 1 ),
+					color: new THREE.Color( 0, 0, 1 ),
 					side: THREE.DoubleSide,
 					wireframe: true
 				} );
 
 				var textShapes = font.generateShapes( theText, 180, 2 );
 
-				var text3d = new THREE.ShapeGeometry( textShapes );
-
-				text3d.computeBoundingBox();
-				var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
-				text = new THREE.Mesh( text3d, textMaterial );
+				var geometry = new THREE.ShapeBufferGeometry( textShapes );
 
-				text.position.x = centerOffset - 150;
+				var text = new THREE.Mesh( geometry, textMaterial );
+				text.position.x = - 200;
 				group.add( text );
 
 				//
@@ -144,7 +121,7 @@
 				var vB = new THREE.Vector2();
 				var vDot = new THREE.Vector2();
 
-				function processShape(path, reverse) {
+				function processShape( path, reverse ) {
 
 					var pts = []; // bigger area (convex hull)
 					var pts2 = []; // smaller area (full solid shapes)
@@ -154,40 +131,46 @@
 
 					var wind;
 
-					pts.push( path[0].getPoint(0) );
-					pts2.push( path[0].getPoint(0) );
+					pts.push( path[ 0 ].getPoint( 0 ) );
+					pts2.push( path[ 0 ].getPoint( 0 ) );
+
+					for ( var i = 0; i < path.length; i ++ ) {
+
+						var curve = path[ i ];
+						if ( curve instanceof THREE.LineCurve ) {
 
-					for (var i=0; i < path.length; i++) {
-						var curve = path[i];
-						if (curve instanceof THREE.LineCurve) {
 							pts.push( curve.v2 );
 							pts2.push( curve.v2 );
-						} else if (curve instanceof THREE.QuadraticBezierCurve) {
-							vA = vA.subVectors( curve.v1, curve.v0 ); // .normalize()
+
+						} else if ( curve instanceof THREE.QuadraticBezierCurve ) {
+
+							vA = vA.subVectors( curve.v1, curve.v0 );
 							vB = vB.subVectors( curve.v2, curve.v1 );
 							z = vA.x * vB.y - vA.y * vB.x; // z component of cross Production
 							wind = z < 0; // clockwise/anticlock wind
-							// if (reverse) wind = !wind;
 
-							// console.log(z, wind , wind ? 'clockwise' : 'anti');
+							if ( wind ) {
 
-							if (wind) {
 								pts.push( curve.v1 );
 								pts.push( curve.v2 );
 								pts2.push( curve.v2 );
+
 							} else {
-								pts.push( curve.v2 );
-								pts2.push( curve.v1 );
-								pts2.push( curve.v2 );
+
+											pts.push( curve.v2 );
+											pts2.push( curve.v1 );
+											pts2.push( curve.v2 );
+
 							}
 
-							var flip = wind ? 1 : -1;
-							// if (reverse) flip *= -1;
+								var flip = wind ? 1 : - 1;
+								// if (reverse) flip *= -1;
+
+								invert.push( flip, flip, flip );
+								beziers.push( curve.v0, curve.v1, curve.v2 );
 
-							invert.push(flip, flip, flip);
-							beziers.push( curve.v0, curve.v1, curve.v2);
+							}
 
-						}
 					}
 
 					return {
@@ -196,6 +179,7 @@
 						beziers: beziers,
 						invert: invert
 					};
+
 				}
 
 				var pts, pts2;
@@ -209,15 +193,15 @@
 				var process;
 				var hole;
 
-				for (var s=0;s<textShapes.length;s++) {
+				for ( var s = 0; s < textShapes.length; s ++ ) {
 
-					subshape = textShapes[s];
-					process = processShape(subshape.curves);
+					subshape = textShapes[ s ];
+					process = processShape( subshape.curves );
 
 					pts = process.pts;
 					pts2 = process.pts2;
-					beziers = beziers.concat(process.beziers);
-					invert = invert.concat(process.invert);
+					beziers = beziers.concat( process.beziers );
+					invert = invert.concat( process.invert );
 
 					convexhullShape = new THREE.Shape( pts );
 					solidShape = new THREE.Shape( pts2 );
@@ -225,84 +209,69 @@
 					convexhullShapeGroup.push( convexhullShape );
 					solidShapeGroup.push( solidShape );
 
-					for (var i=0; i<subshape.holes.length;i++) {
-						hole = subshape.holes[i];
-						// console.log('hole', hole);
+					for ( var i = 0; i < subshape.holes.length; i ++ ) {
+
+						hole = subshape.holes[ i ];
 
-						process = processShape(hole.curves, true);
+						process = processShape( hole.curves, true );
 
 						pts = process.pts;
 						pts2 = process.pts2;
-						beziers = beziers.concat(process.beziers);
-						invert = invert.concat(process.invert);
+						beziers = beziers.concat( process.beziers );
+						invert = invert.concat( process.invert );
 
-						convexhullShape.holes.push(new THREE.Shape(pts));
-						solidShape.holes.push(new THREE.Shape(pts2));
+						convexhullShape.holes.push( new THREE.Shape( pts ) );
+						solidShape.holes.push( new THREE.Shape( pts2 ) );
 
 					}
 
 				} // end of subshape
 
-				var bezierGeometry = new THREE.Geometry();
+				var bezierGeometry = new THREE.BufferGeometry();
+				var vertices = [];
+				var uvs = [];
 
-				for (var i=0;i<beziers.length;i++) {
-					var p = beziers[i];
-					bezierGeometry.vertices.push( new THREE.Vector3(p.x, p.y, 0) );
-				}
+				for ( var i = 0; i < beziers.length; i ++ ) {
+
+					var p = beziers[ i ];
+					vertices.push( p.x, p.y, 0 );
 
-				for (i=0;i<beziers.length;i+=3) {
-					bezierGeometry.faces.push( new THREE.Face3(i, i+1, i+2) );
-					bezierGeometry.faceVertexUvs[0].push( [
-						new THREE.Vector2(0, 0),
-						new THREE.Vector2(0.5, 0),
-						new THREE.Vector2(1, 1)
-					] );
 				}
 
-				text3d = new THREE.ShapeGeometry( convexhullShapeGroup );
-				text3d.computeBoundingBox();
-				var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
+				for ( var i = 0; i < beziers.length; i += 3 ) {
 
-				var text1 = new THREE.Mesh( text3d, textMaterial );
+					uvs.push( 0, 0,  0.5, 0, 1, 1   );
 
-				text1.position.x = centerOffset + 150;
+				}
 
-				group.add( text1 );
+				bezierGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				bezierGeometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+				bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
 
-				text3d = new THREE.ShapeGeometry( solidShapeGroup );
-				text3d.computeBoundingBox();
-				var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
+				geometry = new THREE.ShapeBufferGeometry( convexhullShapeGroup );
 
-				var text2 = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: new THREE.Color(1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
-				text2.position.x = centerOffset + 150;
-				group.add( text2 );
+				text = new THREE.Mesh( geometry, textMaterial );
+				text.position.x = 200;
+				group.add( text );
 
-				//
-				bezierGeometry.computeBoundingBox();
-				bezierGeometry.computeFaceNormals();
-				bezierGeometry.computeVertexNormals();
+				geometry = new THREE.ShapeBufferGeometry( solidShapeGroup );
 
-				bezierGeometry = new THREE.BufferGeometry().fromGeometry( bezierGeometry );
-				bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
+				text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( 1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
+				text.position.x = 200;
+				group.add( text );
 
 				//
 
-				var newMaterial = new THREE.ShaderMaterial({
+				var newMaterial = new THREE.ShaderMaterial( {
 					uniforms: {
-						color: { value: new THREE.Color(0.45 * 0xffffff) }
+						color: { value: new THREE.Color( 0.45 * 0xffffff ) }
 					},
 					vertexShader: document.getElementById( 'vs' ).textContent,
 					fragmentShader: document.getElementById( 'fs' ).textContent,
 					side: THREE.DoubleSide
-				});
-
+				} );
 
 				text = new THREE.Mesh( bezierGeometry, newMaterial );
-				text.position.x = centerOffset;
-				text.position.y = 0;
-				text.position.z = 0;
-
-				text.rotation.x = 0;
 				text.rotation.y = Math.PI * 2;
 
 				group.add( text );
@@ -310,15 +279,9 @@
 				//
 
 
-				text3d = new THREE.ShapeGeometry( solidShapeGroup );
-				text3d.computeBoundingBox();
-
-				text = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
-				text.position.x = centerOffset;
-				text.position.y = 0;
-				text.position.z = 0;
+				geometry = new THREE.ShapeBufferGeometry( solidShapeGroup );
 
-				text.rotation.x = 0;
+				text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
 				text.rotation.y = Math.PI * 2;
 
 				group.add( text );
@@ -333,8 +296,6 @@
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
-				document.addEventListener( 'mousedown', toggle, false );
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -348,7 +309,6 @@
 
 			}
 
-
 			//
 
 			function animate() {

examples/webgl_shadowmap_viewer.html

@@ -101,7 +101,7 @@
 				scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
 
 				// Geometry
-				var geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0xff0000,
 					shininess: 150,
@@ -115,14 +115,14 @@
 				torusKnot.receiveShadow = true;
 				scene.add( torusKnot );
 
-				var geometry = new THREE.BoxGeometry( 3, 3, 3 );
+				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
 				cube = new THREE.Mesh( geometry, material );
 				cube.position.set( 8, 3, 8 );
 				cube.castShadow = true;
 				cube.receiveShadow = true;
 				scene.add( cube );
 
-				var geometry = new THREE.BoxGeometry( 10, 0.15, 10 );
+				var geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0xa0adaf,
 					shininess: 150,
@@ -155,7 +155,7 @@
 
 			function initMisc() {
 
-				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_tonemapping.html

@@ -129,7 +129,7 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 				var mesh = new THREE.Mesh( geometry, standardMaterial );
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;