WebGL

WebGL is the umbrella term for graphics programming technologies in the browser. It's part GLSL (GL Shading Language) and JavaScript. GLSL is a graphics language based on OpenGL, that has a C like syntax.

Vectors

vec4 vector;
vector[0] = vector.r = vector.x = vector.s;
vector[1] = vector.g = vector.y = vector.t;
vector[2] = vector.b = vector.z = vector.p;
vector[3] = vector.a = vector.w = vector.q;

Swizzle

Changing the position of vector properties to create new values. E.g.

vec3 green = vec3(1.0, 1.0, 0.0);
vec3 magenta = green.rbg;

Uniforms

GLSL is deterministic, doesn't have memory management and operates on every pixel of the canvas. In order for dynamic behavior to happen, shaders have a concept of uniforms. Uniforms are a bridge from JavaScript to GLSL. These can be any value, though common values to transmit are screenResolution and globalTime. Uniforms are commonly prepended with i. Here's an overview of commonly defined uniforms:

float iGlobalTime    Time in milliseconds, increments linearly
vec3  iResolution    Canvas size in xyz, where z is always 0

Built-ins

GLSL has built-in functions and built-in variables.

vec4 gl_FragCoord  Location of the pixel on the screen, has an xyzw component

glslify

glslify brings NPM to GLSL; the hot sauce to the steam buns. Instead of copy-and-pasting large snippets of code, it enables you to import those snippets as modules instead. This allows for more focused user-facing code, that can be understood by more people than just the author. Imports are defined and consumed in pragmas, so the glslify specific code is neatly tucked away in a single location.

#pragma glslify: camera = require('glsl-turntable-camera')

Shaping functions

Shaping functions are the corner stone of algorithmic drawing. Essential to generate anything with WebGL.

useful exercises

Noise functions

  • curl noise: used for particle motion, particular useful for smoke and other similar effects
  • perlin noise: kind of like photoshop's cloud filter
  • simplex noise: similar to perlin noise, but a hella lot faster

Blending

Reaction-Diffusion

See Also

results matching ""

    No results matching ""