Examples: Buffer geometry clean up

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -39,13 +39,12 @@
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 			attribute float size;
-			attribute vec3 customColor;
 
 			varying vec3 vColor;
 
 			void main() {
 
-				vColor = customColor;
+				vColor = color;
 
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
@@ -59,14 +58,13 @@
 
 		<script type="x-shader/x-fragment" id="fragmentshader">
 
-			uniform vec3 color;
 			uniform sampler2D texture;
 
 			varying vec3 vColor;
 
 			void main() {
 
-				gl_FragColor = vec4( color * vColor, 1.0 );
+				gl_FragColor = vec4( vColor, 1.0 );
 
 				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
 
@@ -97,7 +95,6 @@
 
 			uniforms = {
 
-				color:     { value: new THREE.Color( 0xffffff ) },
 				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 
 			};
@@ -110,7 +107,8 @@
 
 				blending:       THREE.AdditiveBlending,
 				depthTest:      false,
-				transparent:    true
+				transparent:    true,
+				vertexColors:   true
 
 			});
 
@@ -140,8 +138,8 @@
 			}
 
 			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
-			geometry.addAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
-			geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
+			geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ).setDynamic( true ) );
 
 			particleSystem = new THREE.Points( geometry, shaderMaterial );
 

examples/webgl_buffergeometry_instancing.html

@@ -72,10 +72,10 @@
 
 		void main(){
 
-			vPosition = offset * max(abs(sineTime * 2.0 + 1.0), 0.5) + position;
-			vec4 orientation = normalize(mix(orientationStart, orientationEnd, sineTime));
-			vec3 vcV = cross(orientation.xyz, vPosition);
-			vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
+			vPosition = offset * max( abs( sineTime * 2.0 + 1.0 ), 0.5 ) + position;
+			vec4 orientation = normalize( mix( orientationStart, orientationEnd, sineTime ) );
+			vec3 vcV = cross( orientation.xyz, vPosition );
+			vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );
 
 			vColor = color;
 
@@ -124,74 +124,61 @@
 			camera.position.z = 2;
 
 			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0x101010 );
 
 			// geometry
 
-			var triangles = 1;
-			var instances = 65000;
-
-			var geometry = new THREE.InstancedBufferGeometry();
-
-			geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
-			var gui = new dat.GUI();
-			gui.add( geometry, "maxInstancedCount", 0, instances );
-
-			var vertices = new THREE.BufferAttribute( new Float32Array( triangles * 3 * 3 ), 3 );
-
-			vertices.setXYZ( 0, 0.025, -0.025, 0 );
-			vertices.setXYZ( 1, -0.025, 0.025, 0 );
-			vertices.setXYZ( 2, 0, 0, 0.025 );
-
-			geometry.addAttribute( 'position', vertices );
-
-			var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1 );
-
-			for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
+			var vector = new THREE.Vector4();
 
-				offsets.setXYZ( i, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
+			var triangles = 1;
+			var instances = 50000;
 
-			}
+			var positions = [];
+			var offsets = [];
+			var colors = [];
+			var orientationsStart = [];
+			var orientationsEnd = [];
 
-			geometry.addAttribute( 'offset', offsets );
+			positions.push( 0.025, -0.025, 0 );
+			positions.push( -0.025, 0.025, 0 );
+			positions.push( 0, 0, 0.025 );
 
-			var colors = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
+			// instanced attributes
 
-			for ( var i = 0, ul = colors.count; i < ul; i++ ) {
+			for ( var i = 0; i < instances; i ++ ) {
 
-				colors.setXYZW( i, Math.random(), Math.random(), Math.random(), Math.random() );
+				// offsets
 
-			}
+				offsets.push( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
 
-			geometry.addAttribute( 'color', colors );
+				// colors
 
-			var vector = new THREE.Vector4();
+				colors.push( Math.random(), Math.random(), Math.random(), Math.random() );
 
-			var orientationsStart = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
-
-			for ( var i = 0, ul = orientationsStart.count; i < ul; i++ ) {
+				// orientation start
 
 				vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 				vector.normalize();
 
-				orientationsStart.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
-
-			}
-
-			geometry.addAttribute( 'orientationStart', orientationsStart );
+				orientationsStart.push( vector.x, vector.y, vector.z, vector.w );
 
-			var orientationsEnd = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
-
-			for ( var i = 0, ul = orientationsEnd.count; i < ul; i++ ) {
+				// orientation end
 
 				vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 				vector.normalize();
 
-				orientationsEnd.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
+				orientationsEnd.push( vector.x, vector.y, vector.z, vector.w );
 
 			}
 
-			geometry.addAttribute( 'orientationEnd', orientationsEnd );
+			var geometry = new THREE.InstancedBufferGeometry();
+			geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
+
+			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+
+			geometry.addAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) );
+			geometry.addAttribute( 'color', new THREE.InstancedBufferAttribute( new Float32Array( colors ), 4 ) );
+			geometry.addAttribute( 'orientationStart', new THREE.InstancedBufferAttribute( new Float32Array( orientationsStart ), 4 ) );
+			geometry.addAttribute( 'orientationEnd', new THREE.InstancedBufferAttribute( new Float32Array( orientationsEnd ), 4 ) );
 
 			// material
 
