Package Exports

three-shader-fxaa

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (three-shader-fxaa) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

three-shader-fxaa

Demo

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 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.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.resolution which is a default THREE.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.