/** * @author Mugen87 / https://github.com/Mugen87 * @author mrdoob / http://mrdoob.com/ */ import { AdditiveBlending, Box2, BufferGeometry, ClampToEdgeWrapping, Color, DataTexture, InterleavedBuffer, InterleavedBufferAttribute, Mesh, MeshBasicMaterial, NearestFilter, RGBFormat, RawShaderMaterial, Vector2, Vector3, Vector4 } from "../../../build/three.module.js"; var Lensflare = function () { Mesh.call( this, Lensflare.Geometry, new MeshBasicMaterial( { opacity: 0, transparent: true } ) ); this.type = 'Lensflare'; this.frustumCulled = false; this.renderOrder = Infinity; // var positionScreen = new Vector3(); var positionView = new Vector3(); // textures var tempMap = new DataTexture( new Uint8Array( 16 * 16 * 3 ), 16, 16, RGBFormat ); tempMap.minFilter = NearestFilter; tempMap.magFilter = NearestFilter; tempMap.wrapS = ClampToEdgeWrapping; tempMap.wrapT = ClampToEdgeWrapping; var occlusionMap = new DataTexture( new Uint8Array( 16 * 16 * 3 ), 16, 16, RGBFormat ); occlusionMap.minFilter = NearestFilter; occlusionMap.magFilter = NearestFilter; occlusionMap.wrapS = ClampToEdgeWrapping; occlusionMap.wrapT = ClampToEdgeWrapping; // material var geometry = Lensflare.Geometry; var material1a = new RawShaderMaterial( { uniforms: { 'scale': { value: null }, 'screenPosition': { value: null } }, vertexShader: [ 'precision highp float;', 'uniform vec3 screenPosition;', 'uniform vec2 scale;', 'attribute vec3 position;', 'void main() {', ' gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );', '}' ].join( '\n' ), fragmentShader: [ 'precision highp float;', 'void main() {', ' gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );', '}' ].join( '\n' ), depthTest: true, depthWrite: false, transparent: false } ); var material1b = new RawShaderMaterial( { uniforms: { 'map': { value: tempMap }, 'scale': { value: null }, 'screenPosition': { value: null } }, vertexShader: [ 'precision highp float;', 'uniform vec3 screenPosition;', 'uniform vec2 scale;', 'attribute vec3 position;', 'attribute vec2 uv;', 'varying vec2 vUV;', 'void main() {', ' vUV = uv;', ' gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );', '}' ].join( '\n' ), fragmentShader: [ 'precision highp float;', 'uniform sampler2D map;', 'varying vec2 vUV;', 'void main() {', ' gl_FragColor = texture2D( map, vUV );', '}' ].join( '\n' ), depthTest: false, depthWrite: false, transparent: false } ); // the following object is used for occlusionMap generation var mesh1 = new Mesh( geometry, material1a ); // var elements = []; var shader = LensflareElement.Shader; var material2 = new RawShaderMaterial( { uniforms: { 'map': { value: null }, 'occlusionMap': { value: occlusionMap }, 'color': { value: new Color( 0xffffff ) }, 'scale': { value: new Vector2() }, 'screenPosition': { value: new Vector3() } }, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, blending: AdditiveBlending, transparent: true, depthWrite: false } ); var mesh2 = new Mesh( geometry, material2 ); this.addElement = function ( element ) { elements.push( element ); }; // var scale = new Vector2(); var screenPositionPixels = new Vector2(); var validArea = new Box2(); var viewport = new Vector4(); this.onBeforeRender = function ( renderer, scene, camera ) { renderer.getCurrentViewport( viewport ); var invAspect = viewport.w / viewport.z; var halfViewportWidth = viewport.z / 2.0; var halfViewportHeight = viewport.w / 2.0; var size = 16 / viewport.w; scale.set( size * invAspect, size ); validArea.min.set( viewport.x, viewport.y ); validArea.max.set( viewport.x + ( viewport.z - 16 ), viewport.y + ( viewport.w - 16 ) ); // calculate position in screen space positionView.setFromMatrixPosition( this.matrixWorld ); positionView.applyMatrix4( camera.matrixWorldInverse ); if ( positionView.z > 0 ) return; // lensflare is behind the camera positionScreen.copy( positionView ).applyMatrix4( camera.projectionMatrix ); // horizontal and vertical coordinate of the lower left corner of the pixels to copy screenPositionPixels.x = viewport.x + ( positionScreen.x * halfViewportWidth ) + halfViewportWidth - 8; screenPositionPixels.y = viewport.y + ( positionScreen.y * halfViewportHeight ) + halfViewportHeight - 8; // screen cull if ( validArea.containsPoint( screenPositionPixels ) ) { // save current RGB to temp texture renderer.copyFramebufferToTexture( screenPositionPixels, tempMap ); // render pink quad var uniforms = material1a.uniforms; uniforms[ "scale" ].value = scale; uniforms[ "screenPosition" ].value = positionScreen; renderer.renderBufferDirect( camera, null, geometry, material1a, mesh1, null ); // copy result to occlusionMap renderer.copyFramebufferToTexture( screenPositionPixels, occlusionMap ); // restore graphics var uniforms = material1b.uniforms; uniforms[ "scale" ].value = scale; uniforms[ "screenPosition" ].value = positionScreen; renderer.renderBufferDirect( camera, null, geometry, material1b, mesh1, null ); // render elements var vecX = - positionScreen.x * 2; var vecY = - positionScreen.y * 2; for ( var i = 0, l = elements.length; i < l; i ++ ) { var element = elements[ i ]; var uniforms = material2.uniforms; uniforms[ "color" ].value.copy( element.color ); uniforms[ "map" ].value = element.texture; uniforms[ "screenPosition" ].value.x = positionScreen.x + vecX * element.distance; uniforms[ "screenPosition" ].value.y = positionScreen.y + vecY * element.distance; var size = element.size / viewport.w; var invAspect = viewport.w / viewport.z; uniforms[ "scale" ].value.set( size * invAspect, size ); material2.uniformsNeedUpdate = true; renderer.renderBufferDirect( camera, null, geometry, material2, mesh2, null ); } } }; this.dispose = function () { material1a.dispose(); material1b.dispose(); material2.dispose(); tempMap.dispose(); occlusionMap.dispose(); for ( var i = 0, l = elements.length; i < l; i ++ ) { elements[ i ].texture.dispose(); } }; }; Lensflare.prototype = Object.create( Mesh.prototype ); Lensflare.prototype.constructor = Lensflare; Lensflare.prototype.isLensflare = true; // var LensflareElement = function ( texture, size, distance, color ) { this.texture = texture; this.size = size || 1; this.distance = distance || 0; this.color = color || new Color( 0xffffff ); }; LensflareElement.Shader = { uniforms: { 'map': { value: null }, 'occlusionMap': { value: null }, 'color': { value: null }, 'scale': { value: null }, 'screenPosition': { value: null } }, vertexShader: [ 'precision highp float;', 'uniform vec3 screenPosition;', 'uniform vec2 scale;', 'uniform sampler2D occlusionMap;', 'attribute vec3 position;', 'attribute vec2 uv;', 'varying vec2 vUV;', 'varying float vVisibility;', 'void main() {', ' vUV = uv;', ' vec2 pos = position.xy;', ' vec4 visibility = texture2D( occlusionMap, vec2( 0.1, 0.1 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.5, 0.1 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.9, 0.1 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.9, 0.9 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.1, 0.9 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.5, 0.5 ) );', ' vVisibility = visibility.r / 9.0;', ' vVisibility *= 1.0 - visibility.g / 9.0;', ' vVisibility *= visibility.b / 9.0;', ' gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );', '}' ].join( '\n' ), fragmentShader: [ 'precision highp float;', 'uniform sampler2D map;', 'uniform vec3 color;', 'varying vec2 vUV;', 'varying float vVisibility;', 'void main() {', ' vec4 texture = texture2D( map, vUV );', ' texture.a *= vVisibility;', ' gl_FragColor = texture;', ' gl_FragColor.rgb *= color;', '}' ].join( '\n' ) }; Lensflare.Geometry = ( function () { var geometry = new BufferGeometry(); var float32Array = new Float32Array( [ - 1, - 1, 0, 0, 0, 1, - 1, 0, 1, 0, 1, 1, 0, 1, 1, - 1, 1, 0, 0, 1 ] ); var interleavedBuffer = new InterleavedBuffer( float32Array, 5 ); geometry.setIndex( [ 0, 1, 2, 0, 2, 3 ] ); geometry.setAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer, 3, 0, false ) ); geometry.setAttribute( 'uv', new InterleavedBufferAttribute( interleavedBuffer, 2, 3, false ) ); return geometry; } )(); export { Lensflare, LensflareElement };