SlideShare a Scribd company logo
Incarnation 
Turning 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. 
• TypeLikePerfume 
https://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 World 
http://perfume-world.jp

Recommended for you

Portfolio
PortfolioPortfolio
Portfolio

This document is Logan Armstrong's 2016 portfolio, which includes his resume, examples of 3D modeling and animation work, and descriptions of projects. It summarizes his skills and experience in 3D software such as 3DS Max, skills in modeling, texturing and animation. It also outlines educational background in digital animation and game design at Ferris State University and Grand Rapids Community College.

2.2 turtle graphics
2.2   turtle graphics2.2   turtle graphics
2.2 turtle graphics

This document introduces turtle graphics in Microsoft Small Basic. It describes using the Turtle object to move and draw on screen by setting its properties like X, Y, speed and angle. Operations like move, turn, pendown and penup control the turtle. Loops can be used to create colorful designs by changing pen color and moving the turtle repeatedly. Examples demonstrate drawing a triangle and multiple graphics using these techniques.

Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques

1) The document discusses the use of Photoshop, 3D Studio Max, and AutoCAD for theatre design projects. 2) In Photoshop, the author created a mood board, costume drawings, and set designs for "The Importance of Being Earnest". 3) In 3D Studio Max, a curved table with carved legs was modeled for a set design. 4) AutoCAD exercises demonstrated techniques like offsetting, rotating, and dimensioning to design a floppy disk.

Perfume World 
http://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 Model 
Polish 
Real World 
Object 
Perfume World! Voxelize

Recommended for you

Project Report1
Project Report1Project Report1
Project Report1

This document outlines a project to develop a generic platform for designing art, artifacts, and handicrafts. The project aims to bring traditional art forms into the digital world by building tools and techniques for creating art through simulation and representation. Work done so far includes designing a comic app framework that allows cropping images, character design through polygon cutting, and displaying designed characters in a comic slideshow. Future work includes adding callouts to comic characters and connecting them to display a full comic experience. The project explores Android and graphics capabilities for image editing, transformation, and developing a new generic art design platform and tools.

Autodesk Mudbox
Autodesk MudboxAutodesk Mudbox
Autodesk Mudbox

This document summarizes Rich Diamant's presentation on using Autodesk Mudbox for modeling characters in Autodesk 3ds Max and Maya. It discusses modeling methods for matching high resolution detail to arbitrary meshes. It also describes the character modeling pipeline used for Uncharted: Drake's Fortune, including the goals of realistic characters that emote well and look good close up for both cinematics and games. Key parts of the pipeline included using arbitrary meshes with blend shapes, creating wrinkle maps in Mudbox, and ensuring models met budget and quality goals for the PlayStation 3.

gdc2008
Graphics in games
Graphics in gamesGraphics in games
Graphics in games

This document summarizes the evolution of graphics in games from text-based games in the 1970s-1990s to modern 3D graphics. It covers early vector and full motion video games, as well as 2D side-scrolling and top-down games. It then discusses 2.5D, fixed 3D, first-person and third-person 3D games. The document concludes with sections on stereographic, multi-monitor, and augmented reality graphics.

gamesgraphicstechnical communication
3D Capture 
3D Model 
Real World 
Object 
Kinect or 123D Catch 
http://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. 
http://skanect.occipital.com/features/ 
! 
Windows / Mac. Use Microsoft Kinect to 
get the depth information. 
! 
Good for large object. (≥30cm) 
$129 FREE
Kinect + Scanect 
The 3D quality is good! 
(But I didn't work with it since the trial 
version cannot export texture)
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.

Recommended for you

My PPT1
My PPT1My PPT1
My PPT1

This document outlines a project to develop a generic platform for designing art, artifacts, and handicrafts using digital tools. The objectives are to bring traditional art forms into the digital world and provide an immersive experience for users. The scope involves creating tools and techniques for 2D and 3D representation of various arts. Work done so far includes designing a comic app framework using images, cropping, and saving to an SD card. Character design tools allow cutting images into polygon shapes. Future work includes adding callouts to comic characters and integrating different art forms like threads, nails, and mud into the platform.

2.3 exploring shapes
2.3   exploring shapes2.3   exploring shapes
2.3 exploring shapes

