Progress bars #487

cdata · 2019-04-16T15:49:35Z

Progress Bars

This change proposes the addition of the notion of instance-wide loading progress, as well as corresponding customizable visualizations and API. In other words: progress bars.

Some highlights of this change include:

A new progress event is introduced, maps directly to our internal notion of progress
A built in progress bar UI has been introduced
- Can be customized by adding child nodes to slot="progress-bar"
- Can also be customized with CSS custom properties
The poster now has a default background color, and is always displayed before the model is loaded
- Can now be customized by adding child nodes to slot="poster"
- Can also be customized with CSS custom properties
A new reveal attribute has been introduced to control model visibility
- Default configuration is equivalent to reveal-when-loaded semantics
- reveal="interaction" defers loading / revealing model until user interaction
🚨 BREAKING CHANGE: reveal-when-loaded has been removed in favor of new reveal attribute and related semantics
A new ProgressTracker utility class has been introduced to assist in tracking progress across multiple, uncoordinated, asynchronous actions at once
Several modules have been converted to TypeScript, including: model-viewer-base, features/loading, template and three-components/CachingGLTFLoader
Asynchronous actors have been instrumented with progress callback support throughout
Type declarations for GLTFLoader have been copied over from the Three.js project
A bug was fixed relating to how DPR was applied when zooming
A bug was fixed that caused <model-viewer> to have 1px-wide empty margins sometimes

New CSS custom properties

In keeping with our goal of enabling as much idiomatic customization as we can, the following CSS custom properties have been introduced by this change:

CSS property	Description
`--poster-color`	Sets the `background-color` of the poster. Falls back to `--background-color` if set. Defaults to `#fff`.
`--poster-image`	Sets the `background-image` of the poster. This is currently overridden by the `poster` attribute if it is set. Defaults to `none`.
`--progress-bar-color`	Sets the `background-color` of the progress bar. Defaults to `rgba(0, 0, 0, 0.4)`.
`--progress-mask`	Sets the `background` of the progress mask. Defaults to `#fff`.

Tracking progress

In order to present the model at the correct time, we must take into account an uncertain number of possible network actions (environment map, glTF w/ multiple sub-resources etc) as well as an uncertain number of script/GPU processing steps (env map generation, skybox, PMREM etc) in order for the model to be considered presentable. The notion of "progress" introduced by this change encompasses all such actions that are implemented today.

Here is an example of how complex the process of presenting one model can be. Note that this is a fairly heavy configuration, resulting in almost 70MB of total assets transferred before we reveal the model:

Examples

Basic progress bar w/ poster	`reveal="interaction"`

`src` attribute changing over time	Custom progress bar

The following is an abbreviated form of the markup used to create the custom progress bar example above:

<style>
  #progress {
    position: absolute;
    width: calc(100% / 3);
    height: 10px;
    color: rgba(255, 255, 255, 0.75);
    box-shadow: 0px 0px 8px 6px rgba(0, 0, 0, 0.25);
    border: 2px solid currentColor;
    border-radius: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 100% / 6);
    opacity: 0;
    transition: opacity 0.3s 0.3s;
  }

  #progress.show {
    transition-delay: 0s;
    opacity: 1;
  }

  #progress>.bar {
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transform-origin: top left;
    transform: scaleX(0);
  }
</style>

<!-- ... -->

<model-viewer src="./any.gltf">
  <div id="progress" slot="progress-bar">
    <div class="bar"></div>
  </div>
</model-viewer>

<script>
  const modelViewer = document.querySelector('model-viewer');
  const progress = document.querySelector('#progress');
  const bar = progress.querySelector('.bar');

  modelViewer.addEventListener('progress', (event) => {
    const {totalProgress} = event.detail;
    progress.classList.toggle('show', totalProgress < 1);
    bar.style.transform = `scaleX(${totalProgress})`;
  });
</script>

Future work

Use a dynamically colored linear-gradient for progress mask Use dynamically colored linear gradient for progress mask #486
Add CSS custom property details to docs site (@yuinchien is working on this) Add CSS custom property information to docs #488
Make it possible to load environment map lazily Ensure environment map adheres to lazy loading semantics #490
Make it possible to configure background color with CSS Make it possible to set background color with CSS custom property #492
A pretty bad Chrome bug related to delegatesFocus was discovered in the course of this change crbug.com/950357

Fixes #335
Fixes #489

cdata · 2019-04-16T15:51:10Z

rollup.config.js

