Camera collision detection with Three.js and JigLibJS

With the release of Firefox 4, I was really excited to play with the support of WebGL. I never thought that a day would come that OpenGL would accessible in a web browser via JavaScript! :) Crazy!

So before I began rolling up my sleeves and getting dirty with coding my own OpenGL rendering code, I took a look around the web to see if someone already did the work for me. And I found Three.js. This is an awesome rendering library that makes it incredibly easy to get something on the screen. It's a pretty powerful rendering engine that can even load JSON model objects.

Once I got up to speed on Three.js and got a simple world built that I could roam around in, I decided next that it would be cool to make my camera a little smarter and let it know about the world around it. So I set off trying to modify the Three.js QuakeCamera.js class to support collision with objects but I soon realized it was going to be a lot harder than I thought!

I was about to reach for one of my old math books when I thought that there must be some sort of physics library out there that I could apply to take care of all the intersection checking stuff for me..... and maybe even get some awesome physic interaction between objects for free. :)

So again, I went searching and found JigLibJS. The library is actually a port of the popular Flash physics library named JigLibFlash. Perfect! Now physics should be easy... well sort of. Using JigLibJS with Three.js was trickier than I thought. Since there's really not a lot of documentation on the library, I had to do a lot of source code investigation and searching on google but I eventually pulled enough info together and found what I needed. :)

After a few days of mental, elite gymnastics, I got camera collision detection to work! So I went out and celebrated by getting chocolate pretzels. (lame!)

I then thought it would be fun to make a little library that would allow someone to build simple worlds composed of blocks using the JSON format to construct them. I made a little bit of progress on the project but kind of lost direction for it. :) So I decided just to leave it on GitHub as a source for adding collision detection to your camera using JigLibJS.


https://github.com/calebhc/platypus

The file of most interest is the CollisionCamera.js class. You can see how I used it in the platypus.js file. If you're wondering why it's called platypus, it's because I couldn't think of a name and just thought of those animals.



Well, that's basically it! I know it's kind of lazy for me to just point you to the source but it will explain it better, I think. Clone the project if you like and play around with it. :)

Later