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).

This module is intended to be consumed with browserify, as it relies on glslify to bring in shader components from npm. At a later point, it may be transpiled with a babel plugin, for use in Webpack/JSPM/etc.

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()

You don't need to set up glslify since that will be done by browserify under the hood.

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

License

MIT, see LICENSE.md for details.