Skip to content

Commit

Permalink
Changes per review feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Joel committed Mar 15, 2019
1 parent f5559bf commit 54d2325
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 113 deletions.
2 changes: 1 addition & 1 deletion examples/animation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ <h2>Select a specific animation with <span class="attribute">animation-name</spa
background-color="#25997c"
exposure="2"
environment-intensity="0"
alt="An animated 3D model of a robot"></model-viewer>
alt="An animate 3D model of a robot"></model-viewer>
</template>
</example-snippet>
</div>
Expand Down
5 changes: 5 additions & 0 deletions examples/assets/attributions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ Damaged Helmet by <a href="https://sketchfab.com/theblueturtle_">theblueturtle_<
licensed under Creative Commons Attribution-NonCommercial
(<a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet">source</a>)

## Horse

Horse by <a href="http://mirada.com/">mirada</a> for <a href="http://www.ro.me/">ROME "3 Dreams of Black"</a>
licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC-BY-NC-SA</a> (<a href="https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/Horse.glb">source</a>)

## Shishkebab.*

Shishkebab by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
Expand Down
14 changes: 9 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,23 +214,27 @@ <h4>experimental-pmrem</h4>
</li>
<li>
<h4>ios-src</h4>
<P>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. See <a href="https://github.com/GoogleWebComponents/model-viewer#augmented-reality">Augmented Reality</a>.</P>
<p>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. See <a href="https://github.com/GoogleWebComponents/model-viewer#augmented-reality">Augmented Reality</a>.</p>
</li>
<li>
<h4>magic-leap</h4>
<P>Enables the ability to view models in AR when viewing content on <a href="https://magicleaphelio.com/">Magic Leap's Helio</a> browser, requires that src is a GLB model, and requires the inclusion of the <a href="https://www.npmjs.com/package/@magicleap/prismatic">@magicleap/prismatic</a> library.</P>
</li>
<li>
<h4>pause-animation</h4>
<p>When set to true, pauses the current animation. Default is false.</p>
</li>
<li>
<h4>poster</h4>
<P>Displays an image instead of the model. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</P>
<p>Displays an image instead of the model. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</p>
</li>
<li>
<h4>preload</h4>
<P>When poster is also enabled, the model will be downloaded before user action. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</P>
<p>When poster is also enabled, the model will be downloaded before user action. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</p>
</li>
<li>
<h4>reveal-when-loaded</h4>
<P>When poster and preload are specified, hide the poster and show the model once the model has been loaded. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</P>
<p>When poster and preload are specified, hide the poster and show the model once the model has been loaded. See <a href="https://github.com/GoogleWebComponents/model-viewer#on-loading">On Loading</a> for more information.</p>
</li>
<li>
<h4>shadow-intensity</h4>
Expand All @@ -246,7 +250,7 @@ <h4>stage-light-intensity</h4>
</li>
<li>
<h4>unstable-webxr</h4>
<P>Enables the ability to view the model in AR via the experimental <a href="https://github.com/immersive-web/webxr">WebXR Device API</a>, currently <a href="https://developers.google.com/web/updates/2018/06/ar-for-the-web">implemented only in Chrome Canary</a>. See <a href="https://github.com/GoogleWebComponents/model-viewer#augmented-reality">Augmented Reality</a>.</P>
<p>Enables the ability to view the model in AR via the experimental <a href="https://github.com/immersive-web/webxr">WebXR Device API</a>, currently <a href="https://developers.google.com/web/updates/2018/06/ar-for-the-web">implemented only in Chrome Canary</a>. See <a href="https://github.com/GoogleWebComponents/model-viewer#augmented-reality">Augmented Reality</a>.</p>
</li>

</ul>
Expand Down
78 changes: 3 additions & 75 deletions src/features/animation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,12 @@

import {property} from 'lit-element';

import ModelViewerElementBase, {$needsRender, $scene, $tick, $updateSource} from '../model-viewer-base.js';
import ModelViewerElementBase, {$needsRender, $onModelLoad, $scene, $tick, $updateSource} from '../model-viewer-base.js';
import {Constructor} from '../utils.js';

const MILLISECONDS_PER_SECOND = 1000.0

const $updateAnimation = Symbol('updateAnimation');
const $updateModelLoadsPromise = Symbol('updateModelLoadsPromise');
const $modelLoads = Symbol('modelLoads');
const $rejectModelLoads = Symbol('rejectModelLoads');

export const AnimationMixin =
(ModelViewerElement: Constructor<ModelViewerElementBase>):
Expand All @@ -37,14 +34,6 @@ export const AnimationMixin =
@property({type: Number, attribute: 'animation-crossfade-duration'})
animationCrossfadeDuration: number = 300;

protected[$rejectModelLoads]: (...args: Array<any>) => void;
protected[$modelLoads]: Promise<void>;

constructor() {
super();
this[$updateModelLoadsPromise]();
}

/**
* Returns an array
*/
Expand All @@ -56,53 +45,8 @@ export const AnimationMixin =
return [];
}

