/raycasting-study

A study about Raycasting in Javascript

Primary LanguageTypeScript

Raycasting Study

This technique consist of moving a block (player) on a 2D map and "cast" rays until rays hit a wall. For each pixel of wall hitted, render an equivalent rectangle in another canvas. All this rectangles (with ther correct color and size based on player distance) makes the impression of a fake 3D.

DEMO

Map Builder

Install

Install Typescript globally:

npm install -g typescript

And run:

npm install

npm start

Errors

If you have error running, try to create a folder dist. Sometimes browserify throws an errors if the folder doesn't exist.

References

A Técnica de Ray-Casting - Márcio Sarroglia Pinho

Raycasting Basics with JavaScript - Gustavo Pezzi

Make Your Own Raycaster Game - 3DSage

Ray Casting em JavaScript - Angelito Goulart

Wolfenstein 3D's map renderer - Mat Godbolt

Ray casting HTML5 con JavaScript - Javier Muniz

Wolfenstein 3D - Madureira

Lode's Computer Graphics Tutorial

Sandbox - Nichtgian

http://qzx.com/pc-gpe/doom.txt

https://stackoverflow.com/questions/47239797/ray-casting-with-different-height-size

https://permadi.com/1996/05/ray-casting-tutorial-12/