This document introduces the Shapes object in Microsoft Small Basic, which allows users to add, manipulate, and animate shapes. It describes operations like AddRectangle, HideShape, ShowShape, SetOpacity, Move, Animate, and Zoom to modify properties and position of shapes. Examples are provided to demonstrate rotating a shape using a For loop and animating a shape's movement from one position to another. The document aims to teach users how to create and manipulate shapes using the Shapes object.

Blender3 d
Blender3 dBlender3 d
Blender3 d

Presentation show how to create your own owl with Blender. The presentation is for beginners who want to start ;)

blender owl models 3d poznań meet
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 > Decimate 
Reduce the ratio
Voxelize 
Mesh Voxels
Voxelize 
Mesh Voxels 
I did not find suitable tool. 
Time to write some code with three.js.
Dimension 
Fit your model in 80 x 60 x ∞ 
80 
60 
?

Recommended for you

Animation introduction
Animation introductionAnimation introduction
Animation introduction

The document discusses the process of animation including pre-production, production, and post-production. It covers skills needed for 2D and 3D animation like drawing and use of software. Frame rate, file organization, storyboards, audio recording and editing, sound design, and final composite are some key aspects covered. The document provides information on these topics with the aim of introducing the field of animation.

animationintroductionanimation make
Interactive Project - Experiments
Interactive Project - ExperimentsInteractive Project - Experiments
Interactive Project - Experiments

The document describes experiments creating pixel art for a game using the pencil tool in Photoshop. Clipping masks were used to more easily draw wallpaper stripes without overlapping the floor. For the final product, the author will use the pencil tool to create pixel art as required but not other elements like wallpaper stripes since the game styles differ.

2.1 graphics window
2.1   graphics window2.1   graphics window
2.1 graphics window

This document discusses using the GraphicsWindow object in Microsoft Small Basic to create graphical programs. It introduces properties like PenColor, PenWidth, and BrushColor that control how shapes are drawn. Operations like DrawRectangle, DrawEllipse, and DrawLine allow creating colored shapes. Examples demonstrate setting graphics window properties, using random colors, and displaying images and messages. The document encourages readers to apply their learning by writing a program displaying overlapping shapes, random rectangles, a resized image, and a message box.

Voxelize Algorithm 
Currently, I just use the bounding box of each face. 
It's acceptable for small faces.
Voxelize Algorithm 
Could be improved by testing if each voxel in the 
bounding box has intersection with the face.
Color The Voxel 
First, you have to get the color of each vertex… 
Texture
Color The Voxel 
Then you could interpolate it. 
Texture

Recommended for you

Animation Title card making
Animation Title card makingAnimation Title card making
Animation Title card making

This document provides information about the Aurora 3D Animation Maker software. It describes how the software allows users to easily create 3D title animations and banners and export them in various formats like video, flash and images. The document outlines the key features of the software like inclusion of various text and shape templates, flexibility in bevel effects, lighting adjustment and importing/exporting capabilities. It also details the important tools in the software like the toolbar, properties window and animation window for designing the animations.

animationtitlecard
Prosvjed U Zagrebu
Prosvjed U  ZagrebuProsvjed U  Zagrebu
Prosvjed U Zagrebu
sindikathusris
Stanziale seminario accademia s. luca 19.06.14
Stanziale   seminario accademia  s. luca 19.06.14Stanziale   seminario accademia  s. luca 19.06.14
Stanziale seminario accademia s. luca 19.06.14

Spazi e desiderio nell'economia politica dell'immaginario

stanziale immaginario desiderio architettura lacan
Color The Voxel 
Well, 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

Recommended for you

Coaching Presentation 3 08
Coaching Presentation 3 08Coaching Presentation 3 08
Coaching Presentation 3 08

Hebrew presentation: Distinction between executive coaching and executive mentoring

Strategic Patent Management in Mobile Telecom
Strategic Patent Management in Mobile TelecomStrategic Patent Management in Mobile Telecom
Strategic Patent Management in Mobile Telecom

This document summarizes trends and issues related to strategic patent management for 4G mobile communication technologies. It discusses the increasing number of patents in technologies like LTE and mobile WiMAX. It also analyzes patent portfolios and licensing issues, noting debates around patent pools and non-practicing entities (NPEs) seeking to enforce patents through litigation.

