How can I squeeze an additional 10 FPS out of my [primitive] voxel algorithm?

So, I made this simple 4dof voxel algorithm in JavaScript, and I feel quite proud of myself, but I don't have near enough time to debug and I've lost several days worth of sleep, however I notice that it's running relatively slowly.

Now, there are the obvious %-scaling and setInterval loops slowing it down, but I am getting less than 20 FPS on only 100 voxels, most of which aren't even on screen.

Please excuse the following code, it is adapted for my primitive little game engine, so it won't run on its own page, but you can test it at this URL (http://nextgengame.webs.com/fun/sandbox.htm).

world=new Array();

for(i=0;i<100;i++){
world[i]=[Math.random()*50-25,-3,Math.random()*50-25,['#FFFFFF','#FF0000','#00FF00','#0000FF','#FFFF33'][Math.round(Math.random()*4)]];
}

r=0;
camx=0;
camy=0;
camz=0;

fps=0;
frames=0;

window.setInterval(function(){
fps=frames;
frames=0;
},1000);

window.setInterval(function(){;
r+=0.02;
if(r>Math.PI*2)r=0;

points=[];

for(i=0;i<world.length;i++){;
u=world[i];
x1=u[0]-camx;
z1=u[2]-camz;
z2=x1*Math.sin(r)+z1*Math.cos(r);
z3=Math.round(z2);
if(!points[z3])points[z3]=[];
points[z3][points[z3].length]=[x1*Math.cos(r)-z1*Math.sin(r),u[1]-camy,z2,u[3]];
};

for(z=points.length-1;z>=0;z--){;
t=points[z];
if(t){;
for(i=0;i<t.length;i++){;
u=t[i];
z1=u[2];
z2=0-z1;
s=69/z1;
h=s*-0.5+50;
drawBox(u[0]/z1*50+h,u[1]/z2*50+h,s,s,u[3]);
};
};
};
frames+=1;
centertext(50,0,String(fps),'#FFFFFF');
sync();
},33);

This is hardly adequate to do a landscape or anything, and I want to get at least a 10 FPS boost.

This is what it looks like without rotations:

world=[];
points=[];
for(i=0;i<100;i++){
world[i]=[Math.random()*50-25,-3,Math.random()*50-25,['#FFFFFF','#FF0000','#00FF00','#0000FF','#FFFF33'][Math.round(Math.random()*4)]];
}

r=0;
camx=0;
camy=0;
camz=0;

fps=0;
frames=0;

window.setInterval(function(){
fps=frames;
frames=0;
},1000);


for(i=0;i<world.length;i++){;
u=world[i];
z3=Math.round(u[2]);
if(!points[z3])points[z3]=[];
开发者_Python百科points[z3][points[z3].length]=u;
};

window.setInterval(function(){;

for(z=points.length-1;z>=0;z--){;
t=points[z];
if(t){;
for(i=0;i<t.length;i++){;
u=t[i];
z1=u[2];
z2=0-z1;
s=69/z1;
h=s*-0.5+50;
drawBox(u[0]/z1*50+h,u[1]/z2*50+h,s,s,u[3]);
};
};
};
frames+=1;
centertext(50,0,String(fps),'#FFFFFF');
sync();
},33);

And would you believe it, it still runs at about the same speed! a 4 FPS increase at most!

It would really make my day if somebody had a way of running this a lot faster.

---

One obvious thing would be to have precalculated values for your radiant values, meaning that you'll have two arrays with sinus and cosinus in increments of 0.02, up to 2 x pi (which is a complete circle).

Those calculations are really heavy on the engine.

Also, you are using setInterval for the animation, however in 33 ms intervals, that leaves you with a maximum of 30 fps. the timing on setInterval isn't an exact measurement either, because it can be delayed by other factors (other timers etc), so maybe you would be better of to just try to run them as soon as possible and adjust the animation to the fps instead?

And use a setTimeout with a low value just to free up the engine for other task in between the frames., to not exhaust the CPU.

---

As ThiefMaster wrote above, use local variables (see http://www.webreference.com/programming/javascript/jkm3). There are lots of calculations inside your loops. Could some of them be pre-calculated? Do you really need all those variables, or could the temporary ones be omitted by writing slightly more complex expressions?