Voxel Spacing

After some hours of development here come a small experiment in javascript using canvas and ImageData.You'll find more information on

ps. the screenshot is from an higher resolution as what you'll find online. That's because it's really slow otherwise :) ...

tags >> announcement, javascript permalink >>comments >> add

e-mail or homepage:
Sylvain GardenGénial. Je suggère de changer la résolution dynamiquement : low pendant les déplacements, high en immobile... comme le font certains appli Flash.
SelimMerci Sylvain c'est une très bonne idée! Je vais tenter d'implémenter ça dés que j'ai un peu de temps...
francisHey man. That is excellent. I didn't know that you could implement double buffering like that. You've sped up my canvas game 2X. Thanks :)
RocketCool stuff ;-)

Try to modify your experiment and code and added some features:
- better antialising
- water level
- ground detection (little bit buggy)
- beautifying the landscape terrain gfx
- water waves simulation (basic)

And used this for a bumpmapped terrain :

Rather poor frame rates, but acceptable on a dual core ;-) Best with Chrome 9/10 (beta) or FF 4.0 (beta)

Experiments will be continued ;-)
blakeI used an old technique that was useful back in the 1980s, and seems to be useful again now because I was able to get a 10 FPS boost in your program. How I did it:

var precalcLookup = function () {
var lookup = [];
for (var j = 0; j < constants.screen.height; j++) {
lookup[j] = (j * constants.screen.width);
return lookup;

Then replace the renderer with:

var calc = 0;
for (var j = (constants.screen.height - screenProjectedTop); j > fillGoal; j--) {
calc = (i+lookupTable[j])*4;
image[calc] = Math.ceil(renderCache.r);
image[calc+1] = Math.ceil(renderCache.g);
image[calc+2] = Math.ceil(renderCache.b);
image[calc+3] = 255;

Note: If you don't use the lookup table it drops down to 28 - 33 FPS in IE for example. But, with the lookup table it sits around 40 - 50 FPS. You should do this for all calculations, I only bothered with this one location.
blakeCode is here:

Images for the terrain texture and heightmap are here:

Here are a couple of screenshots of my rework of the code I was able to hit 125 FPS on regular quality, and on the higher one I hit around 25 FPS. I also added some more info to the screen like avgfps,min,max,etc... and I've fine tuned a lot of the code to reduce calculations done...:,wC8Ktad#0,wC8Ktad#1
tags list