LensflareMesh.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. import {
  2. AdditiveBlending,
  3. Box2,
  4. BufferGeometry,
  5. Color,
  6. FramebufferTexture,
  7. InterleavedBuffer,
  8. InterleavedBufferAttribute,
  9. Mesh,
  10. MeshBasicNodeMaterial,
  11. NodeMaterial,
  12. UnsignedByteType,
  13. Vector2,
  14. Vector3,
  15. Vector4,
  16. Node
  17. } from 'three/webgpu';
  18. import { texture, textureLoad, uv, ivec2, vec2, vec4, positionGeometry, reference, varyingProperty, materialReference, Fn } from 'three/tsl';
  19. /**
  20. * Creates a simulated lens flare that tracks a light.
  21. *
  22. * Note that this class can only be used with {@link WebGPURenderer}.
  23. * When using {@link WebGLRenderer}, use {@link Lensflare}.
  24. *
  25. * ```js
  26. * const light = new THREE.PointLight( 0xffffff, 1.5, 2000 );
  27. *
  28. * const lensflare = new LensflareMesh();
  29. * lensflare.addElement( new LensflareElement( textureFlare0, 512, 0 ) );
  30. * lensflare.addElement( new LensflareElement( textureFlare1, 512, 0 ) );
  31. * lensflare.addElement( new LensflareElement( textureFlare2, 60, 0.6 ) );
  32. *
  33. * light.add( lensflare );
  34. * ```
  35. *
  36. * @augments Mesh
  37. * @three_import import { LensflareMesh } from 'three/addons/objects/LensflareMesh.js';
  38. */
  39. class LensflareMesh extends Mesh {
  40. /**
  41. * Constructs a new lensflare mesh.
  42. */
  43. constructor() {
  44. super( LensflareMesh.Geometry, new MeshBasicNodeMaterial( { opacity: 0, transparent: true } ) );
  45. /**
  46. * This flag can be used for type testing.
  47. *
  48. * @type {boolean}
  49. * @readonly
  50. * @default true
  51. */
  52. this.isLensflareMesh = true;
  53. this.type = 'LensflareMesh';
  54. /**
  55. * Overwritten to disable view-frustum culling by default.
  56. *
  57. * @type {boolean}
  58. * @default false
  59. */
  60. this.frustumCulled = false;
  61. /**
  62. * Overwritten to make sure lensflares a rendered last.
  63. *
  64. * @type {number}
  65. * @default Infinity
  66. */
  67. this.renderOrder = Infinity;
  68. //
  69. const positionView = new Vector3();
  70. // textures
  71. const tempMap = new FramebufferTexture( 16, 16 );
  72. const occlusionMap = new FramebufferTexture( 16, 16 );
  73. let currentType = UnsignedByteType;
  74. const geometry = LensflareMesh.Geometry;
  75. // values for shared material uniforms
  76. const sharedValues = {
  77. scale: new Vector2(),
  78. positionScreen: new Vector3()
  79. };
  80. // materials
  81. const scale = reference( 'scale', 'vec2', sharedValues );
  82. const screenPosition = reference( 'positionScreen', 'vec3', sharedValues );
  83. const vertexNode = vec4( positionGeometry.xy.mul( scale ).add( screenPosition.xy ), screenPosition.z, 1.0 );
  84. const material1a = new NodeMaterial();
  85. material1a.depthTest = true;
  86. material1a.depthWrite = false;
  87. material1a.transparent = false;
  88. material1a.fog = false;
  89. material1a.type = 'Lensflare-1a';
  90. material1a.vertexNode = vertexNode;
  91. material1a.fragmentNode = vec4( 1.0, 0.0, 1.0, 1.0 );
  92. const material1b = new NodeMaterial();
  93. material1b.depthTest = false;
  94. material1b.depthWrite = false;
  95. material1b.transparent = false;
  96. material1b.fog = false;
  97. material1b.type = 'Lensflare-1b';
  98. material1b.vertexNode = vertexNode;
  99. material1b.fragmentNode = texture( tempMap, vec2( uv().flipY() ) );
  100. // the following object is used for occlusionMap generation
  101. const mesh1 = new Mesh( geometry, material1a );
  102. //
  103. const elements = [];
  104. const elementMeshes = [];
  105. const material2 = new NodeMaterial();
  106. material2.transparent = true;
  107. material2.blending = AdditiveBlending;
  108. material2.depthWrite = false;
  109. material2.depthTest = false;
  110. material2.fog = false;
  111. material2.type = 'Lensflare-2';
  112. material2.screenPosition = new Vector3();
  113. material2.scale = new Vector2();
  114. material2.occlusionMap = occlusionMap;
  115. material2.vertexNode = Fn( ( { material } ) => {
  116. const scale = materialReference( 'scale', 'vec2' );
  117. const screenPosition = materialReference( 'screenPosition', 'vec3' );
  118. const occlusionMap = material.occlusionMap;
  119. const pos = positionGeometry.xy.toVar();
  120. const visibility = textureLoad( occlusionMap, ivec2( 2, 2 ) ).toVar();
  121. visibility.addAssign( textureLoad( occlusionMap, ivec2( 8, 2 ) ) );
  122. visibility.addAssign( textureLoad( occlusionMap, ivec2( 14, 2 ) ) );
  123. visibility.addAssign( textureLoad( occlusionMap, ivec2( 14, 8 ) ) );
  124. visibility.addAssign( textureLoad( occlusionMap, ivec2( 14, 14 ) ) );
  125. visibility.addAssign( textureLoad( occlusionMap, ivec2( 8, 14 ) ) );
  126. visibility.addAssign( textureLoad( occlusionMap, ivec2( 2, 14 ) ) );
  127. visibility.addAssign( textureLoad( occlusionMap, ivec2( 2, 8 ) ) );
  128. visibility.addAssign( textureLoad( occlusionMap, ivec2( 8, 8 ) ) );
  129. const vVisibility = varyingProperty( 'float', 'vVisibility' );
  130. vVisibility.assign( visibility.r.div( 9.0 ) );
  131. vVisibility.mulAssign( visibility.g.div( 9.0 ).oneMinus() );
  132. vVisibility.mulAssign( visibility.b.div( 9.0 ) );
  133. return vec4( ( pos.mul( scale ).add( screenPosition.xy ).xy ), screenPosition.z, 1.0 );
  134. } )();
  135. material2.fragmentNode = Fn( () => {
  136. const color = reference( 'color', 'color' );
  137. const map = reference( 'map', 'texture' );
  138. const vVisibility = varyingProperty( 'float', 'vVisibility' );
  139. const output = map.toVar();
  140. output.a.mulAssign( vVisibility );
  141. output.rgb.mulAssign( color );
  142. return output;
  143. } )();
  144. /**
  145. * Adds the given lensflare element to this instance.
  146. *
  147. * @param {LensflareElement} element - The element to add.
  148. */
  149. this.addElement = function ( element ) {
  150. elements.push( element );
  151. };
  152. //
  153. const positionScreen = sharedValues.positionScreen;
  154. const screenPositionPixels = new Vector4( 0, 0, 16, 16 );
  155. const validArea = new Box2();
  156. const viewport = new Vector4();
  157. // dummy node for renderer.renderObject()
  158. const lightsNode = new Node();
  159. this.onBeforeRender = ( renderer, scene, camera ) => {
  160. renderer.getViewport( viewport );
  161. viewport.multiplyScalar( window.devicePixelRatio );
  162. const renderTarget = renderer.getRenderTarget();
  163. const type = ( renderTarget !== null ) ? renderTarget.texture.type : UnsignedByteType;
  164. if ( currentType !== type ) {
  165. tempMap.dispose();
  166. occlusionMap.dispose();
  167. tempMap.type = occlusionMap.type = type;
  168. currentType = type;
  169. }
  170. const invAspect = viewport.w / viewport.z;
  171. const halfViewportWidth = viewport.z / 2.0;
  172. const halfViewportHeight = viewport.w / 2.0;
  173. const size = 16 / viewport.w;
  174. sharedValues.scale.set( size * invAspect, size );
  175. validArea.min.set( viewport.x, viewport.y );
  176. validArea.max.set( viewport.x + ( viewport.z - 16 ), viewport.y + ( viewport.w - 16 ) );
  177. // calculate position in screen space
  178. positionView.setFromMatrixPosition( this.matrixWorld );
  179. positionView.applyMatrix4( camera.matrixWorldInverse );
  180. if ( positionView.z > 0 ) return; // lensflare is behind the camera
  181. positionScreen.copy( positionView ).applyMatrix4( camera.projectionMatrix );
  182. // horizontal and vertical coordinate of the lower left corner of the pixels to copy
  183. screenPositionPixels.x = viewport.x + ( positionScreen.x * halfViewportWidth ) + halfViewportWidth - 8;
  184. screenPositionPixels.y = viewport.y - ( positionScreen.y * halfViewportHeight ) + halfViewportHeight - 8;
  185. // screen cull
  186. if ( validArea.containsPoint( screenPositionPixels ) ) {
  187. // save current RGB to temp texture
  188. renderer.copyFramebufferToTexture( tempMap, screenPositionPixels );
  189. // render pink quad
  190. renderer.renderObject( mesh1, scene, camera, geometry, material1a, null, lightsNode );
  191. // copy result to occlusionMap
  192. renderer.copyFramebufferToTexture( occlusionMap, screenPositionPixels );
  193. // restore graphics
  194. renderer.renderObject( mesh1, scene, camera, geometry, material1b, null, lightsNode );
  195. // render elements
  196. const vecX = - positionScreen.x * 2;
  197. const vecY = - positionScreen.y * 2;
  198. for ( let i = 0, l = elements.length; i < l; i ++ ) {
  199. const element = elements[ i ];
  200. let mesh2 = elementMeshes[ i ];
  201. if ( mesh2 === undefined ) {
  202. mesh2 = elementMeshes[ i ] = new Mesh( geometry, material2 );
  203. mesh2.color = element.color.convertSRGBToLinear();
  204. mesh2.map = element.texture;
  205. }
  206. material2.screenPosition.x = positionScreen.x + vecX * element.distance;
  207. material2.screenPosition.y = positionScreen.y - vecY * element.distance;
  208. material2.screenPosition.z = positionScreen.z;
  209. const size = element.size / viewport.w;
  210. material2.scale.set( size * invAspect, size );
  211. renderer.renderObject( mesh2, scene, camera, geometry, material2, null, lightsNode );
  212. }
  213. }
  214. };
  215. /**
  216. * Frees the GPU-related resources allocated by this instance. Call this
  217. * method whenever this instance is no longer used in your app.
  218. */
  219. this.dispose = function () {
  220. material1a.dispose();
  221. material1b.dispose();
  222. material2.dispose();
  223. tempMap.dispose();
  224. occlusionMap.dispose();
  225. for ( let i = 0, l = elements.length; i < l; i ++ ) {
  226. elements[ i ].texture.dispose();
  227. }
  228. };
  229. }
  230. }
  231. //
  232. class LensflareElement {
  233. constructor( texture, size = 1, distance = 0, color = new Color( 0xffffff ) ) {
  234. this.texture = texture;
  235. this.size = size;
  236. this.distance = distance;
  237. this.color = color;
  238. }
  239. }
  240. LensflareMesh.Geometry = ( function () {
  241. const geometry = new BufferGeometry();
  242. const float32Array = new Float32Array( [
  243. - 1, - 1, 0, 0, 0,
  244. 1, - 1, 0, 1, 0,
  245. 1, 1, 0, 1, 1,
  246. - 1, 1, 0, 0, 1
  247. ] );
  248. const interleavedBuffer = new InterleavedBuffer( float32Array, 5 );
  249. geometry.setIndex( [ 0, 1, 2, 0, 2, 3 ] );
  250. geometry.setAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer, 3, 0, false ) );
  251. geometry.setAttribute( 'uv', new InterleavedBufferAttribute( interleavedBuffer, 2, 3, false ) );
  252. return geometry;
  253. } )();
  254. export { LensflareMesh, LensflareElement };