Very cool!<p>I went deep down the rabbit hole with raycaster engines over the last 2 years. While this particular rendering technique has lots of limitations (like a fixed camera - unable to look up and down) it also has some interesting properties. Such as the ability to create windows, mirrors, and portals very easily by re-directing the way the rays fly.<p>I actually put together an entire game around this to test the limits of what I could achieve with raycasting. If anyone is curious you can see a video of it on my blog: <a href="https://blog.sb1.io/gateescape/" rel="nofollow">https://blog.sb1.io/gateescape/</a><p>What I think would be a great project is moving the casting and drawing part over to a compute shader. My engine is multi threaded and chunks the screen so each thread can do some section of the work. Unfortunately I want the engine to be cross platform, but Apple has made that rather difficult with the requirement of Metal going forward. If anyone has seen this style of raycasting implemented on a GPU I would be very interested!
Very neat. Shameless plug: Things can get extremely minimal if you make the view frustum orthogonal and also use <i>raymarching</i> instead, then the geometry (SDF) is very concise to define... a lot of the math disappears and the code gets super short... like 140 chars short:<p><pre><code> Spheres + Displacement
https://www.dwitter.net/d/15947
https://www.dwitter.net/d/15951
Spheres Orbit + Fake Lighting
https://www.dwitter.net/d/16192
"Smoke" (3D perlin-esc noise)
https://www.dwitter.net/d/16179
https://www.dwitter.net/d/16169
Snowman + Snow
https://www.dwitter.net/d/16955
</code></pre>
Not very practical for much of an engine of course, and also much slower than casting, but it makes it dead easy to understand by removing matrix transforms et al.
Ha ha - very interesting use of React... I love that the columns are components!<p>Though my "negative nancy" comment would be that this is the wrong tool for the job (or at least, it could use a little renaming?) because after jumping from Scene to App to useCastRays hook... I finally found all the actual logic in "utils": which I'm always suspicious of ;)<p>Anyhoo - really cool, I'd like to see how the 2D sprites are integrated!
Interesting trivia: The game Wolfenstein 3D originally used raycasting to determine visibility. Later, id software signed a contract with Nintendo for a SNES port, which they outsourced to a contractor while they worked on Doom. During this time Carmack realized that the same method won't be fast enough for Doom and started studying BSP [1] trees. Meanwhile, the contractor was unable to do the port because of the very paltform-specific code (heavy optimisations for the 386 and 486). So id software took time off from Doom and went back to do the port themselves, eventually succeeeding by using BSP for visibility and a lower resolution.<p><a href="https://en.wikipedia.org/wiki/Binary_space_partitioning" rel="nofollow">https://en.wikipedia.org/wiki/Binary_space_partitioning</a>
A couple years ago I got bored on the train, and coded a simple ray-caster in Pico-8.<p>Ray-Casting is fun because it's a relatively simply algorithm to "rediscover", and can be coded in just a few hundred lines of code... I've debated making it a guided question to ask during interviews, though I've resisted thus far because I'm afraid it might be a bit too much for a junior candidate, and might be too easy for a senior candidate.
Great demo.<p>A couple of years ago, I wrote a Javascript implementation myself: <a href="https://github.com/avik-das/js-raycast" rel="nofollow">https://github.com/avik-das/js-raycast</a><p>And then, when asm.js (precursor to WebAssembly) became a thing, I rewrote it in C and compiled it to asm.js: <a href="https://github.com/avik-das/emcc-raycast" rel="nofollow">https://github.com/avik-das/emcc-raycast</a><p>I'd already written a ray tracer (so a fully 3D renderer) prior to that in college, so it was fun to learn about a more limited algorithm that was better suited to older hardware.
Nice. Not so long ago I was trying to make one without the grid layout, using lines instead. Never got the math quite right thou. Here's the link if you wanna take a look:<p><a href="https://github.com/victorqribeiro/myRaycast" rel="nofollow">https://github.com/victorqribeiro/myRaycast</a>
These are fun!<p>Shameless: <a href="http://www.dormando.me/post/fpga-raycaster/" rel="nofollow">http://www.dormando.me/post/fpga-raycaster/</a> - I did one of these last year with an arduino using an FPGA as a weird GPU :)
Also this -> <a href="https://keithclark.co.uk/labs/css-fps/" rel="nofollow">https://keithclark.co.uk/labs/css-fps/</a> - 3D using CSS :)
Very cool but the WASD keys do not work on Firefox. Arrow keys work fine though!<p>edit: it suddenly started working after I switched to a different tab, and then back to the raycast's tab.
Nice! A trick from Wolfenstein 3D to improve the look is to give all the north-south walls a lighter colour, and all the east-west walls a darker colour.
you're killing your stack with redundant recursion, here:<p>return findWall(map, position.add(deltaX, deltaY), deltaX, deltaY);<p>no reason not to loop here.