Simple 3D raycasting engine in DHTML

[robertgamble]

http://www.elephantsneverforget.co.uk/hroberts/editor/gme.asp (probably I.E only. There's nothing that should stop it from running in Moz and NS, but it's quite demanding so I imagine they'd choke..)

Right, anyone have any ideas of how to make it faster?? I fudged it together really quickly so theres probably lots of room for improvement.

Also, the the actual raycasting code is crap because I can't get Math.tan() to work properly.. (96 + (224-191)/tan(60)) should return about 115, but it's waaaaay off. Am I doing something wrong or is tan() broken (I.E 5.5).

Anyways tell me what you think.. Is this the first real time 3D engine in javascript?

[robertgamble]

Anyone? :(

[jkd]

Umm, nothing happens in Moz 1.1 Alpha? But the process manager is saying that Mozilla is using 85%-95% of my total CPU usage after idling on the page, which implies something is going on.

Anyway, the only thing I see immediately offhand to increase performance is in the beginning of controls():

!peek( ((x-(SinTable[ang]*mov))/grid) ,((y-(CosTable[ang]*mov))/grid) ) ){press=true;x = x - (SinTable[ang] * mov); y = y - (CosTable[ang] * mov)}

You have x-SinTable[ang]*mov and y-CosTable[ang]*mov twice each.
I doubt your unnecessary grouping parantheses hurt performance any, but I'm pretty sure it would be faster to perform that calculation once, store it in a variable, and use that variable twice instead.

Mozilla has a builtin code-profiler in Tools --> Web Development --> Javascript Debugger

I would suggest making it work in Mozilla, then extensively use this tool to optimize code. :)

[robertgamble]

Got it working(ish) in Mozilla! :)

Something is wrong with this line:
rend +="<div style='position:absolute;top:"+(100-(ds/2))+";left:"+(n*scale)+";background-color:"+color+"'><table cellspacing=0 cellpadding=0 border=0 width="+(strwidth)+" height="+ds+" bgcolor="+color+"><tr><td></td></tr></table></div>";

Mozilla is ignoring the table BGCOLOR, I think. Either that or something is wrong with my formatting? I dunno.. Anyway, I've turned the table border on and now everything is displayed. It's just REEEAAALLY slow. Like 10x slower than IE atleast!

I'll change controls(), and play around with the Moz debugger. I had an idea of how to do texture mapping too.. :)

[robertgamble]

http://www.elephantsneverforget.co.uk/hroberts/editor/gme2.asp

Now with (sort of) texturemapping.. It's the worst possible way of doing it, but it looks interesting ish anyway.. This version is a bit faster than the other one I think..

I had a go at doing stairs, but couldn't get them to be positioned correctly on the Y coordinate.

The formula is wallY=(100-(distance/2));

So everything appears in the center on the Y coordinate. Which means that instead of stairs appearing on the floor they kind of float in mid air.. Any ideas?