Lensflare.js 8.2 KB

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