wimaxmobile telecommunicationslte
Sma Research
Sma ResearchSma Research
Sma Research

The document summarizes a study that investigates the risk and return of using a simple moving average (SMA) timing model across various markets compared to a buy-and-hold strategy. The study tested different SMA periods from 4 to 52 weeks on developed markets, emerging markets, and both combined. It found that an 8-week SMA period performed best overall based on annualized return, drawdown, and Sharpe ratio. However, 3 developed markets (Switzerland, US, UK) underperformed this model but performed best with longer 52-week SMA periods. The 8-week model outperformed buy-and-hold on average due to higher average profits compared to losses and lower drawdowns.

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

Recommended for you

Biweekly Financial Commentary 07 01 01
Biweekly Financial Commentary 07 01 01Biweekly Financial Commentary 07 01 01
Biweekly Financial Commentary 07 01 01
Abba,I Belong To You
Abba,I Belong To YouAbba,I Belong To You
Abba,I Belong To You

The document is a song about belonging to God as one's father. It expresses how even when feeling weary or far from God, the singer knows that God promised to hold them through all days. Though their spirit feels restless, the singer has no doubt that they belong to their father God. The chorus repeats that the singer belongs to their Abba Father God.

Biweekly Financial Commentary 09 09 14
Biweekly Financial Commentary 09 09 14Biweekly Financial Commentary 09 09 14
Biweekly Financial Commentary 09 09 14
http://f.cl.ly/items/122Q2s0b2R0Q3L0W1s2a/lufy%20(1).json
http://f.cl.ly/items/3X2k243j2m3h2T2h1G3Y/laocoon.json
Incarnation - Turning Real World Objects into Perfume World
Thank You!

Recommended for you

UA esitlus
UA esitlusUA esitlus
UA esitlus

Inglise keele mõju Eesti keelde

ua
viata prin ochii mei
viata prin ochii meiviata prin ochii mei
viata prin ochii mei

trecut, prezent si sperante de viitor

resumecv
Financial Services in India
Financial Services in IndiaFinancial Services in India
Financial Services in India

The document discusses the growth of financial services in India. It notes that India has a growing economy and high household savings rate, fueling growth in the banking, insurance, and financial markets sectors. It predicts these sectors will grow 4-5 times by 2020, creating over 9 million financial services jobs by 2022. The exponential growth of the financial sector presents many opportunities for professional and business growth, but taking advantage of them requires developing expertise in financial markets and continuous learning.

More Related Content

What's hot

6. production reflection done
6. production reflection   done6. production reflection   done
6. production reflection done
DominikBalint
 
Unit2
Unit2Unit2
Filipova Portfolio
Filipova PortfolioFilipova Portfolio
Filipova Portfolio
Tereza Filipova
 
Portfolio
PortfolioPortfolio
Portfolio
Logan Armstrong
 
2.2 turtle graphics
2.2   turtle graphics2.2   turtle graphics
2.2 turtle graphics
allenbailey
 
Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques
EmilySeekings
 
Project Report1
Project Report1Project Report1
Project Report1
Navriti
 
Autodesk Mudbox
Autodesk MudboxAutodesk Mudbox
Autodesk Mudbox
Naughty Dog
 
Graphics in games
Graphics in gamesGraphics in games
Graphics in games
ShubhamRokde1
 
My PPT1
My PPT1My PPT1
My PPT1
Navriti
 
2.3 exploring shapes
2.3   exploring shapes2.3   exploring shapes
2.3 exploring shapes
allenbailey
 
Blender3 d
Blender3 dBlender3 d
Blender3 d
Sebastian Pożoga
 
Animation introduction
Animation introductionAnimation introduction
Animation introduction
G. Udhaya Sankar
 
Interactive Project - Experiments
Interactive Project - ExperimentsInteractive Project - Experiments
Interactive Project - Experiments
DaisyPotter
 
2.1 graphics window
2.1   graphics window2.1   graphics window
2.1 graphics window
allenbailey
 
Animation Title card making
Animation Title card makingAnimation Title card making
Animation Title card making
G. Udhaya Sankar
 

