anti-alias smoothstep utility function
Branch: master
Clone or download
Latest commit 49d5967 Apr 5, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore bam! Apr 5, 2015
.npmignore bam! Apr 5, 2015
LICENSE.md bam! Apr 5, 2015
README.md udpating readme [ci skip] Apr 5, 2015
index.glsl bam! Apr 5, 2015
package.json 1.0.1 Apr 5, 2015

README.md

glsl-aastep

stable

smooth

(glslbin demo)

Performs a smoothstep using standard derivatives for anti-aliased edges at any level of magnification. If GL_OES_standard_derivatives is not available, this falls back to using step() without any anti-aliasing.

For this module to work, you must enable standard derivatives at your top-level shader:

precision mediump float;

#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives : enable
#endif

#pragma glslify: aastep = require('glsl-aastep')

//rest of your shader

A full example of 2D circle rendering:

precision highp float;

#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives : enable
#endif

#pragma glslify: aastep = require('glsl-aastep')

uniform float iGlobalTime;
uniform vec3  iResolution;

void main() {
  //centered texture coordinates
  vec2 uv = vec2(gl_FragCoord.xy / iResolution.xy) - 0.5;

  //correct aspect
  uv.x *= iResolution.x / iResolution.y;

  //animate zoom
  uv /= sin(iGlobalTime * 0.2); 

  //radial distance
  float len = length(uv);

  //anti-alias
  len = aastep(0.5, len);

  gl_FragColor.rgb = vec3(len);
  gl_FragColor.a   = 1.0;
}

Suggestions/PRs welcome.

Usage

NPM

float aastep(float threshold, float value)

Performs a step(threshold, value) function, except that the edge is smoothed across the width of a single fragment to create anti-aliasing at any scale. Returns the smoothed float.

Contributing

See stackgl/contributing for details.

License

MIT, see LICENSE.md for details.