Obra Dinn-inspireret first-person 3D i browseren — sort/hvid, pixeleret, og bygget uden biblioteker. Hvad kræver det at lave en interaktiv rekonstruktion af et sted?
Obra Dinn brugte en simpel teknik til at skabe en stærk visuel identitet: alt renderes i sort/hvid med Bayer-dithering. Resultatet er ikke glitchy eller lavet — det ser faktisk ud som en ældre Mac-skærm, og det giver spillet en klar, karakteristisk æstetik.
Raycasting er teknikken bag Wolfenstein 3D fra 1992 — og den er stadig nem at implementere i ren JavaScript. Man kaster stråler ud fra spillerens position, måler afstanden til den nærmeste mur per kolonne, og tegner en lodret stribe i den passende højde. Dithering konverterer afstanden til et 1-bit mønster.
Raycasting (DDA-algoritme) + Bayer 4×4 ordered dithering. Canvas putImageData per pixel. Render-opløsning: 320×200 — skaleret op med image-rendering: pixelated.
Rekonstruktion af et sted — Christiansborg, en forhandlingssal, en elbil. Læseren går rundt og klikker på hotspots for at læse om de forskellige elementer.
Kernen er ~ 80 linjer JS. Det tunge løft er indhold: at opbygge kortstrukturen, tilføje sprites og hotspot-interaktioner kræver tid men ikke ekstern software.