What's hot (16)

6. production reflection done
6. production reflection   done6. production reflection   done
6. production reflection done
 
Unit2
Unit2Unit2
Unit2
 
Filipova Portfolio
Filipova PortfolioFilipova Portfolio
Filipova Portfolio
 
Portfolio
PortfolioPortfolio
Portfolio
 
2.2 turtle graphics
2.2   turtle graphics2.2   turtle graphics
2.2 turtle graphics
 
Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques
 
Project Report1
Project Report1Project Report1
Project Report1
 
Autodesk Mudbox
Autodesk MudboxAutodesk Mudbox
Autodesk Mudbox
 
Graphics in games
Graphics in gamesGraphics in games
Graphics in games
 
My PPT1
My PPT1My PPT1
My PPT1
 
2.3 exploring shapes
2.3   exploring shapes2.3   exploring shapes
2.3 exploring shapes
 
Blender3 d
Blender3 dBlender3 d
Blender3 d
 
Animation introduction
Animation introductionAnimation introduction
Animation introduction
 
Interactive Project - Experiments
Interactive Project - ExperimentsInteractive Project - Experiments
Interactive Project - Experiments
 
2.1 graphics window
2.1   graphics window2.1   graphics window
2.1 graphics window
 
Animation Title card making
Animation Title card makingAnimation Title card making
Animation Title card making
 

Viewers also liked

Prosvjed U Zagrebu
Prosvjed U  ZagrebuProsvjed U  Zagrebu
Prosvjed U Zagrebu
grlica22
 
Stanziale seminario accademia s. luca 19.06.14
Stanziale   seminario accademia  s. luca 19.06.14Stanziale   seminario accademia  s. luca 19.06.14
Stanziale seminario accademia s. luca 19.06.14
Alain Denis
 
Coaching Presentation 3 08
Coaching Presentation 3 08Coaching Presentation 3 08
Coaching Presentation 3 08
Benny A. Benjamin
 
Strategic Patent Management in Mobile Telecom
Strategic Patent Management in Mobile TelecomStrategic Patent Management in Mobile Telecom
Strategic Patent Management in Mobile Telecom
Alex G. Lee, Ph.D. Esq. CLP
 
Sma Research
Sma ResearchSma Research
Sma Research
Ant Wong
 
Biweekly Financial Commentary 07 01 01
Biweekly Financial Commentary 07 01 01Biweekly Financial Commentary 07 01 01
Biweekly Financial Commentary 07 01 01
Ant Wong
 
Abba,I Belong To You
Abba,I Belong To YouAbba,I Belong To You
Abba,I Belong To You
Beethovenrox1770
 
Biweekly Financial Commentary 09 09 14
Biweekly Financial Commentary 09 09 14Biweekly Financial Commentary 09 09 14
Biweekly Financial Commentary 09 09 14
Ant Wong
 
UA esitlus
UA esitlusUA esitlus
UA esitlus
Kiiiiishu
 
viata prin ochii mei
viata prin ochii meiviata prin ochii mei
viata prin ochii mei
Alina Diana
 
Financial Services in India
Financial Services in IndiaFinancial Services in India
Financial Services in India
Alok Bhageria
 
Acacia’s patent monetization operating subsidiaries
Acacia’s patent monetization operating subsidiariesAcacia’s patent monetization operating subsidiaries
Acacia’s patent monetization operating subsidiaries
Alex G. Lee, Ph.D. Esq. CLP
 
Patent Strategy under Legal Uncertainty
Patent Strategy under Legal UncertaintyPatent Strategy under Legal Uncertainty
Patent Strategy under Legal Uncertainty
Alex G. Lee, Ph.D. Esq. CLP
 
Presentación HMES
Presentación HMESPresentación HMES
Presentación HMES
guesta04b80
 
Legal Issues in Collaboration Alliances for the University Spinouts & Technol...
Legal Issues in Collaboration Alliances for the University Spinouts & Technol...Legal Issues in Collaboration Alliances for the University Spinouts & Technol...
Legal Issues in Collaboration Alliances for the University Spinouts & Technol...
Alex G. Lee, Ph.D. Esq. CLP
 
