Skip to content

Commit 3c822b6

Browse files
authored
Merge pull request #17 from nianticlabs/cocreatar
add CoCreatAR webpage
2 parents aae92a5 + 1fb303e commit 3c822b6

14 files changed

+354
-0
lines changed

cocreatar/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Webpage for CoCreatAR!

cocreatar/index.html

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>CoCreatAR</title>
6+
<meta name="description"
7+
content="CoCreatAR: Enhancing Authoring of Outdoor Augmented Reality Experiences Through Asymmetric Collaboration">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
9+
<meta charset="utf-8">
10+
11+
<!--Facebook preview-->
12+
<meta property="og:image" content="https://nianticlabs.github.io/cocreatar/resources/social_card.png">
13+
<!-- <meta property="og:image:type" content="image/png">
14+
<meta property="og:image:width" content="600">
15+
<meta property="og:image:height" content="400"> -->
16+
<meta property="og:type" content="website" />
17+
<meta property="og:url" content="..." />
18+
<meta property="og:title"
19+
content="CoCreatAR: Enhancing Authoring of Outdoor Augmented Reality Experiences Through Asymmetric Collaboration" />
20+
<meta property="og:description"
21+
content="CoCreatAR: Enhancing Authoring of Outdoor Augmented Reality Experiences Through Asymmetric Collaboration, CHI 2025" />
22+
23+
<!--Twitter preview-->
24+
<meta name="twitter:card" content="summary_large_image" />
25+
<meta name="twitter:title"
26+
content="CoCreatAR: Enhancing Authoring of Outdoor Augmented Reality Experiences Through Asymmetric Collaboration" />
27+
<meta name="twitter:description"
28+
content="CoCreatAR: Enhancing Authoring of Outdoor Augmented Reality Experiences Through Asymmetric Collaboration, CHI 2025" />
29+
<meta name="twitter:image" content="https://nianticlabs.github.io/cocreatar/resources/social_card.png">
30+
31+
<!--Style-->
32+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
33+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
34+
<link href="style.css" rel="stylesheet">
35+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
36+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
37+
<script src="https://kit.fontawesome.com/746ee6bfa4.js" crossorigin="anonymous"></script>
38+
39+
<link rel="icon" href="resources/favi.png">
40+
41+
</head>
42+
43+
<body>
44+
45+
<div class="container" style="text-align:center; padding:2rem 15px">
46+
<div class="row" style="text-align:center">
47+
<h1 style="margin-bottom:0.1rem; font-variant: small-caps;">CoCreatAR</h1>
48+
<h3 style="margin-top:0.1rem;margin-bottom:0.5rem;">Enhancing Authoring of Outdoor Augmented Reality Experiences
49+
Through Asymmetric Collaboration</h3>
50+
<h4 style="font-size:1.4em;">CHI 2025</h4>
51+
</div>
52+
<div class="row" style="text-align:center">
53+
<div class="col-xs-0 col-md-2"></div>
54+
<div class="col-xs-12 col-md-8">
55+
<h4>
56+
<a style="font-size:1.1em;" href="https://nels.dev/">
57+
<nobr>Nels Numan<sup>1*</sup></nobr>
58+
</a> &emsp;
59+
<a style="font-size:1.1em;" href="http://www0.cs.ucl.ac.uk/staff/g.brostow/">
60+
<nobr>Gabriel Brostow<sup>1,2</sup></nobr>
61+
</a> &emsp;
62+
<a style="font-size:1.1em;" href="">
63+
<nobr>Suhyun Park<sup>1</sup></nobr>
64+
</a> &emsp;
65+
<a style="font-size:1.1em;" href="https://www.ucl.ac.uk/computer-science/people/dr-simon-julier">
66+
<nobr>Simon Julier<sup>1</sup></nobr>
67+
</a> &emsp;
68+
<a style="font-size:1.1em;" href="https://wp.cs.ucl.ac.uk/anthonysteed/">
69+
<nobr>Anthony Steed<sup>1</sup></nobr>
70+
</a> &emsp;
71+
<a style="font-size:1.1em;" href="https://jessvb.github.io">
72+
<nobr>Jessica Van Brummelen<sup>2</sup></nobr>
73+
</a> &emsp;
74+
75+
</h4>
76+
77+
<sup>1</sup>University College London&nbsp;&nbsp;&nbsp;<sup>2</sup>Niantic&nbsp;&nbsp;&nbsp;<sup> <br>
78+
79+
</div>
80+
81+
<div class="col-xs-0 col-md-2"></div>
82+
83+
</div>
84+
<div style="text-align:center;font-size:0.9em"><sup>*</sup>Work done while at Niantic, during Nels' internship.
85+
</div>
86+
87+
</div>
88+
89+
90+
<div class="container" style="max-width: 1100px">
91+
<div class="row" style="text-align: center; padding:1rem">
92+
<div class="col-xs-4"></div>
93+
<div class="col-xs-2">
94+
<a href="resources/CoCreatAR_CHI_25.pdf" style="color:inherit">
95+
<a href="resources/CoCreatAR_CHI_25.pdf">
96+
<i class="fa-solid fa-file-pdf fa-4x"></i></a>
97+
</div>
98+
<!-- <div class="col-xs-2">
99+
<a href="https://github.com/nianticlabs/simplerecon" style="color:inherit;">
100+
<a href="https://github.com/nianticlabs/simplerecon">
101+
<i class="fa fa-github fa-4x"></i></a>
102+
</div> -->
103+
104+
<div class="col-xs-2">
105+
<a href="https://youtu.be/aZTPbMtb4bw" style="color:inherit;">
106+
<a href="https://youtu.be/aZTPbMtb4bw">
107+
<i class="fa-brands fa-youtube fa-4x"></i></a>
108+
</div>
109+
110+
<div class="col-xs-4"></div>
111+
112+
</div>
113+
</div>
114+
115+
<div class="container" style="text-align:center; padding:1rem">
116+
<br>
117+
<img src="resources/Teaser.png" alt="This figure illustrates our system, CoCreatAR, being used by a user ex-situ on a desktop computer and another user in-situ on a mobile phone. It shows various meshes and visualizations augmented on the real-world location, including RGB-D point clouds, coarse meshes, and a virtual character representing the in-situ user on the ex-situ user's screen. For example, some coarse meshes are shown as rough planes outside of the original location mesh." class="text-center"
118+
style="width: 100%; max-width: 1100px">
119+
</div>
120+
121+
<div class="container">
122+
<h3>Abstract</h3>
123+
<hr />
124+
<p>
125+
Authoring site-specific outdoor augmented reality (AR) experiences requires a nuanced understanding of real-world
126+
contexts to create immersive and relevant content. Existing ex-situ authoring tools typically rely on static 3D
127+
models to represent spatial information. However, our formative study (n=25) identifies key limitations of this
128+
approach: models are often outdated, incomplete, or insufficient for capturing critical factors such as safety
129+
considerations, user flow, and dynamic environmental changes. These issues necessitate frequent on-site visits and
130+
additional iterations, making the authoring process more time-consuming and resource-intensive.
131+
</p>
132+
<p style="text-indent: 30px;">
133+
To mitigate these challenges, we introduce <span style="font-variant: small-caps;">CoCreatAR</span>, an asymmetric
134+
collaborative authoring system that integrates the flexibility of ex-situ workflows with the immediate contextual
135+
awareness of in-situ authoring. We conducted an exploratory study (n=32) comparing <span
136+
style="font-variant: small-caps;">CoCreatAR</span> to an asynchronous workflow baseline, finding that it
137+
enhances user engagement and confidence in the authored output while also providing preliminary insights into its
138+
impact on task load. We conclude by discussing the implications of our findings for integrating real-world context
139+
into site-specific AR authoring systems.
140+
</p>
141+
142+
<br>
143+
144+
<!-- <div class="row" style="text-align:center; padding-left:1rem; padding-right:1rem; padding-bottom:1rem;">
145+
<h4 style="font-size:1.6em;"><u>30s Fast Forward</u></h4>
146+
<div class="col-xs-12">
147+
<video loop controls width="95%">
148+
<source src="resources/Dont_Look_Now_30sec_Preview.mp4" type="video/mp4">
149+
</video>
150+
</div>
151+
</div> -->
152+
153+
<!-- <h3>Approach</h3>
154+
<hr/>
155+
156+
<div class="row" style="text-align: center">
157+
<div class="col-xs-12">
158+
<h4 style="font-size:1.6em;"><u>Overview</u></h4>
159+
</div>
160+
</div>
161+
162+
163+
<div class="row" style="text-align: center">
164+
<div class="col-xs-12">
165+
<img src="resources/overview.jpg" alt="overview.png" class="text-center" style="width: 90%; max-width: 900px; margin-top:
166+
10px"><br/><br/><br/>
167+
</div>
168+
</div>
169+
170+
<div class="row" style="text-align: center">
171+
<div class="col-xs-12">
172+
<div >
173+
<p>
174+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nunc dui, vulputate non pulvinar et, accumsan a
175+
eros. Aliquam faucibus eros sit amet molestie tempus. Vestibulum vel sem in neque rutrum scelerisque. Morbi
176+
porttitor neque nec risus condimentum, sodales molestie magna consectetur. Aliquam sagittis felis massa, in
177+
gravida turpis interdum at. Sed auctor nulla tortor, in mattis felis tincidunt ut. Pellentesque sapien dolor,
178+
dapibus nec cursus id, aliquet ac sapien. Aliquam tortor ex, cursus sit amet ex in, faucibus venenatis augue.
179+
Maecenas eget consectetur eros. Nullam vitae gravida sapien. Fusce id lorem justo. Fusce ut ultrices tortor.
180+
181+
</div>
182+
</div>
183+
</div> -->
184+
185+
<h3>Resources</h3>
186+
<hr />
187+
188+
<br>
189+
190+
191+
<div class="row" style="text-align:center; padding-left:1rem; padding-right:1rem; padding-bottom:1rem;">
192+
<h4>Long-Form Video</h4>
193+
<div class="col-xs-12">
194+
<div class="video-container">
195+
<iframe width="560" height="315" src="https://www.youtube.com/embed/aZTPbMtb4bw" title="YouTube video player"
196+
frameborder="0"
197+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
198+
allowfullscreen></iframe>
199+
</div>
200+
</div>
201+
</div>
202+
203+
<!-- <div class="row" style="text-align:center; padding-left:1rem; padding-right:1rem; padding-bottom:1rem;">
204+
<h4 style="font-size:1.6em;"><u>Qualitative Mesh Comparison</u></h4>
205+
206+
<div class="col-xs-12" >
207+
<video loop controls width="95%">
208+
<source src="resources/JoinedMeshes.mp4" type="video/mp4">
209+
</video>
210+
</div>
211+
</div> -->
212+
213+
214+
<div class="row" style="text-align:center; padding-left:1rem; padding-right:1rem; padding-bottom:1rem;">
215+
<h4>Example Usage Figure</h4>
216+
217+
<div class="col-xs-12" >
218+
<img src="resources/CoCreatAR_Feature_Usage.png" alt="Four screenshots of the ex-situ participant adjusting virtual objects relative to the location mesh. A: In-situ: “Hmm no [the boombox] is still floating. Let me capture… [in-situ uses 3D Snapshot]”. Ex-situ, highlighted: “Ah now I can see it all. Should I put it on the pavement like this? [ex-situ moves boombox]”. In-situ: “That's good, yeah.” B: In-situ: “Maybe we can put [the map] here! [in-situ uses Surface Draw]”. Ex-situ, highlighted: “Perfect [...] Is this upside down? I can't really tell.” In-situ: “No that's the right way. [ex-situ aligns map with wall] Yeah, great.” C: Ex-situ: “Capture behind you so I can get more of the walls there so I can align [the garlands].” In-situ: “Okay, do you need 3D image or coarse mesh?” Ex-situ, highlighted: “Coarse mesh, for now. I don't need, like, full color, I just need a bit of the geometry [in-situ users Coarse 3D Mesh]”. D: In-situ: “Can you put the wine bottle like, here? [in-situ places 3D Cursor on the table]” Ex-situ, highlighted: “Hmm let me see, it's a little tricky [ex-situ moves wine bottle]” In-situ: “Yeah that's good!”" class="text-center"
219+
style="width: 80%; max-width: 1100px; border:0.15em solid;
220+
border-radius:0.5em;">
221+
</div>
222+
</div>
223+
224+
225+
<div class="row" style="text-align: center">
226+
<div class="col-xs-2 col-lg-2"></div>
227+
<div class="col-xs-4 col-lg-4">
228+
<h4>Paper</h4>
229+
<a href="resources/CoCreatAR_CHI_25.pdf">
230+
<img src="resources/paper_thumb.png" alt="Paper" class="text-center" style="max-width:70%; border:0.15em solid;
231+
border-radius:0.5em;"></a>
232+
</div>
233+
<div class="col-xs-4 col-lg-4">
234+
<h4>Supplemental</h4>
235+
<a href="resources/CoCreatAR_Supplementary_Materials.pdf">
236+
<img src="resources/supp_thumb.png" alt="Supplemental" class="text-center"
237+
style="max-width:70%; border:0.15em solid;border-radius:0.5em;"></a>
238+
</div>
239+
<!-- <div class="col-xs-4 col-lg-4">
240+
<h4>Code</h4>
241+
<a href="https://github.com/nianticlabs/simplerecon" style="color:inherit;">
242+
<img src="resources/github_repo.png" alt="github_repo.png" class="text-center"
243+
style="max-width:70%; border:0em solid;border-radius:0.5em;"></a>
244+
</div> -->
245+
246+
<div class="col-xs-2 col-lg-2"></div>
247+
</div>
248+
<!-- <h4 style="padding-top:0.5em">BibTeX</h4>
249+
<p>If you find this work useful for your research, please cite:</p>
250+
<div class="card">
251+
<div class="card-block">
252+
<pre class="card-text clickselect">
253+
254+
</pre>
255+
</div>
256+
</div> -->
257+
258+
259+
260+
<h3>Acknowledgements</h3>
261+
<hr />
262+
Special thanks to Charlie Houseago, KP Papangelis, Filipe
263+
Gaspar, Kelly Cho, George Ash, Adam Hegedus, Stanimir Vichev,
264+
Thomas Hall, and Victor Adrian Prisacariu for their feedback and
265+
support during the development of <span style="font-variant: small-caps;">CoCreatAR</span>. We also thank
266+
our study participants for their time and insights, and Isabel Kraus-
267+
Liang for assistance with study logistics. Our user study (Sec. 5) was
268+
partially supported by the European Union's Horizon 2020 Research
269+
and Innovation program under grant agreement No. 739578.
270+
</div>
271+
272+
<div class="container" style="padding-top:3rem; padding-bottom:3rem">
273+
<p style="text-align:center">
274+
&#169; This webpage was inspired by this
275+
<a href="https://nianticlabs.github.io/simplerecon/">template</a>.
276+
</p>
277+
</div>
278+
279+
</body>
280+
281+
</html>
7.01 MB
Binary file not shown.
4.33 MB
Loading
Binary file not shown.

