3D rendering is where mathematics meets visual storytelling. From raymarching shaders that fit in 30 lines of GLSL to full ray tracers built from scratch in JavaScript — these tutorials take you deep into the world of computer graphics.
You'll learn how to render 3D scenes, simulate light and shadow, and create immersive visual experiences that run entirely in the browser.
3 articles in this guide
Learn ray tracing from scratch with JavaScript and Canvas. 8 interactive examples: basic ray caster, sphere shading, shadows, reflections, refraction, soft shadows, ambient occlusion, and a full path tracer.
A technical deep-dive into how Lumitree's WebGL shader worlds work — signed distance functions, raymarching algorithms, and how complex 3D scenes with lighting and shadows fit in under 50KB.
A complete guide to audio visualization — turning sound into art with the Web Audio API and Canvas. Covers waveforms, frequency spectrums, circular visualizers, particle audio reactors, spectrogram heatmaps, 3D terrain from music, beat detection, and audio-reactive generative art. 8 working code examples.