Examples: Clean up.

examples/webgl_custom_attributes_points2.html

@@ -55,6 +55,8 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
+
 			let renderer, scene, camera, stats;
 			let sphere, length1;
 
@@ -73,23 +75,34 @@
 
 				const radius = 100, segments = 68, rings = 38;
 
-				const vertices1 = new THREE.SphereGeometry( radius, segments, rings ).vertices;
-				const vertices2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 ).vertices;
+				let sphereGeometry = new THREE.SphereBufferGeometry( radius, segments, rings );
+				let boxGeometry = new THREE.BoxBufferGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
+
+				// if normal and uv attributes are not removed, mergeVertices() can't consolidate indentical vertices with different normal/uv data
+
+				sphereGeometry.deleteAttribute( 'normal' );
+				sphereGeometry.deleteAttribute( 'uv' );
 
-				length1 = vertices1.length;
+				boxGeometry.deleteAttribute( 'normal' );
+				boxGeometry.deleteAttribute( 'uv' );
 
-				const vertices = vertices1.concat( vertices2 );
+				sphereGeometry = BufferGeometryUtils.mergeVertices( sphereGeometry );
+				boxGeometry = BufferGeometryUtils.mergeVertices( boxGeometry );
 
-				const positions = new Float32Array( vertices.length * 3 );
-				const colors = new Float32Array( vertices.length * 3 );
-				const sizes = new Float32Array( vertices.length );
+				const combinedGeometry = BufferGeometryUtils.mergeBufferGeometries( [ sphereGeometry, boxGeometry ] );
+				const positionAttribute = combinedGeometry.getAttribute( 'position' );
+
+				const colors = [];
+				const sizes = [];
 
 				const color = new THREE.Color();
+				const vertex = new THREE.Vector3();
+
+				length1 = sphereGeometry.getAttribute( 'position' ).count;
 
