Skip to content

Commit

Permalink
simplified USDZ and added docs (google#2380)
Browse files Browse the repository at this point in the history 
* simplified USDZ and added docs

* more docs
  • Loading branch information
@elalish
elalish authored May 14, 2021
1 parent 4d766f7 commit 94a25d6
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 19 deletions.
23 changes: 7 additions & 16 deletions packages/model-viewer/src/features/ar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ const $arMode = Symbol('arMode');
const $arModes = Symbol('arModes');
const $arAnchor = Symbol('arAnchor');
const $preload = Symbol('preload');
const $generatedIosUrl = Symbol('generatedIosUrl');

const $onARButtonContainerClick = Symbol('onARButtonContainerClick');
const $onARStatus = Symbol('onARStatus');
Expand Down Expand Up @@ -107,8 +106,6 @@ export const ARMixin = <T extends Constructor<ModelViewerElementBase>>(
protected[$arMode]: ARMode = ARMode.NONE;
protected[$preload] = false;

private[$generatedIosUrl]: string|null = null;

private[$onARButtonContainerClick] = (event: Event) => {
event.preventDefault();
this.activateAR();
Expand Down Expand Up @@ -365,11 +362,8 @@ configuration or device capabilities');

this[$arButtonContainer].classList.remove('enabled');

const modelUrl = new URL(
generateUsdz ? await this.prepareUSDZ() : this.iosSrc!,
self.location.toString());

this[$arButtonContainer].classList.add('enabled');
const objectURL = generateUsdz ? await this.prepareUSDZ() : this.iosSrc!;
const modelUrl = new URL(objectURL, self.location.toString());

if (this.arScale === 'fixed') {
if (modelUrl.hash) {
Expand All @@ -378,7 +372,6 @@ configuration or device capabilities');
modelUrl.hash += 'allowsContentScaling=0';
}


const anchor = this[$arAnchor];
anchor.setAttribute('rel', 'ar');
const img = document.createElement('img');
Expand All @@ -390,16 +383,15 @@ configuration or device capabilities');
console.log('Attempting to present in AR with Quick Look...');
anchor.click();
anchor.removeChild(img);
if (generateUsdz) {
URL.revokeObjectURL(objectURL);
}
this[$arButtonContainer].classList.add('enabled');
}

async prepareUSDZ(): Promise<string> {
const updateSourceProgress = this[$progressTracker].beginActivity();

if (this[$generatedIosUrl] != null) {
URL.revokeObjectURL(this[$generatedIosUrl]!);
this[$generatedIosUrl] = null;
}

const scene = this[$scene];

const shadow = scene.shadow;
Expand All @@ -416,11 +408,10 @@ configuration or device capabilities');
const exporter = new USDZExporter();
const arraybuffer = await exporter.parse(scene.modelContainer);
const blob = new Blob([arraybuffer], {
type: 'application/octet-stream',
type: 'model/vnd.usdz+zip',
});

const url = URL.createObjectURL(blob);
this[$generatedIosUrl] = url;

updateSourceProgress(1);

Expand Down
18 changes: 16 additions & 2 deletions packages/modelviewer.dev/examples/augmentedreality/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
SceneViewer or QuickLook, as these are native apps. Only through WebXR, now our default AR mode, can this be
achieved, as the AR session is still inside of the browser. This also removes the need to redownload the model.
</p>
<p>
Note that by specifically including <code>quick-look</code> in
<code>ar-modes</code>, but not specifying an <code>ios-src</code>,
the USDZ will instead be auto-generated when the user clicks the
AR button on iOS to launch Quick Look.
</p>
</div>
<example-snippet stamp-to="webXR" highlight-as="html">
<template>
Expand Down Expand Up @@ -269,18 +275,26 @@ <h2 class="demo-title">Augmented Reality</h2>
<h4>This demonstrates several augmented reality modes, including
<code>webxr</code>, <code>scene-viewer</code>,
<code>quick-look</code> &amp; the accompanying attributes,
<code>ar</code>, <code>ar-modes</code>, <code>ar-scale</code>,
<code>ar</code>, <code>ar-scale</code>,
<code>ios-src</code>.</h4>
<p>
Note that WebXR mode requires the page be served on HTTPS and if
enclosed in an iframe, that iframe must allow your origin the
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking">
<code>xr-spatial-tracking</code></a> policy.
</p>
<p>
In this example an <code>ios-src</code> attribute is specified,
which enables Quick Look on iOS even if it is not specified in
<code>ar-modes</code>. This requires an extra download, but can be
useful if the auto-generated USDZ is not adequate (for instance it
does not support animations yet). Also, this source can be either
a .usdz or a .reality file.
</p>
</div>
<example-snippet stamp-to="ar" highlight-as="html">
<template>
<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-scale="fixed" ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz"></model-viewer>
<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-scale="fixed" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz"></model-viewer>
</template>
</example-snippet>

Expand Down
22 changes: 21 additions & 1 deletion packages/modelviewer.dev/examples/scenegraph/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,13 @@ <h2 class="demo-title">Model Transformations</h2>
called. Also, the <code>bounds</code> attribute is set to
<code>"tight"</code> to keep the transformed model from floating
over its shadow.</p>
<p>Note that these changes can be made in AR as well, but only in
WebXR mode, as this is the only mode that remains in the browser.
Changes you made ahead of time will not be reflected in Scene
Viewer, since this app downloads the original model again from its
URL. iOS Quick Look will reflect your changes as long as
<code>ios-src</code> is not specified, since in this case a USDZ
will be generated on the fly from the current state.</p>
</div>
<example-snippet stamp-to="transforms" highlight-as="html">
<template>
Expand Down Expand Up @@ -191,7 +198,11 @@ <h2 class="demo-title">Model Transformations</h2>
<h4 id="intro"><span class="font-medium">Directly manipulate the scene graph</h4>
<div class="heading">
<h2 class="demo-title">Change Material Base Color</h2>
<p>This is an experimental feature, and the API is considered highly unstable. Please try it out, but be prepared for it to change!</p>
<p>This is an experimental feature, and the API is considered highly
unstable. Please try it out, but be prepared for it to change!</p>
<p>As above, you can change these values in AR, but only in WebXR
mode. iOS Quick Look does not reflect these color changes as USDZ
does not appear to support colors multiplied onto textures.</p>
</div>
<example-snippet stamp-to="changeColor" highlight-as="html">
<template>
Expand Down Expand Up @@ -233,6 +244,9 @@ <h2 class="demo-title">Change Material Base Color</h2>
<div class="wrapper">
<div class="heading">
<h2 class="demo-title">Change Material Metalness and Roughness Factors</h2>
<p>As above, you can change these values in AR, but only in WebXR
mode. iOS Quick Look does reflect these property changes since they
are not also textured.</p>
</div>
<example-snippet stamp-to="changeMaterial" highlight-as="html">
<template>
Expand Down Expand Up @@ -287,6 +301,9 @@ <h2 class="demo-title">Change Material Metalness and Roughness Factors</h2>
<div class="wrapper">
<div class="heading">
<h2 class="demo-title">Swap textures - Diffuse/MetallicRoughness</h2>
<p>As above, you can change these values in AR, but only in WebXR
mode. iOS Quick Look reflects these texture changes so long as the
USDZ is auto-generated.</p>
</div>
<example-snippet stamp-to="swapTextures" highlight-as="html">
<template>
Expand Down Expand Up @@ -343,6 +360,9 @@ <h2 class="demo-title">Swap textures - Diffuse/MetallicRoughness</h2>
<div class="wrapper">
<div class="heading">
<h2 class="demo-title">Swap textures - Normals/Occlusion/Emission</h2>
<p>As above, you can change these values in AR, but only in WebXR
mode. iOS Quick Look reflects these texture changes so long as the
USDZ is auto-generated.</p>
</div>
<example-snippet stamp-to="swapTextures2" highlight-as="html">
<template>
Expand Down

0 comments on commit 94a25d6

Please sign in to comment.