Educational Centre

01

Your First Simulation in 30 Minutes

Three.js from scratch: renderer, scene, camera. Five steps to moving particles.

⏱ 30 minBeginner

02

Three.js for Beginners

Geometries, materials, lighting, textures, OrbitControls — all the basics.

⏱ 45 minBeginner

03

GLSL Shaders from Scratch

Vertex and fragment shaders, uniforms, varyings, passing data to the GPU.

⏱ 60 minIntermediate

04

Cannon-es: Physics Bodies and Collisions

World, Body, Shape. Syncing Three.js + Cannon-es. RaycastVehicle.

⏱ 50 minIntermediate

05

Optimising Simulations: InstancedMesh and Spatial Hashing

From 500 to 50,000 particles at 60fps. InstancedMesh, WebWorker, spatial hashing.

⏱ 40 minAdvanced

06

Fluid Simulation in an Evening

SPH implementation from scratch. Spatial partitioning, kernels, integration. Full code.

⏱ 90 minAdvanced

07

How to Build Your Own Simulation

Template from idea to publication. File structure, HUD, controls hint, responsive.

⏱ 35 minBeginner

08

Pathfinding Algorithm Visualiser

A*, Dijkstra, BFS in live animation on Canvas 2D. Maze + interactive walls.

⏱ 70 minIntermediate

09

Solar System in Three.js

Textured planets, Keplerian orbits, CSS2D labels, speed slider, UnrealBloom post-processing.

⏱ 60 minIntermediate

10

GLSL Fire & Water Shader

fBm noise fire with colour ramp, Gerstner waves, Fresnel caustics — raw WebGL2 & Three.js ShaderMaterial.

⏱ 55 minAdvanced

11

Save Settings with localStorage

Persist slider values, toggles and camera state across reloads with JSON, schema versioning and IndexedDB.

⏱ 35 minBeginner

12

Path Tracing in WebGL (GLSL): A Real-Time Ray Tracer From Scratch

Build a real-time path tracer in WebGL2 and GLSL: rendering equation, Monte Carlo integration, cosine-weighted hemisphere sampling, progressive…

⏱ 75 minAdvanced

13

Procedural Textures: Theory to Shader

From value noise to Worley cells: build procedural textures from first principles and implement them as GLSL fragment shaders — noise functions, FBM…

⏱ 50 minIntermediate

14

Post-Processing Effects in Three.js: EffectComposer, Bloom & SSAO

Complete guide to Three.js post-processing with EffectComposer — RenderPass, UnrealBloomPass, SSAOPass, FXAA/SMAA, film grain, and a custom GLSL…

⏱ 45 minIntermediate

15

Particle Simulator with Springs (PBD)

Build a Position Based Dynamics (PBD) particle simulator with spring/distance constraints in JavaScript: Verlet integration, constraint projection…

⏱ 55 minIntermediate

16

N-Body Barnes-Hut Algorithm from Scratch — Tutorial

Implement the Barnes-Hut octree N-body algorithm from scratch in JavaScript: tree construction, multipole approximation theta criterion, force…

⏱ 60 minAdvanced

17

Rigid Body Physics: SAT and EPA Collision Detection

Deep dive into rigid body collision detection: the Separating Axis Theorem (SAT) for convex polytopes, GJK for distance queries, and the Expanding…

⏱ 70 minAdvanced

18

Procedural Terrain Generation with Erosion Simulation

Generate realistic 3D terrain from scratch: layered Simplex noise heightfields, domain warping, droplet-based hydraulic erosion, thermal erosion, and…

⏱ 65 minIntermediate

19

L-Systems: From String to 3D Plant

Learn how Lindenmayer systems (L-systems) turn a short rewriting grammar into realistic 3D trees and plants: production rules, turtle interpretation…

⏱ 45 minIntermediate

20

Introduction to WebGPU: First Steps

Get started with WebGPU: adapters, devices, GPUBuffer, WGSL shaders, render pipelines, and compute passes. A hands-on tutorial for the successor to…

⏱ 40 minBeginner

21

Compute Shaders: Massively Parallel Simulation

Learn WebGPU compute shaders from first principles: workgroups, storage buffers, dispatch, and a full WGSL particle simulation running hundreds of…

⏱ 60 minAdvanced

22

Rust + WebAssembly for Simulations

Compile a particle physics simulation written in Rust to WebAssembly and render 100k particles at 60fps in the browser.

⏱ 35 minIntermediate

23

Offline-First App with Service Workers

Make your simulation work offline: cache-first strategy, background sync, Workbox vs vanilla SW, and Web App Manifest for installability.

⏱ 35 minIntermediate

24

Spatial Hashing for O(1) Neighbour Lookup

