Live data from Hacker News

A first-person engine in 265 lines of JS

playfuljs.com

61–70 of 99 posts

Re: A first-person engine in 265 lines of JS

#61
post #23

My raycast engine in Javascript needs a few more lines and works a little bit different, but gives also impressive results I think :) . http://simulationcorner.net/index.php?page=comanche

Love that you referenced Comanche ... my favorite helicopter game ever. Nice work on the JS side also!

Re: A first-person engine in 265 lines of JS

#62

This demo unfortunately uses an incorrect perspective transformation. There is no reason to go to trig if you represent the camera plane as a vector, and step along it one pixel at a time, and allowing the wall height to vary linearly in the distance to the camera vector (taking lines to lines). In addition to being correct[1], it has the added benefit of being faster if implemented well. My (admittedly n00bish and e…

Why is it incorrect? From looking at the demo, it doesn't seem incorrect at all. If it's incorrect, then the incorrectness doesn't affect the end product, which is all that matters. Lines seem to map to lines, so it seems mistaken to call it incorrect. I'd be interested in further explanation about why you feel the underlying math could be improved, though.

He ought to be using what Wikipedia calls a "perspective projection", or, sufficiently in this case, a restriction thereof. Notice how the edges of walls do not appear straight on the screen, even though he mentioned correcting "a fisheye effect" (tellingly alluding to a popular tutorial on this topic at lodev.org).

A correct formula is on line 485 of my implementation linked above, found the old fashioned way using basic geometry.

Re: A first-person engine in 265 lines of JS

#63
post #41

It is very interesting to me that you need to multiply the distance-to-wall by the cosine of the angle to transform the image from fisheye to normal. It makes me wonder, why is it that our eye in real life sees straight lines as straight, the way this demo renders the image? To illustrate the question, see https://en.wikipedia.org/wiki/File:Panotools5618.jpg – why do we see the world as in the bottom image instead of…

I was trying to crack exactly the same problem a decade ago - I was very frustrated by "classical" perspective distortions (such as looking up and down at a very tall pole, you notice in 3D projection the projected width at a given height changes depending on the pitch angle, which is counter-intuitive as your eye doesn't do that). I searched for answers, read Denis Zorin's disertation from Caltech, various different…

this is the perspective projection that we have with our eyes: spherical projection. detail here: http://www.treeshark.com/treeblog/?p=301

At any given moment we're only looking at a very small slice of that larger spherical panorama. Our brains are constantly constructing a coherent 3d model, with the help of various schematic constraints, such as expectations about straight lines being straight.

We perceive straight lines. but that's not what we see. But the curvature is usually so slight that it is very difficult to see.

Re: A first-person engine in 265 lines of JS

#64

Earlier quoted context omitted.

Why is it incorrect? From looking at the demo, it doesn't seem incorrect at all. If it's incorrect, then the incorrectness doesn't affect the end product, which is all that matters. Lines seem to map to lines, so it seems mistaken to call it incorrect. I'd be interested in further explanation about why you feel the underlying math could be improved, though.

He ought to be using what Wikipedia calls a "perspective projection", or, sufficiently in this case, a restriction thereof. Notice how the edges of walls do not appear straight on the screen, even though he mentioned correcting "a fisheye effect" (tellingly alluding to a popular tutorial on this topic at lodev.org). A correct formula is on line 485 of my implementation linked above, found the old fashioned way using…

Indeed, you're right: http://i.imgur.com/oQ7S3Jo.jpg

On my old laptop, the demo looked fine. But after switching over to a widescreen (and higher FPS) you can tell that it's slightly wrong up close, and noticeably wrong (jittery) in the distance.

I wonder what's causing the jitter...

Re: A first-person engine in 265 lines of JS

#65
post #61
post #23

My raycast engine in Javascript needs a few more lines and works a little bit different, but gives also impressive results I think :) . http://simulationcorner.net/index.php?page=comanche

Love that you referenced Comanche ... my favorite helicopter game ever. Nice work on the JS side also!

The graphics were impressive, but the gameplay never touched me. Comanche 3 was much better.

Re: A first-person engine in 265 lines of JS

#66

Earlier quoted context omitted.

Its gotta be the shape of our eye, for the same reason the effect works in a mechanical DSLR camera, where light is only refracted through the lens.

> for the same reason the effect works in a mechanical DSLR camera The sensor on the back of a camera is a flat plane, which is why (with most lenses) you get an image where straight lines appear straight. The sensor on the back of your eye (the retina) is curved.

straight lines are straight in a photograph because of precision manufactured optics shaped specifically to achieve that effect, to reduce "chromatic aberrations" and "barrel distortion".

Re: A first-person engine in 265 lines of JS

#67

This demo unfortunately uses an incorrect perspective transformation. There is no reason to go to trig if you represent the camera plane as a vector, and step along it one pixel at a time, and allowing the wall height to vary linearly in the distance to the camera vector (taking lines to lines). In addition to being correct[1], it has the added benefit of being faster if implemented well. My (admittedly n00bish and e…

I'm not sure I'm convinced, as finding the cosine does in fact find the linear distance from the camera plane to the intersection. This is, as far as I have seen, the standard implementation, eg: http://www.permadi.com/tutorial/raycast/rayc8.html#FINDING DISTANCE TO WALLS

However, I would love to see your proposed solution demonstrated. Would you care to fork the raycaster and compute the results with an alternative method?

Re: A first-person engine in 265 lines of JS

#68
post #58
post #54

Earlier quoted context omitted.

I really like how your code uses much less cpu than that of the article. whats the trick ?

Don't know. But here some possibilities: 1. No fullscreen 2. I update the screen only if a key is pressed.(No rain, that has to be rendered all the time) 3. I don't use any costly canvas functions. I render everything myself in a pixelbuffer. 4. Typed arrays

It's #2. Redrawing at 60hz (or as close as the machine can come) is what hits the cpu so hard.

Re: A first-person engine in 265 lines of JS

#69

It is very interesting to me that you need to multiply the distance-to-wall by the cosine of the angle to transform the image from fisheye to normal. It makes me wonder, why is it that our eye in real life sees straight lines as straight, the way this demo renders the image? To illustrate the question, see https://en.wikipedia.org/wiki/File:Panotools5618.jpg – why do we see the world as in the bottom image instead of…

The brain adjusts the images after learning about the physical world using other senses. If you start wearing glasses turning everything upside down the brain adapts within days.

https://en.wikipedia.org/wiki/Perceptual_adaptation#Experime...

Re: A first-person engine in 265 lines of JS

#70
post #58

Earlier quoted context omitted.

Don't know. But here some possibilities: 1. No fullscreen 2. I update the screen only if a key is pressed.(No rain, that has to be rendered all the time) 3. I don't use any costly canvas functions. I render everything myself in a pixelbuffer. 4. Typed arrays

It's #2. Redrawing at 60hz (or as close as the machine can come) is what hits the cpu so hard.

No, I don't use requestAnimationFrame right now. I think when I wrote it, it was not supported by IE. But can't remember.

I calculate as close as the machine can but with a window.setTimeout(Update, 0); in order to be responsive.

Post reply on HN