webgl_buffergeometry_instancing_lambert.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - instancing - lambert shader</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 - lambert shader
  25. <div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
  26. </div>
  27. <script type="module">
  28. import * as THREE from '../build/three.module.js';
  29. import Stats from './jsm/libs/stats.module.js';
  30. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  31. import { Curves } from './jsm/curves/CurveExtras.js';
  32. // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
  33. var customDepthVertexShader =
  34. `
  35. // instanced
  36. attribute vec3 instanceOffset;
  37. attribute float instanceScale;
  38. #include <common>
  39. #include <uv_pars_vertex>
  40. #include <displacementmap_pars_vertex>
  41. #include <morphtarget_pars_vertex>
  42. #include <skinning_pars_vertex>
  43. #include <logdepthbuf_pars_vertex>
  44. #include <clipping_planes_pars_vertex>
  45. void main() {
  46. #include <uv_vertex>
  47. #include <skinbase_vertex>
  48. #ifdef USE_DISPLACEMENTMAP
  49. #include <beginnormal_vertex>
  50. #include <morphnormal_vertex>
  51. #include <skinnormal_vertex>
  52. #endif
  53. #include <begin_vertex>
  54. // instanced
  55. transformed *= instanceScale;
  56. transformed = transformed + instanceOffset;
  57. #include <morphtarget_vertex>
  58. #include <skinning_vertex>
  59. #include <displacementmap_vertex>
  60. #include <project_vertex>
  61. #include <logdepthbuf_vertex>
  62. #include <clipping_planes_vertex>
  63. }
  64. `;
  65. // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
  66. var customLambertVertexShader =
  67. `
  68. #define LAMBERT
  69. // instanced
  70. attribute vec3 instanceOffset;
  71. attribute vec3 instanceColor;
  72. attribute float instanceScale;
  73. varying vec3 vLightFront;
  74. varying vec3 vIndirectFront;
  75. #ifdef DOUBLE_SIDED
  76. varying vec3 vLightBack;
  77. varying vec3 vIndirectBack;
  78. #endif
  79. #include <common>
  80. #include <uv_pars_vertex>
  81. #include <uv2_pars_vertex>
  82. #include <envmap_pars_vertex>
  83. #include <bsdfs>
  84. #include <lights_pars_begin>
  85. #include <color_pars_vertex>
  86. #include <fog_pars_vertex>
  87. #include <morphtarget_pars_vertex>
  88. #include <skinning_pars_vertex>
  89. #include <shadowmap_pars_vertex>
  90. #include <logdepthbuf_pars_vertex>
  91. #include <clipping_planes_pars_vertex>
  92. void main() {
  93. #include <uv_vertex>
  94. #include <uv2_vertex>
  95. #include <color_vertex>
  96. // vertex colors instanced
  97. #ifdef USE_COLOR
  98. vColor.xyz = instanceColor.xyz;
  99. #endif
  100. #include <beginnormal_vertex>
  101. #include <morphnormal_vertex>
  102. #include <skinbase_vertex>
  103. #include <skinnormal_vertex>
  104. #include <defaultnormal_vertex>
  105. #include <begin_vertex>
  106. // position instanced
  107. transformed *= instanceScale;
  108. transformed = transformed + instanceOffset;
  109. #include <morphtarget_vertex>
  110. #include <skinning_vertex>
  111. #include <project_vertex>
  112. #include <logdepthbuf_vertex>
  113. #include <clipping_planes_vertex>
  114. #include <worldpos_vertex>
  115. #include <envmap_vertex>
  116. #include <lights_lambert_vertex>
  117. #include <shadowmap_vertex>
  118. #include <fog_vertex>
  119. }
  120. `;
  121. //
  122. var mesh, renderer, scene, camera, controls;
  123. var stats;
  124. init();
  125. animate();
  126. function init() {
  127. renderer = new THREE.WebGLRenderer( { antialias: true } );
  128. renderer.setSize( window.innerWidth, window.innerHeight );
  129. renderer.shadowMap.enabled = true;
  130. document.body.appendChild( renderer.domElement );
  131. renderer.outputEncoding = THREE.sRGBEncoding;
  132. scene = new THREE.Scene();
  133. scene.fog = new THREE.FogExp2( 0x000000, 0.004 );
  134. renderer.setClearColor( scene.fog.color, 1 );
  135. camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
  136. camera.position.set( 80, 40, 80 );
  137. scene.add( camera );
  138. controls = new OrbitControls( camera, renderer.domElement );
  139. controls.enableZoom = false;
  140. controls.maxPolarAngle = Math.PI / 2;
  141. scene.add( new THREE.AmbientLight( 0xffffff, 0.7 ) );
  142. var light = new THREE.DirectionalLight( 0xffffff, 0.4 );
  143. light.position.set( 50, 40, 0 );
  144. light.castShadow = true;
  145. light.shadow.camera.left = - 40;
  146. light.shadow.camera.right = 40;
  147. light.shadow.camera.top = 40;
  148. light.shadow.camera.bottom = - 40;
  149. light.shadow.camera.near = 10;
  150. light.shadow.camera.far = 180;
  151. light.shadow.bias = - 0.001;
  152. light.shadow.mapSize.width = 512;
  153. light.shadow.mapSize.height = 512;
  154. scene.add( light );
  155. // light shadow camera helper
  156. //light.shadowCameraHelper = new CameraHelper( light.shadow.camera );
  157. //scene.add( light.shadowCameraHelper );
  158. // instanced buffer geometry
  159. var geometry = new THREE.InstancedBufferGeometry();
  160. geometry.copy( new THREE.TorusBufferGeometry( 2, 0.5, 8, 128 ) );
  161. const INSTANCES = 256;
  162. var knot = new Curves.TorusKnot( 10 );
  163. var positions = knot.getSpacedPoints( INSTANCES );
  164. var offsets = new Float32Array( INSTANCES * 3 ); // xyz
  165. var colors = new Float32Array( INSTANCES * 3 ); // rgb
  166. var scales = new Float32Array( INSTANCES * 1 ); // s
  167. for ( var i = 0, l = INSTANCES; i < l; i ++ ) {
  168. var index = 3 * i;
  169. // per-instance position offset
  170. offsets[ index ] = positions[ i ].x;
  171. offsets[ index + 1 ] = positions[ i ].y;
  172. offsets[ index + 2 ] = positions[ i ].z;
  173. // per-instance color tint - optional
  174. colors[ index ] = 1;
  175. colors[ index + 1 ] = 1;
  176. colors[ index + 2 ] = 1;
  177. // per-instance scale variation
  178. scales[ i ] = 1 + 0.5 * Math.sin( 32 * Math.PI * i / INSTANCES );
  179. }
  180. geometry.setAttribute( 'instanceOffset', new THREE.InstancedBufferAttribute( offsets, 3 ) );
  181. geometry.setAttribute( 'instanceColor', new THREE.InstancedBufferAttribute( colors, 3 ) );
  182. geometry.setAttribute( 'instanceScale', new THREE.InstancedBufferAttribute( scales, 1 ) );
  183. // material
  184. var envMap = new THREE.TextureLoader().load( `textures/metal.jpg`, function ( texture ) {
  185. texture.mapping = THREE.SphericalReflectionMapping;
  186. texture.encoding = THREE.sRGBEncoding;
  187. if ( mesh ) mesh.material.needsUpdate = true;
  188. } );
  189. var material = new THREE.MeshLambertMaterial( {
  190. color: 0xffb54a,
  191. envMap: envMap,
  192. combine: THREE.MultiplyOperation,
  193. reflectivity: 0.8,
  194. vertexColors: THREE.VertexColors,
  195. fog: true
  196. } );
  197. material.onBeforeCompile = function( shader ) {
  198. shader.vertexShader = customLambertVertexShader;
  199. };
  200. // custom depth material - required for instanced shadows
  201. var customDepthMaterial = new THREE.MeshDepthMaterial();
  202. customDepthMaterial.onBeforeCompile = function( shader ) {
  203. shader.vertexShader = customDepthVertexShader;
  204. };
  205. customDepthMaterial.depthPacking = THREE.RGBADepthPacking;
  206. //
  207. mesh = new THREE.Mesh( geometry, material );
  208. mesh.scale.set( 1, 1, 2 );
  209. mesh.castShadow = true;
  210. mesh.receiveShadow = true;
  211. mesh.customDepthMaterial = customDepthMaterial;
  212. mesh.frustumCulled = false;
  213. scene.add( mesh );
  214. //
  215. var ground = new THREE.Mesh(
  216. new THREE.PlaneBufferGeometry( 800, 800 ).rotateX( - Math.PI / 2 ),
  217. new THREE.MeshPhongMaterial( { color: 0x888888 } )
  218. );
  219. ground.position.set( 0, - 40, 0 );
  220. ground.receiveShadow = true;
  221. scene.add( ground );
  222. //
  223. stats = new Stats();
  224. document.body.appendChild( stats.dom );
  225. //
  226. window.addEventListener( 'resize', onWindowResize, false );
  227. }
  228. function onWindowResize() {
  229. renderer.setSize( window.innerWidth, window.innerHeight );
  230. camera.aspect = window.innerWidth / window.innerHeight;
  231. camera.updateProjectionMatrix();
  232. }
  233. function animate() {
  234. requestAnimationFrame( animate );
  235. mesh.rotation.y += 0.005;
  236. stats.update();
  237. renderer.render( scene, camera );
  238. }
  239. </script>
  240. </body>
  241. </html>