Lensflare.js 8.9 KB

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