Implementing a camera in pure WebGL

Hello everybody,

I’ve been working on a problem for almost two weeks, so I hope someone here can help me:
I’ve been doing Giles Thomas’ WebGL Tutorials and based on that started to extend one. I used Lesson 10 ( http://learningwebgl.com/blog/?p=1067 ) and tried to extend it with lighting. I got some very strange errors, which by I now I think I figured out why they happend.

So, I uploaded my code to my webspace (My code is probably very messy, for me it ist about learning how things in cg work, so I can life with it for now :wink: ). Additionally to my code, I just use webgl-utils.js and glmatrix.js.

The last “working” revision: if you move up close to a wall, it will turn green, when moving away it will be brighten and turn eventually white. Turning to the left will turn the wall red, to the right blue - which matches the lightsource I’ve defined at the top.
http://www.sok4r.de/pub/webgl/ml0.html (script has the same name but with .js-extension, but I’m probited to post more than four links)

I tried to implement a camera, but it’s not working at all - not even an error message appears (one of the frustating things about javascript…). I got some ideas about how to do it from this site, but the explanations are very short and the camera is also fixed, which doesn’t help me.
http://www.sok4r.de/pub/webgl/ml1.html

If I understand it correctly, by using a model-view-matrix and doing everything the way Giles did, when I “move” I don’t move the camera, but the whole world around a fixed camera. This would be good if I had a scene with a fixed camera looking onto a model, but not when being inside the model. So I have to split the matrix into a model and a view matrix, do the changes and multiply them afterwards. But I have no idea how to properly do it, most likely dut to my knowledge about computer graphics beeing very limited. I tried look up on the internet for some information, but all I found does’t fit to my problem or it is people with their frameworks telling me they support camera, but don’t tell how (and reading it out of a big framework is a very hard task, the documentation is for people using it, not the ones who want to know how it works).

Any help is highly appreciated, links and hints on articles, books, etc. on the topic are also welcome.

  • Sokar

PS: I know with my limited knowledge it would be better to just use a framework instead of doing everything by my self, but I think it’s better to have some knowledge of how it works inside instead of just using it as a blackbox. I know this is the hard way, especially with WebGL beeing a very lowlevel API - but it’s the way I’ve chosen and that beeing my only problem left, I don’t want to re-write everything to use a framework - next time I’ll surely do :wink:
PPS: and sorry, for my english, I’m not a native speaker - if something is not clear, I’ll try to explain it better.

Javascript errors are visible in console - in chrome it’s called web inspector (you can open it via RMB->the last option (Browser element or something like that)
in ff you can open it via Firefox/for web developers/www console

To implement camera from scratch I suggest first to implement well known and usefull lookAt function and then call it on the begining of every frame (assuming that MV matrix is set to identity before).