Chapter 04 / + three.js

Real-time 3D, written by hand.

Custom GLSL shaders, instancing, physically based glass, raymarching and post-processing. Scenes start when you scroll to them and shut down when you leave.

Demos

Noise-displaced shader blob

A vertex shader pushes 3D simplex noise along the normals. The fragment shader adds an iridescent fresnel rim.

  • GLSL
  • ShaderMaterial
Move your cursor

Particle galaxy

80,000 additive points arranged into randomized spiral arms with color by radius.

  • Points
  • OrbitControls
Drag to orbit

Instanced ripple field

2,500 columns rendered in a single draw call, rippling from wherever your cursor hits the floor.

  • InstancedMesh
  • Raycasting
Hover to make ripples

Physical glass

Transmission, thickness, IOR and iridescence. Real refraction of the type behind it.

  • MeshPhysicalMaterial
  • Environment map
Move your cursor

Raymarched metaballs

No meshes at all. A fragment shader marches rays through signed distance fields with smooth unions.

  • SDF
  • Fullscreen shader
Your cursor is a blob

Neon tunnel with bloom

Emissive rings recycled endlessly, glowing through an UnrealBloom post-processing pass.

  • EffectComposer
  • Bloom

Live 3D type

Extruded, beveled text geometry rebuilt as you type, lit by a studio environment.

  • TextGeometry
  • PBR
Type to rebuild

Infinite synthwave terrain

A shader displaces a plane with scrolling noise, draws anti-aliased grid lines with derivatives, and fades into fog. The sun is a shader too.

  • Vertex displacement
  • fwidth grid