-      comments: 'none',
-    }),
-  );
+if (NODE_ENV !== 'development') {


The default run mode for the build script was set as "development", but should probably be "production" so that naively running Rollup with the config builds all the things.

cdata · 2019-04-17T05:33:22Z

src/template.ts

-      pointer-events: none;
-    }
-
-    .click-to-view {


Removed this entirely, as it is vestigial from <xr-model> prototype days

yuinchien · 2019-04-17T21:48:11Z

@cdata I wonder if we should simplify the default css properties for progress bar & future features. My concern is that the list of properties can be endless if we aren't extremely selective. I believe developers can further customize CSS if they want to, we should keep defaults to a minimum.

To me, the most crucial properties for progress bar are:

--background-color
--poster-image
--progress-bar-color

If we set default poster image & progress-mask to background-size: cover, we can still have a pretty ok baseline results. The progress-mask color should be directly linked to background-color, without transparency. We should recommend using poster image with the same background color for consistency. WDYT?

smalls · 2019-04-17T23:11:23Z

src/features/loading.ts

@@ -0,0 +1,402 @@
+/*


Just a nit, this would have been easier to read broken out into separate PRs. But, it was broken out into separate commits, so it was pretty easy to just go back there to take a look:

3ad1274

38c9e2b#diff-5fa0cbec670bc4c1c710be11a06e2376

Yeah, agreed. Lot's of regret.

smalls · 2019-04-17T23:13:48Z

src/features/loading.ts

+
+    get[$shouldRevealModel](): boolean {
+      return this.reveal === RevealStrategy.AUTO ||
+          this.reveal === this[$posterDismissalSource];


Would the second clause be clearer as PosterDismissalSource.INTERACTION === this[$posterDismissalSource] or !!this[$posterDismissalSource]?

I suppose my thought (particularly with the second) is that we probably don't care what the dismissal source is, only if we have one?

You're right, at this stage we only care that a dismissal source is set. As written, it's only helpful if we had N+1 possible sources.

smalls · 2019-04-17T23:24:34Z

src/model-viewer-base.ts

+      (async () => {
+        const updateSourceProgress = this[$progressTracker].beginActivity();
+        await this[$updateSource](
+            (progress: number) => updateSourceProgress(progress * 0.9));


Why * 0.9? So it doesn't go to 1.0 until we're actually done (below)?

smalls · 2019-04-17T23:29:14Z

src/utilities/progress-tracker.ts

@@ -0,0 +1,141 @@
+import {clamp} from '../utils.js';


File header?

cdata · 2019-04-18T22:17:22Z

@yuinchien thanks for the feedback. The CSS properties have been pared down to four.

AYTSistemas13 · 2022-11-03T19:47:04Z

const modelViewer = document.querySelector('model-viewer');
const progress = document.querySelector('#progress');
const bar = progress.querySelector('.bar');

modelViewer.addEventListener('progress', (event) => {
const {totalProgress} = event.detail;
progress.classList.toggle('show', totalProgress < 1);
bar.style.transform = scaleX(${totalProgress});
});

when I put this code into an Angular Project, typescript show a few of error messages, I already achieved most of them but one it is still going, and the error says: Property 'detail' does not exist on type 'ProgressEvent'.

This is my code in my component from Angular project:

const modelViewerload = document.querySelector('model-viewer') as ModelViewerElement;
const progress = document.querySelector('#progress') as HTMLElement;
const bar = progress.querySelector('.bar') as HTMLElement;

modelViewerload.addEventListener('progress', (event) => {
  const totalProgress:any = event.detail;
  progress.classList.toggle('show', totalProgress! < 1);
  bar.style.transform = `scaleX(${totalProgress})`;
} );

I installed @google/model-viewer via npm, and this are my imports:
import { ModelViewerElement, RGBA } from "@google/model-viewer/lib/model-viewer";

I hope you can read me and find a solution. Thanks.

elalish · 2022-11-07T17:29:37Z

maybe const {totalProgress} = event.detail as any;? We may have an error in our types.

AYTSistemas13 · 2022-11-10T15:59:06Z

Yes, I did this and worked:
const totalProgress = (event as any).detail.totalProgress;

Chris Joel added 4 commits April 9, 2019 20:46

Convert loading mixin / template to TypeScript

3ad1274

Convert ModelViewerElementBase to TypeScript

533a1df

Fix resize issue when DPR changes

ebf0fa3

Convert CachingGLTFLoader to TypeScript

08212fe

cdata commented Apr 16, 2019

View reviewed changes

cdata force-pushed the progress-bars branch 3 times, most recently from 530fc81 to 69c0e99 Compare April 16, 2019 16:40

cdata mentioned this pull request Apr 16, 2019

Add CSS custom property information to docs #488

Closed

cdata force-pushed the progress-bars branch 2 times, most recently from ce29777 to ddbadd5 Compare April 17, 2019 04:08

cdata mentioned this pull request Apr 17, 2019

Ensure environment map adheres to lazy loading semantics #490

Closed

Implement progress bars

38c9e2b

cdata force-pushed the progress-bars branch from ddbadd5 to 38c9e2b Compare April 17, 2019 05:19

cdata added this to the v0.3.0 milestone Apr 17, 2019

cdata commented Apr 17, 2019

View reviewed changes

Add some progress bar docs

00e689c

smalls previously approved these changes Apr 17, 2019

View reviewed changes

Fix progress bars for IE11

5666add

cdata dismissed smalls’s stale review via 5666add April 18, 2019 19:46

cdata changed the title ~~(WIP) Progress bars~~ Progress bars Apr 18, 2019

cdata marked this pull request as ready for review April 18, 2019 20:39

Add license header

124ea0e

cdata mentioned this pull request Apr 18, 2019

Make it possible to set background color with CSS custom property #492

Closed

Pare down the of CSS custom properties we support

4573250

We only care about one dismissal source rn

076c380

smalls approved these changes Apr 18, 2019

View reviewed changes

cdata merged commit 60f37e9 into master Apr 18, 2019

cdata deleted the progress-bars branch April 18, 2019 23:46

elalish mentioned this pull request Apr 26, 2019

Fidelity tests are broken #508

Closed

4 tasks

This was referenced May 16, 2019

Document reveal attribute #549

Closed

Is it possible to open scene viewer without showing the 3d model with model-viewer? #547

Closed

Docs for model-visibility event are missing #554

Closed

Progress bars #487

Progress bars #487

Uh oh!

Conversation

cdata commented Apr 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Progress Bars

New CSS custom properties

Tracking progress

Examples

Future work

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuinchien commented Apr 17, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cdata commented Apr 18, 2019

Uh oh!

AYTSistemas13 commented Nov 3, 2022

Uh oh!

elalish commented Nov 7, 2022

Uh oh!

AYTSistemas13 commented Nov 10, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cdata commented Apr 16, 2019 •

edited

Loading