webgl_buffergeometry_instancing.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - instancing test (single triangle)</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. #notSupported {
  13. width: 50%;
  14. margin: auto;
  15. background-color: #f00;
  16. margin-top: 20px;
  17. padding: 10px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="container"></div>
  23. <div id="info">
  24. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - instancing demo (single triangle)
  25. <div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
  26. </div>
  27. <script id="vertexShader" type="x-shader/x-vertex">
  28. precision highp float;
  29. uniform float sineTime;
  30. uniform mat4 modelViewMatrix;
  31. uniform mat4 projectionMatrix;
  32. attribute vec3 position;
  33. attribute vec3 offset;
  34. attribute vec4 color;
  35. attribute vec4 orientationStart;
  36. attribute vec4 orientationEnd;
  37. varying vec3 vPosition;
  38. varying vec4 vColor;
  39. void main(){
  40. vPosition = offset * max( abs( sineTime * 2.0 + 1.0 ), 0.5 ) + position;
  41. vec4 orientation = normalize( mix( orientationStart, orientationEnd, sineTime ) );
  42. vec3 vcV = cross( orientation.xyz, vPosition );
  43. vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );
  44. vColor = color;
  45. gl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );
  46. }
  47. </script>
  48. <script id="fragmentShader" type="x-shader/x-fragment">
  49. precision highp float;
  50. uniform float time;
  51. varying vec3 vPosition;
  52. varying vec4 vColor;
  53. void main() {
  54. vec4 color = vec4( vColor );
  55. color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
  56. gl_FragColor = color;
  57. }
  58. </script>
  59. <script type="module">
  60. import * as THREE from '../build/three.module.js';
  61. import Stats from './jsm/libs/stats.module.js';
  62. import { GUI } from './jsm/libs/dat.gui.module.js';
  63. var container, stats;
  64. var camera, scene, renderer;
  65. init();
  66. animate();
  67. function init() {
  68. container = document.getElementById( 'container' );
  69. camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
  70. camera.position.z = 2;
  71. scene = new THREE.Scene();
  72. // geometry
  73. var vector = new THREE.Vector4();
  74. var instances = 50000;
  75. var positions = [];
  76. var offsets = [];
  77. var colors = [];
  78. var orientationsStart = [];
  79. var orientationsEnd = [];
  80. positions.push( 0.025, - 0.025, 0 );
  81. positions.push( - 0.025, 0.025, 0 );
  82. positions.push( 0, 0, 0.025 );
  83. // instanced attributes
  84. for ( var i = 0; i < instances; i ++ ) {
  85. // offsets
  86. offsets.push( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
  87. // colors
  88. colors.push( Math.random(), Math.random(), Math.random(), Math.random() );
  89. // orientation start
  90. vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
  91. vector.normalize();
  92. orientationsStart.push( vector.x, vector.y, vector.z, vector.w );
  93. // orientation end
  94. vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
  95. vector.normalize();
  96. orientationsEnd.push( vector.x, vector.y, vector.z, vector.w );
  97. }
  98. var geometry = new THREE.InstancedBufferGeometry();
  99. geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
  100. geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
  101. geometry.setAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) );
  102. geometry.setAttribute( 'color', new THREE.InstancedBufferAttribute( new Float32Array( colors ), 4 ) );
  103. geometry.setAttribute( 'orientationStart', new THREE.InstancedBufferAttribute( new Float32Array( orientationsStart ), 4 ) );
  104. geometry.setAttribute( 'orientationEnd', new THREE.InstancedBufferAttribute( new Float32Array( orientationsEnd ), 4 ) );
  105. // material
  106. var material = new THREE.RawShaderMaterial( {
  107. uniforms: {
  108. "time": { value: 1.0 },
  109. "sineTime": { value: 1.0 }
  110. },
  111. vertexShader: document.getElementById( 'vertexShader' ).textContent,
  112. fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
  113. side: THREE.DoubleSide,
  114. transparent: true
  115. } );
  116. //
  117. var mesh = new THREE.Mesh( geometry, material );
  118. scene.add( mesh );
  119. //
  120. renderer = new THREE.WebGLRenderer();
  121. renderer.setPixelRatio( window.devicePixelRatio );
  122. renderer.setSize( window.innerWidth, window.innerHeight );
  123. container.appendChild( renderer.domElement );
  124. if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
  125. document.getElementById( 'notSupported' ).style.display = '';
  126. return;
  127. }
  128. //
  129. var gui = new GUI( { width: 350 } );
  130. gui.add( geometry, 'maxInstancedCount', 0, instances );
  131. //
  132. stats = new Stats();
  133. container.appendChild( stats.dom );
  134. //
  135. window.addEventListener( 'resize', onWindowResize, false );
  136. }
  137. function onWindowResize() {
  138. camera.aspect = window.innerWidth / window.innerHeight;
  139. camera.updateProjectionMatrix();
  140. renderer.setSize( window.innerWidth, window.innerHeight );
  141. }
  142. //
  143. function animate() {
  144. requestAnimationFrame( animate );
  145. render();
  146. stats.update();
  147. }
  148. function render() {
  149. var time = performance.now();
  150. var object = scene.children[ 0 ];
  151. object.rotation.y = time * 0.0005;
  152. object.material.uniforms[ "time" ].value = time * 0.005;
  153. object.material.uniforms[ "sineTime" ].value = Math.sin( object.material.uniforms[ "time" ].value * 0.05 );
  154. renderer.render( scene, camera );
  155. }
  156. </script>
  157. </body>
  158. </html>