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 7.9 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 
			var group;
			var container, stats;
F
spaces identation to tabs  
Fernando Serrano 已提交
48 
			var particlesData = [];
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
49 50 51 52 
			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 

			var maxParticleCount = 1000;
F
spaces identation to tabs  
Fernando Serrano 已提交
56 
			var particleCount = 500;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
57 
			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 

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

			init();
			animate();

			function initGUI() {
M
Cleaned up drawcalls example.  
Mr.doob 已提交
73
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
74 
				var gui = new dat.GUI();
M
Cleaned up drawcalls example.  
Mr.doob 已提交
75
F
spaces identation to tabs  
Fernando Serrano 已提交
76 77 
				gui.add( effectController, "showDots" ).onChange( function( value ) { pointCloud.visible = value; } );
				gui.add( effectController, "showLines" ).onChange( function( value ) { linesMesh.visible = value; } );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
78 79 
				gui.add( effectController, "minDistance", 10, 300 );
				gui.add( effectController, "limitConnections" );
F
spaces identation to tabs  
Fernando Serrano 已提交
80 
				gui.add( effectController, "maxConnections", 0, 30, 1 );
M
Cleaned up drawcalls example.  
Mr.doob 已提交
81 82 
				gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function( value ) {
F
spaces identation to tabs  
Fernando Serrano 已提交
83 84 85 
					particleCount = parseInt( value );
					particles.drawcalls[ 0 ].count = particleCount;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
86 
				});
M
Cleaned up drawcalls example.  
Mr.doob 已提交
87
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
88 89 90 
			}

			function init() {
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
91
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
92 93 94 95 96 97 98 99 100 
				initGUI();

				container = document.getElementById( 'container' );

				//

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
				camera.position.z = 1750;
M
Cleaned up drawcalls example.  
Mr.doob 已提交
101 
				controls = new THREE.OrbitControls( camera, container );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
102 103 

				scene = new THREE.Scene();
F
spaces identation to tabs  
Fernando Serrano 已提交
104
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
105 106 107 
				geometry = new THREE.BufferGeometry();
				var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
F
spaces identation to tabs  
Fernando Serrano 已提交
108 
				var segments = maxParticleCount * maxParticleCount;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
109 110 111 112 

				positions = new Float32Array( segments * 3 );
				colors = new Float32Array( segments * 3 );
F
spaces identation to tabs  
Fernando Serrano 已提交
113 114 115 116 117 118 119 
				var pMaterial = new THREE.PointCloudMaterial({
					color: 0xFFFFFF,
					size: 3,
					blending: THREE.AdditiveBlending,
					transparent: true,
					sizeAttenuation: false
				});
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
120 121 122 123 

				particles = new THREE.BufferGeometry();
				particlePositions = new Float32Array( maxParticleCount * 3 );
F
spaces identation to tabs  
Fernando Serrano 已提交
124 
				for ( var i = 0; i < maxParticleCount; i++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
125 126 127 128 

					var x = Math.random() * r - r / 2;
					var y = Math.random() * r - r / 2;
					var z = Math.random() * r - r / 2;
M
Cleaned up drawcalls example.  
Mr.doob 已提交
129
F
spaces identation to tabs  
Fernando Serrano 已提交
130 
					particlePositions[ i * 3     ] = x;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
131 132 
					particlePositions[ i * 3 + 1 ] = y;
					particlePositions[ i * 3 + 2 ] = z;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
133
F
spaces identation to tabs  
Fernando Serrano 已提交
134 135 136 137 138 
					// 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
					});
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
139
F
spaces identation to tabs  
Fernando Serrano 已提交
140 
				}
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
141
F
spaces identation to tabs  
Fernando Serrano 已提交
142 143 144 145 146 
				particles.drawcalls.push( {
					start: 0,
					count: particleCount,
					index: 0
				} );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
147 148 149 150 

				particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ) );

				// create the particle system
F
spaces identation to tabs  
Fernando Serrano 已提交
151 
				pointCloud = new THREE.PointCloud( particles, pMaterial );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
152
F
spaces identation to tabs  
Fernando Serrano 已提交
153 
				group = new THREE.Object3D();
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
154
F
spaces identation to tabs  
Fernando Serrano 已提交
155 156 
				// add it to the scene
				group.add( pointCloud );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
157 158 159 160 161 162 

				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

				geometry.computeBoundingSphere();
F
spaces identation to tabs  
Fernando Serrano 已提交
163 164 165 166 167 
				geometry.drawcalls.push( {
					start: 0,
					count: 0,
					index: 0
				} );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
168 169 170 171 

				linesMesh = new THREE.Line( geometry, material, THREE.LinePieces );
				group.add( linesMesh );
