Skip to content

Commit 91c0d21

Browse files
mrdoobmrdoob
committed
Added webgl_buffergeometry_instancing2 example.
1 parent acd8b05 commit 91c0d21

File tree

2 files changed

+341
-0
lines changed

2 files changed

+341
-0
lines changed

‎examples/files.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,7 @@ var files = {
254254
"webgl_buffergeometry_custom_attributes_particles",
255255
"webgl_buffergeometry_drawcalls",
256256
"webgl_buffergeometry_instancing",
257+
"webgl_buffergeometry_instancing2",
257258
"webgl_buffergeometry_instancing_billboards",
258259
"webgl_buffergeometry_instancing_dynamic",
259260
"webgl_buffergeometry_instancing_interleaved_dynamic",

‎examples/webgl_buffergeometry_instancing2.html

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - instancing test</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+
<style>
8+
body {
9+
color: #ffffff;
10+
font-family: Monospace;
11+
font-size: 13px;
12+
text-align: center;
13+
font-weight: bold;
14+
background-color: #000000;
15+
margin: 0px;
16+
overflow: hidden;
17+
}
18+
19+
#info {
20+
position: absolute;
21+
top: 0px;
22+
width: 100%;
23+
padding: 5px;
24+
}
25+
26+
a {
27+
color: #ffffff;
28+
}
29+
30+
#oldie a {
31+
color: #da0;
32+
}
33+
34+
#notSupported {
35+
width: 50%;
36+
margin: auto;
37+
border: 2px red solid;
38+
margin-top: 20px;
39+
padding: 10px;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
45+
<div id="container"></div>
46+
<div id="info">
47+
<a href="http://threejs.org" target="_blank">three.js</a> - instancing demo
48+
<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
49+
</div>
50+
51+
<script src="js/libs/dat.gui.min.js"></script>
52+
<script src="../build/three.js"></script>
53+
<script src="js/Detector.js"></script>
54+
<script src="js/libs/stats.min.js"></script>
55+
56+
<script src="js/controls/TrackballControls.js"></script>
57+
58+
<script id="vertexShader" type="x-shader/x-vertex">
59+
precision highp float;
60+
61+
attribute vec3 instancePosition;
62+
attribute vec4 instanceQuaternion;
63+
attribute vec3 instanceScale;
64+
65+
vec3 applyTRS( vec3 position, vec3 translation, vec4 quaternion, vec3 scale ) {
66+
67+
position *= scale;
68+
position += 2.0 * cross( quaternion.xyz, cross( quaternion.xyz, position ) + quaternion.w * position );
69+
return position + translation;
70+
71+
}
72+
73+
attribute vec3 color;
74+
varying vec3 vColor;
75+
76+
void main(){
77+
78+
vColor = color;
79+
80+
vec3 transformed = applyTRS( position.xyz, instancePosition, instanceQuaternion, instanceScale );
81+
82+
gl_Position = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );
83+
84+
}
85+
86+
</script>
87+
88+
<script id="fragmentShader" type="x-shader/x-fragment">
89+
90+
precision highp float;
91+
varying vec3 vColor;
92+
93+
void main() {
94+
95+
gl_FragColor = vec4( vColor, 1.0 );
96+
97+
}
98+
99+
</script>
100+
101+
<script>
102+
103+
if ( !Detector.webgl ) Detector.addGetWebGLMessage();
104+
105+
var container, stats;
106+
107+
var camera, scene, renderer;
108+
109+
var controls;
110+
111+
init();
112+
animate();
113+
114+
function init() {
115+
116+
container = document.getElementById( 'container' );
117+
118+
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
119+
camera.position.z = 4;
120+
121+
controls = new THREE.TrackballControls( camera );
122+
123+
scene = new THREE.Scene();
124+
125+
//
126+
127+
// var geometry = new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 );
128+
var geometry = new THREE.IcosahedronBufferGeometry( 0.1, 1 );
129+
130+
var colors = [];
131+
132+
for ( var i = 0, l = geometry.attributes.position.count; i < l; i ++ ) {
133+
134+
colors.push( Math.random(), Math.random(), Math.random() );
135+
136+
}
137+
138+
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
139+
140+
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, vertexColors: THREE.VertexColors } );
141+
142+
var mesh = new THREE.Mesh( geometry, material );
143+
// scene.add( mesh );
144+
145+
//
146+
147+
var INSTANCE_COUNT = 100;
148+
149+
var geometry2 = new THREE.InstancedBufferGeometry().copy( geometry );
150+
151+
var instancePositions = [];
152+
var instanceQuaternions = [];
153+
var instanceScales = [];
154+
155+
// var position = new THREE.Vector3();
156+
// var quaternion = new THREE.Quaternion();
157+
158+
for ( var i = 0; i < INSTANCE_COUNT; i ++ ) {
159+
160+
var mesh = new THREE.Mesh( geometry, material );
161+
scene.add( mesh );
162+
163+
var position = mesh.position;
164+
var quaternion = mesh.quaternion;
165+
var scale = mesh.scale;
166+
167+
position.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
168+
169+
quaternion.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
170+
quaternion.normalize();
171+
172+
scale.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
173+
174+
instancePositions.push( position.x, position.y, position.z );
175+
instanceQuaternions.push( quaternion.x, quaternion.y, quaternion.z, quaternion.w );
176+
instanceScales.push( scale.x, scale.y, scale.z );
177+
178+
}
179+
180+
var attribute = new THREE.InstancedBufferAttribute( new Float32Array( instancePositions ), 3 );
181+
geometry2.addAttribute( 'instancePosition', attribute );
182+
183+
var attribute = new THREE.InstancedBufferAttribute( new Float32Array( instanceQuaternions ), 4 );
184+
geometry2.addAttribute( 'instanceQuaternion', attribute );
185+
186+
var attribute = new THREE.InstancedBufferAttribute( new Float32Array( instanceScales ), 3 );
187+
geometry2.addAttribute( 'instanceScale', attribute );
188+
189+
var material = new THREE.ShaderMaterial( {
190+
191+
uniforms: {},
192+
vertexShader: document.getElementById( 'vertexShader' ).textContent,
193+
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
194+
195+
} );
196+
197+
var mesh2 = new THREE.Mesh( geometry2, material );
198+
mesh2.position.x = 0.1;
199+
scene.add( mesh2 );
200+
201+
202+
/*
203+
// geometry
204+
205+
var triangles = 1;
206+
var instances = 65000;
207+
208+
var geometry = new THREE.InstancedBufferGeometry();
209+
210+
geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
211+
var gui = new dat.GUI();
212+
gui.add( geometry, "maxInstancedCount", 0, instances );
213+
214+
var vertices = new THREE.BufferAttribute( new Float32Array( triangles * 3 * 3 ), 3 );
215+
216+
vertices.setXYZ( 0, 0.025, -0.025, 0 );
217+
vertices.setXYZ( 1, -0.025, 0.025, 0 );
218+
vertices.setXYZ( 2, 0, 0, 0.025 );
219+
220+
geometry.addAttribute( 'position', vertices );
221+
222+
var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1 );
223+
224+
for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
225+
226+
offsets.setXYZ( i, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
227+
228+
}
229+
230+
geometry.addAttribute( 'offset', offsets );
231+
232+
var colors = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
233+
234+
for ( var i = 0, ul = colors.count; i < ul; i++ ) {
235+
236+
colors.setXYZW( i, Math.random(), Math.random(), Math.random(), Math.random() );
237+
238+
}
239+
240+
geometry.addAttribute( 'color', colors );
241+
242+
var vector = new THREE.Vector4();
243+
244+
var orientationsStart = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
245+
246+
for ( var i = 0, ul = orientationsStart.count; i < ul; i++ ) {
247+
248+
vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
249+
vector.normalize();
250+
251+
orientationsStart.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
252+
253+
}
254+
255+
geometry.addAttribute( 'orientationStart', orientationsStart );
256+
257+
var orientationsEnd = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
258+
259+
for ( var i = 0, ul = orientationsEnd.count; i < ul; i++ ) {
260+
261+
vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
262+
vector.normalize();
263+
264+
orientationsEnd.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
265+
266+
}
267+
268+
geometry.addAttribute( 'orientationEnd', orientationsEnd );
269+
270+
// material
271+
272+
var material = new THREE.RawShaderMaterial( {
273+
274+
uniforms: {
275+
time: { value: 1.0 },
276+
sineTime: { value: 1.0 }
277+
},
278+
vertexShader: document.getElementById( 'vertexShader' ).textContent,
279+
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
280+
side: THREE.DoubleSide,
281+
transparent: true
282+
283+
} );
284+
285+
var mesh = new THREE.Mesh( geometry, material );
286+
scene.add( mesh );
287+
*/
288+
289+
renderer = new THREE.WebGLRenderer();
290+
291+
if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
292+
document.getElementById( "notSupported" ).style.display = "";
293+
return;
294+
}
295+
296+
renderer.setClearColor( 0x101010 );
297+
renderer.setPixelRatio( window.devicePixelRatio );
298+
renderer.setSize( window.innerWidth, window.innerHeight );
299+
container.appendChild( renderer.domElement );
300+
301+
stats = new Stats();
302+
container.appendChild( stats.dom );
303+
304+
window.addEventListener( 'resize', onWindowResize, false );
305+
306+
}
307+
308+
function onWindowResize( event ) {
309+
310+
camera.aspect = window.innerWidth / window.innerHeight;
311+
camera.updateProjectionMatrix();
312+
313+
renderer.setSize( window.innerWidth, window.innerHeight );
314+
315+
}
316+
317+
//
318+
319+
function animate() {
320+
321+
requestAnimationFrame( animate );
322+
323+
render();
324+
stats.update();
325+
326+
}
327+
328+
function render() {
329+
330+
controls.update();
331+
332+
renderer.render( scene, camera );
333+
334+
}
335+
336+
</script>
337+
338+
</body>
339+
340+
</html>

0 commit comments

Comments
 (0)