Internet of Things (IoT) Strategic Patent Development 1Q 2016
Internet of Things (IoT) Strategic Patent Development 1Q 2016Internet of Things (IoT) Strategic Patent Development 1Q 2016
Internet of Things (IoT) Strategic Patent Development 1Q 2016
Alex G. Lee, Ph.D. Esq. CLP
 
Biweekly Financial Commentary 08 11 10
Biweekly Financial Commentary 08 11 10Biweekly Financial Commentary 08 11 10
Biweekly Financial Commentary 08 11 10
Ant Wong
 
Sciasuggestioni
SciasuggestioniSciasuggestioni
Sciasuggestioni
aprovisi
 
H20 Compressed
H20 CompressedH20 Compressed
H20 Compressed
doublediffa
 
Biweekly Financial Commentary 09 07 20
Biweekly Financial Commentary 09 07 20Biweekly Financial Commentary 09 07 20
Biweekly Financial Commentary 09 07 20
Ant Wong
 

Viewers also liked (20)

Prosvjed U Zagrebu
Prosvjed U  ZagrebuProsvjed U  Zagrebu
Prosvjed U Zagrebu
 
Stanziale seminario accademia s. luca 19.06.14
Stanziale   seminario accademia  s. luca 19.06.14Stanziale   seminario accademia  s. luca 19.06.14
Stanziale seminario accademia s. luca 19.06.14
 
Coaching Presentation 3 08
Coaching Presentation 3 08Coaching Presentation 3 08
Coaching Presentation 3 08
 
Strategic Patent Management in Mobile Telecom
Strategic Patent Management in Mobile TelecomStrategic Patent Management in Mobile Telecom
Strategic Patent Management in Mobile Telecom
 
Sma Research
Sma ResearchSma Research
Sma Research
 
Biweekly Financial Commentary 07 01 01
Biweekly Financial Commentary 07 01 01Biweekly Financial Commentary 07 01 01
Biweekly Financial Commentary 07 01 01
 
Abba,I Belong To You
Abba,I Belong To YouAbba,I Belong To You
Abba,I Belong To You
 
Biweekly Financial Commentary 09 09 14
Biweekly Financial Commentary 09 09 14Biweekly Financial Commentary 09 09 14
Biweekly Financial Commentary 09 09 14
 
UA esitlus
UA esitlusUA esitlus
UA esitlus
 
viata prin ochii mei
viata prin ochii meiviata prin ochii mei
viata prin ochii mei
 
Financial Services in India
Financial Services in IndiaFinancial Services in India
Financial Services in India
 
Acacia’s patent monetization operating subsidiaries
Acacia’s patent monetization operating subsidiariesAcacia’s patent monetization operating subsidiaries
Acacia’s patent monetization operating subsidiaries
 
Patent Strategy under Legal Uncertainty
Patent Strategy under Legal UncertaintyPatent Strategy under Legal Uncertainty
Patent Strategy under Legal Uncertainty
 
Presentación HMES
Presentación HMESPresentación HMES
Presentación HMES
 
Legal Issues in Collaboration Alliances for the University Spinouts & Technol...
Legal Issues in Collaboration Alliances for the University Spinouts & Technol...Legal Issues in Collaboration Alliances for the University Spinouts & Technol...
Legal Issues in Collaboration Alliances for the University Spinouts & Technol...
 
Internet of Things (IoT) Strategic Patent Development 1Q 2016
Internet of Things (IoT) Strategic Patent Development 1Q 2016Internet of Things (IoT) Strategic Patent Development 1Q 2016
Internet of Things (IoT) Strategic Patent Development 1Q 2016
 
Biweekly Financial Commentary 08 11 10
Biweekly Financial Commentary 08 11 10Biweekly Financial Commentary 08 11 10
Biweekly Financial Commentary 08 11 10
 
Sciasuggestioni
SciasuggestioniSciasuggestioni
Sciasuggestioni
 
H20 Compressed
H20 CompressedH20 Compressed
H20 Compressed
 
Biweekly Financial Commentary 09 07 20
Biweekly Financial Commentary 09 07 20Biweekly Financial Commentary 09 07 20
Biweekly Financial Commentary 09 07 20
 

Similar to Incarnation - Turning Real World Objects into Perfume World

