Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_buffergeometry_drawcalls.html 8.7 KB
Newer Older
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - buffergeometry - lines drawcalls</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 {
				color: #cccccc;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #0080ff;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> webgl - buffergeometry drawcalls - by <a href="https://twitter.com/fernandojsg">fernandojsg</a>
		</div>

		<script src="js/libs/dat.gui.min.js"></script>
		<script src="../build/three.min.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
45
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
46 47 48 49 50 51 52 
			var group;
			var container, stats;
	        var particlesData = [];
			var camera, scene, renderer;
			var positions,colors;
			var pointCloud;
			var particlePositions;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
53 
			var linesMesh;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
54 55 56 57 

			var maxParticleCount = 1000;
            var particleCount = 500;
			var r = 800;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
58 
			var rHalf = r / 2;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 

			var effectController = {
				showDots: true,
				showLines: true,
				minDistance: 150,
				limitConnections: false,
				maxConnections: 20,
				particleCount: 500
			}

			init();
			animate();

			function initGUI() {
				
				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, "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;
				});
					
			}

			function init() {
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
89
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 
				initGUI();

				container = document.getElementById( 'container' );

				//

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
				camera.position.z = 1750;

				controls = new THREE.OrbitControls( camera );
				controls.damping = 0.2;
				controls.addEventListener( 'change', render );

				scene = new THREE.Scene();
	
				geometry = new THREE.BufferGeometry();
				var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

		        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
		        });

				//particles = new THREE.Geometry();
				particles = new THREE.BufferGeometry();
				particlePositions = new Float32Array( maxParticleCount * 3 );
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
125 
			   	for ( var i = 0; i < maxParticleCount; i++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
126 127 128 129 130 

					var x = Math.random() * r - r / 2;
					var y = Math.random() * r - r / 2;
					var z = Math.random() * r - r / 2;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
131 132 133 
		            particlePositions[ i * 3     ] = x;
					particlePositions[ i * 3 + 1 ] = y;
					particlePositions[ i * 3 + 2 ] = z;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
134 135 136 

		            // add it to the geometry
		            particlesData.push({
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
137 
		            	velocity: new THREE.Vector3( -1 + Math.random() * 2, -1 + Math.random() * 2,  -1 + Math.random() * 2 ),
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 
		            	numConnections: 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);


		        group = new THREE.Object3D();

		        // 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
		        } );

				linesMesh = new THREE.Line( geometry, material, THREE.LinePieces );
				group.add( linesMesh );

				scene.add(group);
				
				//
				
				renderer = new THREE.WebGLRenderer( { antialias: true } );
		        renderer.setPixelRatio( window.devicePixelRatio )
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				container.appendChild( renderer.domElement );

				//
				
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//
			var numConnected;

			function animate() {

				var vertexpos=0;
				var colorpos=0;
				numConnected = 0;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
218 219 
    			for ( var i = 0; i < particleCount; i++ )
    				particlesData[ i ].numConnections = 0;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
220
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
221 
    			for ( var i = 0; i < particleCount; i++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
222 223 224 225 

    	    		// get the particle
	        		var particleData = particlesData[i];
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
226 227 228 
					particlePositions[ i * 3     ] += particleData.velocity.x;
					particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
					particlePositions[ i * 3 + 2 ] += particleData.velocity.z;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
229
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
230 231 
	        		if ( particlePositions[ i * 3 + 1 ] < -rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
	            		particleData.velocity.y = -particleData.velocity.y;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
232
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
233 234 
			        if ( particlePositions[ i * 3 ] < -rHalf || particlePositions[ i * 3 ] > rHalf )
			            particleData.velocity.x = -particleData.velocity.x;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
235
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
236 237 
			        if ( particlePositions[ i * 3 + 2 ] < -rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
			            particleData.velocity.z = -particleData.velocity.z;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
238
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
239 
		        	if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections )
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
240 241 242 
		        		continue;

			        // Check collision
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
243 
			        for ( var j = i + 1; j < particleCount; j++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
244
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
245 246 
		            	var particleDataB = particlesData[ j ];
		        		if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
247 248 
			        		continue;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
249 250 251 252 
						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 );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
253
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
254 
			            if ( dist < effectController.minDistance ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
255 256 257 258 
				        	
							particleData.numConnections++;
							particleDataB.numConnections++;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
259 
			                var alpha = 1.0 - dist / effectController.minDistance + 0.2;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
260
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
261 262 263 
			                positions[ vertexpos++ ] = particlePositions[ i * 3     ];
			                positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ];
			                positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ];
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
264
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
265 266 267 
			                positions[ vertexpos++ ] = particlePositions[ j * 3     ];
			                positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ];
			                positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ];
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 
			               

			                colors[ colorpos++ ] = alpha;
			                colors[ colorpos++ ] = alpha;
			                colors[ colorpos++ ] = alpha;

			                colors[ colorpos++ ] = alpha;
			                colors[ colorpos++ ] = alpha;
			                colors[ colorpos++ ] = alpha;

			                numConnected++;
			            }
			        }
			 	}
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
284 
        		linesMesh.geometry.drawcalls[ 0 ].count = numConnected * 2;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 
        		linesMesh.geometry.attributes.position.needsUpdate = true;
        		linesMesh.geometry.attributes.color.needsUpdate = true;

        		pointCloud.geometry.attributes.position.needsUpdate = true;

				requestAnimationFrame( animate );

				stats.update();
				render();

			}

			function render() {

				var time = Date.now() * 0.001;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
301 
				group.rotation.y = time * 0.1;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
302 303 304 305 306 307 308 309 
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>