28th of July, 2014
It's not often I do advertising work. It all depends on who I'm working with and what the challenge is. In this case, I was approached by Hellicar and Lewis to build a WebGL based Kaleidoscope in about 4 days. No small order really, but I decided to step up and give it a bash. The final result is called NX Constructed and it's quite pretty.
Lexus approached Vice who approached Hellicar and Lewis who approached me! It's funny how these chains seem to happen in the freelance world. They wanted someone who was pretty handy with WebGL and available on a tight time-frame. Fortunately, my current contract is quite flexible. The final product was definitely possible in the time, but it was tight. That kind of pressure is actually quite good for me, as I am ten times more productive.
One thing that helped immensely was I could use whatever I wanted to get the job done. I chose to use CoffeeGL of course, because I know it back to front. This proved very handy because I needed some different geometry types for this piece, along with some fairly accurate picking and per-vertex attributes. Using any other library would have been very time consuming and pointless.
The project is really split into two halves. The first part involves the creation of the video. There is quite a good video of that process on Youtube, that I've included here too. Taking video and projecting it, then re-recording it, seems like quite an interesting idea and it makes for a slightly rougher, yet interesting image.
The second half was basically to do with me messing around with the Kaleidoscope. The basic premise is you need to mirror the texture co-ordinates over a triangle mesh. Each shared edge must have the same U,V co-ordinates. From that, you get your kaleidoscope. The interaction is worked out by projecting a ray from the camera view and seeing where it hits. You can get the code for this in the Realtime-rendering book, which has a different take on the maths than I had.
Wireframing is actually quite a hard thing to do in WebGL as the basic primitives for line drawing are not really there for you (line thickness anyone?). Thankfully, there is an excellent writeup by Florian Boesch where he talks about Barycentric co-ordinates, which are really handy. Using that information, I can create outlines and slightly cracked looking edges to give a more organic effect. Actually, that effect was a total experiment that I decided I liked.
The movement is your basic spring function, calculated on the CPU (since the amount of geometry is low). I thought about using a web-worker and I may do that in version two. Balancing a physical system is always tricky but I think the final outcome is quite good fun to play with. We decided to mess around with some parts of the kaleidoscope; you'll notice that things don't always line up perfectly. It makes the whole thing just a little more interesting.
Hellicar & Lewis are fun to work with. I'd met Joel some time before, though this is the first time we'd worked together. Not only that, but another colleague, Cai Matthews was involved too. A pretty good team I thought. Overall, I'm really happy with how it worked out, especially given how long it took. Everyone worked really hard and I'm really glad that my own libraries are starting to, literally, pay off. Looking forward to making version two!
