incarnation - turning real world objects into perfume world
DESCRIPTION
Use Free iOS App and Open Source Software to convert real-world objects to 3D houses in Perfume World website.TRANSCRIPT
![Page 1: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/1.jpg)
IncarnationTurning Real World Objects into Perfume World
@yllan, Sep 1, 2014
![Page 2: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/2.jpg)
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
![Page 3: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/3.jpg)
Tools
• Kinect or iPhone
• Skanect or 123D Catch
• Blender
• three.js
![Page 5: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/5.jpg)
Perfume Worldhttp://perfume-world.jp
You can build your own house in the world! Some houses are very creative.
![Page 6: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/6.jpg)
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.
![Page 7: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/7.jpg)
There must be easier ways…• Let's turn the real world objects into Perfume
World!
![Page 8: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/8.jpg)
3D ModelPolish
VoxelizePerfume World!
Real World Object
![Page 9: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/9.jpg)
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)
![Page 10: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/10.jpg)
Kinect + Scanect
(But I didn't work with it since the trial version cannot export texture)
The 3D quality is good!
![Page 11: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/11.jpg)
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.
![Page 12: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/12.jpg)
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.
![Page 13: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/13.jpg)
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
![Page 14: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/14.jpg)
VoxelizeMesh Voxels
![Page 15: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/15.jpg)
VoxelizeMesh Voxels
I did not find suitable tool.Time to write some code with three.js.
![Page 16: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/16.jpg)
DimensionFit your model in 80 x 60 x ∞
80
60
?
![Page 17: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/17.jpg)
Voxelize AlgorithmCurrently, I just use the bounding box of each face.
It's acceptable for small faces.
![Page 18: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/18.jpg)
Voxelize AlgorithmCould be improved by testing if each voxel in the
bounding box has intersection with the face.
![Page 19: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/19.jpg)
Color The VoxelFirst, you have to get the color of each vertex…
Texture
![Page 20: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/20.jpg)
Color The VoxelThen you could interpolate it.
Texture
![Page 21: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/21.jpg)
Color The VoxelWell, I am lazy so I just pick from one vertex.
(It's acceptable for small faces.)
Texture
![Page 22: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/22.jpg)
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!
![Page 23: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/23.jpg)
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; ! // … }
![Page 25: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/25.jpg)
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 }, … ] }
![Page 26: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/26.jpg)
Done!
![Page 27: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/27.jpg)
Gallery
![Page 28: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/28.jpg)
http://f.cl.ly/items/1h0h3A1j1S2i2j0M0t3l/theworld.json
![Page 29: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/29.jpg)
http://f.cl.ly/items/122Q2s0b2R0Q3L0W1s2a/lufy%20(1).json
![Page 30: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/30.jpg)
http://f.cl.ly/items/3X2k243j2m3h2T2h1G3Y/laocoon.json
![Page 31: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/31.jpg)
![Page 32: Incarnation - Turning Real World Objects into Perfume World](https://reader033.vdocument.in/reader033/viewer/2022051413/5538b0924a795971788b47bc/html5/thumbnails/32.jpg)
Thank You!