├── .gitignore ├── demo ├── screen.png ├── simple.vert ├── simple.frag ├── optimized.vert ├── index.html ├── optimized.frag └── index.js ├── .npmignore ├── index.glsl ├── texcoords.glsl ├── LICENSE.md ├── package.json ├── README.md └── fxaa.glsl /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | bundle.js 5 | -------------------------------------------------------------------------------- /demo/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattdesl/glsl-fxaa/HEAD/demo/screen.png -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | bundle.js 5 | test 6 | test.js 7 | demo/ 8 | .npmignore -------------------------------------------------------------------------------- /demo/simple.vert: -------------------------------------------------------------------------------- 1 | attribute vec2 position; 2 | 3 | void main() { 4 | gl_Position = vec4(position, 1.0, 1.0); 5 | } -------------------------------------------------------------------------------- /index.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: fxaa = require('./fxaa.glsl') 2 | #pragma glslify: texcoords = require('./texcoords.glsl') 3 | 4 | vec4 apply(sampler2D tex, vec2 fragCoord, vec2 resolution) { 5 | mediump vec2 v_rgbNW; 6 | mediump vec2 v_rgbNE; 7 | mediump vec2 v_rgbSW; 8 | mediump vec2 v_rgbSE; 9 | mediump vec2 v_rgbM; 10 | 11 | //compute the texture coords 12 | texcoords(fragCoord, resolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM); 13 | 14 | //compute FXAA 15 | return fxaa(tex, fragCoord, resolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM); 16 | } 17 | 18 | #pragma glslify: export(apply) -------------------------------------------------------------------------------- /demo/simple.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform vec2 iResolution; 4 | uniform sampler2D iChannel0; 5 | uniform bool enabled; 6 | 7 | //import our fxaa shader 8 | #pragma glslify: fxaa = require('../') 9 | 10 | void main() { 11 | vec2 uv = vec2(gl_FragCoord.xy / iResolution.xy); 12 | uv.y = 1.0 - uv.y; 13 | 14 | //can also use gl_FragCoord.xy 15 | vec2 fragCoord = uv * iResolution; 16 | 17 | vec4 color; 18 | if (enabled) { 19 | color = fxaa(iChannel0, fragCoord, iResolution); 20 | } else { 21 | color = texture2D(iChannel0, uv); 22 | } 23 | 24 | gl_FragColor = color; 25 | } 26 | -------------------------------------------------------------------------------- /texcoords.glsl: -------------------------------------------------------------------------------- 1 | //To save 9 dependent texture reads, you can compute 2 | //these in the vertex shader and use the optimized 3 | //frag.glsl function in your frag shader. 4 | 5 | //This is best suited for mobile devices, like iOS. 6 | 7 | void texcoords(vec2 fragCoord, vec2 resolution, 8 | out vec2 v_rgbNW, out vec2 v_rgbNE, 9 | out vec2 v_rgbSW, out vec2 v_rgbSE, 10 | out vec2 v_rgbM) { 11 | vec2 inverseVP = 1.0 / resolution.xy; 12 | v_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP; 13 | v_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP; 14 | v_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP; 15 | v_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP; 16 | v_rgbM = vec2(fragCoord * inverseVP); 17 | } 18 | 19 | #pragma glslify: export(texcoords) -------------------------------------------------------------------------------- /demo/optimized.vert: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | //texcoords computed in vertex step 4 | //to avoid dependent texture reads 5 | varying vec2 v_rgbNW; 6 | varying vec2 v_rgbNE; 7 | varying vec2 v_rgbSW; 8 | varying vec2 v_rgbSE; 9 | varying vec2 v_rgbM; 10 | 11 | //a resolution for our optimized shader 12 | uniform vec2 iResolution; 13 | attribute vec2 position; 14 | varying vec2 vUv; 15 | 16 | #pragma glslify: texcoords = require('../texcoords.glsl') 17 | 18 | void main(void) { 19 | gl_Position = vec4(position, 1.0, 1.0); 20 | 21 | //compute the texture coords and send them to varyings 22 | vUv = (position + 1.0) * 0.5; 23 | vUv.y = 1.0 - vUv.y; 24 | vec2 fragCoord = vUv * iResolution; 25 | texcoords(fragCoord, iResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM); 26 | } -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | glsl-fxaa 7 | 23 | 24 | 25 |
click on image to toggle fast approximate anti-aliasing
26 | 27 | 28 | -------------------------------------------------------------------------------- /demo/optimized.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | //texcoords computed in vertex step 4 | //to avoid dependent texture reads 5 | varying vec2 v_rgbNW; 6 | varying vec2 v_rgbNE; 7 | varying vec2 v_rgbSW; 8 | varying vec2 v_rgbSE; 9 | varying vec2 v_rgbM; 10 | 11 | varying vec2 vUv; 12 | uniform vec2 iResolution; 13 | uniform sampler2D iChannel0; 14 | uniform bool enabled; 15 | 16 | //import the fxaa function 17 | #pragma glslify: fxaa = require('../fxaa.glsl') 18 | 19 | void main() { 20 | //can also use gl_FragCoord.xy 21 | mediump vec2 fragCoord = vUv * iResolution; 22 | 23 | vec4 color; 24 | if (enabled) { 25 | color = fxaa(iChannel0, fragCoord, iResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM); 26 | } else { 27 | color = texture2D(iChannel0, vUv); 28 | } 29 | 30 | gl_FragColor = color; 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2014 Matt DesLauriers 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 20 | OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | var createShader = require('gl-shader') 2 | var createTexture = require('gl-texture2d') 3 | var triangle = require('a-big-triangle') 4 | var glslify = require('glslify') 5 | var loadImage = require('img') 6 | 7 | var gl = require('webgl-context')({ 8 | width: 512, 9 | height: 512, 10 | antialias: false 11 | }) 12 | var canvas = gl.canvas 13 | document.body.appendChild(canvas) 14 | 15 | var texture 16 | var enabled = true 17 | 18 | //try replacing this with 'optimized.vert' and 'optimized.frag' 19 | var shader = createShader(gl, glslify('./simple.vert'), glslify('./simple.frag')) 20 | shader.bind() 21 | shader.uniforms.iResolution = [ canvas.width, canvas.height ] 22 | shader.uniforms.iChannel0 = 0 23 | shader.uniforms.enabled = enabled 24 | 25 | loadImage('screen.png', function (err, image) { 26 | if (err) throw err 27 | texture = createTexture(gl, image) 28 | texture.minFilter = gl.LINEAR 29 | texture.magFilter = gl.LINEAR 30 | render() 31 | }) 32 | 33 | function render () { 34 | var width = gl.drawingBufferWidth 35 | var height = gl.drawingBufferHeight 36 | gl.viewport(0, 0, width, height) 37 | 38 | texture.bind() 39 | shader.bind() 40 | triangle(gl) 41 | } 42 | 43 | function click (ev) { 44 | enabled = !enabled 45 | shader.uniforms.enabled = enabled 46 | render() 47 | } 48 | 49 | window.addEventListener('click', click) 50 | window.addEventListener('touchstart', function (ev) { 51 | window.removeEventListener('click', click) 52 | ev.preventDefault() 53 | click() 54 | }) 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-fxaa", 3 | "version": "3.0.0", 4 | "description": "FXAA implementation for glslify in WebGL", 5 | "main": "index.glsl", 6 | "license": "MIT", 7 | "author": "Matt DesLauriers ", 8 | "dependencies": {}, 9 | "devDependencies": { 10 | "a-big-triangle": "^1.0.2", 11 | "browserify": "^10.2.4", 12 | "budo": "^5.1.5", 13 | "garnish": "^3.2.1", 14 | "gl-shader": "^4.0.5", 15 | "gl-texture2d": "^2.0.9", 16 | "glslify": "^2.2.1", 17 | "img": "^1.0.0", 18 | "uglify-js": "^2.4.23", 19 | "webgl-context": "^2.2.0" 20 | }, 21 | "scripts": { 22 | "start": "budo demo/index.js:bundle.js --dir demo --live -- -t glslify | garnish", 23 | "build": "browserify demo/index.js -t glslify | uglifyjs -cm > demo/bundle.js" 24 | }, 25 | "testling": { 26 | "files": "test.js", 27 | "browsers": [ 28 | "ie/6..latest", 29 | "chrome/22..latest", 30 | "firefox/16..latest", 31 | "safari/latest", 32 | "opera/11.0..latest", 33 | "iphone/6", 34 | "ipad/6", 35 | "android-browser/latest" 36 | ] 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "git://github.com/mattdesl/glsl-fxaa.git" 41 | }, 42 | "homepage": "https://github.com/mattdesl/glsl-fxaa", 43 | "bugs": { 44 | "url": "https://github.com/mattdesl/glsl-fxaa/issues" 45 | }, 46 | "keywords": [ 47 | "glslify", 48 | "glsl", 49 | "webgl", 50 | "gl", 51 | "fxaa", 52 | "anti", 53 | "alias", 54 | "aliasing", 55 | "aa", 56 | "anti-alias", 57 | "msaa", 58 | "anti-aliasing" 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-fxaa 2 | 3 | [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges) 4 | 5 | [(demo)](http://mattdesl.github.io/glsl-fxaa/demo) - [(source)](./demo/index.js) 6 | 7 | A WebGL implementation of Fast Approximate Anti-Aliasing (FXAA v2). This is a screen-space technique. The code was originally from [Geeks3D.com](http://www.geeks3d.com/20110405/fxaa-fast-approximate-anti-aliasing-demo-glsl-opengl-test-radeon-geforce/) and cleaned up by [Armin Ronacher](https://github.com/mitsuhiko/webgl-meincraft) for WebGL. 8 | 9 | FXAA is particularly useful in WebGL since most browsers do not currently support MSAA, and even those that do (e.g. Chrome) will not support it outside of the main frame buffer (which is common when doing post-processing effects like color grading). 10 | 11 | ## Usage 12 | 13 | [![NPM](https://nodei.co/npm/glsl-fxaa.png)](https://nodei.co/npm/glsl-fxaa/) 14 | 15 | #### ```vec4 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution)``` 16 | 17 | Returns the anti-aliased color from your frame texture. 18 | 19 | Inside GLSL fragment shader: 20 | 21 | ```glsl 22 | #pragma glslify: fxaa = require(glsl-fxaa) 23 | 24 | uniform vec2 resolution; 25 | 26 | void main() { 27 | vec2 fragCoord = v_texCoord0 * resolution; 28 | gl_FragColor = fxaa(u_texture0, fragCoord, resolution); 29 | } 30 | ``` 31 | 32 | ### optimizing 33 | 34 | If you plan on using FXAA instead of native anti-aliasing (i.e. for post-processed 3D scenes), disabling native AA when creating your WebGL context should give you a performance boost in some browsers. 35 | 36 | This FXAA shader uses 9 dependent texture reads. For various mobile GPUs (particularly iOS), we can optimize the shader by making 5 of the texture2D calls non-dependent. To do this, the coordinates have to be computed in the vertex shader and passed along: 37 | 38 | vert shader: 39 | 40 | ```glsl 41 | varying vec2 v_rgbNW; 42 | varying vec2 v_rgbNE; 43 | varying vec2 v_rgbSW; 44 | varying vec2 v_rgbSE; 45 | varying vec2 v_rgbM; 46 | 47 | uniform vec2 resolution; 48 | 49 | #pragma glslify: texcoords = require(glsl-fxaa/texcoords.glsl) 50 | 51 | void main() { 52 | //compute the texture coords and store them in varyings 53 | vec2 fragCoord = vTexCoord0 * resolution; 54 | texcoords(fragCoord, resolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM); 55 | 56 | //.. rest of shader 57 | } 58 | ``` 59 | 60 | frag shader: 61 | 62 | ```glsl 63 | varying vec2 v_rgbNW; 64 | varying vec2 v_rgbNE; 65 | varying vec2 v_rgbSW; 66 | varying vec2 v_rgbSE; 67 | varying vec2 v_rgbM; 68 | 69 | uniform vec2 resolution; 70 | 71 | #pragma glslify: fxaa = require(glsl-fxaa/fxaa.glsl) 72 | 73 | void main() { 74 | //can also use gl_FragCoord.xy 75 | vec2 fragCoord = vTexCoord0 * resolution; 76 | 77 | gl_FragColor = fxaa(u_texture0, fragCoord, resolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM); 78 | } 79 | ``` 80 | 81 | In most cases, you should just use the simplest `index.glsl` use case demonstrated earlier. 82 | 83 | ## demo 84 | 85 | See the [demo](demo/) folder. To run: 86 | 87 | ```sh 88 | # clone repo 89 | git clone https://github.com/mattdesl/glsl-fxaa.git 90 | 91 | # install deps 92 | npm install 93 | 94 | # run local host 95 | npm start 96 | ``` 97 | 98 | Now open `localhost:9966` to test. Use `npm run build` to build a bundle. 99 | 100 | ## License 101 | 102 | MIT, see [LICENSE.md](http://github.com/mattdesl/glsl-fxaa/blob/master/LICENSE.md) for details. 103 | -------------------------------------------------------------------------------- /fxaa.glsl: -------------------------------------------------------------------------------- 1 | /** 2 | Basic FXAA implementation based on the code on geeks3d.com with the 3 | modification that the texture2DLod stuff was removed since it's 4 | unsupported by WebGL. 5 | 6 | -- 7 | 8 | From: 9 | https://github.com/mitsuhiko/webgl-meincraft 10 | 11 | Copyright (c) 2011 by Armin Ronacher. 12 | 13 | Some rights reserved. 14 | 15 | Redistribution and use in source and binary forms, with or without 16 | modification, are permitted provided that the following conditions are 17 | met: 18 | 19 | * Redistributions of source code must retain the above copyright 20 | notice, this list of conditions and the following disclaimer. 21 | 22 | * Redistributions in binary form must reproduce the above 23 | copyright notice, this list of conditions and the following 24 | disclaimer in the documentation and/or other materials provided 25 | with the distribution. 26 | 27 | * The names of the contributors may not be used to endorse or 28 | promote products derived from this software without specific 29 | prior written permission. 30 | 31 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 32 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 33 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 34 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 35 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 36 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 37 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 38 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 39 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 40 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 41 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 42 | */ 43 | 44 | #ifndef FXAA_REDUCE_MIN 45 | #define FXAA_REDUCE_MIN (1.0/ 128.0) 46 | #endif 47 | #ifndef FXAA_REDUCE_MUL 48 | #define FXAA_REDUCE_MUL (1.0 / 8.0) 49 | #endif 50 | #ifndef FXAA_SPAN_MAX 51 | #define FXAA_SPAN_MAX 8.0 52 | #endif 53 | 54 | //optimized version for mobile, where dependent 55 | //texture reads can be a bottleneck 56 | vec4 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution, 57 | vec2 v_rgbNW, vec2 v_rgbNE, 58 | vec2 v_rgbSW, vec2 v_rgbSE, 59 | vec2 v_rgbM) { 60 | vec4 color; 61 | mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y); 62 | vec3 rgbNW = texture2D(tex, v_rgbNW).xyz; 63 | vec3 rgbNE = texture2D(tex, v_rgbNE).xyz; 64 | vec3 rgbSW = texture2D(tex, v_rgbSW).xyz; 65 | vec3 rgbSE = texture2D(tex, v_rgbSE).xyz; 66 | vec4 texColor = texture2D(tex, v_rgbM); 67 | vec3 rgbM = texColor.xyz; 68 | vec3 luma = vec3(0.299, 0.587, 0.114); 69 | float lumaNW = dot(rgbNW, luma); 70 | float lumaNE = dot(rgbNE, luma); 71 | float lumaSW = dot(rgbSW, luma); 72 | float lumaSE = dot(rgbSE, luma); 73 | float lumaM = dot(rgbM, luma); 74 | float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE))); 75 | float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE))); 76 | 77 | mediump vec2 dir; 78 | dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE)); 79 | dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE)); 80 | 81 | float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * 82 | (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN); 83 | 84 | float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce); 85 | dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), 86 | max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), 87 | dir * rcpDirMin)) * inverseVP; 88 | 89 | vec3 rgbA = 0.5 * ( 90 | texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz + 91 | texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz); 92 | vec3 rgbB = rgbA * 0.5 + 0.25 * ( 93 | texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz + 94 | texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz); 95 | 96 | float lumaB = dot(rgbB, luma); 97 | if ((lumaB < lumaMin) || (lumaB > lumaMax)) 98 | color = vec4(rgbA, texColor.a); 99 | else 100 | color = vec4(rgbB, texColor.a); 101 | return color; 102 | } 103 | 104 | #pragma glslify: export(fxaa) 105 | --------------------------------------------------------------------------------