-
Notifications
You must be signed in to change notification settings - Fork 0
/
PeppersCone.html
180 lines (165 loc) · 9.12 KB
/
PeppersCone.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE HTML>
<!--
Introspect by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Xuan Luo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo">Xuan Luo <emph class="chinese">罗璇</emph></a>
<nav id="nav">
<a href="index.html#publication-list">Research</a>
<a href="projects.html">Projects</a>
</nav>
</div>
</header>
<a href="#menu" class="navPanelToggle"><span class="fa fa-bars"></span></a>
<!-- Main -->
<section id="main" >
<div class="inner">
<header class="major special">
<h1>Pepper's Cone: An Inexpensive Do-It-Yourself 3D Display</h1>
<span><b>UIST 2017</b></span>
<p>
Xuan Luo,
<a href="http://www.cs.virginia.edu/~jdl/">Jason Lawrence</a>,
<a class="para-link" href="https://homes.cs.washington.edu/~seitz/">Steven M. Seitz</a>
</p>
</header>
<div class="box alt" id="teaser">
<div class="row figure">
<div class="3u 6u(small) 12u$(xsmall)">
<span class="image fit"><img style="width: 90.9%;" src="images/publication/PeppersCone/teaser/configuration.png" alt="" /></span>
<p>(a)</p>
</div>
<div class="3u 6u$(small) 12u$(xsmall)">
<span class="image fit"><img src="images/publication/PeppersCone/teaser/bright-tiger.jpg" alt="" /></span>
<p>(b)</p>
</div>
<div class="3u 6u(small) 12u$(xsmall)">
<span class="image fit"><img src="images/publication/PeppersCone/teaser/bright-tiger-side2.jpg" alt="" /></span>
<p>(c)</p>
</div>
<div class="3u 6u$(small) 12u$(xsmall)">
<span class="image fit"><img src="images/publication/PeppersCone/teaser/tiger_binocular_correction_aligned.png" alt="" /></span>
<p>(d)</p>
</div>
</div>
<div class="row">
<p>Our 3D display consists of (a) an iPad, a thin hollow plastic cone, and a rotatable base. The nickel at the base provides stability. (b-c) As the user rotates the display, the system renders a perspective-correct image for their point of view that gives a convincing impression of a 3D object suspended inside the cone. This provides a very simple way of interactively examining a 3D scene for a fraction of the cost of alternative volumetric or light field displays and doesn't require the use of special glasses. (d) In addition, the system can be extended to produce correct binocular cues by incorporating stereoscopic rendering and glasses.</p>
</div>
</div>
</div>
</section>
<!-- Abstract -->
<section id = "abstract">
<div class="inner">
<header class="major special">
<h2>Abstract</h2>
</header>
<div class="row">
<div class="10u 12u$(small)">
<p>
This paper describes a simple 3D display that can be built from a tablet computer and a plastic sheet folded into a cone. This display allows naturally viewing a three-dimensional object from any direction over a 360-degree path of travel without the use of a head mount or special glasses. Inspired by the classic Pepper's Ghost illusion, our approach uses a curved transparent surface to reflect the image displayed on a 2D display. By properly pre-distorting the displayed image our system can produce a perspective-correct image to the viewer that appears to be suspended inside the reflector. We use the gyroscope integrated into modern tablet computers to adjust the rendered image based on the relative orientation of the viewer. The end result is a natural and intuitive interface for inspecting a 3D object.
Our choice of a cone reflector is obtained by analyzing optical performance and stereo-compatibility over rotationally-symmetric conic reflector shapes. We also present the prototypes we built and measure the performance of our display through side-by-side comparisons with reference images.
</p>
</div>
<!-- </div> -->
<!-- <div class="row"> -->
<div class="2u$ 12u$(small)">
<ul class="actions vertical">
<li><a class="button fit" href="papers/PeppersCone/Pepper_s_Cone_UIST_2017.pdf">pdf</a></li>
<li><a class="button fit special" href="https://youtu.be/W2P-suog684">video</a></li>
<li><a class="button fit special" href="https://youtu.be/dppCXj11I_Q">Talk</a></li>
<li><a class="button fit special" href="https://drive.google.com/file/d/1GXAxgNFshQlUZzl8CZlyH3X1fUP5l1v4/view?usp=sharing">Slides</a></li>
<li><a class="button fit special" href="papers/PeppersCone/AuxiliaryFile.zip">auxiliary</a></li>
<li><a href="https://github.com/roxanneluo/Pepper-s-Cone-Unity" class="button fit special icon fa-github">github</a></li>
<!--<li><a href="#" class="button fit special icon fa-apple">app</a></li>-->
<!-- <li><a href="#" class="button alt fit icon">cite</a></li> -->
</ul>
</div>
</div>
</section>
<!-- video -->
<section>
<div class="inner">
<div class="row">
<div class="12u$">
<div class="video">
<iframe src="https://www.youtube.com/embed/W2P-suog684" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<br>
<br>
<!-- <section id = "abstract">
<div class="inner">
<header class="major special">
<h2>How to make your own Pepper's Cone</h2>
</header>
<div class="row">
<div class="12u$(small)">
<p>You can follow the instructions on <a href="https://github.com/roxanneluo/Pepper-s-Cone-Unity">github</a> to download the code, set up the tablet and run the demo. Here I'll mainly show you how to build the <em>cone</em>.</p>
<ol>
<li>Download the template of a 45-degree cone <a href="">here</a>.</li>
<li>Buy <a href="https://www.tapplastics.com">clear 0.02-inch PETG plastic sheets</a> or even thinner. Feel free to use other <em>transparent</em> <em>thin</em> plastic sheets. </li>
<li>
Print out the template as a poster since it's much larger than A4 paper, and cut your plastic sheet manually. Or use a laser cutter to cut it according to the template. Nowadays there are many makerspace in the neighbourhood like <a href="https://comotion.uw.edu/what-we-do/makerspace/">UW's Makerspace</a> and <a href="http://www.metrixcreatespace.com">Metrix Create Space</a> where laser cutters are available and cheap to use. Note that although using laser cutter is more convenient and accurate, some laser cutter doesn't support cutting PETG sheet. Be careful!
</li>
<li>
Tape the openning of the cone at the bottom and put a nickel for statblization during rotation. Alternatively, you can put a <a href="https://www.amazon.com/Whaline-Suction-Plastic-Sucker-without/dp/B071WFNKTB/ref=sr_1_1_sspa?ie=UTF8&qid=1515392318&sr=8-1-spons&keywords=sucker+pad+office&psc=1">sucker pad in the opening.</a>
</li>
<span class="image left"><img src="images/publication/PeppersCone/sucker_pad.jpg" alt="" /></span>
</ol>
</div>
</div>
</div>
</section>
<br>
-->
<section id = "abstract">
<div class="inner">
<header class="major special">
<h2>News</h2>
</header>
<div class="row">
<div class="12u$(small)">
<ol>
<li>
Pepper's Cone is highlighted on <a href="http://interactions.acm.org/archive/view/july-august-2018/demo-hour55">ACM Interactions Demo Hour</a> (<a href="https://dl.acm.org/citation.cfm?id=3226034">ACM Library</a>)!
<span class="image fit"><img src="images/publication/PeppersCone/Press/InteractionsDemoHour/demo-hour-magzine.jpg" alt="" /></span>
</li>
<li>
<a href="http://i-programmer.info/news/146-uiux/11463-peppers-cone-an-easy-3d-display.html">Pepper's Cone - An Easy 3D Display</a> by <a href="https://www.facebook.com/iProgrammer-127140977307932/?hc_ref=ARQ4u8sAchLZOM0TVK3n5jrh5jLZZvQahgEtUO8H26ENRV_aAZyetVA8lTn3fvUxO7E&fref=nf">iProgrammer</a>.
</li>
<li>
<a href="https://hackaday.com/2018/01/13/inexpensive-display-jumps-to-life/">Inexpensive Display Jumps to Life</a> by <a href="https://hackaday.com">Hack a Day</a>
<span class="image fit"><img src="images/publication/PeppersCone/Press/HackADay/Hack_a_Day.png" alt="" /></span>
</li>
<li>Pepper's Cone on <a href="">Hacker News</a> front page :D
Welcome to put your comments <a href="https://news.ycombinator.com/item?id=16051078">here</a>.
<span class="image fit"><img src="images/publication/PeppersCone/Press/Hacker's_News.png" alt="" /></span>
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>