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.2 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 

			var effectController = {
				showDots: true,
				showLines: true,
				minDistance: 150,
				limitConnections: false,
				maxConnections: 20,
				particleCount: 500
B
Add missing semicolons  
brason 已提交
67 
			};
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
68 69 70 71 72 

			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
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
105 106 107 108 109 110 111 112 113 

				group = new THREE.Group();
				scene.add( group );

				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxGeometry( r, r, r ) ) );
				helper.material.color.setHex( 0x080808 );
				helper.material.blending = THREE.AdditiveBlending;
				helper.material.transparent = true;
				group.add( helper );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
114
F
spaces identation to tabs  
Fernando Serrano 已提交
115 
				var segments = maxParticleCount * maxParticleCount;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
116 117 118 119 

				positions = new Float32Array( segments * 3 );
				colors = new Float32Array( segments * 3 );
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
120 
				var pMaterial = new THREE.PointCloudMaterial( {
F
spaces identation to tabs  
Fernando Serrano 已提交
121 122 123 124 125 
					color: 0xFFFFFF,
					size: 3,
					blending: THREE.AdditiveBlending,
					transparent: true,
					sizeAttenuation: false
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
126 
				} );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
127 128 129 130 

				particles = new THREE.BufferGeometry();
				particlePositions = new Float32Array( maxParticleCount * 3 );
F
spaces identation to tabs  
Fernando Serrano 已提交
131 
				for ( var i = 0; i < maxParticleCount; i++ ) {
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
132 133 134 135 

					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 已提交
136
F
spaces identation to tabs  
Fernando Serrano 已提交
137 
					particlePositions[ i * 3     ] = x;
F
Buffergeometry drawcalls example syntax format  
Fernando Serrano 已提交
138 139 
					particlePositions[ i * 3 + 1 ] = y;
					particlePositions[ i * 3 + 2 ] = z;
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
140
F
spaces identation to tabs  
Fernando Serrano 已提交
141 
					// add it to the geometry
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
142 
					particlesData.push( {
F
spaces identation to tabs  
Fernando Serrano 已提交
143 144 
						velocity: new THREE.Vector3( -1 + Math.random() * 2, -1 + Math.random() * 2,  -1 + Math.random() * 2 ),
						numConnections: 0
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
145 
					} );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
146
F
spaces identation to tabs  
Fernando Serrano 已提交
147 
				}
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
148
F
spaces identation to tabs  
Fernando Serrano 已提交
149 150 151 152 153 
				particles.drawcalls.push( {
					start: 0,
					count: particleCount,
					index: 0
				} );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
154
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
155 
				particles.addAttribute( 'position', new THREE.DynamicBufferAttribute( particlePositions, 3 ) );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
156 157 

				// create the particle system
F
spaces identation to tabs  
Fernando Serrano 已提交
158 159 
				pointCloud = new THREE.PointCloud( particles, pMaterial );
				group.add( pointCloud );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
160
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
161 162 163 164 
				var geometry = new THREE.BufferGeometry();

				geometry.addAttribute( 'position', new THREE.DynamicBufferAttribute( positions, 3 ) );
				geometry.addAttribute( 'color', new THREE.DynamicBufferAttribute( colors, 3 ) );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
165 166 167 

				geometry.computeBoundingSphere();
F
spaces identation to tabs  
Fernando Serrano 已提交
168 169 170 171 172 
				geometry.drawcalls.push( {
					start: 0,
					count: 0,
					index: 0
				} );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
173
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
174 175 176 177 178 179 
				var material = new THREE.LineBasicMaterial( {
					vertexColors: THREE.VertexColors,
					blending: THREE.AdditiveBlending,
					transparent: true
				} );
M
Added THREE.SegmentsLine.  
Mr.doob 已提交
180 
				linesMesh = new THREE.SegmentsLine( geometry, material );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
181 182 183 
				group.add( linesMesh );

				//
M
Cleaned up drawcalls example.  
Mr.doob 已提交
184
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
185 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
M
Reworked DynamicBufferAttribute. Related #5969.  
Mr.doob 已提交
186 
				renderer.setPixelRatio( window.devicePixelRatio );
F
Buffergeometry example with drawcalls  
Fernando Serrano 已提交
187 188 189 190 191 192 193 194 
				renderer.setSize( window.innerWidth, window.innerHeight );

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

				container.appendChild( renderer.domElement );

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

				requestAnimationFrame( animate );

				stats.update();
				render();

			}

			function render() {

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

			}

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