So... Hey there Javascript

Programming in Javascript.. is a pain. As a crippled version of Java that tries to do 3D work, it took me a lot of time to get the hang of it. Have I fully grasped the beauty of the language? No. But that's ok. I'm really looking for ways to implement WebGL, a mix of Javascript and OpenGL ES 2.0. That brings us to another problem. OpenGL ES 2.0 is NOT the OpenGL that you would use with say, C++. It only has a quarter of the functions.


After playing around with WebGL for a few days, I realized that its almost.. silly to not use a framework. There are about 15 different ones out right now and implementing one makes coding for WebGL just so much easier. No longer do you have to worry about the silly setups and 200 lines of code to just make three squares spin (like they did in my last post). The trick is, picking the framework that will work best for your project.


At first I started with Processing.js. I figured it was popular, had a lot of documentation, and had examples as well. Their website was laid out nicely and has a fully documented API with examples (see http://processingjs.org/ for more on projecssing.js)


However, after I fiddled with it for about a week, I still could not grasp simple things. I was confused with the combination of the processing script and the javascript and how it truly interacted. Finally I got frustrated and decided to switch to a different framework: three.js.  It seems to be the most popular framwork out right now but has one huge flaw : there is very little, if any, documentation. Three.js is an extremely powerful framework, even better than processing.js (for my project at least), but one must learn by example. It is still a work in progress and keeps getting updated constantly, so hopefully there will be more documentation in the future. Three.js is a javascript file, and is easily combined with Javascript. The OpenGL ES 2.0 functions that were a hassle to deal with are implemented within Three.js and the developer no longer needs to constantly worry about the bufferset up that straight WebGL required.


After doing some research and learning more about Three.js I was able to get a working trackball camera example. Finally completing step one of my project. And it didn't even take that long.

You can rotate, pan, and zoom in the fully functional demo.

I do have to make some changes still - for one I want to zoom by spinning the scroll wheel opposed to pressing it. Also add code so this only works when pressing the "alt" key, so it is more like Maya. But I do not think these will take long. Also I want to eventually get some lighting in, because (quite contrary to what that image looks like) the circle in the middle is actually a sphere. But that is for later.


Next is to get the sphere (which I will actually make a cylinder) to move around the gird with some data points. Once that works I will work on reading in from a file - which unfortunately might be more difficult than I would have liked.