Mesh subdivision (2012 extended edition)

mesh subdivision 2012

Back in 2004, when I was starting to experiment with OpenGL, I had the idea of creating meshes from scratch. This will come in handy for intros, since this way I won't be needing to include the meshes' data with the executable!, I thought.

I would create a simple base pyramidal mesh, and subdivide it until I got something with more vertices and faces, but properly connected (not just a bunch of random points). So I when I had a couple of free days, I came up with a very rough way of creating and subdividing meshes. It was very raw, but I loved that I had done it myself!

At the end, I didn't use it for any intro at all, but I used the trick in a demo instead, called codecolors (source code, if you're feeling adventurous). Although it's hard to notice, since everything was generously blurred (I had recently learned how to get a cheap motion blur effect and was really eager to use it in every single frame!).

Fast forward to 2012. I am learning (tinkering with?) three.js and I wanted to find out how to manipulate vertex data dynamically. I somehow remembered this experiment and where I left it (Next step is playing with the vertices!), and I decided to continue it.

Once I got the basics working, I thought it would be neat to have some way of interacting with the scene--so I added dat.gui, which are the controls on top right. Then I also wanted to save the images, as I once I added controls for altering the look I started getting great imagery! So I added FileSaver.js and canvas-toBlob.js, since browser support for downloading images is still a bit incomplete (so to speak).

And finally I thought: hey, storing images is ok, but what if I want to modify an existing configuration?. So I added support for storing the current configuration via some simple location hash serialising. I am not sure if it's the best way but it seems to work well enough for now!

mesh subdivision 2012

Oh, and since I just love text effects, I added a silly text-manipulation thingie to dynamically alter the innerText of the page contents. Just because!

It's fun to play with all the settings and seeing what happens. I have found myself mesmerised just by looking at the end result. Some images seem really organic; others look very fractal/spaceish to me. (Don't forget to make it wobbly! --looks like someone is having a discussion inside the pyramid!).

I'm very happy with the end result, and even more about the development process. I can vividly recall the many hours I spent in 2004 dealing with arrays and memory allocation for such a simple task as this one. Quite unproductive, to be honest! But Javascript + WebGL totally ROCK! Also, after so many years of trying to explain what the demoscene and realtime is about, it's great to be able to demonstrate it in realtime. Yay!

I'll write about the new "Simple yet Frequently Asked Questions" about three.js that I encountered while doing this experiment... but that will be tomorrow, if you don't mind!

Have fun! :)