kickcraft Mar 19 2013

I finally got chance to mess around with voxel.js the other night, and thought I’d have a little fun with it. You can do an awful lot of cool stuff with voxel.js and its associated modules, including generating terrain from a PNG heightmap. But I thought it might be cool to create structures from a PNG, so you can automatically have structures built and hoisted in front of you in the 3D world, based solely on a 2D graphic. Thus, kickcraft was born.

It works best with logos, where there is only a few colours in play and fairly distinct, simple shapes. It uses the incredibly useful png2json script from within the heightmap terrain module to turn a PNG image into a JSON document. From there, kickcraft loads it in, and looks up materials for the colours it finds in the RGB data for the PNG. There is a hosted demo here which loads the KickCode boot icon by default, but you can also click here to see it running with the image data for the full KickCode logo (you’ll need to keep walking to see the entire thing, as the draw distance comes into play). You’ll need to be using a browser that plays nicely with WebGL too.

I could do a lot of cool stuff to extend it - color shading/tinting the basic materials to match the source color would be a particularly nice first step forward, so then it could automatically deal with the entire RGB range, rather than as it does currently, matching specific colours to the materials to use. Then a hosted PNG to JSON converter would mean you could point it an image URL, and have it show up in the world!

In time it might well then work as a sort of mosaic structure builder for even more complex images, but for right now it was a fun little experiment to create a 3D world with a little something of mine in there. If you’re interested in getting started with WebGL then voxel.js is a great, fun way to dive in.