Skip to content
a soft gradient background in WebGL
JavaScript GLSL
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo more code cleanup Dec 17, 2015
.gitignore first commit Aug 12, 2014
.npmignore first commit Aug 12, 2014
LICENSE.md first commit Aug 12, 2014
README.md cleanup package Dec 17, 2015
frag.glsl more code cleanup Dec 17, 2015
index.js more code cleanup Dec 17, 2015
package.json 2.0.1 Dec 17, 2015
vert.glsl fixing bug with attribute locations in FF/chrome Sep 27, 2014

README.md

gl-vignette-background

experimental

Creates a soft gradient background with noise, suitable for your sweet WebGL demos!

demo

Also see three-vignette-background for a ThreeJS version of this module, with a slightly different API and noise algorithm.

Install

npm install gl-vignette-background --save

Example

var createBackground = require('gl-vignette-background')

// get a WebGL canvas
var gl = require('webgl-context')()

// create your background
var background = createBackground(gl)

function render () {
  var width = gl.drawingBufferWidth
  var height = gl.drawingBufferHeight

  gl.viewport(0, 0, width, height)
  gl.clearColor(0, 0, 0, 1)
  
  // set some flags before drawing
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.disable(gl.DEPTH_TEST)
  gl.disable(gl.CULL_FACE)

  // setup some fancy style (optional)
  var radius = Math.max(width, height) * 1.05
  background.style({
    // xy scale
    scale: [ 1 / width * radius, 1 / height * radius ],
    // aspect ratio for vignette
    aspect: 1,
    // radial gradient colors A->B
    color1: [ 1, 1, 1 ],
    color2: [ 0.5, 0.5, 0.5 ],
    // smoothstep low/high input
    smoothing: [ -0.5, 1.0 ],
    // % opacity of noise grain (0 -> disabled)
    noiseAlpha: 0.35,
    // whether or not the noise is monochromatic
    coloredNoise: true,
    // offset the vignette
    offset: [ -0.05, -0.15 ]
  })
  background.draw()
}

See demo/index.js for a full-screen example.

Usage

NPM

var bg = createBackground(gl [, style])

Creates a background quad with some default options (bright and soft white gradient in the center, using the current canvas size for aspect ratio).

You can provide style to override some defaults, e.g:

bg = createBackground(gl {
	color1: [ 1, 0, 0]
})

See styling

bg.style(options)

Style the background with the given overrides in the specified object. Acts the same as the styling options passed to constructor.

bg.draw()

Draws the quad.

bg.dispose()

Disposes the quad and its shader.

styling

The following options are stylable:

  • aspect: a float for aspect ratio; typically set whenever the background size changes
  • smoothing: a vec2 representing the low and high end for the smooth function
  • noiseAlpha: the opacity of the random noise (set to zero to disable)
  • coloredNoise: a bool for whether noise is enabled, 1 for chromatic, 0 for monochrome
  • offset: the position vec2 offset, normalized. [0, 0] is center (default), [-0.5, -0.5] will be top left
  • scale: the vec2 amount to scale the gradient, normalized. default is [1, 1]
  • color1: the first [r, g, b] color in the gradient, default white
  • color2: the second [r, g, b] color in the gradient, default black

running the demo

Git clone this repo, run npm install, then npm start and open localhost:9966.

License

MIT, see LICENSE.md for details.

You can’t perform that action at this time.