Lensflare.js 9.1 KB

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