Skip to content
a simple ThreeJS vignette background
JavaScript GLSL HTML
Branch: master
Clone or download
Latest commit 8d46e5c Oct 25, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore bam! Dec 7, 2015
.npmignore bam! Dec 7, 2015 bam! Dec 7, 2015 updating readme Dec 7, 2015
demo.js bam! Dec 7, 2015
index.html bam! Dec 7, 2015
index.js do not frustum cull the background mesh Oct 24, 2016
package.json 1.0.3 Oct 24, 2016
shader.frag bam! Dec 7, 2015
shader.vert bam! Dec 7, 2015




A soft vignette background for ThreeJS demos with a simplex noise grain. This returns a THREE.Mesh with a plane geometry and a shader which does not project into camera space, and so it fits across the entire device viewport.

Currently, browserify is required to use this module as it has a hard dependency on glslify, a browserify transform.

Also see gl-vignette-background.


npm install three-vignette-background --save


var createOrbitViewer = require('three-orbit-viewer')(THREE)
var createBackground = require('./')

var app = createOrbitViewer({
  clearColor: 'rgb(40, 40, 40)',
  clearAlpha: 1.0,
  fov: 55,
  position: new THREE.Vector3(0, 2, -2)

// add a default background
var background = createBackground()

// ... setup rest of scene ...

See demo.js for another usage example.



background = createBackground([opt])

Creates a new vignette background with some default options. Turning the grainScale or noiseAlpha to zero will not compute the grain noise.

  • geometry the geometry to use, defaults to new PlaneGeometry(2, 2, 1)
  • colors an array of two colors to use; either strings or THREE.Color objects; default [ '#fff', '#283844' ]
  • aspect aspect ratio for grain and vignette; default 1
  • grainScale how large to scale the grain particles, default 0.005
  • grainTime the time offset for animating grain; default 0
  • noiseAlpha the alpha to blend the noise onto the background, default 0.25
  • smooth an [x, y] array or THREE.Vector2 with the low and high smoothstep values for the vignetting, default [ 0, 1 ]
  • scale a number, [x, y] array, or THREE.Vector2 with the scaling for the vignette, default 1
  • offset a [x, y] array or THREE.Vector2 to offset the vignette; default [0, 0]
  • aspectCorrection a boolean, default false, as to whether to correct the vignette scale to the aspect value

Re-style the background. Any values that are specified in opt will be set, others will not be changed. Takes all the same values except geometry, which must be set at creation time.


MIT, see for details.

You can’t perform that action at this time.