diff --git a/examples/webgl_buffergeometry_drawcalls.html b/examples/webgl_buffergeometry_drawcalls.html index 15e5bfd5f64e78d6368e2fe5e4927034d5414aab..5cbb5b8cdabffa192b0875df46a017f6d85b2e8a 100644 --- a/examples/webgl_buffergeometry_drawcalls.html +++ b/examples/webgl_buffergeometry_drawcalls.html @@ -45,7 +45,7 @@ var group; var container, stats; - var particlesData = []; + var particlesData = []; var camera, scene, renderer; var positions,colors; var pointCloud; @@ -53,7 +53,7 @@ var linesMesh; var maxParticleCount = 1000; - var particleCount = 500; + var particleCount = 500; var r = 800; var rHalf = r / 2; @@ -73,14 +73,16 @@ var gui = new dat.GUI(); - gui.add( effectController, "showDots" ).onChange( function(value) {pointCloud.visible = value;} ); - gui.add( effectController, "showLines" ).onChange( function(value) {linesMesh.visible = value; } ); + gui.add( effectController, "showDots" ).onChange( function( value ) { pointCloud.visible = value; } ); + gui.add( effectController, "showLines" ).onChange( function( value ) { linesMesh.visible = value; } ); gui.add( effectController, "minDistance", 10, 300 ); gui.add( effectController, "limitConnections" ); - gui.add( effectController, "maxConnections", 0, 30,1 ); - gui.add( effectController, "particleCount", 0, maxParticleCount,1 ).onChange(function(value) { - particleCount = parseInt(value); - particles.drawcalls[0].count = particleCount; + gui.add( effectController, "maxConnections", 0, 30, 1 ); + gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function( value ) { + + particleCount = parseInt( value ); + particles.drawcalls[ 0 ].count = particleCount; + }); } @@ -101,84 +103,80 @@ controls.addEventListener( 'change', render ); scene = new THREE.Scene(); - + geometry = new THREE.BufferGeometry(); var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); - var segments = maxParticleCount * maxParticleCount; + var segments = maxParticleCount * maxParticleCount; positions = new Float32Array( segments * 3 ); colors = new Float32Array( segments * 3 ); - var pMaterial = new THREE.PointCloudMaterial({ - color: 0xFFFFFF, - size: 3, - blending: THREE.AdditiveBlending, - transparent: true, - sizeAttenuation: false - }); + var pMaterial = new THREE.PointCloudMaterial({ + color: 0xFFFFFF, + size: 3, + blending: THREE.AdditiveBlending, + transparent: true, + sizeAttenuation: false + }); - //particles = new THREE.Geometry(); particles = new THREE.BufferGeometry(); particlePositions = new Float32Array( maxParticleCount * 3 ); - for ( var i = 0; i < maxParticleCount; i++ ) { + for ( var i = 0; i < maxParticleCount; i++ ) { var x = Math.random() * r - r / 2; var y = Math.random() * r - r / 2; var z = Math.random() * r - r / 2; - particlePositions[ i * 3 ] = x; + particlePositions[ i * 3 ] = x; particlePositions[ i * 3 + 1 ] = y; particlePositions[ i * 3 + 2 ] = z; - // add it to the geometry - particlesData.push({ - velocity: new THREE.Vector3( -1 + Math.random() * 2, -1 + Math.random() * 2, -1 + Math.random() * 2 ), - numConnections: 0 - }); + // add it to the geometry + particlesData.push({ + velocity: new THREE.Vector3( -1 + Math.random() * 2, -1 + Math.random() * 2, -1 + Math.random() * 2 ), + numConnections: 0 + }); - } + } - particles.drawcalls.push( { - start: 0, - count: particleCount, - index: 0 - } ); + particles.drawcalls.push( { + start: 0, + count: particleCount, + index: 0 + } ); particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ) ); // create the particle system - pointCloud = new THREE.PointCloud( - particles, - pMaterial); - + pointCloud = new THREE.PointCloud( particles, pMaterial ); - group = new THREE.Object3D(); + group = new THREE.Object3D(); - // add it to the scene - group.add(pointCloud); + // add it to the scene + group.add( pointCloud ); geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); geometry.computeBoundingSphere(); - geometry.drawcalls.push( { - start: 0, - count: 0, - index: 0 - } ); + geometry.drawcalls.push( { + start: 0, + count: 0, + index: 0 + } ); linesMesh = new THREE.Line( geometry, material, THREE.LinePieces ); group.add( linesMesh ); - scene.add(group); + scene.add( group ); // renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.setPixelRatio( window.devicePixelRatio ) + renderer.setPixelRatio( window.devicePixelRatio ) renderer.setSize( window.innerWidth, window.innerHeight ); renderer.gammaInput = true; @@ -206,86 +204,82 @@ } - // - var numConnected; - function animate() { - var vertexpos=0; - var colorpos=0; - numConnected = 0; + var vertexpos = 0; + var colorpos = 0; + var numConnected = 0; - for ( var i = 0; i < particleCount; i++ ) - particlesData[ i ].numConnections = 0; + for ( var i = 0; i < particleCount; i++ ) + particlesData[ i ].numConnections = 0; - for ( var i = 0; i < particleCount; i++ ) { + for ( var i = 0; i < particleCount; i++ ) { - // get the particle - var particleData = particlesData[i]; + // get the particle + var particleData = particlesData[i]; particlePositions[ i * 3 ] += particleData.velocity.x; particlePositions[ i * 3 + 1 ] += particleData.velocity.y; particlePositions[ i * 3 + 2 ] += particleData.velocity.z; - if ( particlePositions[ i * 3 + 1 ] < -rHalf || particlePositions[ i * 3 + 1 ] > rHalf ) - particleData.velocity.y = -particleData.velocity.y; + if ( particlePositions[ i * 3 + 1 ] < -rHalf || particlePositions[ i * 3 + 1 ] > rHalf ) + particleData.velocity.y = -particleData.velocity.y; - if ( particlePositions[ i * 3 ] < -rHalf || particlePositions[ i * 3 ] > rHalf ) - particleData.velocity.x = -particleData.velocity.x; + if ( particlePositions[ i * 3 ] < -rHalf || particlePositions[ i * 3 ] > rHalf ) + particleData.velocity.x = -particleData.velocity.x; - if ( particlePositions[ i * 3 + 2 ] < -rHalf || particlePositions[ i * 3 + 2 ] > rHalf ) - particleData.velocity.z = -particleData.velocity.z; + if ( particlePositions[ i * 3 + 2 ] < -rHalf || particlePositions[ i * 3 + 2 ] > rHalf ) + particleData.velocity.z = -particleData.velocity.z; - if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections ) - continue; + if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections ) + continue; - // Check collision - for ( var j = i + 1; j < particleCount; j++ ) { + // Check collision + for ( var j = i + 1; j < particleCount; j++ ) { - var particleDataB = particlesData[ j ]; - if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections ) - continue; + var particleDataB = particlesData[ j ]; + if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections ) + continue; var dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ]; var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ]; var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ]; var dist = Math.sqrt( dx * dx + dy * dy + dz * dz ); - if ( dist < effectController.minDistance ) { - + if ( dist < effectController.minDistance ) { + particleData.numConnections++; particleDataB.numConnections++; - var alpha = 1.0 - dist / effectController.minDistance + 0.2; + var alpha = 1.0 - dist / effectController.minDistance + 0.2; - positions[ vertexpos++ ] = particlePositions[ i * 3 ]; - positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ]; - positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ]; + positions[ vertexpos++ ] = particlePositions[ i * 3 ]; + positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ]; + positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ]; - positions[ vertexpos++ ] = particlePositions[ j * 3 ]; - positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ]; - positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ]; - + positions[ vertexpos++ ] = particlePositions[ j * 3 ]; + positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ]; + positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ]; - colors[ colorpos++ ] = alpha; - colors[ colorpos++ ] = alpha; - colors[ colorpos++ ] = alpha; + colors[ colorpos++ ] = alpha; + colors[ colorpos++ ] = alpha; + colors[ colorpos++ ] = alpha; - colors[ colorpos++ ] = alpha; - colors[ colorpos++ ] = alpha; - colors[ colorpos++ ] = alpha; + colors[ colorpos++ ] = alpha; + colors[ colorpos++ ] = alpha; + colors[ colorpos++ ] = alpha; - numConnected++; - } - } - } + numConnected++; + } + } + } - linesMesh.geometry.drawcalls[ 0 ].count = numConnected * 2; - linesMesh.geometry.attributes.position.needsUpdate = true; - linesMesh.geometry.attributes.color.needsUpdate = true; + linesMesh.geometry.drawcalls[ 0 ].count = numConnected * 2; + linesMesh.geometry.attributes.position.needsUpdate = true; + linesMesh.geometry.attributes.color.needsUpdate = true; - pointCloud.geometry.attributes.position.needsUpdate = true; + pointCloud.geometry.attributes.position.needsUpdate = true; requestAnimationFrame( animate ); @@ -304,6 +298,5 @@ } - - + \ No newline at end of file