Lensflare.js 8.8 KB

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