@kilokilo/glsl-aastep

glsl-aastep

(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

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.