Skip to content

Commit 8f39b0f

Browse files
elalishelalish
authored
Default to USDZ autogeneration on iOS AR (#3802)
* switch ar-modes default * remove examples header
1 parent 7556436 commit 8f39b0f

File tree

17 files changed

+168
-105
lines changed

17 files changed

+168
-105
lines changed

‎packages/model-viewer/src/features/ar.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export type ARMode = 'quick-look'|'scene-viewer'|'webxr'|'none';
3232
const deserializeARModes = enumerationDeserializer<ARMode>(
3333
['quick-look', 'scene-viewer', 'webxr', 'none']);
3434

35-
const DEFAULT_AR_MODES = 'webxr scene-viewer';
35+
const DEFAULT_AR_MODES = 'webxr scene-viewer quick-look';
3636

3737
const ARMode: {[index: string]: ARMode} = {
3838
QUICK_LOOK: 'quick-look',

‎packages/modelviewer.dev/data/docs.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -282,12 +282,12 @@
282282
{
283283
"name": "ar-modes",
284284
"htmlName": "arModes",
285-
"description": "A prioritized list of the types of AR experiences to enable. Allowed values are \"webxr\", to launch the AR experience in the browser, \"scene-viewer\", to launch the <a href=\"https://developers.google.com/ar/develop/java/scene-viewer\">Scene Viewer</a> app, \"quick-look\", to launch the iOS Quick Look app. You can specify any number of modes separated by whitespace. Note that the presence of an ios-src will enable quick-look by itself; specifying quick-look here allows us to generate a USDZ on the fly rather than downloading a separate ios-src file.",
285+
"description": "A prioritized list of the types of AR experiences to enable. Allowed values are \"webxr\", to launch the AR experience in the browser, \"scene-viewer\", to launch the <a href=\"https://developers.google.com/ar/develop/java/scene-viewer\">Scene Viewer</a> app, \"quick-look\", to launch the iOS Quick Look app. You can specify any number of modes separated by whitespace. Including quick-look here without an ios-src (our default) will generate a USDZ on the fly rather than downloading a separate ios-src file.",
286286
"links": [
287287
"<a href=\"../examples/augmentedreality/\">Related examples</a>"
288288
],
289289
"default": {
290-
"default": "webxr scene-viewer",
290+
"default": "webxr scene-viewer quick-look",
291291
"options": "prioritized list possible AR modes: webxr, scene-viewer, and quick-look"
292292
}
293293
},
@@ -318,7 +318,7 @@
318318
{
319319
"name": "ios-src",
320320
"htmlName": "iosSrc",
321-
"description": "The url to a <a href=\"https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html\">USDZ</a> model which will be used on <a href=\"https://www.apple.com/ios/augmented-reality/\">supported iOS 12+ devices</a> via <a href=\"https://developer.apple.com/videos/play/wwdc2018/603/\">AR Quick Look</a> on Safari. The presence of this attribute will automatically enable the quick-look ar-mode, however it is no longer necessary. If instead the quick-look ar-mode is specified and ios-src is not specified, then we will generate a USDZ on the fly when the AR button is pressed. This means modifications via the scene-graph API will now be reflected in Quick Look. However, USDZ generation is not perfect, for instance animations are not yet supported, so in some cases supplying ios-src may give better results.",
321+
"description": "The url to a <a href=\"https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html\">USDZ</a> model which will be used on <a href=\"https://www.apple.com/ios/augmented-reality/\">supported iOS 12+ devices</a> via <a href=\"https://developer.apple.com/videos/play/wwdc2018/603/\">AR Quick Look</a> on Safari. The presence of this attribute will automatically enable the quick-look ar-mode, however it is no longer necessary. If instead the quick-look ar-mode is specified and ios-src is not specified (the default), then we will generate a USDZ on the fly when the AR button is pressed. This means modifications via the scene-graph API will now be reflected in Quick Look. However, USDZ generation is not perfect, for instance animations are not yet supported, so in some cases supplying ios-src may give better results.",
322322
"links": [
323323
"<a href=\"../examples/augmentedreality/#ar\"><span class='attribute'>ios-src</span> example</a>"
324324
]

‎packages/modelviewer.dev/examples/animation/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h4></h4>
5656
</div>
5757
<example-snippet stamp-to="autoplay" highlight-as="html">
5858
<template>
59-
<model-viewer camera-controls touch-action="pan-y" autoplay ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
59+
<model-viewer camera-controls touch-action="pan-y" autoplay ar ar-modes="webxr scene-viewer" shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
6060
</template>
6161
</example-snippet>
6262
</div>
@@ -73,7 +73,7 @@ <h4></h4>
7373
</div>
7474
<example-snippet stamp-to="selectingAnimations" highlight-as="html">
7575
<template>
76-
<model-viewer camera-controls touch-action="pan-y" autoplay animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
76+
<model-viewer camera-controls touch-action="pan-y" autoplay animation-name="Running" ar ar-modes="webxr scene-viewer" shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
7777
</template>
7878
</example-snippet>
7979
</div>
@@ -90,7 +90,7 @@ <h4></h4>
9090
</div>
9191
<example-snippet stamp-to="controlSpeed" highlight-as="html">
9292
<template>
93-
<model-viewer id="change-speed-demo" camera-controls touch-action="pan-y" animation-name="Dance" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
93+
<model-viewer id="change-speed-demo" camera-controls touch-action="pan-y" animation-name="Dance" ar ar-modes="webxr scene-viewer" shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animate 3D model of a robot"></model-viewer>
9494
<script type="module">
9595
const modelViewer = document.querySelector('#change-speed-demo');
9696
const speeds = [1, 2, 0.5, -1];
@@ -119,7 +119,7 @@ <h4></h4>
119119
</div>
120120
<example-snippet stamp-to="crossFade" highlight-as="html">
121121
<template>
122-
<model-viewer id="paused-change-demo" camera-controls touch-action="pan-y" autoplay animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
122+
<model-viewer id="paused-change-demo" camera-controls touch-action="pan-y" autoplay animation-name="Running" ar ar-modes="webxr scene-viewer" shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
123123
<script>
124124
(() => {
125125
const modelViewer = document.querySelector('#paused-change-demo');
@@ -146,7 +146,7 @@ <h4></h4>
146146
</div>
147147
<example-snippet stamp-to="paused" highlight-as="html">
148148
<template>
149-
<model-viewer id="xfade-demo" camera-controls touch-action="pan-y" animation-name="Running" ar shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
149+
<model-viewer id="xfade-demo" camera-controls touch-action="pan-y" animation-name="Running" ar ar-modes="webxr scene-viewer" shadow-intensity="1" src="../../shared-assets/models/RobotExpressive.glb" alt="An animated 3D model of a robot"></model-viewer>
150150
<script>
151151
(() => {
152152
const modelViewer = document.querySelector('#xfade-demo');

‎packages/modelviewer.dev/examples/annotations/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,7 @@ <h4 id="intro"><span class="font-medium">Camera Views. </span></h4>
350350
touch-action="none"
351351
poster="../../assets/SketchfabModels/ThorAndTheMidgardSerpent.webp"
352352
ar
353-
ar-modes="webxr scene-viewer quick-look"
353+
354354
>
355355
<button class="view-button" slot="hotspot-0"
356356
data-position="-0.0569m 0.0969m -0.1398m" data-normal="-0.5829775m 0.2863482m -0.7603565m"

‎packages/modelviewer.dev/examples/augmentedreality/index.html

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,14 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
7373
achieved, as the AR session is still inside of the browser. This also removes the need to redownload the model.
7474
</p>
7575
<p>
76-
Note that by specifically including <code>quick-look</code> in
77-
<code>ar-modes</code>, but not specifying an <code>ios-src</code>,
76+
Note that by not specifying an <code>ios-src</code>,
7877
the USDZ will instead be auto-generated when the user clicks the
7978
AR button on iOS to launch Quick Look.
8079
</p>
8180
</div>
8281
<example-snippet stamp-to="webXR" highlight-as="html">
8382
<template>
84-
<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" shadow-intensity="1" ar ar-modes="webxr scene-viewer quick-look" camera-controls touch-action="pan-y" alt="A 3D model carousel">
83+
<model-viewer src="../../assets/ShopifyModels/Chair.glb" poster="../../assets/ShopifyModels/Chair.webp" shadow-intensity="1" ar camera-controls touch-action="pan-y" alt="A 3D model carousel">
8584

8685
<button slot="ar-button" id="ar-button">
8786
View in your space
@@ -145,7 +144,7 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
145144
}
146145

147146
#ar-button {
148-
background-image: url(../../assets/ic_view_in_ar_new_googblue_48dp.webp);
147+
background-image: url(../../assets/ic_view_in_ar_new_googblue_48dp.png);
149148
background-repeat: no-repeat;
150149
background-size: 20px 20px;
151150
background-position: 12px 50%;
@@ -283,12 +282,11 @@ <h4>This demonstrates several augmented reality modes, including
283282
<code>xr-spatial-tracking</code></a> policy.
284283
</p>
285284
<p>
286-
In this example an <code>ios-src</code> attribute is specified,
287-
which enables Quick Look on iOS even if it is not specified in
288-
<code>ar-modes</code>. This requires an extra download, but can be
289-
useful if the auto-generated USDZ is not adequate (for instance it
290-
does not support animations yet). Also, this source can be either
291-
a .usdz or a .reality file.
285+
In this example an <code>ios-src</code> attribute is specified.
286+
This requires an extra download, but can be useful if the
287+
auto-generated USDZ is not adequate (for instance it does not
288+
support animations yet). Also, this source can be either a .usdz
289+
or a .reality file.
292290
</p>
293291
<p>
294292
Additionally, <code>ar-scale="fixed"</code> is used to prevent the
@@ -365,7 +363,7 @@ <h4>This demonstrates the <code>ar-placement</code> attribute, which defaults to
365363
</div>
366364
<example-snippet stamp-to="wall" highlight-as="html">
367365
<template>
368-
<model-viewer src="../../assets/boom_2_.glb" ar ar-placement="wall" ar-modes="webxr scene-viewer quick-look" camera-controls touch-action="pan-y" alt="A 3D model of some wall art"></model-viewer>
366+
<model-viewer src="../../assets/boom_2_.glb" ar ar-placement="wall" camera-controls touch-action="pan-y" alt="A 3D model of some wall art"></model-viewer>
369367
</template>
370368
</example-snippet>
371369

@@ -384,7 +382,7 @@ <h4></h4>
384382
</div>
385383
<example-snippet stamp-to="customButton" highlight-as="html">
386384
<template>
387-
<model-viewer ar ar-modes="webxr scene-viewer quick-look" camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
385+
<model-viewer ar camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
388386
<button slot="ar-button" style="background-color: white; border-radius: 4px; border: none; position: absolute; top: 16px; right: 16px; ">
389387
👋 Activate AR
390388
</button>
@@ -414,7 +412,7 @@ <h4></h4>
414412
<template>
415413
<div class="demo" style="background: linear-gradient(#ffffff, #ada996); overflow-x: hidden;">
416414
<span style="position: absolute; text-align: center; font-size: 100px; line-height: 100px; left: 50%; transform: translateX(-50%);">Background<br>is visible<br>through<br>transparent<br>objects.</span>
417-
<model-viewer camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
415+
<model-viewer camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb" ar alt="A 3D transparency test" style="background-color: unset;"></model-viewer>
418416
</div>
419417
</template>
420418
</example-snippet>

‎packages/modelviewer.dev/examples/color.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ <h3 id="matching">What's wrong with the rendered color matching the baseColor?</
243243
src="../../shared-assets/models/silver-gold.gltf"
244244
skybox-image="../../shared-assets/environments/neutral.hdr"
245245
ar
246-
ar-modes="webxr scene-viewer quick-look"
246+
247247
camera-controls
248248
alt="3D model of six example material spheres"
249249
>

‎packages/modelviewer.dev/examples/lighthouse.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for good Lighthouse scores</h2>
253253
interaction-prompt-threshold="0"
254254
shadow-intensity="1"
255255
ar
256-
ar-modes="webxr scene-viewer quick-look"
256+
257257
camera-controls
258258
alt="3D model of a chair with footrest"
259259
>
@@ -315,7 +315,7 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for good Lighthouse scores</h2>
315315
interaction-prompt-threshold="0"
316316
shadow-intensity="1"
317317
ar
318-
ar-modes="webxr scene-viewer quick-look"
318+
319319
camera-controls
320320
alt="3D model of a countertop mixer"
321321
>

‎packages/modelviewer.dev/examples/lighthouse2.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for decent Lighthouse scores</h
249249
interaction-prompt-threshold="0"
250250
shadow-intensity="1"
251251
ar
252-
ar-modes="webxr scene-viewer quick-look"
252+
253253
camera-controls
254254
generate-schema
255255
alt="3D model of a chair with footrest"
@@ -300,7 +300,7 @@ <h2>Setting up <code>&lt;model-viewer&gt;</code> for decent Lighthouse scores</h
300300
interaction-prompt-threshold="0"
301301
shadow-intensity="1"
302302
ar
303-
ar-modes="webxr scene-viewer quick-look"
303+
304304
camera-controls
305305
generate-schema
306306
alt="3D model of a countertop mixer"

‎packages/modelviewer.dev/examples/loading/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@ <h4>Our renderer tries to keep the frame rate between 38 and 60 frames per secon
392392
</div>
393393
<example-snippet stamp-to="renderScale" highlight-as="html">
394394
<template>
395-
<model-viewer id="scale" alt="A 3D model of a toy car" camera-controls touch-action="pan-y" auto-rotate src="../../shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb" ar ar-modes="webxr scene-viewer quick-look">
395+
<model-viewer id="scale" alt="A 3D model of a toy car" camera-controls touch-action="pan-y" auto-rotate src="../../shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb" ar>
396396
Reported DPR: <span id="reportedDpr"></span><br/>
397397
Rendered DPR: <span id="renderedDpr"></span><br/>
398398
Minimum DPR: <span id="minimumDpr"></span><br/>

‎packages/modelviewer.dev/examples/scenegraph/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ <h2 class="demo-title">Swap Model Variants</h2>
8383
</div>
8484
<example-snippet stamp-to="variants" highlight-as="html">
8585
<template>
86-
<model-viewer id="shoe" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/MaterialsVariantsShoe/glTF-Binary/MaterialsVariantsShoe.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D model of a Shoe">
86+
<model-viewer id="shoe" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/MaterialsVariantsShoe/glTF-Binary/MaterialsVariantsShoe.glb" ar alt="A 3D model of a Shoe">
8787
<div class="controls">
8888
<div>Variant: <select id="variant"></select></div>
8989
</div>
@@ -140,7 +140,7 @@ <h2 class="demo-title">Model Transformations</h2>
140140
</div>
141141
<example-snippet stamp-to="transforms" highlight-as="html">
142142
<template>
143-
<model-viewer id="transform" orientation="20deg 0 0" shadow-intensity="1" camera-controls touch-action="pan-y" ar ar-modes="webxr scene-viewer quick-look" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
143+
<model-viewer id="transform" orientation="20deg 0 0" shadow-intensity="1" camera-controls touch-action="pan-y" ar src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut">
144144
<div class="controls">
145145
<div>Roll: <input id="roll" value="20" size="3" class="number"> degrees</div>
146146
<div>Pitch: <input id="pitch" value="0" size="3" class="number"> degrees</div>
@@ -215,7 +215,7 @@ <h2 class="demo-title">Change Material Base Color</h2>
215215
</div>
216216
<example-snippet stamp-to="changeColor" highlight-as="html">
217217
<template>
218-
<model-viewer id="color" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/Astronaut.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D model of an astronaut">
218+
<model-viewer id="color" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/Astronaut.glb" ar alt="A 3D model of an astronaut">
219219
<div class="controls", id="color-controls">
220220
<button data-color="1,0,0,1">Red</button>
221221
<button data-color="0,1,0,1">Green</button>
@@ -259,7 +259,7 @@ <h2 class="demo-title">Change Material Metalness and Roughness Factors</h2>
259259
</div>
260260
<example-snippet stamp-to="changeMaterial" highlight-as="html">
261261
<template>
262-
<model-viewer id="sphere" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/reflective-sphere.gltf" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D model of a sphere">
262+
<model-viewer id="sphere" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/reflective-sphere.gltf" ar alt="A 3D model of a sphere">
263263
<div class="controls">
264264
<div>
265265
<p>Metalness: <span id="metalness-value"></span></p>
@@ -317,7 +317,7 @@ <h2 class="demo-title">Create textures</h2>
317317
</div>
318318
<example-snippet stamp-to="createTexturesExample" highlight-as="html">
319319
<template>
320-
<model-viewer id="duck" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/Duck/glTF-Binary/Duck.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D model of a duck">
320+
<model-viewer id="duck" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/Duck/glTF-Binary/Duck.glb" ar alt="A 3D model of a duck">
321321
<div class="controls">
322322
<p>Normals</p>
323323
<select id="normals2">
@@ -386,7 +386,7 @@ <h2 class="demo-title">Swap textures</h2>
386386
</div>
387387
<example-snippet stamp-to="swapTextures" highlight-as="html">
388388
<template>
389-
<model-viewer id="helmet" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" ar ar-modes="webxr scene-viewer quick-look" alt="A 3D model of a helmet">
389+
<model-viewer id="helmet" camera-controls touch-action="pan-y" src="../../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" ar alt="A 3D model of a helmet">
390390
<div class="controls">
391391
<div>
392392
<p>Diffuse</p>

0 commit comments

Comments
 (0)