@@ -208,23 +195,37 @@
 
 			} );
 
+			//
+
 			var mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			container.appendChild( renderer.domElement );
 
 			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
-				document.getElementById( "notSupported" ).style.display = "";
+
+				document.getElementById( 'notSupported' ).style.display = '';
 				return;
+
 			}
 
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
+			//
+
+			var gui = new dat.GUI( { width: 350 } );
+			gui.add( geometry, 'maxInstancedCount', 0, instances );
+
+			//
 
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
+			//
+
 			window.addEventListener( 'resize', onWindowResize, false );
 
 		}
@@ -253,7 +254,7 @@
 
 			var time = performance.now();
 
-			var object = scene.children[0];
+			var object = scene.children[ 0 ];
 
 			object.rotation.y = time * 0.0005;
 			object.material.uniforms.time.value = time * 0.005;

examples/webgl_buffergeometry_lines.html

@@ -84,8 +84,6 @@
 
 					// colors
 
-
-
 					colors.push( ( x / r ) + 0.5 );
 					colors.push( ( y / r ) + 0.5 );
 					colors.push( ( z / r ) + 0.5 );

examples/webgl_buffergeometry_selective_draw.html

@@ -1,42 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-	<title>three.js - BufferGeometry selectively drawn using attributes and a shader</title>
+	<title>three.js webgl - buffergeometry - selective - draw</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: #000;
-			font-family: Monospace;
-			margin: 0;
-			color: #000;
-			overflow: hidden;
-		}
-		a {
-			color:#ff0;
-		}
-		#title {
-			position: absolute;
-			width: 100%;
-			top: 0;
-			height: 20px;
-			padding: 0;
-			text-align: center;
-			font-size: 1.1em;
-			background-color: rgba(64,96,64,0.7);
-			color: #fff;
-		}
-        #ui {
-        	position:absolute;
-        	left:0;
-        	top: 20px;
-        	padding: 0;
-        	text-align: center;
-        	width:100%;
-        	height:20px;
-        	color: #fff;
-        	background-color: rgba(64,96,64,0.6);
-		}
+	body {
+		color: #cccccc;
+		font-family:Monospace;
+		font-size:13px;
+		text-align:center;
+
+		background-color: #050505;
+		margin: 0px;
+		overflow: hidden;
+	}
+
+	#info {
+		position: absolute;
+		top: 0px; width: 100%;
+		padding: 5px;
+	}
+
+	a {
+		color: #0080ff;
+	}
 	</style>
 	<script type="text/javascript" src="../build/three.js"></script>
 	<script type="text/javascript" src="js/Detector.js"></script>
@@ -49,9 +37,11 @@
 		varying vec3 vColor;
 
 		void main() {
+
 			vColor = vertColor;
 			vVisible = visible;
-			gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
 		}
 	</script>
 	<script type="x-shader/x-fragment" id="fragmentshader">
@@ -59,36 +49,39 @@
 		varying vec3 vColor;
 
 		void main() {
+
 			if ( vVisible > 0.0 ) {
+
 				gl_FragColor = vec4( vColor, 1.0 );
+
 			} else {
+
 				discard;
+
 			}
+			
 		}
 	</script>
 	</head>
-	<body onload="app()">
-		<div id="title"></div>
-		<div id="ui"><a href="#" onclick="hideLines();">CULL SOME LINES</a> - <a href="#" onclick="showAllLines();">SHOW ALL LINES</a></div>
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> buffergeometry - selective - draw
+			<div id="title"></div>
+			<div id="ui"><a href="#" onclick="hideLines();">CULL SOME LINES</a> - <a href="#" onclick="showAllLines();">SHOW ALL LINES</a></div>
+		</div>
+
 		<script>
+
+		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
 		var camera, scene, renderer, stats;
 		var geometry, mesh;
 		var numLat = 100;
 		var numLng = 200;
 		var numLinesCulled = 0;
 
-		function app() {
-
-			if ( ! Detector.webgl ) {
-
-				Detector.addGetWebGLMessage();
-
-			}
-
-			init();
-			animate();
-
-		}
+		init();
+		animate();
 
 		function init() {
 
@@ -177,8 +170,9 @@
 
 		function updateCount() {
 
-			var str = 'BufferGeometry selective drawing: 1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
+			var str = '1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
 			document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
+
 		}
 
 		function hideLines() {
@@ -199,6 +193,7 @@
 				}
 
 			}
+
 			geometry.attributes.visible.needsUpdate = true;
 
 			updateCount();
@@ -226,6 +221,7 @@
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();
+
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 		}

examples/webgl_buffergeometry_uint.html

@@ -82,7 +82,6 @@
 
 				var geometry = new THREE.BufferGeometry();
 
-				var indices = [];
 				var positions = [];
 				var normals = [];
 				var colors = [];
@@ -165,8 +164,8 @@
 				colorAttribute.normalized = true;
 
 				geometry.addAttribute( 'position', positionAttribute );
-				geometry.addAttribute( 'normal',  normalAttribute );
-				geometry.addAttribute( 'color',colorAttribute );
+				geometry.addAttribute( 'normal', normalAttribute );
+				geometry.addAttribute( 'color', colorAttribute );
 
 				geometry.computeBoundingSphere();