/**
* Creates a promise that resolves when a model is loaded. The
* promise resolves immediately if there is currently a loaded
* model. The promise rejects if the currently loaded model is
* changed to something new due to the src attribute changing.
*/
[$updateModelLoadsPromise]() {
if (this[$rejectModelLoads] != null) {
this[$rejectModelLoads]();
}

this[$modelLoads] = new Promise<void>((resolve, reject) => {
if (this.loaded) {
// If the model is already loaded, we are g2g
resolve();
} else {
// Rejecting this promise implies that the load is cancelled,
// so we shouldn't listen for load events anymore:
this[$rejectModelLoads] = () => {
this.removeEventListener('load', onModelLoaded);
reject();
};

// Register a listener that will resolve the promise when a
// model with the appropriate URL has been loaded:
const {src} = (this as any);
const onModelLoaded = (event: any) => {
if (event.detail.url !== src) {
return;
}
resolve();
this.removeEventListener('load', onModelLoaded);
};
this.addEventListener('load', onModelLoaded);
}
});

// Suppress potentially unhandled rejections for this particular
// promise. An undefined error conventionally implies that the
// promise was merely cancelled:
this[$modelLoads].catch((error) => {
if (error == null) {
return;
}

throw error;
});
[$onModelLoad]() {
this[$updateAnimation]();
}

[$tick](_time: number, delta: number) {
Expand Down Expand Up @@ -132,25 +76,9 @@ export const AnimationMixin =
// any pending work to set the animation for a model that has
// not fully loaded:
(this as any)[$scene].model.stopAnimation();
this[$updateModelLoadsPromise]();
this[$updateAnimation]();
}

async[$updateAnimation]() {
const src = (this as any).src;
if (src != null) {
try {
// Don't attempt to play any animation until the model is
// fully loaded (we won't have animations to play anyway in
// the first-load case, and subsequent changes of src could
// lead to race conditions):
await this[$modelLoads];
} catch (error) {
// The model load was "cancelled" by rejection
return;
}
}

const {model} = (this as any)[$scene];

if (this.animated === true) {
Expand Down
46 changes: 25 additions & 21 deletions src/features/loading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const $posterHidden = Symbol('posterHidden');
const $userDismissedPoster = Symbol('userDismissedPoster');
const $shouldDismissPoster = Symbol('shouldDismissPoster');
const $shouldAttemptPreload = Symbol('shouldAttemptPreload');
const $ensurePreloaded = Symbol('ensurePreloaded');
const $preloadAnnounced = Symbol('preloadAnnounced');
const $ariaLabelCallToAction = Symbol('ariaLabelCallToAction');

Expand Down Expand Up @@ -119,7 +120,6 @@ export const LoadingMixin = (ModelViewerElement) => {
const posterOpacity = self.getComputedStyle(posterElement).opacity;
const onPosterHidden = () => {
requestAnimationFrame(() => {
console.warn('POSTER HIDDEN');
this.dispatchEvent(
new CustomEvent('poster-visibility', {detail: {visible: false}}));
this[$canvas].focus();
Expand Down Expand Up @@ -205,35 +205,39 @@ export const LoadingMixin = (ModelViewerElement) => {
this[$preloadAnnounced] = false;
}

this[$ensurePreloaded]();

if (this[$shouldDismissPoster]) {
if (!this[$posterHidden]) {
this[$updateSource]();
this[$hidePoster]();
}
} else {
this[$showPoster]();
}
}

async[$ensurePreloaded]() {
const preloaded = CachingGLTFLoader.hasFinishedLoading(this.src);

if (this[$shouldAttemptPreload]) {
const detail = {url: this.src};

this[$preloadAnnounced] = true;

if (preloaded) {
this.dispatchEvent(new CustomEvent('preload', {detail}));
} else {
loader.preload(this.src)
.then(() => {
this.dispatchEvent(new CustomEvent('preload', {detail}));
this.requestUpdate();
})
.catch((error) => {
this.dispatchEvent(new CustomEvent(
'error', {detail: {type: 'preload', sourceError: error}}));
});
}

this[$preloadAnnounced] = true;
}

if (this[$shouldDismissPoster]) {
if (!this[$posterHidden]) {
this[$updateSource]();
this[$hidePoster]();
try {
await loader.preload(this.src);

this.dispatchEvent(new CustomEvent('preload', {detail}));
this.requestUpdate();
} catch (error) {
this.dispatchEvent(new CustomEvent(
'error', {detail: {type: 'preload', sourceError: error}}));
}
}
} else {
this[$showPoster]();
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/test/features/animation-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ suite('ModelViewerElementBase with AnimationMixin', () => {

BasicSpecTemplate(() => ModelViewerElement, () => tagName);

suite('when configured as animated', () => {
suite('when configured to animate', () => {
let element: any;

setup(() => {
Expand Down
21 changes: 11 additions & 10 deletions src/three-components/CachingGLTFLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,19 +51,20 @@ export class CachingGLTFLoader {
*/
async preload(url) {
if (!cache.has(url)) {
const loadAttempt = loadWithLoader(url, this.loader);
loadAttempt
.then(() => {
preloaded.set(url, true);
})
.catch(() => {}); // Silently ignore exceptions here, they should be
// caught by the invoking function
cache.set(url, loadAttempt);
// window.loadAttempt = loadAttempt;
cache.set(url, loadWithLoader(url, this.loader));

// loadAttempt
//.then(() => {
// preloaded.set(url, true);
//})
//.catch(() => {}); // Silently ignore exceptions here, they should be
//// caught by the invoking function
}

await cache.get(url);
return; // Explicitly return so that we don't leak the source glTF

preloaded.set(url, true);
// return; // Explicitly return so that we don't leak the source glTF
}

/**
Expand Down

0 comments on commit 54d2325

Please sign in to comment.