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-73, works with the three module.
Install
npm install three-shader-fxaa --save
Usage
This is typically used with EffectComposer, like so:
// Make sure THREE is in global if not alreadywindowTHREE = // Grab EffectComposer from npm or ThreeJS examplesvar EffectComposer = THREE // Grab this module!var fxaa = // Setup bare-bones composervar effectComposer = renderercomposer // Add FXAA passvar shaderPass = shaderPassrenderToScreen = truecomposer // Make sure screen resolution is set!shaderPassuniformsresolution // Render scenecomposer
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: resolution: type: 'v2' value:
You can specify the following option:
opt.resolution
which is a defaultTHREE.Vector2
to use
From Source
To build/run from source, first git clone
this repo and then:
npm install
Once 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 build
Or, 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 transpile
License
MIT, see LICENSE.md for details.