Introduction

Morph is a browser-based creative tool for applying WebGL effects to images, generating live motion art, and rendering 3D models in expressive visual styles.

How it works

Every effect in Morph is a GLSL ES 300 fragment shader running on a WebGL2 context. Image and Motion effects share a common set of uniforms: u_tex (source image), u_time (elapsed seconds), u_resolution (canvas size in px), and u_mouse (normalised cursor position 0–1).

Each effect receives a set of named float uniforms — one per slider parameter — so every control maps directly to a GLSL variable the shader can read.

The renderer compiles each shader on first use and caches the program. Layers are composited in order using standard alpha blending. The full shader source for any effect is in the Code section of its page.

Shared uniforms

u_texsampler2DSource image texture. Black when no image is loaded.

u_timefloatElapsed time in seconds since the effect started.

u_resolutionvec2Canvas dimensions in device pixels (width, height).

u_mousevec2Normalised cursor position — (0,0) bottom-left, (1,1) top-right.

u_<param>floatPer-effect slider value. One uniform per parameter defined in the effect.

Created by Samuel Alex · Open Morph