Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

RayCast.js Engine

An advanced ray-caster engine written in JavaScript from scratch, with zero dependencies · By undefbehav

nice

A topic by jfkEO1010etc created Feb 13, 2021 Views: 182 Replies: 7
Viewing posts 1 to 5
(+1)

Very nice implementation. Nice texture mapper. I did some raycasters too, but always had problems with rounding errors/ sawthooth artefacts. One problem: mouselook does not respond when WASD is pressed, so I cannot move around corners without to stop etc.

In my own projects I noticed movementX and Y give diffrent values depending on whether a key is pressed or not, so I simply multiplied them x 2.5 when a key is pressed. Could it be you use a threshold for movementX/Y, that may not be reached while a key is pressed? This was on Brave browser BTW, but it seems to be a problem that multiple browsers share.

Developer (1 edit) (+1)

Hey man, thanks for taking the time and checking out my little engine! I really appreciate it. Yeah, texture-mapping floors and ceilings was indeed a challenge for me too. It may not be perfect, but I’m pretty happy with what I’ve been able to accomplish so far. That aside, would you mind elaborating on the sawtooth artefacts you had with your engine, I may or may not be suffering from the same with mine.

As for the mouse look, yeah, I did notice some of the browsers behaving differently with the movementX and movementY–especially on Safari and Firefox, the values for movementX & Y are literally all over the place and can be a pain to use the mouse to turn around etc. I have never cared for it that much since I thought it was actually a behavior of the pointer lock and mouse listener apis and there was not much I could do about it. Now that you mention it, your approach seems sensible to me, combining it with clamping the values in a window could in fact be a decent workaround for the issue. I will try that and let you know. Thanks!

(+1)

Not trying to spam your blog, but you asked. See my texels are not aligned to the world, yours are. To be honest, mine was a bloody beginners attempt, with door-spy -like perspective distortion. Nothing to be proud of. Yours seems much more like the original Wolfenstein, or also Doom 1.

(+1)

BTW, instead of requestPointerLock, the W3 consortium should rather give us PositionPointer. If  You do that every frame (to the screen center), you'll know exactly how fast the mouse was moved away in the mean time. No matter the framerate (cause this already contains the delta factor) or whether any key is pressed (that's silly, mildly spoken). That's how we did it in windows.

Developer

Hey man no worries.

Well I don’t particularly see a problem with the way you’re texture mapping, however to overcome that fish-bowl distortion I think you should try casting a ray for each pixel column of the screen and work out the angle of the ray that way, rather than shooting a ray at each angular increment of the fov.

I would be interested in checking out your engine btw, if you ever released it somewhere.

I only released the source, this was written in Blitzbasic. I was playing with the idea to port it to JS as a test for my BB2JS project. Then I'd had used the imageData object to render the frame and "put" it onto the canvas, seems pretty straight forward. But then I get stuck in WebGL ^^

Really not much to see in that sourcecode. But what I would suggest to you is to implement mipmapping. Just auto-downscale the textures to a set of 256, 128, 64, 32, 16, 8, 4, 2 and 1 pixel size, and read from the one defined by the distance to the camera - it's cheap in terms of cpu load. And it prevents blinking details at a distance. The additional UV calculation can be achieved quickly by shifting the bits to the right.

I thought you may find this funny too:

https://jfkeo1010etc.itch.io/ascii-maze

Developer

Hey man, sorry for the late reply. I was pretty occupied with my actual dayjob. XD Anyways, thanks for sharing this with me.