├── LICENSE ├── README.md ├── dist ├── aframe.min.js ├── post-processing.js ├── post-processing.min.js └── upd_aframe.min.js ├── img ├── 1.jpg ├── 10.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg └── index.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Akbar S. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A-Frame-Component-Postprocessing 2 | screen capture screen capture 3 | screen capture 4 | screen capture 5 | screen capture 6 | screen capture 7 | screen capture 8 | screen capture 9 | screen capture 10 | 11 | ### **Description / Rationale** 12 | This is the A-Frame component for post-processing effects, which are based on the examples provided by Three.js and other sources (see Tech Stack section for more information) and specifically adapted to web VR. The component makes use of Effect Composer and lets compose effects in the same way as it is done in Three.js. 13 | 14 | 15 | ### **Instructions** 16 | In order to use the component attach "post-processing" to a-scene. The component has the following attributes: 17 | * effect: { type: "string", default: "sketchy-pencil" } - It allows to set the effect type. One of the following effects could be set: sketchy-pencil, halftone, old-film, pixel, glitch, sobel, bloom, dot-screen, volumetric-light, afterimage, bad-tv. 18 | 19 | * halftoneParams: { type: "string", default: "shape: 1, radius: 6, rotateR: Math.PI / 12, rotateB: (Math.PI / 12) * 2, rotateG: (Math.PI / 12) * 3, scatter: 1, blending: 1, blendingMode: 1, greyscale: false, disable: false" } - The parameters for halftone effect. Accepts the following in string format and is written together: shape, radius, rotateR, rotateB, rotateG, scatter, blending, blendingMode, greyscale, disable. 20 | 21 | * oldFilmParams: { type: "string", default: "grayscale: true, nIntensity: 0.3, sIntensity: 0.3, sCount: 256" } - The parameters of old film effect. Accepts the following in string format and is written togeter: grayscale, nIntensity, sIntensity, sCount. 22 | 23 | * pixelParams: { type: "string", default: "pixelSize: 12, normalEdgeStrength: 0.35, depthEdgeStrength: 0.4" }* - The parameters of pixel effect. Accepts the following: pixelSize, normalEdgeStrength, depthEdgeStrength. 24 | 25 | * glitchParams: { type: "string", default: "goWild: false, enabled: true" } - The parameters of glitch effect. Accepts the following: goWild, enabled. 26 | 27 | * sobelParams: { type: "string", default: "enabled: true" } - The parameters of Sobel effect. Accepts only "enabled" parameter. 28 | 29 | * bloomParams: { type: "string", default: "threshold: 0, strength: 0.4, radius: 0, exposure: 1" } - The parameters of bloom effect. Accepts the following: threshold, strength, radius and exposure. 30 | 31 | * dotScreenParams: { type: "string", default: "scale: 4, angle: 90" } - The parameters of dotscreen effect. Accepts the following: scale and angle. 32 | 33 | * volumetricLightParams: { type: "string", default: "decay: 0.95, density: 0.5, exposure: 0.2, samples: 50" } - The parameters of volumetric light effect. Accepts the following: decay, density, exposure, samples. 34 | 35 | * afterimageParams: { type: "string", default: "damp: 0.8" } - The parameters of afterimage effect. Accepts only damp parameter. 36 | 37 | * badTVParams: { type: "string", default: "mute: true, show: true, distortion: 1.0, distortion2: 1.0, speed: 0.2, rollSpeed: 0" }* - The parameters of bad TV effect. Accepts the following: mute, show, distortion, distortion2, speed, rollSpeed. 38 | 39 | * Please note: The individual effects of pixel and badTV do not work properly in VR mode yet. 40 | 41 | The code below shows the sample implementation of the component: 42 | ``` 43 | 44 | 45 | A-Frame Component: Post-Processing 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ``` 63 | 64 | ### **Updates** 65 | Please note that the work on this component is still in progress. Future updates will include: 66 | * Possibility of adding custom effects. 67 | * New effects, created by Three.js community. 68 | 69 | ### **Tech Stack** 70 | The project is powered by AFrame and Three.js. The effects and corresponding examples were adapted from Three.js library as well as other sources: 71 | * Halftone, Pixelation, Glitch, Sobel, Dot Screen, Old Film, Afterimage - https://threejs.org/examples/?q=postprocessing. 72 | * Sketchy Pencil - https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/. 73 | * Volumetric light (God-rays) - https://github.com/abberg/three-volumetric-light. 74 | * Bad TV - https://github.com/felixturner/bad-tv-shader. 75 | 76 | Updated version of A-Frame (1.4.2) is used, which takes into account webXR. The updates to A-Frame and respective passes/shaders were made based on CodyJasonBennett's suggested changes to Three.js and taken from here with indivudual changes made to three.js files. The VR mode was tested with Meta Quest 2 Headset. Tests using other headsets are welcomed. 77 | 78 | A small hack allowing the support of Three.js based post-processing in A-Frame, was taken from the following source. 79 | 80 | The following shaders and passes were integrated into component and can be accessed when creating custom effects (separate attribute with custom-effect will be added in next release): 81 | * Copy Shader, Pencil Lines Material Shader, Halftone Shader, Film grain & scanlines shader, Vignette Shader, Gamma Correction Shader, Digital Glitch Shader, Luminosity Shader, Sobel Operator Shader, Luminosity High Pass Shader, Output Shader, RGB Shift Shader, Dot Screen Shader, VolumetericLightShader, Afterimage shader, BadTVShader, Static Shader. 82 | * Pass, Shader Pass, Mask Pass, Effect Composer, Render Pass, Pencil Lines Pass, Halftone Pass, Film Pass, Render Pixelated Pass, Glitch Pass, Unreal Bloom Pass, Output Pass, Clear Pass, Texture Pass, AfterImage Pass. 83 | 84 | ### **Demo** 85 | See demo of the component here: [Demo](https://post-processing.glitch.me/) 86 | -------------------------------------------------------------------------------- /dist/post-processing.min.js: -------------------------------------------------------------------------------- 1 | const CopyShader={name:"CopyShader",uniforms:{tDiffuse:{value:null},opacity:{value:1}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform float opacity;\n \n uniform sampler2D tDiffuse;\n \n varying vec2 vUv;\n \n void main() {\n \n gl_FragColor = texture2D( tDiffuse, vUv );\n gl_FragColor.a *= opacity;\n \n \n }"},BufferGeometry=THREE.BufferGeometry,Float32BufferAttribute=THREE.Float32BufferAttribute,OrthographicCamera=THREE.OrthographicCamera,Mesh=THREE.Mesh;class Pass{constructor(){this.isPass=!0,this.enabled=!0,this.needsSwap=!0,this.clear=!1,this.renderToScreen=!1}setSize(){}render(){}dispose(){}}const _camera=new OrthographicCamera(-1,1,1,-1,0,1),_geometry=new BufferGeometry;_geometry.setAttribute("position",new Float32BufferAttribute([-1,3,0,-1,-1,0,3,-1,0],3)),_geometry.setAttribute("uv",new Float32BufferAttribute([0,2,0,0,2,0],2));class FullScreenQuad{constructor(e){this._mesh=new Mesh(_geometry,e)}dispose(){this._mesh.geometry.dispose()}render(e){const t=e.xr.enabled;e.xr.enabled=!1,e.render(this._mesh,_camera),e.xr.enabled=t}get material(){return this._mesh.material}set material(e){this._mesh.material=e}}const ShaderMaterial=THREE.ShaderMaterial,UniformsUtils=THREE.UniformsUtils;class ShaderPass extends Pass{constructor(e,t){super(),this.textureID=void 0!==t?t:"tDiffuse",e instanceof ShaderMaterial?(this.uniforms=e.uniforms,this.material=e):e&&(this.uniforms=UniformsUtils.clone(e.uniforms),this.material=new ShaderMaterial({name:void 0!==e.name?e.name:"unspecified",defines:Object.assign({},e.defines),uniforms:this.uniforms,vertexShader:e.vertexShader,fragmentShader:e.fragmentShader})),this.fsQuad=new FullScreenQuad(this.material)}render(e,t,n){this.uniforms[this.textureID]&&(this.uniforms[this.textureID].value=n.texture),this.fsQuad.material=this.material,this.renderToScreen?(e.setRenderTarget(null),this.fsQuad.render(e)):(e.setRenderTarget(t),this.clear&&e.clear(e.autoClearColor,e.autoClearDepth,e.autoClearStencil),this.fsQuad.render(e))}dispose(){this.material.dispose(),this.fsQuad.dispose()}}class MaskPass extends Pass{constructor(e,t){super(),this.scene=e,this.camera=t,this.clear=!0,this.needsSwap=!1,this.inverse=!1}render(e,t,n){const r=e.getContext(),i=e.state;let s,a;i.buffers.color.setMask(!1),i.buffers.depth.setMask(!1),i.buffers.color.setLocked(!0),i.buffers.depth.setLocked(!0),this.inverse?(s=0,a=1):(s=1,a=0),i.buffers.stencil.setTest(!0),i.buffers.stencil.setOp(r.REPLACE,r.REPLACE,r.REPLACE),i.buffers.stencil.setFunc(r.ALWAYS,s,4294967295),i.buffers.stencil.setClear(a),i.buffers.stencil.setLocked(!0),e.setRenderTarget(n),this.clear&&e.clear(),e.render(this.scene,this.camera),e.setRenderTarget(t),this.clear&&e.clear(),e.render(this.scene,this.camera),i.buffers.color.setLocked(!1),i.buffers.depth.setLocked(!1),i.buffers.stencil.setLocked(!1),i.buffers.stencil.setFunc(r.EQUAL,1,4294967295),i.buffers.stencil.setOp(r.KEEP,r.KEEP,r.KEEP),i.buffers.stencil.setLocked(!0)}}class ClearMaskPass extends Pass{constructor(){super(),this.needsSwap=!1}render(e){e.state.buffers.stencil.setLocked(!1),e.state.buffers.stencil.setTest(!1)}}const Clock=THREE.Clock,HalfFloatType=THREE.HalfFloatType,Vector2=THREE.Vector2,WebGLRenderTarget=THREE.WebGLRenderTarget,size=new Vector2;class EffectComposer{constructor(e,t){this.renderer=e,this._pixelRatio=e.getPixelRatio(),void 0===t?(e.getSize(size),this._width=size.width,this._height=size.height,(t=new WebGLRenderTarget(this._width*this._pixelRatio,this._height*this._pixelRatio,{type:HalfFloatType})).texture.name="EffectComposer.rt1"):(this._width=t.width,this._height=t.height),this.renderTarget1=t,this.renderTarget2=t.clone(),this.renderTarget2.texture.name="EffectComposer.rt2",this.writeBuffer=this.renderTarget1,this.readBuffer=this.renderTarget2,this.renderToScreen=!0,this.passes=[],this.copyPass=new ShaderPass(CopyShader),this.clock=new Clock,this.onSessionStateChange=this.onSessionStateChange.bind(this),this.renderer.xr.addEventListener("sessionstart",this.onSessionStateChange),this.renderer.xr.addEventListener("sessionend",this.onSessionStateChange)}onSessionStateChange(){this.renderer.getSize(size),this._width=size.width,this._height=size.height,this._pixelRatio=this.renderer.xr.isPresenting?1:this.renderer.getPixelRatio(),this.setSize(this._width,this._height)}swapBuffers(){const e=this.readBuffer;this.readBuffer=this.writeBuffer,this.writeBuffer=e}addPass(e){this.passes.push(e),e.setSize(this._width*this._pixelRatio,this._height*this._pixelRatio)}insertPass(e,t){this.passes.splice(t,0,e),e.setSize(this._width*this._pixelRatio,this._height*this._pixelRatio)}removePass(e){const t=this.passes.indexOf(e);-1!==t&&this.passes.splice(t,1)}isLastEnabledPass(e){for(let t=e+1;t{this.material.uniforms.uTexture.value=e}))}dispose(){this.material.dispose(),this.fsQuad.dispose()}render(e,t,n){e.setRenderTarget(this.normalBuffer);this.scene.overrideMaterial;this.material.uniforms.uNormals.value=this.normalBuffer.texture,this.material.uniforms.tDiffuse.value=n.texture,this.renderToScreen?(e.setRenderTarget(null),this.fsQuad.render(e)):(e.setRenderTarget(t),this.clear&&e.clear(),this.fsQuad.render(e))}}const HalftoneShader={uniforms:{tDiffuse:{value:null},shape:{value:1},radius:{value:4},rotateR:{value:Math.PI/12*1},rotateG:{value:Math.PI/12*2},rotateB:{value:Math.PI/12*3},scatter:{value:0},width:{value:1},height:{value:1},blending:{value:1},blendingMode:{value:1},greyscale:{value:!1},disable:{value:!1}},vertexShader:"\n \n varying vec2 vUV;\n \n void main() {\n \n vUV = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n \n }",fragmentShader:"\n \n #define SQRT2_MINUS_ONE 0.41421356\n #define SQRT2_HALF_MINUS_ONE 0.20710678\n #define PI2 6.28318531\n #define SHAPE_DOT 1\n #define SHAPE_ELLIPSE 2\n #define SHAPE_LINE 3\n #define SHAPE_SQUARE 4\n #define BLENDING_LINEAR 1\n #define BLENDING_MULTIPLY 2\n #define BLENDING_ADD 3\n #define BLENDING_LIGHTER 4\n #define BLENDING_DARKER 5\n uniform sampler2D tDiffuse;\n uniform float radius;\n uniform float rotateR;\n uniform float rotateG;\n uniform float rotateB;\n uniform float scatter;\n uniform float width;\n uniform float height;\n uniform int shape;\n uniform bool disable;\n uniform float blending;\n uniform int blendingMode;\n varying vec2 vUV;\n uniform bool greyscale;\n const int samples = 8;\n \n float blend( float a, float b, float t ) {\n \n // linear blend\n return a * ( 1.0 - t ) + b * t;\n \n }\n \n float hypot( float x, float y ) {\n \n // vector magnitude\n return sqrt( x * x + y * y );\n \n }\n \n float rand( vec2 seed ){\n \n // get pseudo-random number\n return fract( sin( dot( seed.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );\n \n }\n \n float distanceToDotRadius( float channel, vec2 coord, vec2 normal, vec2 p, float angle, float rad_max ) {\n \n // apply shape-specific transforms\n float dist = hypot( coord.x - p.x, coord.y - p.y );\n float rad = channel;\n \n if ( shape == SHAPE_DOT ) {\n \n rad = pow( abs( rad ), 1.125 ) * rad_max;\n \n } else if ( shape == SHAPE_ELLIPSE ) {\n \n rad = pow( abs( rad ), 1.125 ) * rad_max;\n \n if ( dist != 0.0 ) {\n float dot_p = abs( ( p.x - coord.x ) / dist * normal.x + ( p.y - coord.y ) / dist * normal.y );\n dist = ( dist * ( 1.0 - SQRT2_HALF_MINUS_ONE ) ) + dot_p * dist * SQRT2_MINUS_ONE;\n }\n \n } else if ( shape == SHAPE_LINE ) {\n \n rad = pow( abs( rad ), 1.5) * rad_max;\n float dot_p = ( p.x - coord.x ) * normal.x + ( p.y - coord.y ) * normal.y;\n dist = hypot( normal.x * dot_p, normal.y * dot_p );\n \n } else if ( shape == SHAPE_SQUARE ) {\n \n float theta = atan( p.y - coord.y, p.x - coord.x ) - angle;\n float sin_t = abs( sin( theta ) );\n float cos_t = abs( cos( theta ) );\n rad = pow( abs( rad ), 1.4 );\n rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );\n \n }\n \n return rad - dist;\n \n }\n \n struct Cell {\n \n // grid sample positions\n vec2 normal;\n vec2 p1;\n vec2 p2;\n vec2 p3;\n vec2 p4;\n float samp2;\n float samp1;\n float samp3;\n float samp4;\n \n };\n \n vec4 getSample( vec2 point ) {\n \n // multi-sampled point\n vec4 tex = texture2D( tDiffuse, vec2( point.x / width, point.y / height ) );\n float base = rand( vec2( floor( point.x ), floor( point.y ) ) ) * PI2;\n float step = PI2 / float( samples );\n float dist = radius * 0.66;\n \n for ( int i = 0; i < samples; ++i ) {\n \n float r = base + step * float( i );\n vec2 coord = point + vec2( cos( r ) * dist, sin( r ) * dist );\n tex += texture2D( tDiffuse, vec2( coord.x / width, coord.y / height ) );\n \n }\n \n tex /= float( samples ) + 1.0;\n return tex;\n \n }\n \n float getDotColour( Cell c, vec2 p, int channel, float angle, float aa ) {\n \n // get colour for given point\n float dist_c_1, dist_c_2, dist_c_3, dist_c_4, res;\n \n if ( channel == 0 ) {\n \n c.samp1 = getSample( c.p1 ).r;\n c.samp2 = getSample( c.p2 ).r;\n c.samp3 = getSample( c.p3 ).r;\n c.samp4 = getSample( c.p4 ).r;\n \n } else if (channel == 1) {\n \n c.samp1 = getSample( c.p1 ).g;\n c.samp2 = getSample( c.p2 ).g;\n c.samp3 = getSample( c.p3 ).g;\n c.samp4 = getSample( c.p4 ).g;\n \n } else {\n \n c.samp1 = getSample( c.p1 ).b;\n c.samp3 = getSample( c.p3 ).b;\n c.samp2 = getSample( c.p2 ).b;\n c.samp4 = getSample( c.p4 ).b;\n \n }\n \n dist_c_1 = distanceToDotRadius( c.samp1, c.p1, c.normal, p, angle, radius );\n dist_c_2 = distanceToDotRadius( c.samp2, c.p2, c.normal, p, angle, radius );\n dist_c_3 = distanceToDotRadius( c.samp3, c.p3, c.normal, p, angle, radius );\n dist_c_4 = distanceToDotRadius( c.samp4, c.p4, c.normal, p, angle, radius );\n res = ( dist_c_1 > 0.0 ) ? clamp( dist_c_1 / aa, 0.0, 1.0 ) : 0.0;\n res += ( dist_c_2 > 0.0 ) ? clamp( dist_c_2 / aa, 0.0, 1.0 ) : 0.0;\n res += ( dist_c_3 > 0.0 ) ? clamp( dist_c_3 / aa, 0.0, 1.0 ) : 0.0;\n res += ( dist_c_4 > 0.0 ) ? clamp( dist_c_4 / aa, 0.0, 1.0 ) : 0.0;\n res = clamp( res, 0.0, 1.0 );\n \n return res;\n \n }\n \n Cell getReferenceCell( vec2 p, vec2 origin, float grid_angle, float step ) {\n \n // get containing cell\n Cell c;\n \n // calc grid\n vec2 n = vec2( cos( grid_angle ), sin( grid_angle ) );\n float threshold = step * 0.5;\n float dot_normal = n.x * ( p.x - origin.x ) + n.y * ( p.y - origin.y );\n float dot_line = -n.y * ( p.x - origin.x ) + n.x * ( p.y - origin.y );\n vec2 offset = vec2( n.x * dot_normal, n.y * dot_normal );\n float offset_normal = mod( hypot( offset.x, offset.y ), step );\n float normal_dir = ( dot_normal < 0.0 ) ? 1.0 : -1.0;\n float normal_scale = ( ( offset_normal < threshold ) ? -offset_normal : step - offset_normal ) * normal_dir;\n float offset_line = mod( hypot( ( p.x - offset.x ) - origin.x, ( p.y - offset.y ) - origin.y ), step );\n float line_dir = ( dot_line < 0.0 ) ? 1.0 : -1.0;\n float line_scale = ( ( offset_line < threshold ) ? -offset_line : step - offset_line ) * line_dir;\n \n // get closest corner\n c.normal = n;\n c.p1.x = p.x - n.x * normal_scale + n.y * line_scale;\n c.p1.y = p.y - n.y * normal_scale - n.x * line_scale;\n \n // scatter\n if ( scatter != 0.0 ) {\n \n float off_mag = scatter * threshold * 0.5;\n float off_angle = rand( vec2( floor( c.p1.x ), floor( c.p1.y ) ) ) * PI2;\n c.p1.x += cos( off_angle ) * off_mag;\n c.p1.y += sin( off_angle ) * off_mag;\n \n }\n \n // find corners\n float normal_step = normal_dir * ( ( offset_normal < threshold ) ? step : -step );\n float line_step = line_dir * ( ( offset_line < threshold ) ? step : -step );\n c.p2.x = c.p1.x - n.x * normal_step;\n c.p2.y = c.p1.y - n.y * normal_step;\n c.p3.x = c.p1.x + n.y * line_step;\n c.p3.y = c.p1.y - n.x * line_step;\n c.p4.x = c.p1.x - n.x * normal_step + n.y * line_step;\n c.p4.y = c.p1.y - n.y * normal_step - n.x * line_step;\n \n return c;\n \n }\n \n float blendColour( float a, float b, float t ) {\n \n // blend colours\n if ( blendingMode == BLENDING_LINEAR ) {\n return blend( a, b, 1.0 - t );\n } else if ( blendingMode == BLENDING_ADD ) {\n return blend( a, min( 1.0, a + b ), t );\n } else if ( blendingMode == BLENDING_MULTIPLY ) {\n return blend( a, max( 0.0, a * b ), t );\n } else if ( blendingMode == BLENDING_LIGHTER ) {\n return blend( a, max( a, b ), t );\n } else if ( blendingMode == BLENDING_DARKER ) {\n return blend( a, min( a, b ), t );\n } else {\n return blend( a, b, 1.0 - t );\n }\n \n }\n \n void main() {\n \n if ( ! disable ) {\n \n // setup\n vec2 p = vec2( vUV.x * width, vUV.y * height );\n vec2 origin = vec2( 0, 0 );\n float aa = ( radius < 2.5 ) ? radius * 0.5 : 1.25;\n \n // get channel samples\n Cell cell_r = getReferenceCell( p, origin, rotateR, radius );\n Cell cell_g = getReferenceCell( p, origin, rotateG, radius );\n Cell cell_b = getReferenceCell( p, origin, rotateB, radius );\n float r = getDotColour( cell_r, p, 0, rotateR, aa );\n float g = getDotColour( cell_g, p, 1, rotateG, aa );\n float b = getDotColour( cell_b, p, 2, rotateB, aa );\n \n // blend with original\n vec4 colour = texture2D( tDiffuse, vUV );\n r = blendColour( r, colour.r, blending );\n g = blendColour( g, colour.g, blending );\n b = blendColour( b, colour.b, blending );\n \n if ( greyscale ) {\n r = g = b = (r + b + g) / 3.0;\n }\n \n gl_FragColor = vec4( r, g, b, 1.0 );\n \n } else {\n \n gl_FragColor = texture2D( tDiffuse, vUV );\n \n }\n \n }"};class HalftonePass extends Pass{constructor(e,t,n){super(),this.uniforms=UniformsUtils.clone(HalftoneShader.uniforms),this.material=new ShaderMaterial({uniforms:this.uniforms,fragmentShader:HalftoneShader.fragmentShader,vertexShader:HalftoneShader.vertexShader}),this.uniforms.width.value=e,this.uniforms.height.value=t;for(const e in n)n.hasOwnProperty(e)&&this.uniforms.hasOwnProperty(e)&&(this.uniforms[e].value=n[e]);this.fsQuad=new FullScreenQuad(this.material)}render(e,t,n){this.material.uniforms.tDiffuse.value=n.texture,this.renderToScreen?(e.setRenderTarget(null),this.fsQuad.render(e)):(e.setRenderTarget(t),this.clear&&e.clear(),this.fsQuad.render(e))}setSize(e,t){this.uniforms.width.value=e,this.uniforms.height.value=t}dispose(){this.material.dispose(),this.fsQuad.dispose()}}const FilmShader={name:"FilmShader",uniforms:{tDiffuse:{value:null},time:{value:0},nIntensity:{value:.5},sIntensity:{value:.05},sCount:{value:4096},grayscale:{value:1}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n #include \n \n // control parameter\n uniform float time;\n \n uniform bool grayscale;\n \n // noise effect intensity value (0 = no effect, 1 = full effect)\n uniform float nIntensity;\n \n // scanlines effect intensity value (0 = no effect, 1 = full effect)\n uniform float sIntensity;\n \n // scanlines effect count value (0 = no effect, 4096 = full effect)\n uniform float sCount;\n \n uniform sampler2D tDiffuse;\n \n varying vec2 vUv;\n \n void main() {\n \n // sample the source\n vec4 cTextureScreen = texture2D( tDiffuse, vUv );\n \n // make some noise\n float dx = rand( vUv + time );\n \n // add noise\n vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );\n \n // get us a sine and cosine\n vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );\n \n // add scanlines\n cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;\n \n // interpolate between source and result by intensity\n cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );\n \n // convert to grayscale if desired\n if( grayscale ) {\n \n cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );\n \n }\n \n gl_FragColor = vec4( cResult, cTextureScreen.a );\n \n }"},VignetteShader={name:"VignetteShader",uniforms:{tDiffuse:{value:null},offset:{value:1},darkness:{value:1}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform float offset;\n uniform float darkness;\n \n uniform sampler2D tDiffuse;\n \n varying vec2 vUv;\n \n void main() {\n // Eskil's vignette\n vec4 texel = texture2D( tDiffuse, vUv );\n vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );\n gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );\n \n }"};class FilmPass extends Pass{constructor(e,t,n,r){super();const i=FilmShader;this.uniforms=UniformsUtils.clone(i.uniforms),this.material=new ShaderMaterial({name:i.name,uniforms:this.uniforms,vertexShader:i.vertexShader,fragmentShader:i.fragmentShader}),void 0!==r&&(this.uniforms.grayscale.value=r),void 0!==e&&(this.uniforms.nIntensity.value=e),void 0!==t&&(this.uniforms.sIntensity.value=t),void 0!==n&&(this.uniforms.sCount.value=n),this.fsQuad=new FullScreenQuad(this.material)}render(e,t,n,r){this.uniforms.tDiffuse.value=n.texture,this.uniforms.time.value+=r,this.renderToScreen?(e.setRenderTarget(null),this.fsQuad.render(e)):(e.setRenderTarget(t),this.clear&&e.clear(),this.fsQuad.render(e))}dispose(){this.material.dispose(),this.fsQuad.dispose()}}const MeshNormalMaterial=THREE.MeshNormalMaterial,Vector4=THREE.Vector4,DepthTexture=THREE.DepthTexture,NearestFilter=THREE.NearestFilter;class RenderPixelatedPass extends Pass{constructor(e,t,n,r={}){super(),this.pixelSize=e,this.resolution=new Vector2,this.renderResolution=new Vector2,this.pixelatedMaterial=this.createPixelatedMaterial(),this.normalMaterial=new MeshNormalMaterial,this.fsQuad=new FullScreenQuad(this.pixelatedMaterial),this.scene=t,this.camera=n,this.normalEdgeStrength=r.normalEdgeStrength||.3,this.depthEdgeStrength=r.depthEdgeStrength||.4,this.beautyRenderTarget=new WebGLRenderTarget,this.beautyRenderTarget.texture.minFilter=NearestFilter,this.beautyRenderTarget.texture.magFilter=NearestFilter,this.beautyRenderTarget.texture.type=HalfFloatType,this.beautyRenderTarget.depthTexture=new DepthTexture,this.normalRenderTarget=new WebGLRenderTarget,this.normalRenderTarget.texture.minFilter=NearestFilter,this.normalRenderTarget.texture.magFilter=NearestFilter,this.normalRenderTarget.texture.type=HalfFloatType}dispose(){this.beautyRenderTarget.dispose(),this.normalRenderTarget.dispose(),this.pixelatedMaterial.dispose(),this.normalMaterial.dispose(),this.fsQuad.dispose()}setSize(e,t){this.resolution.set(e,t),this.renderResolution.set(e/this.pixelSize|0,t/this.pixelSize|0);const{x:n,y:r}=this.renderResolution;this.beautyRenderTarget.setSize(n,r),this.normalRenderTarget.setSize(n,r),this.fsQuad.material.uniforms.resolution.value.set(n,r,1/n,1/r)}setPixelSize(e){this.pixelSize=e,this.setSize(this.resolution.x,this.resolution.y)}render(e,t){const n=this.fsQuad.material.uniforms;n.normalEdgeStrength.value=this.normalEdgeStrength,n.depthEdgeStrength.value=this.depthEdgeStrength,e.setRenderTarget(this.beautyRenderTarget),e.render(this.scene,this.camera);const r=this.scene.overrideMaterial;e.setRenderTarget(this.normalRenderTarget),this.scene.overrideMaterial=this.normalMaterial,e.render(this.scene,this.camera),this.scene.overrideMaterial=r,n.tDiffuse.value=this.beautyRenderTarget.texture,n.tDepth.value=this.beautyRenderTarget.depthTexture,n.tNormal.value=this.normalRenderTarget.texture,this.renderToScreen?e.setRenderTarget(null):(e.setRenderTarget(t),this.clear&&e.clear()),this.fsQuad.render(e)}createPixelatedMaterial(){return new ShaderMaterial({uniforms:{tDiffuse:{value:null},tDepth:{value:null},tNormal:{value:null},resolution:{value:new Vector4(this.renderResolution.x,this.renderResolution.y,1/this.renderResolution.x,1/this.renderResolution.y)},normalEdgeStrength:{value:0},depthEdgeStrength:{value:0}},vertexShader:"\n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }\n ",fragmentShader:"\n uniform sampler2D tDiffuse;\n uniform sampler2D tDepth;\n uniform sampler2D tNormal;\n uniform vec4 resolution;\n uniform float normalEdgeStrength;\n uniform float depthEdgeStrength;\n varying vec2 vUv;\n \n float getDepth(int x, int y) {\n \n return texture2D( tDepth, vUv + vec2(x, y) * resolution.zw ).r;\n \n }\n \n vec3 getNormal(int x, int y) {\n \n return texture2D( tNormal, vUv + vec2(x, y) * resolution.zw ).rgb * 2.0 - 1.0;\n \n }\n \n float depthEdgeIndicator(float depth, vec3 normal) {\n \n float diff = 0.0;\n diff += clamp(getDepth(1, 0) - depth, 0.0, 1.0);\n diff += clamp(getDepth(-1, 0) - depth, 0.0, 1.0);\n diff += clamp(getDepth(0, 1) - depth, 0.0, 1.0);\n diff += clamp(getDepth(0, -1) - depth, 0.0, 1.0);\n return floor(smoothstep(0.01, 0.02, diff) * 2.) / 2.;\n \n }\n \n float neighborNormalEdgeIndicator(int x, int y, float depth, vec3 normal) {\n \n float depthDiff = getDepth(x, y) - depth;\n vec3 neighborNormal = getNormal(x, y);\n \n // Edge pixels should yield to faces who's normals are closer to the bias normal.\n vec3 normalEdgeBias = vec3(1., 1., 1.); // This should probably be a parameter.\n float normalDiff = dot(normal - neighborNormal, normalEdgeBias);\n float normalIndicator = clamp(smoothstep(-.01, .01, normalDiff), 0.0, 1.0);\n \n // Only the shallower pixel should detect the normal edge.\n float depthIndicator = clamp(sign(depthDiff * .25 + .0025), 0.0, 1.0);\n \n return (1.0 - dot(normal, neighborNormal)) * depthIndicator * normalIndicator;\n \n }\n \n float normalEdgeIndicator(float depth, vec3 normal) {\n \n float indicator = 0.0;\n \n indicator += neighborNormalEdgeIndicator(0, -1, depth, normal);\n indicator += neighborNormalEdgeIndicator(0, 1, depth, normal);\n indicator += neighborNormalEdgeIndicator(-1, 0, depth, normal);\n indicator += neighborNormalEdgeIndicator(1, 0, depth, normal);\n \n return step(0.1, indicator);\n \n }\n \n void main() {\n \n vec4 texel = texture2D( tDiffuse, vUv );\n \n float depth = 0.0;\n vec3 normal = vec3(0.0);\n \n if (depthEdgeStrength > 0.0 || normalEdgeStrength > 0.0) {\n \n depth = getDepth(0, 0);\n normal = getNormal(0, 0);\n \n }\n \n float dei = 0.0;\n if (depthEdgeStrength > 0.0)\n dei = depthEdgeIndicator(depth, normal);\n \n float nei = 0.0;\n if (normalEdgeStrength > 0.0)\n nei = normalEdgeIndicator(depth, normal);\n \n float Strength = dei > 0.0 ? (1.0 - depthEdgeStrength * dei) : (1.0 + normalEdgeStrength * nei);\n \n gl_FragColor = texel * Strength;\n \n }\n "})}}const GammaCorrectionShader={name:"GammaCorrectionShader",uniforms:{tDiffuse:{value:null}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform sampler2D tDiffuse;\n \n varying vec2 vUv;\n \n void main() {\n \n vec4 tex = texture2D( tDiffuse, vUv );\n \n gl_FragColor = LinearTosRGB( tex );\n \n }"},DigitalGlitch={uniforms:{tDiffuse:{value:null},tDisp:{value:null},byp:{value:0},amount:{value:.08},angle:{value:.02},seed:{value:.02},seed_x:{value:.02},seed_y:{value:.02},distortion_x:{value:.5},distortion_y:{value:.6},col_s:{value:.05}},vertexShader:"\n \n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }",fragmentShader:"\n \n uniform int byp; //should we apply the glitch ?\n \n uniform sampler2D tDiffuse;\n uniform sampler2D tDisp;\n \n uniform float amount;\n uniform float angle;\n uniform float seed;\n uniform float seed_x;\n uniform float seed_y;\n uniform float distortion_x;\n uniform float distortion_y;\n uniform float col_s;\n \n varying vec2 vUv;\n \n \n float rand(vec2 co){\n return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\n }\n \n void main() {\n if(byp<1) {\n vec2 p = vUv;\n float xs = floor(gl_FragCoord.x / 0.5);\n float ys = floor(gl_FragCoord.y / 0.5);\n //based on staffantans glitch shader for unity https://github.com/staffantan/unityglitch\n float disp = texture2D(tDisp, p*seed*seed).r;\n if(p.ydistortion_x-col_s*seed) {\n if(seed_x>0.){\n p.y = 1. - (p.y + distortion_y);\n }\n else {\n p.y = distortion_y;\n }\n }\n if(p.xdistortion_y-col_s*seed) {\n if(seed_y>0.){\n p.x=distortion_x;\n }\n else {\n p.x = 1. - (p.x + distortion_x);\n }\n }\n p.x+=disp*seed_x*(seed/5.);\n p.y+=disp*seed_y*(seed/5.);\n //base from RGB shift shader\n vec2 offset = amount * vec2( cos(angle), sin(angle));\n vec4 cr = texture2D(tDiffuse, p + offset);\n vec4 cga = texture2D(tDiffuse, p);\n vec4 cb = texture2D(tDiffuse, p - offset);\n gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);\n //add noise\n vec4 snow = 200.*amount*vec4(rand(vec2(xs * seed,ys * seed*50.))*0.2);\n gl_FragColor = gl_FragColor+ snow;\n }\n else {\n gl_FragColor=texture2D (tDiffuse, vUv);\n }\n }"},DataTexture=THREE.DataTexture,FloatType=THREE.FloatType,MathUtils=THREE.MathUtils,RedFormat=THREE.RedFormat,LuminanceFormat=THREE.LuminanceFormat;class GlitchPass extends Pass{constructor(e=64){super();const t=DigitalGlitch;this.uniforms=UniformsUtils.clone(t.uniforms),this.heightMap=this.generateHeightmap(e),this.uniforms.tDisp.value=this.heightMap,this.material=new ShaderMaterial({uniforms:this.uniforms,vertexShader:t.vertexShader,fragmentShader:t.fragmentShader}),this.fsQuad=new FullScreenQuad(this.material),this.goWild=!1,this.curF=0,this.generateTrigger()}render(e,t,n){!1===e.capabilities.isWebGL2&&(this.uniforms.tDisp.value.format=LuminanceFormat),this.uniforms.tDiffuse.value=n.texture,this.uniforms.seed.value=Math.random(),this.uniforms.byp.value=0,this.curF%this.randX==0||1==this.goWild?(this.uniforms.amount.value=Math.random()/30,this.uniforms.angle.value=MathUtils.randFloat(-Math.PI,Math.PI),this.uniforms.seed_x.value=MathUtils.randFloat(-1,1),this.uniforms.seed_y.value=MathUtils.randFloat(-1,1),this.uniforms.distortion_x.value=MathUtils.randFloat(0,1),this.uniforms.distortion_y.value=MathUtils.randFloat(0,1),this.curF=0,this.generateTrigger()):this.curF%this.randX\n \n uniform sampler2D tDiffuse;\n \n varying vec2 vUv;\n \n void main() {\n \n vec4 texel = texture2D( tDiffuse, vUv );\n \n float l = luminance( texel.rgb );\n \n gl_FragColor = vec4( l, l, l, texel.w );\n \n }"},SobelOperatorShader={uniforms:{tDiffuse:{value:null},resolution:{value:new Vector2}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform sampler2D tDiffuse;\n uniform vec2 resolution;\n varying vec2 vUv;\n \n void main() {\n \n vec2 texel = vec2( 1.0 / resolution.x, 1.0 / resolution.y );\n \n // kernel definition (in glsl matrices are filled in column-major order)\n \n const mat3 Gx = mat3( -1, -2, -1, 0, 0, 0, 1, 2, 1 ); // x direction kernel\n const mat3 Gy = mat3( -1, 0, 1, -2, 0, 2, -1, 0, 1 ); // y direction kernel\n \n // fetch the 3x3 neighbourhood of a fragment\n \n // first column\n \n float tx0y0 = texture2D( tDiffuse, vUv + texel * vec2( -1, -1 ) ).r;\n float tx0y1 = texture2D( tDiffuse, vUv + texel * vec2( -1, 0 ) ).r;\n float tx0y2 = texture2D( tDiffuse, vUv + texel * vec2( -1, 1 ) ).r;\n \n // second column\n \n float tx1y0 = texture2D( tDiffuse, vUv + texel * vec2( 0, -1 ) ).r;\n float tx1y1 = texture2D( tDiffuse, vUv + texel * vec2( 0, 0 ) ).r;\n float tx1y2 = texture2D( tDiffuse, vUv + texel * vec2( 0, 1 ) ).r;\n \n // third column\n \n float tx2y0 = texture2D( tDiffuse, vUv + texel * vec2( 1, -1 ) ).r;\n float tx2y1 = texture2D( tDiffuse, vUv + texel * vec2( 1, 0 ) ).r;\n float tx2y2 = texture2D( tDiffuse, vUv + texel * vec2( 1, 1 ) ).r;\n \n // gradient value in x direction\n \n float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 +\n Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 +\n Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2;\n \n // gradient value in y direction\n \n float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 +\n Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +\n Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;\n \n // magnitute of the total gradient\n \n float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );\n \n gl_FragColor = vec4( vec3( G ), 1 );\n \n }"},LuminosityHighPassShader={shaderID:"luminosityHighPass",uniforms:{tDiffuse:{value:null},luminosityThreshold:{value:1},smoothWidth:{value:1},defaultColor:{value:new Color(0)},defaultOpacity:{value:0}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform sampler2D tDiffuse;\n uniform vec3 defaultColor;\n uniform float defaultOpacity;\n uniform float luminosityThreshold;\n uniform float smoothWidth;\n \n varying vec2 vUv;\n \n void main() {\n \n vec4 texel = texture2D( tDiffuse, vUv );\n \n vec3 luma = vec3( 0.299, 0.587, 0.114 );\n \n float v = dot( texel.xyz, luma );\n \n vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );\n \n float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );\n \n gl_FragColor = mix( outputColor, texel, alpha );\n \n }"},AdditiveBlending=THREE.AdditiveBlending,MeshBasicMaterial=THREE.MeshBasicMaterial,Vector3=THREE.Vector3;class UnrealBloomPass extends Pass{constructor(e,t,n,r){super(),this.strength=void 0!==t?t:1,this.radius=n,this.threshold=r,this.resolution=void 0!==e?new Vector2(e.x,e.y):new Vector2(256,256),this.clearColor=new Color(0,0,0),this.renderTargetsHorizontal=[],this.renderTargetsVertical=[],this.nMips=5;let i=Math.round(this.resolution.x/2),s=Math.round(this.resolution.y/2);this.renderTargetBright=new WebGLRenderTarget(i,s,{type:HalfFloatType}),this.renderTargetBright.texture.name="UnrealBloomPass.bright",this.renderTargetBright.texture.generateMipmaps=!1;for(let e=0;e\n varying vec2 vUv;\n uniform sampler2D colorTexture;\n uniform vec2 texSize;\n uniform vec2 direction;\n \n float gaussianPdf(in float x, in float sigma) {\n return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;\n }\n void main() {\n vec2 invSize = 1.0 / texSize;\n float fSigma = float(SIGMA);\n float weightSum = gaussianPdf(0.0, fSigma);\n vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;\n for( int i = 1; i < KERNEL_RADIUS; i ++ ) {\n float x = float(i);\n float w = gaussianPdf(x, fSigma);\n vec2 uvOffset = direction * invSize * x;\n vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;\n vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;\n diffuseSum += (sample1 + sample2) * w;\n weightSum += 2.0 * w;\n }\n gl_FragColor = vec4(diffuseSum/weightSum, 1.0);\n }"})}getCompositeMaterial(e){return new ShaderMaterial({defines:{NUM_MIPS:e},uniforms:{blurTexture1:{value:null},blurTexture2:{value:null},blurTexture3:{value:null},blurTexture4:{value:null},blurTexture5:{value:null},bloomStrength:{value:1},bloomFactors:{value:null},bloomTintColors:{value:null},bloomRadius:{value:0}},vertexShader:"varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }",fragmentShader:"varying vec2 vUv;\n uniform sampler2D blurTexture1;\n uniform sampler2D blurTexture2;\n uniform sampler2D blurTexture3;\n uniform sampler2D blurTexture4;\n uniform sampler2D blurTexture5;\n uniform float bloomStrength;\n uniform float bloomRadius;\n uniform float bloomFactors[NUM_MIPS];\n uniform vec3 bloomTintColors[NUM_MIPS];\n \n float lerpBloomFactor(const in float factor) {\n float mirrorFactor = 1.2 - factor;\n return mix(factor, mirrorFactor, bloomRadius);\n }\n \n void main() {\n gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +\n lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +\n lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +\n lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +\n lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );\n }"})}}UnrealBloomPass.BlurDirectionX=new Vector2(1,0),UnrealBloomPass.BlurDirectionY=new Vector2(0,1);const OutputShader={uniforms:{tDiffuse:{value:null},toneMappingExposure:{value:1}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform sampler2D tDiffuse;\n \n #include \n \n varying vec2 vUv;\n \n void main() {\n \n gl_FragColor = texture2D( tDiffuse, vUv );\n \n // tone mapping\n \n #ifdef LINEAR_TONE_MAPPING\n \n gl_FragColor.rgb = LinearToneMapping( gl_FragColor.rgb );\n \n #elif defined( REINHARD_TONE_MAPPING )\n \n gl_FragColor.rgb = ReinhardToneMapping( gl_FragColor.rgb );\n \n #elif defined( CINEON_TONE_MAPPING )\n \n gl_FragColor.rgb = OptimizedCineonToneMapping( gl_FragColor.rgb );\n \n #elif defined( ACES_FILMIC_TONE_MAPPING )\n \n gl_FragColor.rgb = ACESFilmicToneMapping( gl_FragColor.rgb );\n \n #endif\n \n // color space\n \n gl_FragColor = LinearTosRGB( gl_FragColor );\n \n }"},NoToneMapping=THREE.NoToneMapping,LinearToneMapping=THREE.LinearToneMapping,ReinhardToneMapping=THREE.ReinhardToneMapping,CineonToneMapping=THREE.CineonToneMapping,ACESFilmicToneMapping=THREE.ACESFilmicToneMapping;class OutputPass extends Pass{constructor(e=NoToneMapping,t=1){super(),this.toneMapping=e,this.toneMappingExposure=t;const n=OutputShader;this.uniforms=UniformsUtils.clone(n.uniforms),this.material=new ShaderMaterial({uniforms:this.uniforms,vertexShader:n.vertexShader,fragmentShader:n.fragmentShader}),e===LinearToneMapping?this.material.defines.LINEAR_TONE_MAPPING="":e===ReinhardToneMapping?this.material.defines.REINHARD_TONE_MAPPING="":e===CineonToneMapping?this.material.defines.CINEON_TONE_MAPPING="":e===ACESFilmicToneMapping&&(this.material.defines.ACES_FILMIC_TONE_MAPPING=""),this.fsQuad=new FullScreenQuad(this.material)}render(e,t,n){this.uniforms.tDiffuse.value=n.texture,this.uniforms.toneMappingExposure.value=this.toneMappingExposure,!0===this.renderToScreen?(e.setRenderTarget(null),this.fsQuad.render(e)):(e.setRenderTarget(t),this.clear&&e.clear(e.autoClearColor,e.autoClearDepth,e.autoClearStencil),this.fsQuad.render(e))}dispose(){this.material.dispose(),this.fsQuad.dispose()}}const RGBShiftShader={name:"RGBShiftShader",uniforms:{tDiffuse:{value:null},amount:{value:.005},angle:{value:0}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform sampler2D tDiffuse;\n uniform float amount;\n uniform float angle;\n \n varying vec2 vUv;\n \n void main() {\n \n vec2 offset = amount * vec2( cos(angle), sin(angle));\n vec4 cr = texture2D(tDiffuse, vUv + offset);\n vec4 cga = texture2D(tDiffuse, vUv);\n vec4 cb = texture2D(tDiffuse, vUv - offset);\n gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);\n \n }"},DotScreenShader={name:"DotScreenShader",uniforms:{tDiffuse:{value:null},tSize:{value:new Vector2(256,256)},center:{value:new Vector2(.5,.5)},angle:{value:1.57},scale:{value:1}},vertexShader:"\n \n varying vec2 vUv;\n \n void main() {\n \n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n \n }",fragmentShader:"\n \n uniform vec2 center;\n uniform float angle;\n uniform float scale;\n uniform vec2 tSize;\n \n uniform sampler2D tDiffuse;\n \n varying vec2 vUv;\n \n float pattern() {\n \n float s = sin( angle ), c = cos( angle );\n \n vec2 tex = vUv * tSize - center;\n vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;\n \n return ( sin( point.x ) * sin( point.y ) ) * 4.0;\n \n }\n \n void main() {\n \n vec4 color = texture2D( tDiffuse, vUv );\n \n float average = ( color.r + color.g + color.b ) / 3.0;\n \n gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );\n \n }"};class ClearPass extends Pass{constructor(e,t){super(),this.needsSwap=!1,this.clearColor=void 0!==e?e:0,this.clearAlpha=void 0!==t?t:0,this._oldClearColor=new Color}render(e,t,n){let r;this.clearColor&&(e.getClearColor(this._oldClearColor),r=e.getClearAlpha(),e.setClearColor(this.clearColor,this.clearAlpha)),e.setRenderTarget(this.renderToScreen?null:n),e.clear(),this.clearColor&&e.setClearColor(this._oldClearColor,r)}}class TexturePass extends Pass{constructor(e,t){super();const n=CopyShader;this.map=e,this.opacity=void 0!==t?t:1,this.uniforms=UniformsUtils.clone(n.uniforms),this.material=new ShaderMaterial({uniforms:this.uniforms,vertexShader:n.vertexShader,fragmentShader:n.fragmentShader,depthTest:!1,depthWrite:!1}),this.needsSwap=!1,this.fsQuad=new FullScreenQuad(null)}render(e,t,n){const r=e.autoClear;e.autoClear=!1,this.fsQuad.material=this.material,this.uniforms.opacity.value=this.opacity,this.uniforms.tDiffuse.value=this.map,this.material.transparent=this.opacity<1,e.setRenderTarget(this.renderToScreen?null:n),this.clear&&e.clear(),this.fsQuad.render(e),e.autoClear=r}dispose(){this.material.dispose(),this.fsQuad.dispose()}}const VolumetericLightShader={uniforms:{tDiffuse:{value:null},lightPosition:{value:new THREE.Vector2(.5,.5)},exposure:{value:.15},decay:{value:.95},density:{value:.5},weight:{value:.4},samples:{value:50}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["varying vec2 vUv;","uniform sampler2D tDiffuse;","uniform vec2 lightPosition;","uniform float exposure;","uniform float decay;","uniform float density;","uniform float weight;","uniform int samples;","const int MAX_SAMPLES = 100;","void main()","{","vec2 texCoord = vUv;","vec2 deltaTextCoord = texCoord - lightPosition;","deltaTextCoord *= 1.0 / float(samples) * density;","vec4 color = texture2D(tDiffuse, texCoord);","float illuminationDecay = 1.0;","for(int i=0; i < MAX_SAMPLES; i++)","{","if(i == samples){","break;","}","texCoord -= deltaTextCoord;","vec4 sampler = texture2D(tDiffuse, texCoord);","sampler *= illuminationDecay * weight;","color += sampler;","illuminationDecay *= decay;","}","gl_FragColor = color * exposure;","}"].join("\n")},AdditiveBlendingShader={uniforms:{tDiffuse:{value:null},tAdd:{value:null}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","uniform sampler2D tAdd;","varying vec2 vUv;","void main() {","vec4 color = texture2D( tDiffuse, vUv );","vec4 add = texture2D( tAdd, vUv );","gl_FragColor = color + add;","}"].join("\n")},PassThroughShader={uniforms:{tDiffuse:{value:null}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","varying vec2 vUv;","void main() {","gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );","}"].join("\n")},AfterimageShader={uniforms:{damp:{value:.96},tOld:{value:null},tNew:{value:null}},vertexShader:"\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }",fragmentShader:"\n uniform float damp;\n uniform sampler2D tOld;\n uniform sampler2D tNew;\n varying vec2 vUv;\n vec4 when_gt( vec4 x, float y ) {\n return max( sign( x - y ), 0.0 );\n }\n void main() {\n vec4 texelOld = texture2D( tOld, vUv );\n vec4 texelNew = texture2D( tNew, vUv );\n texelOld *= damp * when_gt( texelOld, 0.1 );\n gl_FragColor = max(texelNew, texelOld);\n }"};class AfterimagePass extends Pass{constructor(e=.96){super(),this.shader=AfterimageShader,this.uniforms=UniformsUtils.clone(this.shader.uniforms),this.uniforms.damp.value=e,this.textureComp=new WebGLRenderTarget(window.innerWidth,window.innerHeight,{magFilter:NearestFilter,type:HalfFloatType}),this.textureOld=new WebGLRenderTarget(window.innerWidth,window.innerHeight,{magFilter:NearestFilter,type:HalfFloatType}),this.compFsMaterial=new ShaderMaterial({uniforms:this.uniforms,vertexShader:this.shader.vertexShader,fragmentShader:this.shader.fragmentShader}),this.compFsQuad=new FullScreenQuad(this.compFsMaterial),this.copyFsMaterial=new MeshBasicMaterial,this.copyFsQuad=new FullScreenQuad(this.copyFsMaterial)}render(e,t,n){this.uniforms.tOld.value=this.textureOld.texture,this.uniforms.tNew.value=n.texture,e.setRenderTarget(this.textureComp),this.compFsQuad.render(e),this.copyFsQuad.material.map=this.textureComp.texture,this.renderToScreen?(e.setRenderTarget(null),this.copyFsQuad.render(e)):(e.setRenderTarget(t),this.clear&&e.clear(),this.copyFsQuad.render(e));const r=this.textureOld;this.textureOld=this.textureComp,this.textureComp=r}setSize(e,t){this.textureComp.setSize(e,t),this.textureOld.setSize(e,t)}dispose(){this.textureComp.dispose(),this.textureOld.dispose(),this.compFsMaterial.dispose(),this.copyFsMaterial.dispose(),this.compFsQuad.dispose(),this.copyFsQuad.dispose()}}const BadTVShader={uniforms:{tDiffuse:{type:"t",value:null},time:{type:"f",value:0},distortion:{type:"f",value:3},distortion2:{type:"f",value:5},speed:{type:"f",value:.2},rollSpeed:{type:"f",value:.1}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","uniform float time;","uniform float distortion;","uniform float distortion2;","uniform float speed;","uniform float rollSpeed;","varying vec2 vUv;","vec3 mod289(vec3 x) {"," return x - floor(x * (1.0 / 289.0)) * 289.0;","}","vec2 mod289(vec2 x) {"," return x - floor(x * (1.0 / 289.0)) * 289.0;","}","vec3 permute(vec3 x) {"," return mod289(((x*34.0)+1.0)*x);","}","float snoise(vec2 v)"," {"," const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0"," 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)"," -0.577350269189626, // -1.0 + 2.0 * C.x"," 0.024390243902439); // 1.0 / 41.0"," vec2 i = floor(v + dot(v, C.yy) );"," vec2 x0 = v - i + dot(i, C.xx);"," vec2 i1;"," i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);"," vec4 x12 = x0.xyxy + C.xxzz;"," x12.xy -= i1;"," i = mod289(i); // Avoid truncation effects in permutation"," vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))","\t\t+ i.x + vec3(0.0, i1.x, 1.0 ));"," vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);"," m = m*m ;"," m = m*m ;"," vec3 x = 2.0 * fract(p * C.www) - 1.0;"," vec3 h = abs(x) - 0.5;"," vec3 ox = floor(x + 0.5);"," vec3 a0 = x - ox;"," m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );"," vec3 g;"," g.x = a0.x * x0.x + h.x * x0.y;"," g.yz = a0.yz * x12.xz + h.yz * x12.yw;"," return 130.0 * dot(m, g);","}","void main() {","vec2 p = vUv;","float ty = time*speed;","float yt = p.y - ty;","float offset = snoise(vec2(yt*3.0,0.0))*0.2;","offset = offset*distortion * offset*distortion * offset;","offset += snoise(vec2(yt*50.0,0.0))*distortion2*0.001;","gl_FragColor = texture2D(tDiffuse, vec2(fract(p.x + offset),fract(p.y-time*rollSpeed) ));","}"].join("\n")},StaticShader={uniforms:{tDiffuse:{type:"t",value:null},time:{type:"f",value:0},amount:{type:"f",value:.5},size:{type:"f",value:4}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","uniform float time;","uniform float amount;","uniform float size;","varying vec2 vUv;","float rand(vec2 co){","return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);","}","void main() {","vec2 p = vUv;","vec4 color = texture2D(tDiffuse, p);","float xs = floor(gl_FragCoord.x / size);","float ys = floor(gl_FragCoord.y / size);","vec4 snow = vec4(rand(vec2(xs * time,ys * time))*amount);","gl_FragColor = color+ snow;","}"].join("\n")};AFRAME.registerComponent("post-processing",{schema:{effect:{type:"string",default:"sketchy-pencil"},halftoneParams:{type:"string",default:"shape: 1, radius: 6, rotateR: Math.PI / 12, rotateB: (Math.PI / 12) * 2, rotateG: (Math.PI / 12) * 3, scatter: 1, blending: 1, blendingMode: 1, greyscale: false, disable: false"},oldFilmParams:{type:"string",default:"grayscale: true, nIntensity: 0.3, sIntensity: 0.3, sCount: 256"},pixelParams:{type:"string",default:"pixelSize: 12, normalEdgeStrength: 0.35, depthEdgeStrength: 0.4"},glitchParams:{type:"string",default:"goWild: false, enabled: true"},sobelParams:{type:"string",default:"enabled: true"},bloomParams:{type:"string",default:"threshold: 0, strength: 0.4, radius: 0, exposure: 1"},dotScreenParams:{type:"string",default:"scale: 4, angle: 90"},volumetricLightParams:{type:"string",default:"decay: 0.95, density: 0.5, exposure: 0.2, samples: 50"},afterimageParams:{type:"string",default:"damp: 0.8"},badTVParams:{type:"string",default:"mute: true, show: true, distortion: 1.0, distortion2: 1.0, speed: 0.2, rollSpeed: 0"}},init:function(){if(this.scene=this.el.object3D,this.renderer=this.el.renderer,this.camera=this.el.camera,"sketchy-pencil"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));const e=new PencilLinesPass({width:this.renderer.domElement.clientWidth,height:this.renderer.domElement.clientHeight,scene:this.scene,camera:this.camera});e.renderToScreen=!1,this.composer.addPass(e)}else if("halftone"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));const e=getParams(this.data.halftoneParams),t=new HalftonePass(window.innerWidth,window.innerHeight,e);this.composer.addPass(t)}else if("old-film"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));const e=getParams(this.data.oldFilmParams);let t=new FilmPass;t.material.uniforms.grayscale.value=e.grayscale,t.material.uniforms.nIntensity.value=e.nIntensity,t.material.uniforms.sIntensity.value=e.sIntensity,t.material.uniforms.sCount.value=e.sCount,this.composer.addPass(t);let n=VignetteShader,r=new ShaderPass(n);r.uniforms.offset.value=1.5,r.uniforms.darkness.value=.9,r.renderToScreen=!0,this.composer.addPass(r)}else if("pixel"===this.data.effect){this.composer=new EffectComposer(this.renderer);const e=getParams(this.data.pixelParams),t=new RenderPixelatedPass(e.pixelSize,this.scene,this.camera,e);this.composer.addPass(t);const n=new ShaderPass(GammaCorrectionShader);this.composer.addPass(n)}else if("glitch"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));let e=new GlitchPass;const t=getParams(this.data.glitchParams);e.goWild=t.goWild,e.enabled=t.enabled,this.composer.addPass(e);const n=new ShaderPass(GammaCorrectionShader);this.composer.addPass(n)}else if("sobel"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));let e=new ShaderPass(SobelOperatorShader);const t=getParams(this.data.sobelParams);e.enabled=t.enabled,e.uniforms.resolution.value.x=window.innerWidth*window.devicePixelRatio,e.uniforms.resolution.value.y=window.innerHeight*window.devicePixelRatio,this.composer.addPass(e)}else if("bloom"===this.data.effect){this.composer=new EffectComposer(this.renderer);const e=new RenderPass(this.scene,this.camera);this.composer.addPass(e);const t=new UnrealBloomPass(new THREE.Vector2(this.renderer.domElement.clientWidth,this.renderer.domElement.clientHeight),1.5,.4,.85),n=getParams(this.data.bloomParams);t.threshold=n.threshold,t.strength=n.strength,t.radius=n.radius,this.composer.addPass(t);const r=new OutputPass(THREE.ReinhardToneMapping);r.toneMappingExposure=n.exposure,this.composer.addPass(r)}else if("dot-screen"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));const e=new ShaderPass(DotScreenShader),t=getParams(this.data.dotScreenParams);e.uniforms.scale.value=t.scale,e.uniforms.angle.value=t.angle,this.composer.addPass(e);const n=new ShaderPass(RGBShiftShader);n.uniforms.amount.value=.0015,this.composer.addPass(n);const r=new ShaderPass(GammaCorrectionShader);this.composer.addPass(r)}else if("volumetric-light"===this.data.effect){this.DEFAULT_LAYER=0,this.OCCLUSION_LAYER=1;let e,t=new THREE.WebGLRenderTarget(.5*this.renderer.domElement.clientWidth,.5*this.renderer.domElement.clientWidth);this.occlusionComposer=new EffectComposer(this.renderer,t),this.occlusionComposer.addPass(new RenderPass(this.scene,this.camera)),e=new ShaderPass(VolumetericLightShader);const n=getParams(this.data.volumetricLightParams);e.uniforms.decay.value=n.decay,e.uniforms.density.value=n.density,e.uniforms.exposure.value=n.exposure,e.uniforms.samples.value=n.samples,this.occlusionComposer.addPass(e),this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera)),e=new ShaderPass(AdditiveBlendingShader),e.uniforms.tAdd.value=t.texture,this.composer.addPass(e),e.renderToScreen=!0,this.camera.layers.set(this.OCCLUSION_LAYER),this.renderer.setClearColor(0),this.occlusionComposer.render(),this.camera.layers.set(this.DEFAULT_LAYER),this.renderer.setClearColor(591377)}else if("afterimage"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));let e=new AfterimagePass;const t=getParams(this.data.afterimageParams);e.uniforms.damp.value=t.damp,this.composer.addPass(e);const n=new ShaderPass(GammaCorrectionShader);this.composer.addPass(n)}else if("bad-tv"===this.data.effect){this.composer=new EffectComposer(this.renderer),this.composer.addPass(new RenderPass(this.scene,this.camera));let e=0,t=new ShaderPass(BadTVShader),n=new ShaderPass(RGBShiftShader),r=new ShaderPass(FilmShader),i=new ShaderPass(StaticShader),s=new ShaderPass(CopyShader);r.uniforms.grayscale.value=0;const a=getParams(this.data.badTVParams);let o={show:!0,amount:.5,size:4},l={show:!0,amount:.005,angle:0},d={show:!0,count:800,sIntensity:.9,nIntensity:.4};function animate(){e+=.1,t.uniforms.time.value=e,r.uniforms.time.value=e,i.uniforms.time.value=e,requestAnimationFrame(animate)}t.uniforms.distortion.value=a.distortion,t.uniforms.distortion2.value=a.distortion2,t.uniforms.speed.value=a.speed,t.uniforms.rollSpeed.value=a.rollSpeed,i.uniforms.amount.value=o.amount,i.uniforms.size.value=o.size,n.uniforms.angle.value=l.angle*Math.PI,n.uniforms.amount.value=l.amount,r.uniforms.sCount.value=d.count,r.uniforms.sIntensity.value=d.sIntensity,r.uniforms.nIntensity.value=d.nIntensity,this.composer.addPass(t),this.composer.addPass(n),this.composer.addPass(r),this.composer.addPass(i),this.composer.addPass(s),animate()}function getParams(str){const params={},cleanedStr=str.replace(/\s/g,""),properties=cleanedStr.split(",");for(let i=0;i 2 | 3 | A-Frame Component: Post-Processing 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | --------------------------------------------------------------------------------