Lensflare.js 8.5 KB

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