F
spaces identation to tabs  
Fernando Serrano 已提交
172 
				scene.add( group );
M
Cleaned up drawcalls example.  
Mr.doob 已提交
173
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
174 
				//
M
Cleaned up drawcalls example.  
Mr.doob 已提交
175
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
176 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
F
spaces identation to tabs  
Fernando Serrano 已提交
177 
				renderer.setPixelRatio( window.devicePixelRatio )
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
178 179 180 181 182 183 184 185 
				renderer.setSize( window.innerWidth, window.innerHeight );

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

				container.appendChild( renderer.domElement );

				//
M
Cleaned up drawcalls example.  
Mr.doob 已提交
186
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 
				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 );

			}

			function animate() {
F
spaces identation to tabs  
Fernando Serrano 已提交
207 208 209 
				var vertexpos = 0;
				var colorpos = 0;
				var numConnected = 0;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
210
F
spaces identation to tabs  
Fernando Serrano 已提交
211 212 
				for ( var i = 0; i < particleCount; i++ )
					particlesData[ i ].numConnections = 0;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
213
F
spaces identation to tabs  
Fernando Serrano 已提交
214 
				for ( var i = 0; i < particleCount; i++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
215
F
spaces identation to tabs  
Fernando Serrano 已提交
216 217 
					// get the particle
					var particleData = particlesData[i];
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
218
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
219 220 221 
					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 已提交
222
F
spaces identation to tabs  
Fernando Serrano 已提交
223 224 
					if ( particlePositions[ i * 3 + 1 ] < -rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
						particleData.velocity.y = -particleData.velocity.y;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
225
F
spaces identation to tabs  
Fernando Serrano 已提交
226 227 
					if ( particlePositions[ i * 3 ] < -rHalf || particlePositions[ i * 3 ] > rHalf )
						particleData.velocity.x = -particleData.velocity.x;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
228
F
spaces identation to tabs  
Fernando Serrano 已提交
229 230 
					if ( particlePositions[ i * 3 + 2 ] < -rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
						particleData.velocity.z = -particleData.velocity.z;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
231
F
spaces identation to tabs  
Fernando Serrano 已提交
232 233 
					if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections )
						continue;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
234
F
spaces identation to tabs  
Fernando Serrano 已提交
235 236 
					// Check collision
					for ( var j = i + 1; j < particleCount; j++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
237
F
spaces identation to tabs  
Fernando Serrano 已提交
238 239 240 
						var particleDataB = particlesData[ j ];
						if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
							continue;
M
Cleaned up drawcalls example.  
Mr.doob 已提交
241
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
242 243 244 245 
						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 已提交
246
F
spaces identation to tabs  
Fernando Serrano 已提交
247 
						if ( dist < effectController.minDistance ) {
M
Cleaned up drawcalls example.  
Mr.doob 已提交
248
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
249 250 251 
							particleData.numConnections++;
							particleDataB.numConnections++;
F
spaces identation to tabs  
Fernando Serrano 已提交
252 
							var alpha = 1.0 - dist / effectController.minDistance + 0.2;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
253
F
spaces identation to tabs  
Fernando Serrano 已提交
254 255 256 
							positions[ vertexpos++ ] = particlePositions[ i * 3     ];
							positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ];
							positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ];
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
257
F
spaces identation to tabs  
Fernando Serrano 已提交
258 259 260 
							positions[ vertexpos++ ] = particlePositions[ j * 3     ];
							positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ];
							positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ];
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
261
F
spaces identation to tabs  
Fernando Serrano 已提交
262 263 264 
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
265
F
spaces identation to tabs  
Fernando Serrano 已提交
266 267 268 
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
269
F
spaces identation to tabs  
Fernando Serrano 已提交
270 271 272 273 
							numConnected++;
						}
					}
				}
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
274 275
F
spaces identation to tabs  
Fernando Serrano 已提交
276 277 278 
				linesMesh.geometry.drawcalls[ 0 ].count = numConnected * 2;
				linesMesh.geometry.attributes.position.needsUpdate = true;
				linesMesh.geometry.attributes.color.needsUpdate = true;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
279
F
spaces identation to tabs  
Fernando Serrano 已提交
280 
				pointCloud.geometry.attributes.position.needsUpdate = true;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
281 282 283 284 285 286 287 288 289 290 291 292 

				requestAnimationFrame( animate );

				stats.update();
				render();

			}

			function render() {

				var time = Date.now() * 0.001;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
293 
				group.rotation.y = time * 0.1;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
294 295 296 297 298 299 
				renderer.render( scene, camera );

			}

		</script>
	</body>
M
Cleaned up drawcalls example.  
Mr.doob 已提交
300 
</html>