Cool. It reminded me of a similar work published by Opera some years ago
http://dev.opera.com/articles/3d-games-with-canvas-and-rayca...
woa! it was 2008, time sure pass by.
A first-person engine in 265 lines of JS
31–40 of 99 posts
Re: A first-person engine in 265 lines of JS
#32It 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…
> 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?
Not always. Next time the Sun and the Moon happen to be in view at the same time, look at the dividing line X on the Moon between the parts illuminated and in shadow. Then draw a straight line Y from the Moon to the Sun.
Common sense tells us that the two lines are perpendicular, but often this is not the case. I don't understand it completely myself, but it is something to do with us residing on a curved surface.
Re: A first-person engine in 265 lines of JS
#33It 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 would hazard a guess that it's a result of the brain interpreting the electrical impulses before providing the "image" that we "see."
It does a lot of pre-processing, so to speak -- which is why we get such awesome illusions as the Poggendorff illusion [0], tricks like the Pulfrich effect [1], etc.
I don't know enough about the mechanics of how light enters and is interpreted by the eye, but I wouldn't be surprised at ALL if we "should" be seeing more like a fisheye lens but our brain is saying no, no, those lines are straight, based on the countless other stimuli it's receiving.
Re: A first-person engine in 265 lines of JS
#34Earlier quoted context omitted.
What graphics card/driver combination do you have? It runs decently for me with Firefox 29 on Linux, intel graphics (Sandy Bridge).
It is not using the GPU to do the drawing: https://github.com/hunterloftis/playfuljs/blob/master/conten... Note that it is using canvas 2d rather than canvas 3d (aka WebGL[1]). But if you take ray casting to extreme, you end up with Ray Tracing[2], which is kinda expensive. Which is why we had such an effusive conversation a few months ago about hardware accelerated RayTracing[3]. A sample ray traced scene from Alter…
2D canvas should be hw accelerated too on most browsers.
Re: A first-person engine in 265 lines of JS
#35It 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…
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.
Re: A first-person engine in 265 lines of JS
#36Re: A first-person engine in 265 lines of JS
#37It 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…
Similarly, I used to wonder why an image constructed with 3-point perspective [1] looks perfectly normal, while one with 4-point perspective [2] does not.
[1] http://www.craftsy.com/blog/wp-content/uploads/2013/07/cropp... [2] http://www.termespheres.com/images/perspective/fourpointpers...
Re: A first-person engine in 265 lines of JS
#38Heh, reminds me of kkrieger - a first person shooter in 100KB for a scene demo. https://www.scene.org/file.php?file=%2Fparties%2F2004%2Fbrea...
If you missed it a couple of weeks ago, this article about its creation was really interesting: http://fgiesen.wordpress.com/2012/04/08/metaprogramming-for-... ( Thread: https://news.ycombinator.com/item?id=7739599 )
thank you, the title did not interest me back then. Sometimes I wish HN was more like metafilter.
Re: A first-person engine in 265 lines of JS
#39It 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…
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.
Re: A first-person engine in 265 lines of JS
#40Earlier quoted context omitted.
It is not using the GPU to do the drawing: https://github.com/hunterloftis/playfuljs/blob/master/conten... Note that it is using canvas 2d rather than canvas 3d (aka WebGL[1]). But if you take ray casting to extreme, you end up with Ray Tracing[2], which is kinda expensive. Which is why we had such an effusive conversation a few months ago about hardware accelerated RayTracing[3]. A sample ray traced scene from Alter…
2D canvas should be hw accelerated too on most browsers.
Yes, however the raycasting is drawing pixel by pixel. That part is not hardware accelerated, and that is the expensive part. That is that part that shaders speedup a lot, by delegating a lot of the work to the GPU.
Just compare with this pure fragment shader demo: https://www.shadertoy.com/view/MsS3W3