Webgl Real Time Extrusion From Bitmap Image

Prototype / proof of concept made for fraemes. Real time extrusion from the bitmap image data for our customizable 3d printed iPhone cases. A flat png image is processed with the help of the javascript canvas api and a 3d mesh is extruded out of the generated layers.

All of this happens real time in a web-browser, the UI is built with backbone and a fair share of sass styling.

Couldn't make a longer GIF, but you can actually directly draw on the different image layers, the model gets updated after each stroke. Sorry about the crappy gif quality, that seems to be the best gif can do :) Here is a more detailed video with multiple test images: https://www.dropbox.com/s/u8tbj7w230a9s8g/kanvas-realtime-webgl-rendering.mov?dl=0

Attached is a webGL lighting test with soft shadows that looks way nicer.

Have a look at the final proposed design for the customzation UI: https://dribbble.com/shots/4142520-Fraemes-Customization-UI