three-shader-fxaa
Optimized FXAA shader for ThreeJS, passing some texture coordinates from the vertex shader to avoid 5 dependent texture reads. This is well suited for PowerVR GPUs (iOS).
Tested on Three r69-78, works with the three module.
Install
npm install three-shader-fxaa --saveUsage
This is typically used with EffectComposer, like so:
// Make sure THREE is in global if not already
window.THREE = require('three')
// Grab EffectComposer from npm or ThreeJS examples
var EffectComposer = require('three-effectcomposer')(THREE)
// Grab this module!
var fxaa = require('three-shader-fxaa')
// Setup bare-bones composer
var effectComposer = new EffectComposer(renderer)
composer.addPass(new EffectComposer.RenderPass(scene, camera))
// Add FXAA pass
var shaderPass = new EffectComposer.ShaderPass(fxaa())
shaderPass.renderToScreen = true
composer.addPass(shaderPass)
// Make sure screen resolution is set!
shaderPass.uniforms.resolution.value.set(width, height)
// Render scene
composer.render()Usage
shader = fxaa([opt])
Calling the function returns a new object with the following properties. This can be piped into THREE.ShaderMaterial or THREE.EffectComposer.
{
vertexShader: '...shader source...',
fragmentShader: '...shader source...',
uniforms: {
tDiffuse: { type: 't', value: new THREE.Texture() },
resolution: { type: 'v2', value: new THREE.Vector2() }
}
}You can specify the following option:
opt.resolutionwhich is a defaultTHREE.Vector2to use
From Source
To build/run from source, first git clone this repo and then:
npm installOnce installed, you can test/build the demo like this:
# to run demo dev server/scripts
npm run start
# to run demo build scripts
npm run buildOr, you can test/build the source code. It needs to be transpiled with glslify so that the final npm distribution has its source inlined.
# watch index and shaders and transpile on change
npm run dev
# transpile index and shaders to build/ folder
npm run transpileLicense
MIT, see LICENSE.md for details.