• HTML5 Raycast

    Nee, wordt niet meteen té enthousiast bij het zien van de screenshot, de wall textures heb ik nog niet onder controle. Maar, het is me wel eindelijk gelukt een werkende raycaster te schrijven. Daarbij wil ik benadrukken dat ik geen tutorial heb gebruikt, al zijn die zeker voorhanden!

    Achtergrond
    In 1990 vond er een opmerkelijke gebeurtenis plaats in de studio van spelontwikkelaar Origin Systems. Paul Neurath en Chris Green vonden een manier om het concept van ray-casting uit te werken op een computerscherm. Deze methode deelt het beeld op in een aantal vertikale kolommen, waarbij de afstand van de aanschouwer tot deze kolom bepalend is voor de hoogte van de getoonde elementen hierin. Hiermee wordt een Pseudo-3D effect verkregen, waar veel games begin jaren '90 dankbaar gebruik van maakten. De game van Paul en Chris zou later Ultima Underworld gaan heten en was een inspiratiebron voor een andere softwareontwikkelaar genaamd John Carmack. John ontwikkelde zijn eigen raycaster voor zijn spel Catacomb-3D en niet veel later voor de klassiekers Wolfenstein 3D en Doom. Deze games waren zeer vernieuwend en extreem populair, vooral door genoemde 3D-techniek, maar ook door de distributievorm, shareware genaamd. Ook op andere platforms zijn prachtige games geschreven met deze techniek, maar toen computers krachtig genoeg werden voor een 'echte' 3D wereld (bijvoorbeeld Quake, in 1995) raakte de techniek al snel in de vergetelheid.

    Hoe dan ook, zoals gezegd probeer ik al jaren een (Flash) raycaster te schrijven maar loop ik altijd halverwege vast vanwege de complexe wiskunde die hiermee gemoeid is (al is dat natuurlijk niets vergeleken met een echte 3D game). Dit keer heb ik doorgezet en met resultaat. Let wel, het is natuurlijk nog lang niet af, de code kan vast veel korter en scherper, je kunt nog door de muren lopen, de textures dansen alle kanten op.. maar daar ging het me niet om, ik wilde de basis voor eens en altijd hebben afgerond.

    Besturing
    Je kunt door de kaart navigeren met cursortoetsen. Als je op de T drukt zie je waarom het texture mapping deel nog wat aandacht behoeft :) Je kunt ook op de D drukken voor wat meer inzicht in de berekeningen.

‹ HOME Meer experimenten