6 ms·
Raycasting in JavaScript and React
- ehnto 6y agoVery cool. Don't take this as criticism, I am just curious, what do you get out of React with this? You have written a lot of it in pure JS so I can see you're not using it as a crutch, but I am not familiar enough with React at it's edges to know why you would bring it in to the toolbelt here.
- runawaybottle 6y agoSame initial thought. Again, not to take anything away from the coolness of raycasting.
- ahuth 6y agoGood question, and mainly to see if I could. Also, React was a convenient way to render some DOM. But you're right, vanilla JS would easily do the job.
- proc0 6y agoCan only be a demo, this has been even done in Excel.
- schwartzworld 6y agoReact actually makes sense to me here. Op would have to manually update the dom constantly using vanilla JS. React allows them to worry about the programming side but not have to worry about how they are going to propogate those changes to the view layer.
- tshaddox 6y agoYeah. It allows the programmer to code using a similar mental model to coding with the canvas tag, where one would probably just draw the entire frame from scratch every frame. Granted, with the speed of modern browsers and the relative simplicity of this rendering, one could probably literally wipe the DOM layer and rewrite it every frame without having any performance issues. But if the rendering became more complicated it’s conceivable that React’s virtual DOM stuff could noticeably improvement performance.
- brundolf 6y agoReact would make little to no sense here if canvas or webgl were being used. But given that polygons are rendered as elements, using React makes a ton of sense
- spartanatreyu 6y agoMy thoughts in order: 1. Read title 2. But why? 3. Click link 4. No <canvas> tag? Just html and react? How? 5. Open demo 6. Inspect elements 7. Oh... Gentle chuckle. But why? 8. Remembers Atwood's Law
- ahuth 6y agoYep. The answer to "why do X thing in React/JS" is usually "why not?"
- gh123man 6y agoIf you find this sort of thing interesting, I implemented a "Portal" raycasting engine akin to Valves portal game. You can read more about how it works here: https://github.com/gh123man/Portal-Raycaster https://github.com/gh123man/Portal-Raycaster
- ahuth 6y agoNicely done!
- Lorin 6y agoSo many DOM elements, if you inspect a wall it's made from thin slices. Wonder if they could be merged to form complete 'walls' and then use gradient effect... heck, SVG may be more effective.
- ahuth 6y agoThat's right, which is actually kind of the point. It's amazing that 320 divs can be shuffled around the screen at 60 fps. Browsers are amazing!
- Scarbutt 6y agoIt's amazing that 320 divs can be shuffled around the screen at 60 fps. Browsers are amazing! Don't tell that to a game dev
- brundolf 6y agoIt's because CSS transforms that don't affect layout happen on the GPU, so they may as well be polygons. In fact ThreeJS, the most prominent JS library for 3D rendering in WebGL, can work in DOM rendering mode instead of WebGL :)
- bob1029 6y agoI've been playing around with some very extreme forms of server side rendering, and have come to discover that all modern browsers can actually decode and display 1080p+ jpeg images streamed over websocket fast enough to be indistinguishable from a x264 video playing at the same frame rate (60fps in my testing). I have tried on ARM/mobile and it's the same success story there. Latency almost feels lower on my S10 than my Threadripper 2950X. There's lots of things a browser can do that would surprise a lot of developers.
- mmoskal 6y agoSuch a classic! I remember writing a raycasting engine in DJGPP (GCC for DOS), when I was teenager... Fast forward 25 years and hey, it can be done in TypeScript on a $2 microcontroller ;) (though it did take some effort to get TypeScript to run fast enough...) https://arcade.makecode.com/14009-57824-16954-25349 https://arcade.makecode.com/14009-57824-16954-25349 https://forum.makecode.com/t/3d-raycasting-in-arcade/474 https://forum.makecode.com/t/3d-raycasting-in-arcade/474
- elvis70 6y agoSame but in TP7 by following a tutorial found on a CD shipped with a magazine. Very satisfied with the result but never managed to get the version with textures right.
- gtremper 6y agoThis is a very well written project. Easy to navigate through the codebase and a pleasure to read.