cocreatar/resources/Teaser.pdf

1.67 MB
Binary file not shown.

cocreatar/resources/Teaser.png

3.04 MB
Loading

cocreatar/resources/favi.png

28.1 KB
Loading

cocreatar/resources/paper_thumb.png

1.51 MB
Loading

cocreatar/resources/social_card.png

485 KB
Loading

cocreatar/resources/social_card.psd

1.94 MB
Binary file not shown.

cocreatar/resources/supp_thumb.png

968 KB
Loading

cocreatar/resources/video_cover.png

426 KB
Loading

cocreatar/style.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
h1 {
2+
margin-bottom: 2rem;
3+
}
4+
5+
6+
a {
7+
color: #00a9dd;
8+
}
9+
10+
a:hover {
11+
color: #007da3;
12+
text-decoration: none;
13+
}
14+
15+
hr {
16+
margin-top: 1rem;
17+
margin-bottom: 1rem;
18+
border: 0;
19+
border-top: 3px solid #00a9dd;
20+
}
21+
22+
p {
23+
text-align: justify;
24+
/* font-size: 13px; */
25+
font-size:1.2em;
26+
}
27+
28+
td {
29+
font-size: 10px;
30+
padding: 2px;
31+
text-align: center;
32+
}
33+
34+
table {
35+
border-collapse: collapse;
36+
margin-bottom: 1.3em;
37+
width:80%;
38+
}
39+
40+
.current_tab{font-weight: bold;}
41+
42+
.subdued_text{
43+
color: #999999;
44+
margin: 0px 1em 1em 0px;
45+
}
46+
47+
.blank{
48+
height: 2em;
49+
clear: both;
50+
}
51+
52+
.label-info {
53+
background-color: #00a9dd;
54+
}
55+
56+
.label-info[href]:hover {
57+
background-color: #007da3;
58+
}
59+
60+
.video-container {
61+
position: relative;
62+
padding-bottom: calc(56.25% * 0.75); /* 16:9 */
63+
width: 95%;
64+
height: 0;
65+
}
66+
.video-container iframe {
67+
position: absolute;
68+
top: 0%;
69+
left: 2.6%;
70+
width: 100%;
71+
height: 100%;
72+
}

0 commit comments

Comments
 (0)