IncarnationTurning Real World Objects into Perfume World

@yllan, Sep 1, 2014

Who Am I?• Twitter / Github: yllan!

• Perfume's Fan @ Taiwan

• WebGL Perfume World Viewer https://yllan.github.io/PerfumeWorld View the Perfume World houses without Flash.

• TypeLikePerfumehttps://github.com/yllan/TypeLikePerfume iOS 8 custom keyboard with Perfume LOCKS quotes.

• Other Perfume-Related Works:https://yllan.hackpad.com/Perfume-wKvT6AFRU50

Tools

• Kinect or iPhone

• Skanect or 123D Catch

• Blender

• three.js

Perfume Worldhttp://perfume-world.jp

Perfume Worldhttp://perfume-world.jp

You can build your own house in the world! Some houses are very creative.

You have to be very patient.

Press SPACE to create voxel. One voxel at a time.

Change voxel color.

Arrow key to move the cursor. You can only move along two axis unless you drag to change the

view angle.

There must be easier ways…• Let's turn the real world objects into Perfume

World!

3D ModelPolish

VoxelizePerfume World!

Real World Object

3D Capture3D ModelReal World

Object

Kinect or 123D Catchhttp://www.123dapp.com/catch !iOS app, take about 40 photos with different angles to reconstruct the 3D model. !It is capable of scanning small objects.

FREE$129

http://skanect.occipital.com/features/ !Windows / Mac. Use Microsoft Kinect to get the depth information. !Good for large object. (≥30cm)

Kinect + Scanect

(But I didn't work with it since the trial version cannot export texture)

The 3D quality is good!

123D Catch + iPhone

• Take different-angle photos with 123D Catch.

• Tips: Lighting is important!

• Upload.

• The server takes about 20 minutes to construct the 3D model. Just wait.

Polish The Model (1)Go to http://www.123dapp.com. Login. Select "Models"

from the top-right menu. Click into the model you want to edit. Select Edit / Download > Copy & Edit in 123D Catch.

Select the unwanted part with this tool and press "DELETE" key to remove it.

Fill the holes.

Polish The Model (2)Download your 3D model from 123D website. Choose the *.obj format.

Reduce the faces to improve performance. I use Blender: http://blender.org

Add Modifier > DecimateReduce the ratio

VoxelizeMesh Voxels

VoxelizeMesh Voxels

I did not find suitable tool.Time to write some code with three.js.

DimensionFit your model in 80 x 60 x ∞

80

60

?

Voxelize AlgorithmCurrently, I just use the bounding box of each face.

It's acceptable for small faces.

Voxelize AlgorithmCould be improved by testing if each voxel in the

bounding box has intersection with the face.

Color The VoxelFirst, you have to get the color of each vertex…

Texture

Color The VoxelThen you could interpolate it.

Texture

Color The VoxelWell, I am lazy so I just pick from one vertex.

(It's acceptable for small faces.)

Texture

How To Get The Color of a Vertex from a Textured-Mesh?

• mesh.material.map.image is the texture image. Make sure it was loaded. Draw the image on a canvas to get the pixel data.

• mesh.geometry.faceVertexUvs stores the corresponding coordinates on texture of each face.

• Watch out for mesh.material.map.flipY!

How To Get The Color of a Vertex from a Textured-Mesh?

var img = mesh.material.map.image; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); !for (var i = 0; i < mesh.geometry.faces.length - 1; i++) { var f = mesh.geometry.faces[i]; // {a: index of vertex a} var point_a = mesh.geometry.vertices[f.a]; // {x, y, z} var point_b = mesh.geometry.vertices[f.b]; var point_c = mesh.geometry.vertices[f.c]; ! // [{x, y}, {x, y}, {x, y}] var uvs = mesh.geometry.faceVertexUvs[0][i]; var texture_x_of_a = img.width * (uvs[0].x); var texture_y_of_a = img.height * (mesh.material.map.flipY ? 1 - uvs[0].y : uvs[0].y); ! // [r, g, b, a], each range from 0-255. var color_of_a = ctx.getImageData(texture_x_of_a, texture_y_of_a, 1, 1).data; ! // … }

Code

https://github.com/yllan/voxelizer

Upload To Perfume World{ "version": 1, "voxels": [ { "h": 1, "w": 1, "d": 1, "color": 10066329, "id": 0, "x": 0, "y": 43, "z": 24 }, { "h": 1, "w": 1, "d": 1, "color": 10066329, "id": 1, "x": 0, "y": 43, "z": 25 }, … ] }

Done!

Gallery

http://f.cl.ly/items/1h0h3A1j1S2i2j0M0t3l/theworld.json

http://f.cl.ly/items/122Q2s0b2R0Q3L0W1s2a/lufy%20(1).json

http://f.cl.ly/items/3X2k243j2m3h2T2h1G3Y/laocoon.json

Thank You!