Lensflare.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. import {
  2. AdditiveBlending,
  3. Box2,
  4. BufferGeometry,
  5. ClampToEdgeWrapping,
  6. Color,
  7. DataTexture,
  8. InterleavedBuffer,
  9. InterleavedBufferAttribute,
  10. Mesh,
  11. MeshBasicMaterial,
  12. NearestFilter,
  13. RGBFormat,
  14. RawShaderMaterial,
  15. Vector2,
  16. Vector3,
  17. Vector4
  18. } from '../../../build/three.module.js';
  19. class Lensflare extends Mesh {
  20. constructor() {
  21. super( Lensflare.Geometry, new MeshBasicMaterial( { opacity: 0, transparent: true } ) );
  22. this.type = 'Lensflare';
  23. this.frustumCulled = false;
  24. this.renderOrder = Infinity;
  25. //
  26. const positionScreen = new Vector3();
  27. const positionView = new Vector3();
  28. // textures
  29. const tempMap = new DataTexture( new Uint8Array( 16 * 16 * 3 ), 16, 16, RGBFormat );
  30. tempMap.minFilter = NearestFilter;
  31. tempMap.magFilter = NearestFilter;
  32. tempMap.wrapS = ClampToEdgeWrapping;
  33. tempMap.wrapT = ClampToEdgeWrapping;
  34. const occlusionMap = new DataTexture( new Uint8Array( 16 * 16 * 3 ), 16, 16, RGBFormat );
  35. occlusionMap.minFilter = NearestFilter;
  36. occlusionMap.magFilter = NearestFilter;
  37. occlusionMap.wrapS = ClampToEdgeWrapping;
  38. occlusionMap.wrapT = ClampToEdgeWrapping;
  39. // material
  40. const geometry = Lensflare.Geometry;
  41. const material1a = new RawShaderMaterial( {
  42. uniforms: {
  43. 'scale': { value: null },
  44. 'screenPosition': { value: null }
  45. },
  46. vertexShader: /* glsl */`
  47. precision highp float;
  48. uniform vec3 screenPosition;
  49. uniform vec2 scale;
  50. attribute vec3 position;
  51. void main() {
  52. gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );
  53. }`,
  54. fragmentShader: /* glsl */`
  55. precision highp float;
  56. void main() {
  57. gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );
  58. }`,
  59. depthTest: true,
  60. depthWrite: false,
  61. transparent: false
  62. } );
  63. const material1b = new RawShaderMaterial( {
  64. uniforms: {
  65. 'map': { value: tempMap },
  66. 'scale': { value: null },
  67. 'screenPosition': { value: null }
  68. },
  69. vertexShader: /* glsl */`
  70. precision highp float;
  71. uniform vec3 screenPosition;
  72. uniform vec2 scale;
  73. attribute vec3 position;
  74. attribute vec2 uv;
  75. varying vec2 vUV;
  76. void main() {
  77. vUV = uv;
  78. gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );
  79. }`,
  80. fragmentShader: /* glsl */`
  81. precision highp float;
  82. uniform sampler2D map;
  83. varying vec2 vUV;
  84. void main() {
  85. gl_FragColor = texture2D( map, vUV );
  86. }`,
  87. depthTest: false,
  88. depthWrite: false,
  89. transparent: false
  90. } );
  91. // the following object is used for occlusionMap generation
  92. const mesh1 = new Mesh( geometry, material1a );
  93. //
  94. const elements = [];
  95. const shader = LensflareElement.Shader;
  96. const material2 = new RawShaderMaterial( {
  97. uniforms: {
  98. 'map': { value: null },
  99. 'occlusionMap': { value: occlusionMap },
  100. 'color': { value: new Color( 0xffffff ) },
  101. 'scale': { value: new Vector2() },
  102. 'screenPosition': { value: new Vector3() }
  103. },
  104. vertexShader: shader.vertexShader,
  105. fragmentShader: shader.fragmentShader,
  106. blending: AdditiveBlending,
  107. transparent: true,
  108. depthWrite: false
  109. } );
  110. const mesh2 = new Mesh( geometry, material2 );
  111. this.addElement = function ( element ) {
  112. elements.push( element );
  113. };
  114. //
  115. const scale = new Vector2();
  116. const screenPositionPixels = new Vector2();
  117. const validArea = new Box2();
  118. const viewport = new Vector4();
  119. this.onBeforeRender = function ( renderer, scene, camera ) {
  120. renderer.getCurrentViewport( viewport );
  121. const invAspect = viewport.w / viewport.z;
  122. const halfViewportWidth = viewport.z / 2.0;
  123. const halfViewportHeight = viewport.w / 2.0;
  124. let size = 16 / viewport.w;
  125. scale.set( size * invAspect, size );
  126. validArea.min.set( viewport.x, viewport.y );
  127. validArea.max.set( viewport.x + ( viewport.z - 16 ), viewport.y + ( viewport.w - 16 ) );
  128. // calculate position in screen space
  129. positionView.setFromMatrixPosition( this.matrixWorld );
  130. positionView.applyMatrix4( camera.matrixWorldInverse );
  131. if ( positionView.z > 0 ) return; // lensflare is behind the camera
  132. positionScreen.copy( positionView ).applyMatrix4( camera.projectionMatrix );
  133. // horizontal and vertical coordinate of the lower left corner of the pixels to copy
  134. screenPositionPixels.x = viewport.x + ( positionScreen.x * halfViewportWidth ) + halfViewportWidth - 8;
  135. screenPositionPixels.y = viewport.y + ( positionScreen.y * halfViewportHeight ) + halfViewportHeight - 8;
  136. // screen cull
  137. if ( validArea.containsPoint( screenPositionPixels ) ) {
  138. // save current RGB to temp texture
  139. renderer.copyFramebufferToTexture( screenPositionPixels, tempMap );
  140. // render pink quad
  141. let uniforms = material1a.uniforms;
  142. uniforms[ 'scale' ].value = scale;
  143. uniforms[ 'screenPosition' ].value = positionScreen;
  144. renderer.renderBufferDirect( camera, null, geometry, material1a, mesh1, null );
  145. // copy result to occlusionMap
  146. renderer.copyFramebufferToTexture( screenPositionPixels, occlusionMap );
  147. // restore graphics
  148. uniforms = material1b.uniforms;
  149. uniforms[ 'scale' ].value = scale;
  150. uniforms[ 'screenPosition' ].value = positionScreen;
  151. renderer.renderBufferDirect( camera, null, geometry, material1b, mesh1, null );
  152. // render elements
  153. const vecX = - positionScreen.x * 2;
  154. const vecY = - positionScreen.y * 2;
  155. for ( let i = 0, l = elements.length; i < l; i ++ ) {
  156. const element = elements[ i ];
  157. const uniforms = material2.uniforms;
  158. uniforms[ 'color' ].value.copy( element.color );
  159. uniforms[ 'map' ].value = element.texture;
  160. uniforms[ 'screenPosition' ].value.x = positionScreen.x + vecX * element.distance;
  161. uniforms[ 'screenPosition' ].value.y = positionScreen.y + vecY * element.distance;
  162. size = element.size / viewport.w;
  163. const invAspect = viewport.w / viewport.z;
  164. uniforms[ 'scale' ].value.set( size * invAspect, size );
  165. material2.uniformsNeedUpdate = true;
  166. renderer.renderBufferDirect( camera, null, geometry, material2, mesh2, null );
  167. }
  168. }
  169. };
  170. this.dispose = function () {
  171. material1a.dispose();
  172. material1b.dispose();
  173. material2.dispose();
  174. tempMap.dispose();
  175. occlusionMap.dispose();
  176. for ( let i = 0, l = elements.length; i < l; i ++ ) {
  177. elements[ i ].texture.dispose();
  178. }
  179. };
  180. }
  181. }
  182. Lensflare.prototype.isLensflare = true;
  183. //
  184. class LensflareElement {
  185. constructor( texture, size = 1, distance = 0, color = new Color( 0xffffff ) ) {
  186. this.texture = texture;
  187. this.size = size;
  188. this.distance = distance;
  189. this.color = color;
  190. }
  191. }
  192. LensflareElement.Shader = {
  193. uniforms: {
  194. 'map': { value: null },
  195. 'occlusionMap': { value: null },
  196. 'color': { value: null },
  197. 'scale': { value: null },
  198. 'screenPosition': { value: null }
  199. },
  200. vertexShader: /* glsl */`
  201. precision highp float;
  202. uniform vec3 screenPosition;
  203. uniform vec2 scale;
  204. uniform sampler2D occlusionMap;
  205. attribute vec3 position;
  206. attribute vec2 uv;
  207. varying vec2 vUV;
  208. varying float vVisibility;
  209. void main() {
  210. vUV = uv;
  211. vec2 pos = position.xy;
  212. vec4 visibility = texture2D( occlusionMap, vec2( 0.1, 0.1 ) );
  213. visibility += texture2D( occlusionMap, vec2( 0.5, 0.1 ) );
  214. visibility += texture2D( occlusionMap, vec2( 0.9, 0.1 ) );
  215. visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) );
  216. visibility += texture2D( occlusionMap, vec2( 0.9, 0.9 ) );
  217. visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) );
  218. visibility += texture2D( occlusionMap, vec2( 0.1, 0.9 ) );
  219. visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) );
  220. visibility += texture2D( occlusionMap, vec2( 0.5, 0.5 ) );
  221. vVisibility = visibility.r / 9.0;
  222. vVisibility *= 1.0 - visibility.g / 9.0;
  223. vVisibility *= visibility.b / 9.0;
  224. gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );
  225. }`,
  226. fragmentShader: /* glsl */`
  227. precision highp float;
  228. uniform sampler2D map;
  229. uniform vec3 color;
  230. varying vec2 vUV;
  231. varying float vVisibility;
  232. void main() {
  233. vec4 texture = texture2D( map, vUV );
  234. texture.a *= vVisibility;
  235. gl_FragColor = texture;
  236. gl_FragColor.rgb *= color;
  237. }`
  238. };
  239. Lensflare.Geometry = ( function () {
  240. const geometry = new BufferGeometry();
  241. const float32Array = new Float32Array( [
  242. - 1, - 1, 0, 0, 0,
  243. 1, - 1, 0, 1, 0,
  244. 1, 1, 0, 1, 1,
  245. - 1, 1, 0, 0, 1
  246. ] );
  247. const interleavedBuffer = new InterleavedBuffer( float32Array, 5 );
  248. geometry.setIndex( [ 0, 1, 2, 0, 2, 3 ] );
  249. geometry.setAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer, 3, 0, false ) );
  250. geometry.setAttribute( 'uv', new InterleavedBufferAttribute( interleavedBuffer, 2, 3, false ) );
  251. return geometry;
  252. } )();
  253. export { Lensflare, LensflareElement };