Build a uniform spatial hash grid in JavaScript for O(1) average neighbour queries in particle systems, collision detection, and SPH fluid.

⏱ 35 minIntermediate

25

SPH Fluid Simulation from Scratch in 200 Lines

Implement a 2D Smoothed Particle Hydrodynamics fluid simulation from scratch in 200 lines of JavaScript using Poly6, Spiky, and Viscosity kernels.

⏱ 50 minAdvanced

26

Three.js Performance Optimization — InstancedMesh, LOD, Web Workers

Render 100,000+ objects at 60fps with InstancedMesh, frustum culling, LOD, BufferGeometry, Web Workers for physics, and GPU picking.

⏱ 50 minAdvanced

27

Three.js Shadows — PCF, VSM, CSM & Tuning

Master shadow rendering in Three.js: shadow map types (PCF, PCFSOFT, VSM), cascaded shadow maps, bias tuning, and performance best practices.

⏱ 35 minIntermediate

28

WebGL Transform Feedback — GPU Particle Systems

Use WebGL Transform Feedback to update particle positions entirely on the GPU, eliminating CPU readback for millions of particles in real time.

⏱ 50 minAdvanced

29

3D Voronoi & Delaunay in the Browser

Generate Voronoi diagrams and Delaunay triangulations in the browser using Fortune's algorithm, then lift them into 3D with Three.js.

⏱ 35 minIntermediate

30

Build a 3D Voxel Engine in WebGL

Build a Minecraft-style voxel engine in the browser: chunk-based world, greedy meshing, face culling, and smooth or blocky terrain rendering.

⏱ 35 minIntermediate

31

WebGL Transform Feedback — GPU Particle Simulation Tutorial

Build a GPU particle simulation with WebGL2 Transform Feedback: ping-pong VAO pattern, GLSL updates, 1M particles at 60fps with no CPU involvement.

⏱ 50 minAdvanced

32

Neural Network from Scratch in Vanilla JS

Build a fully-connected neural network from scratch in JavaScript: forward pass, backpropagation, SGD, and training on XOR and sine approximation.

⏱ 50 minAdvanced

33

Numerical Integration for Physics — Euler, Verlet & RK4

Compare Euler, symplectic Euler, Verlet, and Runge-Kutta 4 integration methods for physics simulations, with energy stability analysis and a spring-mass demo.

⏱ 35 minIntermediate

34

Offscreen Canvas + Web Workers

Move Three.js and WebGL rendering off the main thread with OffscreenCanvas and a dedicated Web Worker, keeping the UI responsive at all times.

⏱ 35 minIntermediate

35

Particle System with LOD and Billboards

Build a high-performance particle system in Three.js using BufferGeometry, billboard particles, and level-of-detail switching for 100k+ particles.

⏱ 35 minIntermediate

36

PID Controller: Theory and Tuning

A complete guide to PID controllers: proportional, integral, and derivative terms, discrete-time implementation, anti-windup, derivative kick, and Ziegler-Nichols tuning.

⏱ 20 minBeginner

37

Procedural Music with Web Audio API

Generate algorithmic music in the browser using Web Audio API oscillators, sequencers, chord progressions, and basic synthesis patches.

⏱ 35 minIntermediate

38

Procedural Terrain with Hydraulic Erosion in Three.js

Build a procedurally generated 3D terrain using Perlin noise and simulate hydraulic erosion to carve realistic valleys, rivers, and ridges.

⏱ 35 minIntermediate

39

Procedural Terrain Generation

Generate infinite 3D terrain in Three.js using layered Perlin noise (fBm), heightmap vertex displacement, normal recalculation and colour grading.

⏱ 35 minIntermediate

40

Quaternions — Rotation Without Gimbal Lock

Master quaternions for 3D rotation: Hamilton product, Euler conversion, slerp interpolation, gimbal lock explanation, and the Three.js Quaternion API.

⏱ 35 minIntermediate

41

RenderTarget & Post-processing in Three.js

Use Three.js WebGLRenderTarget to implement bloom, depth of field, chromatic aberration, and custom post-processing passes without libraries.

⏱ 35 minIntermediate

42

GLSL Fire Shader Effect

Build a procedural fire shader in GLSL: layered Perlin noise, colour palettes, UV distortion, and animated billboarding in Three.js.

⏱ 35 minIntermediate

43

GPU Game of Life in 50 Lines of GLSL

Run Conway's Game of Life entirely on the GPU using WebGL ping-pong render targets and a 50-line GLSL fragment shader.

⏱ 50 minAdvanced

44

GPU-Accelerated L-System Trees

Generate realistic 3D trees and fractals using L-systems, then render 100,000+ branches at 60 FPS with GPU instancing in Three.js.

⏱ 50 minAdvanced

45

