Update: 3-min walkthrough on how I built the tiny life sim — para sa nagtanong nung last post
Follow-up sa previous post ko about Mini World (Studying Three.js — created a tiny life sim : r/PinoyProgrammer). Nag-comment kasi si u/pabilipongref na curious how I built it and how long it took — so ginawa ko itong short walkthrough.
3 minutes lang. Cinocover:
- Yung "1 day" timeline mismo
- Architecture overview (sim + render layers)
- Two-loop pattern (sim ticks at ~12Hz, render at 60fps)
- EventBus para idecouple sim sa render
- InstancedMesh trick para sa 500+ creatures at 60fps
- Motion smoothing between discrete sim ticks
- Layered scene composition
Honest disclosure: AI-generated yung video at AI yung voiceover. Wala akong skills sa pag gawa ng tutorial videos, so ginamit ko si Claude (claude.ai/design) para mag-generate ng animated explainer + AI narration (ElevenLabs). Yung code at architecture decisions ay real and mine — yung pag-package as a video lang ang AI-assisted. Trying to be upfront para hindi misleading.
Kung may specific questions kayo (paano gumagana yung InstancedMesh setup, yung EventBus pattern, smoothing logic, kahit ano) — comment lang, sasagutin ko nang taos-puso. Mas matututunan din ako kung anong parts ang interesting sa inyo.
🎥 YouTube: How I built a tiny life sim in vanilla JS + Three.js (3 min walkthrough)
💻 GitHub: jmbt25/jmbt25.github.io
🌍 Live demo: Mini World — a world that knows you're watching