-				for ( let i = 0, l = vertices.length; i < l; i ++ ) {
+				for ( let i = 0, l = positionAttribute.count; i < l; i ++ ) {
 
-					const vertex = vertices[ i ];
-					vertex.toArray( positions, i * 3 );
+					vertex.fromBufferAttribute( positionAttribute, i );
 
 					if ( i < length1 ) {
 
@@ -108,13 +121,13 @@
 				}
 
 				const geometry = new THREE.BufferGeometry();
-				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
-				geometry.setAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.setAttribute( 'position', positionAttribute );
+				geometry.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
+				geometry.setAttribute( 'ca', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				//
 
-				const texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
+				const texture = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;
 

examples/webgl_custom_attributes_points3.html

@@ -63,6 +63,8 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
+
 			let renderer, scene, camera, stats;
 
 			let object;
@@ -84,28 +86,36 @@
 
 				let radius = 100;
 				const inner = 0.6 * radius;
+				const vertex = new THREE.Vector3();
 				const vertices = [];
 
 				for ( let i = 0; i < 100000; i ++ ) {
 
-					const vertex = new THREE.Vector3();
 					vertex.x = Math.random() * 2 - 1;
 					vertex.y = Math.random() * 2 - 1;
 					vertex.z = Math.random() * 2 - 1;
 					vertex.multiplyScalar( radius );
 
 					if ( ( vertex.x > inner || vertex.x < - inner ) ||
-					     ( vertex.y > inner || vertex.y < - inner ) ||
-					     ( vertex.z > inner || vertex.z < - inner ) )
+						( vertex.y > inner || vertex.y < - inner ) ||
+						( vertex.z > inner || vertex.z < - inner ) )
 
-						vertices.push( vertex );
+						vertices.push( vertex.x, vertex.y, vertex.z );
 
 				}
 
-				vertices1 = vertices.length;
+				vertices1 = vertices.length / 3;
 
 				radius = 200;
-				const geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
+
+				let boxGeometry1 = new THREE.BoxBufferGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
+
+				// if normal and uv attributes are not removed, mergeVertices() can't consolidate indentical vertices with different normal/uv data
+
+				boxGeometry1.deleteAttribute( 'normal' );
+				boxGeometry1.deleteAttribute( 'uv' );
+
+				boxGeometry1 = BufferGeometryUtils.mergeVertices( boxGeometry1 );
 
 				const matrix = new THREE.Matrix4();
 				const position = new THREE.Vector3();
@@ -120,10 +130,13 @@
 
 					matrix.compose( position, quaternion.setFromEuler( rotation ), scale );
 
-					for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
+					const positionAttribute = geo.getAttribute( 'position' );
 
-						const vertex = geo.vertices[ i ];
-						vertices.push( vertex.clone().applyMatrix4( matrix ) );
+					for ( var i = 0, l = positionAttribute.count; i < l; i ++ ) {
+
+						vertex.fromBufferAttribute( positionAttribute, i );
+						vertex.applyMatrix4( matrix );
+						vertices.push( vertex.x, vertex.y, vertex.z );
 
 					}
 
@@ -131,37 +144,40 @@
 
 				// side 1
 
-				addGeo( geometry2, 0, 110, 110, 0 );
-				addGeo( geometry2, 0, 110, - 110, 0 );
-				addGeo( geometry2, 0, - 110, 110, 0 );
-				addGeo( geometry2, 0, - 110, - 110, 0 );
+				addGeo( boxGeometry1, 0, 110, 110, 0 );
+				addGeo( boxGeometry1, 0, 110, - 110, 0 );
+				addGeo( boxGeometry1, 0, - 110, 110, 0 );
+				addGeo( boxGeometry1, 0, - 110, - 110, 0 );
 
 				// side 2
 
-				addGeo( geometry2, 110, 110, 0, Math.PI / 2 );
-				addGeo( geometry2, 110, - 110, 0, Math.PI / 2 );
-				addGeo( geometry2, - 110, 110, 0, Math.PI / 2 );
-				addGeo( geometry2, - 110, - 110, 0, Math.PI / 2 );
+				addGeo( boxGeometry1, 110, 110, 0, Math.PI / 2 );
+				addGeo( boxGeometry1, 110, - 110, 0, Math.PI / 2 );
+				addGeo( boxGeometry1, - 110, 110, 0, Math.PI / 2 );
+				addGeo( boxGeometry1, - 110, - 110, 0, Math.PI / 2 );
 
 				// corner edges
 
-				const geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
+				let boxGeometry2 = new THREE.BoxBufferGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
 
-				addGeo( geometry3, 110, 0, 110, 0 );
-				addGeo( geometry3, 110, 0, - 110, 0 );
-				addGeo( geometry3, - 110, 0, 110, 0 );
-				addGeo( geometry3, - 110, 0, - 110, 0 );
+				boxGeometry2.deleteAttribute( 'normal' );
+				boxGeometry2.deleteAttribute( 'uv' );
 
-				const positions = new Float32Array( vertices.length * 3 );
-				const colors = new Float32Array( vertices.length * 3 );
-				const sizes = new Float32Array( vertices.length );
+				boxGeometry2 = BufferGeometryUtils.mergeVertices( boxGeometry2 );
 
-				const color = new THREE.Color();
+				addGeo( boxGeometry2, 110, 0, 110, 0 );
+				addGeo( boxGeometry2, 110, 0, - 110, 0 );
+				addGeo( boxGeometry2, - 110, 0, 110, 0 );
+				addGeo( boxGeometry2, - 110, 0, - 110, 0 );
+
+				const positionAttribute = new THREE.Float32BufferAttribute( vertices, 3 );
 
-				for ( let i = 0; i < vertices.length; i ++ ) {
+				const colors = [];
+				const sizes = [];
+
+				const color = new THREE.Color();
 
-					const vertex = vertices[ i ];
-					vertex.toArray( positions, i * 3 );
+				for ( let i = 0; i < positionAttribute.count; i ++ ) {
 
 					if ( i < vertices1 ) {
 
@@ -180,13 +196,13 @@
 				}
 
 				const geometry = new THREE.BufferGeometry();
-				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.setAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
-				geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+				geometry.setAttribute( 'position', positionAttribute );
+				geometry.setAttribute( 'ca', new THREE.Float32BufferAttribute( colors, 3 ) );
+				geometry.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
 
 				//
 
-				const texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
+				const texture = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;