Gray-Scott Reaction-Diffusion on GPU with WebGL

Implement the Gray-Scott reaction-diffusion system in WebGL 2 using ping-pong framebuffers and a fragment shader, running at 60 fps.

⏱ 50 minAdvanced

46

InstancedMesh Guide: 1,000,000 Objects at 60 FPS

Three.js InstancedMesh tutorial — setMatrixAt, per-instance colour, GPU picking, manual frustum culling, and rendering 1M particles at 60 FPS.

⏱ 50 minAdvanced

47

Lattice-Boltzmann Fluid in 200 Lines

Implement the D2Q9 Lattice-Boltzmann Method fluid simulation in 200 lines of JavaScript: streaming, collision, bounce-back, colour rendering.

⏱ 35 minIntermediate

48

Lattice Boltzmann Fluid Simulation

Implement a 2D D2Q9 Lattice Boltzmann Method fluid simulation in JavaScript, rendered in real-time with a canvas velocity colour map.

⏱ 50 minAdvanced

49

Lattice Boltzmann Fluid Simulation in WebGL

Implement a 2D D2Q9 Lattice Boltzmann fluid simulation entirely on the GPU using WebGL textures, ping-pong rendering, and fragment shaders.

⏱ 50 minAdvanced

50

Terrain with Marching Cubes & Perlin Noise

Generate smooth isosurface terrain using the Marching Cubes algorithm and 3D Perlin noise, rendered in Three.js with normals and lighting.

⏱ 50 minAdvanced

51

Markov Chain Text Generator

Build a Markov chain text generator in JavaScript — n-gram model, training on any corpus, temperature sampling, and coherent-sounding sentences.

⏱ 35 minIntermediate

52

WebAudio API Spectrum Visualizer

Build a real-time audio spectrum visualizer with the Web Audio API — FFT analysis, bar chart, waveform oscilloscope, and Three.js 3D bars.

⏱ 35 minIntermediate

53

Behavior Trees: AI for NPCs

Build a behavior tree engine from scratch in vanilla JavaScript: composite nodes, decorators, blackboards, and a working guard NPC.

⏱ 50 minAdvanced

54

Build a Physics Engine From Scratch in JavaScript

Build a rigid-body physics engine from scratch in JavaScript: AABB broad phase, SAT narrow phase, impulse-based collision response, angular dynamics, and constraint solving.

⏱ 50 minAdvanced

55

Custom ShaderMaterial in Three.js

Write a fully custom GLSL vertex and fragment shader in Three.js using ShaderMaterial — uniforms, varyings, texture sampling, and noise-driven effects.

⏱ 35 minIntermediate

56

Debugging WebGL — DevTools, Spector.js & Profiling

Learn to debug WebGL and Three.js applications: browser GPU timeline, WEBGL_debug_renderer_info, Spector.js frame capture, error checking, and draw call reduction.

⏱ 50 minAdvanced

57

Drone Swarm Simulation — Flocking + Formation Control Tutorial

Build a drone swarm simulation with Boids flocking, V-formation, circle and grid formations, leader-follower, and obstacle avoidance using JavaScript and Three.js.

⏱ 35 minIntermediate

58

ECS Architecture for Large-Scale Simulations in JavaScript

Build a cache-friendly Entity-Component-System (ECS) in JavaScript for particle and physics simulations, with Structure of Arrays layout and benchmarks.

⏱ 50 minAdvanced

59

Procedural Animation with FABRIK Inverse Kinematics

Implement FABRIK (Forward And Backward Reaching IK) for procedural animation in JavaScript — spider legs, robotic arms, and tentacle motion with a canvas demo.

⏱ 35 minIntermediate

60

Generative Art with p5.js and GLSL Shaders Tutorial

Create generative art using p5.js for creative coding and GLSL fragment shaders for GPU-rendered visuals — flow fields, Perlin noise, and Truchet tiles.

⏱ 50 minAdvanced

61

Genetic Algorithm — Solve the TSP

Build a genetic algorithm to approximate the Travelling Salesman Problem: population init, ordered crossover, swap mutation, tournament selection, and fitness animation.

⏱ 35 minIntermediate

62

WebSocket Real-Time Simulation Sync — Tutorial

Sync a browser physics simulation in real time via WebSocket — heartbeat, reconnection, delta compression, and room-based multiplayer.

⏱ 35 minIntermediate

63

AR in Browsers: Plane Detection & Hit Testing

Use WebXR hit-testing and plane detection to place 3D objects on real surfaces in mobile AR — no app install required.

⏱ 35 minIntermediate

64

WebXR Device API — First Steps

Enter VR and AR from the browser using the WebXR Device API — set up an XR session, handle controller input, and render a stereo 3D scene.

⏱ 35 minIntermediate