zondag 21 december 2008

Raycasting in Javascript



Het was ongeveer een week geleden dat mijn gedachte tijdens het spelen van Fable 2 afdwaalde naar de computerspelletjes van lang vervlogen tijd. Spelletjes zoals Doom en Wolfenstein 3d zagen er in hun primitiviteit karakteristieker uit dan de gemiddelde shooter van het afgelopen jaar. Toch was het technisch gezien ongelooflijk simpel om het 3d effect uit Wolfenstein te creƫren. Zo eenvoudig dat ik het in een middagje na heb gemaakt in Javascript.

De techniek die Wolfenstein gebruikte om een 3d omgeving te renderen heet “Raycasting”. Vanuit het punt van de speler (de camera) ga je een lijn trekken en kijk je hoever je die lijn door kunt trekken totdat je een muur (of iets anders) tegenkomt. De afstand tussen de speler en deze muur gebruik je om te bepalen hoe hoog dat stukje muur moet zijn. Kleine afstanden zorgen voor een hoge muur en grote afstanden voor een kleine muur (objecten lijken immers kleiner naarmate ze verder weg staan). Dit doe je vervolgens voor het hele blikveld van de speler en het effect is klaar. Het resultaat van het raycasting in javascript experimentje mag er zijn, ondanks dat het in veel browsers behoorlijk traag kan zijn (tip: bekijk hem in Google Chrome vanwege zijn ongelooflijk snelle javascript engine).