Working out angles and perspective with JavaScript

[Chris]

Hey, I don't know if there are many guys here much nerdier than me. But I'm stuck with something and am just hoping that someone actually paid attention in math.

I'm making a 3D camera/map system 100% DOM/CSS/JavaScript, no Canvas needed. The plan is to work out x,y,z coordinates and the way the camera views the map, but I just can't get my head around it.

Here's how it works.

I have a player. The player has an x, y and z coordinate. He also has a viewing distance setting that allows him to see less or more depending on system performance. With this information I then set his camera on the map. The camera is basically the screen that he is looking though. Like in any other game.

The camera has to be able to change pitch and rotate around.

To create a 3D effect I have a few options:
Either use WebGL (uses canvas)
use http://wxs.ca/js3d/ (sort of the direction I'm going in but only uses flat surfaces)
or make an object generator that can turn triangles into 3d objects. How this is done I'll explain with a picture:


I then use a map and camera system.


My problem is I can't for the life of me work out how I'm supposed to work out the perspective, camera rotation and a lot of other things. If anyone would happen to know how to do this or have a link that can explain things I'd really appreciate it.

[Jackolantern]

You are looking for how to apply the trig functions, it seems to me. Sadly, I can't be of much help right now, as I am taking Trig 1 this semester, and the semester has basically just started. However, I do have a couple of resources here:

Gamedev.stackexchange thread relating to using trig functions to solve camera angles

DarkBasic Pro forum member's trig tutorial as related to game development

EDIT: And I have to say, Chris, that I believe you are one of the most talented coders on this forum. When you get into trouble, probably few and far between here will be able to help you in the distant corner of the universe you have hit a snag at. However, since this is really getting into traditional loop-based game development, you could likely get a lot of help from gamedev.net. Figuring out how to work camera and perspectives is pretty much a universal problem in traditional game development, and there are some brilliant loop-based game developers over there.

EDIT2: Oh, and I forgot to mention that this looks crazy! 3D gameplay in Javascript without even using canvas is new to me, and I can't wait to see more!

[Chris]

Thanks for that Jack! I stumbled across a nice little article on how OpenGL works last night:
http://www.falloutsoftware.com/tutorials/gl/gl0.htm

[Jackolantern]

OpenGL is cool. I played around with the very basics a couple of times. The only downside is that before it is really viable for games it is going to need some serious graphics acceleration. The browser sandbox doesn't give it enough resources, so many computers can hardly rotate a primitive at a decent framerate, much less run an acceptable-speed game. There are already talks of the next round of Safari and Chrome giving it a ton more power.

[Chris]

Version 8 will be powerful enough for a low point count 3D system I think. The only reason I'm making this is because still canvas works so slow. Until WebGL is a proper standard I'm stepping over to that.