Javascript Voxel Spacing
July 28, 2009Selim Arsever
- http://onaluf.org
- Location:
- Zürich, Switzerland
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
It's a simple demo that uses canvas and ImageData to draw a landscape using the voxel spacing technique. An image is read with the getImageData method and used as a heightmap. The landscape is then rendered column after column using the voxel spacing method. The image is then copied to the canvas with a scale factor.
Technology:
canvas, ImageData
Comments
37 fps on Firefox 9, 34 fps on Chrome 16 on my machine. Firefox catched up a lot recently.
Reply to this commentVery nice! The effect is great -- very realistic!
Reply to this commentlindooooooooo!!
Reply to this comment.....
Reply to this commentfreind
Reply to this commentyu
Reply to this commentthis experiment is good but is pixely good try@! keep it up and make a better 1!!!!!!
Reply to this commentDicari dengan tangapan yang positif
Reply to this commentCan you add the tag to this so it works with Google Chrome Frame? Thanks :)
Reply to this commentsdhfkj;ash
Reply to this commentvideo
Reply to this commentgift
Reply to this commentGreat! I tried to optimize it to what i can, here is the result if you are interested:
http://garzul.tonsite.biz/javascript/voxel/voxel_landscape.htm
This is like 2x faster but however less accurate. :)
Reply to this commentCool, nice work, this is quite faster indeed! (In Firefox the anti-aliasing part show some strange artifacts.)
Reply to this commentfixed and added the fps counter
It is slow on google chrome v4.0.202.0 (DEV Release)
Reply to this commentI've just tested it on Chromium 4.0.204.0 and it's as fast as before (~10fps in high res ~18fps for low). What OS/machine are you running Chromium on ?
Reply to this commentVery cool idea, Selim! ;)
Quite slow in Opera v10b3 for Mac, though, for some reason. Maybe you can tweak it.
Reply to this commentIt is designed to run well on chrome, not opera. That is why it is called chrome experiments, not javascript experiments.
Reply to this commentit looks gud
Reply to this commentI sarch
Reply to this commentVery interesting, congratulations. Worked very fast with Chrome here.
Reply to this commenti didn't really understand this experiment. >_<
Reply to this commentamit
Reply to this commentSince this is a variant of ray tracing It's rather easy to do. If you look at the source code you will see on the 18th line: verticalOpening: 0.4 If you reduce this value you zoom in, if you increase it you zoom out. However you are limited in the detail that you'll get by the quality of the texture I used: no interpolation is done yet.
How and by the way I added a resolution switch: if you push the 'q' key you will alternate between the standard resolution and an higher one.
Reply to this commentWhat would zooming in and out look like for pictures created like this?
Reply to this comment