I started off reading around and did a little bit of coding, learning how to set up and initialise the canvas renderer, camera, shaders, buffers etc… and then came across three.js.

This awesome library, which is still under development, aims to “create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.”. Perfect for me then.

After a bit of playing around with the example here, I slowly started working on organising the code I was building up into a more usable structure – it’s still a right mess, but it’s an evolving mess.

In the process I also kept trying to add small bits of functionality, some of it taking longer – and being less productive – than it could have (like when I first started trying to write my own click detection and then gave up after discovering I should probably be using ?rays? or something – anyway this is for the next session I figure), some of it coming together surprisingly easily.

So, through these meanderings, I have started getting my head around; keyboard detection ( multiple keys ) and interaction, moving objects in a 3d space, mouse click and wheel interaction, lighting, a camera and the beginnings of understandings of meshes/materials, plus probably some more stuff I already can’t remember.

There was of course a couple of things that set my brain boggling. For instance at one point I tried to start working out how the hell you go about rotating the camera or an object around another object in a 3d space:

So…   I need to know my position-vector-thing and the point I’m trying to rotate around’s position-vector-thing …

… and then I need to know how far away from it I am currently and … er … should there be an axis involved?

Am I rotating or am I moving and rotating?

Do I need to know where it and I am, in relation to some theoretical centre-point in the environment I’m working in?

Is my head about to overheat and need me to stick it in the freezer…

Anyway, obviously there is a way and it must be well documented but at the point it hit me, I decided it too, should be something investigated at a later point.

I found this awesome(seemingly anyway) introduction to the whole concept of graphics programming:

http://www.arcsynthesis.org/gltut/ – thank you Mr Jason L. McKesson I will be endeavouring to read this as I foray further.

I also managed to remove my old stagnant site and replace it with this new install. I don’t know whether I’ll use it much, but we shall see.

Anyway I’ve gone on enough, here’s what I ended up with this weekend:

WebGL Experiment 1

A, W, S and D move the current object around (position.x + position.y)
The mouse wheel moves the current object into and out of the space (position.z)
Clicking on the background creates(and sets control too) an object
Clicking the options on the left change what you are in control of at that point in time (Last created Object, Light or Camera).

Have a play… I know it’s not that advanced but it’s been a fun weekend.