glslify/glsl-aastep glslify/glsl-aastep

  • Stars
    star
    129
  • Rank 279,262 (Top 6 %)
  • Language GLSL
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 9 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
glslify/glsl-aastep
github

glslify

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

anti-alias smoothstep utility function

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.

More Repositories

1

glslify

A node.js-style module system for GLSL! ✨
JavaScript
2,198
star
2

glsl-easings

Robert Penner's easing functions in GLSL, available as a module for glslify.
JavaScript
422
star
3

glslify-loader

💾 glslify loader module for webpack
JavaScript
221
star
4

glsl-colormap

colormaps for glsl shaders
JavaScript
58
star
5

glsl-hash-blur

a blur effect based on random hash offset
GLSL
55
star
6

rollup-plugin-glslify

Import GLSL strings with glslify
JavaScript
55
star
7

glsl-tokenizer

r/w stream of glsl tokens
JavaScript
51
star
8

babel-plugin-glslify

🐠 Babel transform for glslify
JavaScript
49
star
9

glsl-ggx

glsl ggx lighting model
JavaScript
44
star
10

glsl-smooth-min

Smooth minimum functions for GLSL
C
40
star
11

glsl-circular-arc

draw anti-aliased circular arcs in a shader with glslify
JavaScript
40
star
12

glsl-halftone

a halftone effect in GLSL
GLSL
35
star
13

glsl-raytrace

🌈 Given a signed distance function and ray, trace a scene to find the first point of intersection.
JavaScript
35
star
14

glsl-inverse

Invert a matrix in GLSL
C
35
star
15

glsl-perturb-normal

perturb normal from a normal map
GLSL
35
star
16

glsl-proj4

proj4 coordinate transforms in glsl
JavaScript
34
star
17

glslify-hex

A transform stream for glslify that replaces CSS-style hexadecimal colors with `vec3/vec4` definitions.
JavaScript
33
star
18

glsl-specular-cook-torrance

Calculates the specular/fresnel power in the Cook-Torrance model
HTML
31
star
19

glsl-face-normal

approximate face normal in the fragment shader
GLSL
29
star
20

glsl-look-at

👀 Generates a 3D lookAt matrix in GLSL
JavaScript
27
star
21

glsl-diffuse-oren-nayar

Oren-Nayar diffuse lighting for GLSL
JavaScript
26
star
22

glsl-camera-ray

📷 Generates a ray for Shadertoy-style raycasting in GLSL
JavaScript
22
star
23

glslify-import

A transform stream for glslify that adds an `import` directive to your shaders.
JavaScript
21
star
24

glslify-optimize

A browserify transform stream that optimizes your glslify shaders
JavaScript
20
star
25

glsl-gamma

gamma-to-linear convenience utilities
GLSL
16
star
26

glsl-combine-chamfer

Combine two signed distance fields with a chamfer-like join.
HTML
16
star
27

glsl-diffuse-lambert

Lambertian diffuse lighting model for GLSL
JavaScript
16
star
28

glslify-fancy-imports

✨ glslify transform that provides you with a cleaner module import/export syntax
JavaScript
14
star
29

glsl-token-function-shaker

✂️ Shakes out any unused functions from your GLSL shaders
GLSL
13
star
30

glsl-ruler

📐 Helper module for debugging raytraced SDFs
GLSL
12
star
31

glsl-specular-beckmann

Beckmann distribution for specular power
JavaScript
12
star
32

glsl-specular-phong

Specular power from Phong distribution
JavaScript
11
star
33

glsl-transpose

Transpose a matrix in GLSL
JavaScript
11
star
34

glsl-specular-blinn-phong

GLSL for specular weight in Blinn-Phong lighting model
JavaScript
11
star
35

glsl-specular-ward

Ward anisotropic specular model for GLSL
JavaScript
10
star
36

glsl-cartesian-to-barycentric

glslify module to convert cartesian to barycentric coordinates
JavaScript
10
star
37

glslify-bundle

Bundle a glslify-deps dependency tree into a GLSL source string
JavaScript
10
star
38

glsl-specular-gaussian

Guassian specular model in GLSL
JavaScript
9
star
39

glsl-sdf-sphere

GLSL SDF function for generating a sphere
HTML
9
star
40

glsl-scale-linear

A linear scale for glslify
GLSL
8
star
41

glsl-sdf-normal

Get the normal vector of a position within a signed distance field.
HTML
8
star
42

glsl-scale-log

A logarithmic scale for glslify
GLSL
7
star
43

glsl-combine-smooth

Smoothly combine two signed distance fields.
HTML
7
star
44

glsl-sdf-box

HTML
7
star
45

glsl-pi

π available at your convenience for use within glslify
GLSL
7
star
46

glsl-proj4-camera

use proj4 strings to map lonlat geometry to screen coordinates in a shader
JavaScript
6
star
47

glslify-deps

Walk the dependency graph of a glslify shader
JavaScript
6
star
48

glsl-turntable-camera

Convenience module for GLSL raytracing that provides a turntable camera for your scene.
HTML
6
star
49

glsl-proj4-texture

pre-calculate proj4 coordinate transformations as a texture
JavaScript
6
star
50

glsl-token-string

converts an array of GLSL tokens to a plain GLSL source string
JavaScript
5
star
51

glsl-frobenius

Computes the Frobenius norm of a matrix in GLSL
JavaScript
5
star
52

glsl-determinant

Computes the determinant of a matrix in GLSL
JavaScript
5
star
53

glslify-stream

create a readable stream of glsl ast nodes that produce a module system
JavaScript
5
star
54

glslify-detective

Find all require calls within a glslify file
JavaScript
5
star
55

glslify-promise

A Promise wrapper for glslify, providing a consistent interface between both Node.js and browserify.
JavaScript
5
star
56

glslify-client

Convenience wrapper for handling glslify on the client, minimising the amount of requests to glslify-deps
JavaScript
3
star
57

glsl-shader-name

Extract a shader's name from its source
JavaScript
3
star
58

glsl-token-descope

JavaScript
3
star
59

glsl-token-assignments

Take an array of GLSL tokens and determine which tokens are either assignments or variable definitions.
JavaScript
2
star
60

glsl-token-scope

Infer the scope of each token in an array of GLSL tokens
JavaScript
2
star
61

glslify-resolve-remote

A replacement resolver function for glslify that lets you automatically pull in GLSL modules from npm
JavaScript
2
star
62

glslify-require

var src = require('./shader.glsl')
JavaScript
2
star
63

glsl-token-properties

JavaScript
2
star
64

glsl-token-depth

Determine the scope depth of an array of GLSL tokens
JavaScript
2
star
65

glsl-token-macros

Extract macro preprocessor statements from an array of GLSL tokens.
JavaScript
1
star
66

glsl-token-whitespace-trim

Trim the whitespace within an array of GLSL tokens
JavaScript
1
star
67

glsl-token-defines

JavaScript
1
star
68

glsl-token-extension-dedupe

Given a series of GLSL tokens, dedupes any extension declarations and places them at the top of the shader source
JavaScript
1
star
69

glsl-token-functions

Extract function definitions from an array of GLSL tokens.
GLSL
1
star