LensFlare.js 8.7 KB

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