3D Clothing Demo with BabylonJS

How do you create an interactive 3D version of yourself? The guys and gals at Punk Office do it by using a camera rig with 82 Nikon D5200 cameras that are synched at 1/300th of a second! They then scan the entire body and reduce the person to under 7,000 polygons. Special care is taken to add more polygons to the face and other areas that require finer detail.

Clothing-demo-Punk-office

Mesh and maps

clothing-demo_jacket-scan

Dozens of photo for a single object

They used BabylonJS 2.4 to create a Clothing Demo of one of their team members with a jacket that can be removed and put back on again. And the 3D object can be spun around for you to see every angle. It can even be zoomed in (or out) if you want to scrutinize more (or less) details.

clothing-demo-with-without-jacket

With or without jacket

punk_office-top-bottom-back-views

Spin object to view other angles

Visit Punk Office’s Clothing Demo here.

 


You might also find this interesting:


  1. Press Red Button to Open StarGate “It will take you a million light years from home.” That’s what a StarGate does according to the 1994 film, but how do you activate one? For this StarGate, all...

  2. BabylonJS When it comes to creating full-fledged 3D games in HTML5, unless you want to spend an incredible amount of time building the base engine for it, you should think about...

  3. CopperCube Dynamic Lighting Demo A WebGL Demo of the export of the CopperCube 3 WebGL output. Share List...

  4. WebGL Water Noise demo Using simplex noise and a normal map, an WebGL experiment in creating a water surface. Share List...

  5. Opera's WebGL Tech Demo: Odin Opera has created an impressive WebGL demo called Odin which they describe as: Odin is a demo created to showcase what you can do with WebGL and hopefully inspire people...

, ,
HTML5 Demos, WebGL-1