vshaders

Every effect is an entry shader plus its imports

The entry shader is yours: it owns the bindings and the look, and you edit it in place. The modules it imports stay versioned packages. vgpu's resolver enforces the split, so a package cannot smuggle in a binding.

effect 001 · mesh-gradient.wgsl

Mesh gradient

Two SDF blobs under a smooth union, domain-warped by simplex noise, blended through OKLab so the gradient stays vivid instead of graying out in the middle. The backdrop of this page is this exact effect, running live.

import { sdCircle } from "@vshaders/sdf/2d";

import { opSmoothUnion } from "@vshaders/sdf/ops";

import { mixOklab } from "@vshaders/color/oklab";

import { cosinePalette } from "@vshaders/color/palette";

import { simplex2d } from "@vgpu/wgsl-std/noise/simplex";

import { linearToSrgb3 } from "@vgpu/wgsl-std/color";

effect 002 · sdf-morph.wgsl

SDF morph

The distance field itself, drawn as contour lines: a rounded box and an orbiting disc under a smooth boolean, a smaller disc carving in. The blue isoline is the shape's edge, distance zero.

import { sdCircle, sdRoundedBox2 } from "@vshaders/sdf/2d";

import { opSmoothSubtract, opSmoothUnion } from "@vshaders/sdf/ops";

import { rotate2d } from "@vgpu/wgsl-std/math";

effect 003 · palette-field.wgsl

Palette field

Flow without geometry: one fBM field warps another, and the result indexes a cosine palette. OKLab mixing sinks the edges into black.

import { fbmSimplex2d } from "@vgpu/wgsl-std/noise/simplex";

import { cosinePalette } from "@vshaders/color/palette";

import { mixOklab } from "@vshaders/color/oklab";

import { linearToSrgb3 } from "@vgpu/wgsl-std/color";