FCPL 2022.pptx
FCPL 2022.pptxFCPL 2022.pptx
FCPL 2022.pptx
VickyTGAW
 
Robot flash tutorial
Robot flash tutorialRobot flash tutorial
Robot flash tutorial
Foredi Surabaya
 
From Experimentation to Production: The Future of WebGL
From Experimentation to Production: The Future of WebGLFrom Experimentation to Production: The Future of WebGL
From Experimentation to Production: The Future of WebGL
FITC
 
K2P workshop 3-23-13
K2P workshop 3-23-13K2P workshop 3-23-13
K2P workshop 3-23-13
FakeGreenDress
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
Gil Irizarry
 
Exploring the Deep Dream Generator (an Art-Making Generative AI)
Exploring the Deep Dream Generator (an Art-Making Generative AI)  Exploring the Deep Dream Generator (an Art-Making Generative AI)
Exploring the Deep Dream Generator (an Art-Making Generative AI)
Shalin Hai-Jew
 
IDC 2010 Conference Presentation
IDC 2010 Conference PresentationIDC 2010 Conference Presentation
IDC 2010 Conference Presentation
Gonçalo Amador
 
Project report PPT1
Project report PPT1Project report PPT1
Project report PPT1
Navriti
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web GamesHTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
livedoor
 
Project report
Project reportProject report
Project report
Navriti
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
Unity Technologies Japan K.K.
 
Managing Visual Design in Axure
Managing Visual Design in AxureManaging Visual Design in Axure
Managing Visual Design in Axure
Fred Beecher
 
3D Design Fundamentals
3D Design Fundamentals3D Design Fundamentals
3D Design Fundamentals
St. Petersburg College
 
Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera
Doug Sillars
 
iOS Visual F/X Using GLSL
iOS Visual F/X Using GLSLiOS Visual F/X Using GLSL
iOS Visual F/X Using GLSL
Douglass Turner
 
Ai powered images-frankfurt
Ai powered images-frankfurtAi powered images-frankfurt
Ai powered images-frankfurt
Doug Sillars
 
SelfieCap
SelfieCapSelfieCap
Polybot Onboarding Process
Polybot Onboarding ProcessPolybot Onboarding Process
Polybot Onboarding Process
Nina Park
 
Ai powered images-geneva
Ai powered images-genevaAi powered images-geneva
Ai powered images-geneva
Doug Sillars
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
Unite2017Tokyo
 

Similar to Incarnation - Turning Real World Objects into Perfume World (20)

FCPL 2022.pptx
FCPL 2022.pptxFCPL 2022.pptx
FCPL 2022.pptx
 
Robot flash tutorial
Robot flash tutorialRobot flash tutorial
Robot flash tutorial
 
From Experimentation to Production: The Future of WebGL
From Experimentation to Production: The Future of WebGLFrom Experimentation to Production: The Future of WebGL
From Experimentation to Production: The Future of WebGL
 
K2P workshop 3-23-13
K2P workshop 3-23-13K2P workshop 3-23-13
K2P workshop 3-23-13
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
 
Exploring the Deep Dream Generator (an Art-Making Generative AI)
Exploring the Deep Dream Generator (an Art-Making Generative AI)  Exploring the Deep Dream Generator (an Art-Making Generative AI)
Exploring the Deep Dream Generator (an Art-Making Generative AI)
 
IDC 2010 Conference Presentation
IDC 2010 Conference PresentationIDC 2010 Conference Presentation
IDC 2010 Conference Presentation
 
Project report PPT1
Project report PPT1Project report PPT1
Project report PPT1
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web GamesHTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
 
Project report
Project reportProject report
Project report
 
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説【Unite 2017 Tokyo】Unity5.6での2D新機能解説
【Unite 2017 Tokyo】Unity5.6での2D新機能解説
 
Managing Visual Design in Axure
Managing Visual Design in AxureManaging Visual Design in Axure
Managing Visual Design in Axure
 
3D Design Fundamentals
3D Design Fundamentals3D Design Fundamentals
3D Design Fundamentals
 
Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera
 
iOS Visual F/X Using GLSL
iOS Visual F/X Using GLSLiOS Visual F/X Using GLSL
iOS Visual F/X Using GLSL
 
