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?

Monday, February 3, 2014

Object Persistence in NodeJS

pst-obj is a rudimentary utility for setting up a persistence layer in your app for node. It extends an object with a single non-enumerable function that allows you to persist that object to a specified file location. When stored the object is serialized to JSON format and stored in a UTF-8 character encoded file.


npm install pst-obj


You can download it here or peruse the code on github:


Quite often now I'm finding myself creating little doodads in nodejs. My latest invention [read distraction] was a small app to control the light overhead in the room via a relay. It had some automatic triggers defined to flip once text had been detected in certain RSS streams, and of course a small one page one button interface to change the state of the light (mostly to play disco-tech in the office).

It's these low volume low risk types of applications I don't really want to setup a database or any third party services for. I had considered settings file type interfaces, but really much preferred the idea of JSON. (I also wanted half a good reason to publish to npm for a first time.) I've used pst-obj to persist single attribute objects, and some with fairly large (long and deep) data structures - the general rule is, if you know your data can be JSON'ed, then this should suffice as a usable, albeit rudimentary, persistence option.


The above example when started and stopped a few times while also refreshing the page in a browser, should give a result similar to this:

In the Console

In the Browser