🌑 TinyShade examples
Dive into a curated laboratory of real-time GPU experiments forged with TinyShade. Each standalone simulation pushes the boundaries of the WebGPU pipeline, utilizing unique Render Pass Architectures to achieve distinct visual identities. From multi-stage feedback loops that generate bioluminescent membranes to branchless compute kernels driving Monte Carlo path tracers, these examples demonstrate the raw power of custom shader chains. Witness how procedural noise, fractal orbit traps, and physically-based raymarching come alive through sophisticated combinations of compute-to-texture storage and cinematic post-processing stacks.
Example 1
Bio-Organic Membrane: uses Domain Warping and Voronoi Noise to simulate visceral, natural textures. It demonstrates layering simple math functions to create complex, organic cellular effects.
Open Example 1Example 2
Fractal Orbit Trap: uses high-precision AA and Distance Estimation. Unlike "escape time" fractals, it maps point paths ("orbits") to create intricate, textured coloring rather than just iteration counts.
Open Example 2Example 3
Bioluminescent sim: uses Temporal Accumulation and Bloom to soften organic noise into a glowy membrane. It leverages frame history and simulated optics for a cinematic, soft-light aesthetic.
Open Example 3Example 4
1M particles move via a Compute physics pass into an Atomic heatmap, creating additive density. A Fragment pass adds blurred trails, mapped to a Neon-Galaxy palette with filmic post-processing. .
Open Example 4Example 5
GPU profiling reveals per-pass latency: computeTex0 manages particle physics and projection, while trails, background, and main handle composition, post-processing, and timing results.
Open Example 5Example 6
This example bridges high-performance visuals with traditional web elements by loading a static photo and a dynamic 2D canvas as GPU textures. The shader generates a procedural plasma background, mixes it with the image, and then alpha-composites the "TINYSHADE" text layer on top.
Open Example 6Example 7
AV raymarcher: syncs GPU sound with a physically-based 3D scene. Features a singular sun driving soft shadows, Fresnel reflections, and fog, finished with a cinematic post-processing stack.
Open Example 7Example 8
WebGPU Path Tracer: A branchless Monte Carlo adaptation of MÃ¥rten RÃ¥nge's "Festive" logic. Optimized for high-performance compute architecture to simulate sophisticated light transport and materials.
Open Example 8Example 9
This Atomic Holographic SDF uses 1M particles to map 3D fractals. A Compute pass drives physics, an Atomic pass splats density into a heatmap, and Feedback creates motion streaks.
Open Example 9Example 10
Example 8 - Baked using TinyShadeBake and Executed using TinyShadeRunner. File size is 5Â 794 bytes.
Open Example 10Example 11
a WGSL implementation of "Tomb World of Silicon Beats" by MÃ¥rten RÃ¥nge. Original version https://www.shadertoy.com/view/tcKBR3
Open Example 11Example 12
Multi-Pass Sequencer Demo Orchestrate a complex WebGPU pipeline with ease. This setup drives a dynamic Noise Source into a Selective Blur pass, using the TSSequencer to modulate mix-ratios and FX flags in real-time. Powerfully simple.
Open Example 12