Skip to content

Commit 39afaf4

Browse files
fernandojsgfernandojsg
committed
Rename buffergeometry_drawcalls example to _drawrange
1 parent ca5f12b commit 39afaf4

File tree

2 files changed

+294
-1
lines changed

2 files changed

+294
-1
lines changed

‎examples/files.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ var files = {
282282
"webgl_buffergeometry",
283283
"webgl_buffergeometry_constructed_from_geometry",
284284
"webgl_buffergeometry_custom_attributes_particles",
285-
"webgl_buffergeometry_drawcalls",
285+
"webgl_buffergeometry_drawrange",
286286
"webgl_buffergeometry_indexed",
287287
"webgl_buffergeometry_instancing",
288288
"webgl_buffergeometry_instancing2",

‎examples/webgl_buffergeometry_drawrange.html‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - buffergeometry - lines drawcalls</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
a {
10+
color: #08f;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
16+
<div id="container"></div>
17+
<div id="info">
18+
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry drawrange<br/>
19+
by <a href="https://twitter.com/fernandojsg">fernandojsg</a>
20+
</div>
21+
22+
<script type="module">
23+
24+
import * as THREE from '../build/three.module.js';
25+
26+
import Stats from './jsm/libs/stats.module.js';
27+
import { GUI } from './jsm/libs/dat.gui.module.js';
28+
29+
import { OrbitControls } from './jsm/controls/OrbitControls.js';
30+
31+
var group;
32+
var container, stats;
33+
var particlesData = [];
34+
var camera, scene, renderer;
35+
var positions, colors;
36+
var particles;
37+
var pointCloud;
38+
var particlePositions;
39+
var linesMesh;
40+
41+
var maxParticleCount = 1000;
42+
var particleCount = 500;
43+
var r = 800;
44+
var rHalf = r / 2;
45+
46+
var effectController = {
47+
showDots: true,
48+
showLines: true,
49+
minDistance: 150,
50+
limitConnections: false,
51+
maxConnections: 20,
52+
particleCount: 500
53+
};
54+
55+
init();
56+
animate();
57+
58+
function initGUI() {
59+
60+
var gui = new GUI();
61+
62+
gui.add( effectController, "showDots" ).onChange( function ( value ) {
63+
64+
pointCloud.visible = value;
65+
66+
} );
67+
gui.add( effectController, "showLines" ).onChange( function ( value ) {
68+
69+
linesMesh.visible = value;
70+
71+
} );
72+
gui.add( effectController, "minDistance", 10, 300 );
73+
gui.add( effectController, "limitConnections" );
74+
gui.add( effectController, "maxConnections", 0, 30, 1 );
75+
gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function ( value ) {
76+
77+
particleCount = parseInt( value );
78+
particles.setDrawRange( 0, particleCount );
79+
80+
} );
81+
82+
}
83+
84+
function init() {
85+
86+
initGUI();
87+
88+
container = document.getElementById( 'container' );
89+
90+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
91+
camera.position.z = 1750;
92+
93+
var controls = new OrbitControls( camera, container );
94+
95+
scene = new THREE.Scene();
96+
97+
98+
group = new THREE.Group();
99+
scene.add( group );
100+
101+
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
102+
helper.material.color.setHex( 0x101010 );
103+
helper.material.blending = THREE.AdditiveBlending;
104+
helper.material.transparent = true;
105+
group.add( helper );
106+
107+
var segments = maxParticleCount * maxParticleCount;
108+
109+
positions = new Float32Array( segments * 3 );
110+
colors = new Float32Array( segments * 3 );
111+
112+
var pMaterial = new THREE.PointsMaterial( {
113+
color: 0xFFFFFF,
114+
size: 3,
115+
blending: THREE.AdditiveBlending,
116+
transparent: true,
117+
sizeAttenuation: false
118+
} );
119+
120+
particles = new THREE.BufferGeometry();
121+
particlePositions = new Float32Array( maxParticleCount * 3 );
122+
123+
for ( var i = 0; i < maxParticleCount; i ++ ) {
124+
125+
var x = Math.random() * r - r / 2;
126+
var y = Math.random() * r - r / 2;
127+
var z = Math.random() * r - r / 2;
128+
129+
particlePositions[ i * 3 ] = x;
130+
particlePositions[ i * 3 + 1 ] = y;
131+
particlePositions[ i * 3 + 2 ] = z;
132+
133+
// add it to the geometry
134+
particlesData.push( {
135+
velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
136+
numConnections: 0
137+
} );
138+
139+
}
140+
141+
particles.setDrawRange( 0, particleCount );
142+
particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
143+
144+
// create the particle system
145+
pointCloud = new THREE.Points( particles, pMaterial );
146+
group.add( pointCloud );
147+
148+
var geometry = new THREE.BufferGeometry();
149+
150+
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );
151+
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
152+
153+
geometry.computeBoundingSphere();
154+
155+
geometry.setDrawRange( 0, 0 );
156+
157+
var material = new THREE.LineBasicMaterial( {
158+
vertexColors: THREE.VertexColors,
159+
blending: THREE.AdditiveBlending,
160+
transparent: true
161+
} );
162+
163+
linesMesh = new THREE.LineSegments( geometry, material );
164+
group.add( linesMesh );
165+
166+
//
167+
168+
renderer = new THREE.WebGLRenderer( { antialias: true } );
169+
renderer.setPixelRatio( window.devicePixelRatio );
170+
renderer.setSize( window.innerWidth, window.innerHeight );
171+
172+
renderer.gammaInput = true;
173+
renderer.gammaOutput = true;
174+
175+
container.appendChild( renderer.domElement );
176+
177+
//
178+
179+
stats = new Stats();
180+
container.appendChild( stats.dom );
181+
182+
window.addEventListener( 'resize', onWindowResize, false );
183+
184+
}
185+
186+
function onWindowResize() {
187+
188+
camera.aspect = window.innerWidth / window.innerHeight;
189+
camera.updateProjectionMatrix();
190+
191+
renderer.setSize( window.innerWidth, window.innerHeight );
192+
193+
}
194+
195+
function animate() {
196+
197+
var vertexpos = 0;
198+
var colorpos = 0;
199+
var numConnected = 0;
200+
201+
for ( var i = 0; i < particleCount; i ++ )
202+
particlesData[ i ].numConnections = 0;
203+
204+
for ( var i = 0; i < particleCount; i ++ ) {
205+
206+
// get the particle
207+
var particleData = particlesData[ i ];
208+
209+
particlePositions[ i * 3 ] += particleData.velocity.x;
210+
particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
211+
particlePositions[ i * 3 + 2 ] += particleData.velocity.z;
212+
213+
if ( particlePositions[ i * 3 + 1 ] < - rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
214+
particleData.velocity.y = - particleData.velocity.y;
215+
216+
if ( particlePositions[ i * 3 ] < - rHalf || particlePositions[ i * 3 ] > rHalf )
217+
particleData.velocity.x = - particleData.velocity.x;
218+
219+
if ( particlePositions[ i * 3 + 2 ] < - rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
220+
particleData.velocity.z = - particleData.velocity.z;
221+
222+
if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections )
223+
continue;
224+
225+
// Check collision
226+
for ( var j = i + 1; j < particleCount; j ++ ) {
227+
228+
var particleDataB = particlesData[ j ];
229+
if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
230+
continue;
231+
232+
var dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
233+
var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
234+
var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
235+
var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );
236+
237+
if ( dist < effectController.minDistance ) {
238+
239+
particleData.numConnections ++;
240+
particleDataB.numConnections ++;
241+
242+
var alpha = 1.0 - dist / effectController.minDistance;
243+
244+
positions[ vertexpos ++ ] = particlePositions[ i * 3 ];
245+
positions[ vertexpos ++ ] = particlePositions[ i * 3 + 1 ];
246+
positions[ vertexpos ++ ] = particlePositions[ i * 3 + 2 ];
247+
248+
positions[ vertexpos ++ ] = particlePositions[ j * 3 ];
249+
positions[ vertexpos ++ ] = particlePositions[ j * 3 + 1 ];
250+
positions[ vertexpos ++ ] = particlePositions[ j * 3 + 2 ];
251+
252+
colors[ colorpos ++ ] = alpha;
253+
colors[ colorpos ++ ] = alpha;
254+
colors[ colorpos ++ ] = alpha;
255+
256+
colors[ colorpos ++ ] = alpha;
257+
colors[ colorpos ++ ] = alpha;
258+
colors[ colorpos ++ ] = alpha;
259+
260+
numConnected ++;
261+
262+
}
263+
264+
}
265+
266+
}
267+
268+
269+
linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
270+
linesMesh.geometry.attributes.position.needsUpdate = true;
271+
linesMesh.geometry.attributes.color.needsUpdate = true;
272+
273+
pointCloud.geometry.attributes.position.needsUpdate = true;
274+
275+
requestAnimationFrame( animate );
276+
277+
stats.update();
278+
render();
279+
280+
}
281+
282+
function render() {
283+
284+
var time = Date.now() * 0.001;
285+
286+
group.rotation.y = time * 0.1;
287+
renderer.render( scene, camera );
288+
289+
}
290+
291+
</script>
292+
</body>
293+
</html>

0 commit comments

Comments
 (0)