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).
vec4 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution)
Returns the anti-aliased color from your frame texture.
Inside GLSL fragment shader:
# fxaa = require(glsl-fxaa)uniform vec2 resolution;void
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.
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:
varying vec2 v_rgbNW;varying vec2 v_rgbNE;varying vec2 v_rgbSW;varying vec2 v_rgbSE;varying vec2 v_rgbM;uniform vec2 resolution;# texcoords = require(glsl-fxaa/texcoords.glsl)void
varying vec2 v_rgbNW;varying vec2 v_rgbNE;varying vec2 v_rgbSW;varying vec2 v_rgbSE;varying vec2 v_rgbM;uniform vec2 resolution;# fxaa = require(glsl-fxaa/fxaa.glsl)void
In most cases, you should just use the simplest
index.glsl use case demonstrated earlier.
See the demo folder. To run:
# clone repogit clone https://github.com/mattdesl/glsl-fxaa.git# install depsnpm install# run local hostnpm start
localhost:9966 to test. Use
npm run build to build a bundle.
MIT, see LICENSE.md for details.