Ai powered images-frankfurt
Ai powered images-frankfurtAi powered images-frankfurt
Ai powered images-frankfurt
 
SelfieCap
SelfieCapSelfieCap
SelfieCap
 
Polybot Onboarding Process
Polybot Onboarding ProcessPolybot Onboarding Process
Polybot Onboarding Process
 
Ai powered images-geneva
Ai powered images-genevaAi powered images-geneva
Ai powered images-geneva
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
 

More from Yung-Luen Lan

Really Simple Cocoa Tips (2007)
Really Simple Cocoa Tips (2007)Really Simple Cocoa Tips (2007)
Really Simple Cocoa Tips (2007)
Yung-Luen Lan
 
Cryptography
CryptographyCryptography
Cryptography
Yung-Luen Lan
 
Prfm programming 2_with_notes
Prfm programming 2_with_notesPrfm programming 2_with_notes
Prfm programming 2_with_notes
Yung-Luen Lan
 
Prfm programming 2
Prfm programming 2Prfm programming 2
Prfm programming 2
Yung-Luen Lan
 
Scala Bot for Small Business
Scala Bot for Small BusinessScala Bot for Small Business
Scala Bot for Small Business
Yung-Luen Lan
 
Immutability
ImmutabilityImmutability
Immutability
Yung-Luen Lan
 

More from Yung-Luen Lan (6)

Really Simple Cocoa Tips (2007)
Really Simple Cocoa Tips (2007)Really Simple Cocoa Tips (2007)
Really Simple Cocoa Tips (2007)
 
Cryptography
CryptographyCryptography
Cryptography
 
Prfm programming 2_with_notes
Prfm programming 2_with_notesPrfm programming 2_with_notes
Prfm programming 2_with_notes
 
Prfm programming 2
Prfm programming 2Prfm programming 2
Prfm programming 2
 
Scala Bot for Small Business
Scala Bot for Small BusinessScala Bot for Small Business
Scala Bot for Small Business
 
Immutability
ImmutabilityImmutability
Immutability
 

Recently uploaded

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 

Recently uploaded (20)

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 

Incarnation - Turning Real World Objects into Perfume World

  • 1. Incarnation Turning Real World Objects into Perfume World @yllan, Sep 1, 2014
  • 2. 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. • TypeLikePerfume https://github.com/yllan/TypeLikePerfume iOS 8 custom keyboard with Perfume LOCKS quotes. • Other Perfume-Related Works: https://yllan.hackpad.com/Perfume-wKvT6AFRU50
  • 3. Tools • Kinect or iPhone • Skanect or 123D Catch • Blender • three.js
  • 5. Perfume World http://perfume-world.jp You can build your own house in the world! Some houses are very creative.
  • 6. 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.
  • 7. There must be easier ways… • Let's turn the real world objects into Perfume World!
  • 8. 3D Model Polish Real World Object Perfume World! Voxelize
  • 9. 3D Capture 3D Model Real World Object Kinect or 123D Catch http://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. http://skanect.occipital.com/features/ ! Windows / Mac. Use Microsoft Kinect to get the depth information. ! Good for large object. (≥30cm) $129 FREE
  • 10. Kinect + Scanect The 3D quality is good! (But I didn't work with it since the trial version cannot export texture)
  • 11. 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.
  • 12. 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.
  • 13. 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 > Decimate Reduce the ratio
  • 15. Voxelize Mesh Voxels I did not find suitable tool. Time to write some code with three.js.
  • 16. Dimension Fit your model in 80 x 60 x ∞ 80 60 ?
  • 17. Voxelize Algorithm Currently, I just use the bounding box of each face. It's acceptable for small faces.
  • 18. Voxelize Algorithm Could be improved by testing if each voxel in the bounding box has intersection with the face.
  • 19. Color The Voxel First, you have to get the color of each vertex… Texture
  • 20. Color The Voxel Then you could interpolate it. Texture
  • 21. Color The Voxel Well, I am lazy so I just pick from one vertex. (It's acceptable for small faces.) Texture
  • 22. 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!
  • 23. 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; ! // … }
  • 25. 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 }, … ] }
  • 26. Done!