Sunday, February 9, 2014

Blender and X3D Tattoo

So lately I've been putting a lot of thought into what I'll have chopped onto my arm next. The space I have parked for said tattoo is the back of my upper arm, an area I can't really see without aid of a mirror or contorting my head in directions I shouldn't be. So for the third or fourth time in my life now I jumped head first into Blender, with the primary goal of just being able to view my tattoos (and potentials) from another persons point of view.

It didn't take long for me to circle round back to web technologies, and found the fabulous x3dom project. They have a myriad of easy-to-follow tutorials and examples which show you how to export X3D from Blender, and then manipulate/interact with your model/scene in the browser.

I claim no special intimate knowledge of the technology, but I was quite pleased with the features I stumbled across. By simply including a few lines in my HTML, along with one JS and one CSS resource provided by x3dom, a scene is able to be built in the browser on canvas. Very little leg work required to get a basic explorable model onto a web page. The 3D scene is rendered to canvas, then also updated in a DOM structure, both staying in sync. So in order to manipulate your scene you can simply fiddle with the DOM objects (using JQuery or something similar if you wish) - and since X3D is an XML/tag based format, learning what to change and discovering properties is as simple as perusing through the source of your scene file.

Some short-comings may be browser support. x3dom has a comprehensive list of supported platforms and browsers. It seems that Chrome and Firefox are the safest bets, and thankfully the world has slowly moved away from the failures of the previous IE development teams. The other shortcoming that my little test suffers from is too-large-a-size that is preferable for the web. I guess I could have spent more time trying to simplify the model I found online and shrinking my images to more optimal sizes. If only time was not such a precious commodity.

Well enough jibber-jabber, here is the output of approximately 5 hours of fumbling through Blender, Photoshop, and some fiddling in the final HTML.

  • Left mouse drag to rotate
  • CTRL-left mouse to drag the object
  • Mouse scroll to zoom in and out

My final thought or idea that I will probably never end up doing, but seems really easy to achieve now in retrospect, is to create a webpage or mobile app that could grab an image, and paste it to a variety of locations on a model's body. Probably also allow someone to selfie and paste their mugshot on the model, a little bit of fine tuning controls, and upload to Facebook. Boom. Who wouldn't want to download that app?

Post a Comment