Skip to content

Commit

Permalink
Additional changes per feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Joel authored and cdata committed Mar 5, 2019
1 parent 72cfbba commit ca0fc5c
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 56 deletions.
35 changes: 23 additions & 12 deletions POLYFILLS.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,33 @@ gaps for some of the newest features.
---

- ✅ Natively supported
- 🚧 Available with polyfill
- ✋ Available with polyfill
- 🚧 Behind a flag, unstable
- 🚫 Not available
- 🎌 Behind a flag, unstable

Feature | Chrome | Canary | Safari 12 | Firefox 64 | Firefox 62 | Edge | IE 11
--------------------------|--------|--------|-----------|------------|------------|-------|------
Resize Observer¹ | ✅ | ✅ | 🚧 | 🚧 | 🚧 | 🚧 | 🚧
Custom Elements | ✅ | ✅ | ✅ | 🚧 | 🚧 | 🚧 | 🚧
Shadow DOM | ✅ | ✅ | ✅ | ✅ | 🚧 | 🚧 | 🚧
Intersection Observer² | ✅ | ✅ | 🚧 | ✅ | ✅ | ✅ | 🚧
Fullscreen API³ | ✅ | ✅ | 🚧 | ✅ | 🚧 | 🚧 | 🚧
WebXR Device API | 🚫 | 🎌 | 🚫 | 🚫 | 🚫 | 🚫 | 🚫
WebXR HitTest API | 🚫 | 🎌 | 🚫 | 🚫 | 🚫 | 🚫 | 🚫

Feature | Chrome | Canary | Safari 12 | Firefox 65 | Edge | IE 11
--------------------------|--------|--------|-----------|------------|------|------
Custom Elements | ✅ | ✅ | ✅ | ✅ | ✋ | ✋
Shadow DOM | ✅ | ✅ | ✅ | ✅ | ✋ | ✋
Resize Observer¹ | ✅ | ✅ | ✋ | ✋ | ✋ | ✋
Intersection Observer² | ✅ | ✅ | ✋ | ✅ | ✅ | ✋


The following features are only required if you wish to use the unstable
in-browser WebXR augmented reality mode via the `unstable-webxr` attribute:


Feature | Chrome | Canary | Safari 12 | Firefox 65 | Edge | IE 11
--------------------------|--------|--------|-----------|------------|------|------
Fullscreen API³ | ✅ | ✅ | ✋ | ✅ | ✋ | ✋
WebXR Device API | 🚫 | 🚧 | 🚫 | 🚫 | 🚫 | 🚫
WebXR HitTest API | 🚫 | 🚧 | 🚫 | 🚫 | 🚫 | 🚫


_1: Resize Observer is optional. [See below](https://github.com/PolymerLabs/model-viewer/blob/master/POLYFILLS.md#regarding-resize-observer) for more details_

_2: Intersection Observer is optional. [See below](https://github.com/PolymerLabs/model-viewer/blob/master/POLYFILLS.md#regarding-intersection-observer) for more details_

_3: Fullscreen API is only needed when using unstable WebXR features. [See below](https://github.com/PolymerLabs/model-viewer/blob/master/POLYFILLS.md#regarding-fullscreen-api) for more details_

### Regarding IE 11
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ As new standards and APIs become available `<model-viewer>` will be improved
to take advantage of them. If possible, fallbacks and polyfills will be
supported to provide a seamless development experience.

[Remixable demo](https://model-viewer.glitch.me)[Documentation](https://googlewebcomponents.github.io/model-viewer/index.html)[Kanban](https://github.com/GoogleWebComponents/model-viewer/projects/1)[Fidelity test results](https://googlewebcomponents.github.io/model-viewer/test/fidelity/results-viewer.html)
[Demo](https://model-viewer.glitch.me)[Documentation](https://googlewebcomponents.github.io/model-viewer/index.html)[Kanban](https://github.com/GoogleWebComponents/model-viewer/projects/1)[Quality Tests](https://googlewebcomponents.github.io/model-viewer/test/fidelity/results-viewer.html)

![sample-render](examples/sample-render.png)

Expand Down
39 changes: 7 additions & 32 deletions examples/lighting-and-environment.html
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,8 @@ <h2>When both <span class="attribute">background-image</span> and <span class="a
<div class="content">
<div class="wrapper">
<div class="index">5</div>
<h2>Use <span class="attribute">environment-image</span> to set an
environtal reflection without changing the background</h2>
<h2>Use <span class="attribute">environment-image</span> to set
environmental lighting without changing the background</h2>
<example-snippet stamp-to="demo-container-5" highlight-as="html">
<template>
<model-viewer controls
Expand Down Expand Up @@ -178,11 +178,12 @@ <h2>Supports different <span class="attribute">background-image</span> and <span
<div class="content">
<div class="wrapper">
<div class="index">7</div>
<h2>Control environment reflection intensity with <span class="attribute">environment-intensity</span></h2>
<h2>Control environment lighting intensity with <span class="attribute">environment-intensity</span></h2>
<example-snippet stamp-to="demo-container-7" highlight-as="html">
<template>
<model-viewer controls
id="environment-intensity-demo"
environment-intensity="1"
background-color="#ff0077"
environment-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a forest"
Expand Down Expand Up @@ -218,9 +219,10 @@ <h2>Control stage lighting with <span class="attribute">stage-light-intensity</s
<model-viewer
id="stage-light-demo"
controls
stage-light-intensity="1"
background-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of an astronaut depicted within a forest"
src="assets/Astronaut.glb"></model-viewer>
src="assets/glTF-Sample-Models/2.0/Duck/glTF-Binary/Duck.glb"></model-viewer>
<script>
(() => {
const modelViewer = $('#stage-light-demo');
Expand Down Expand Up @@ -250,6 +252,7 @@ <h2>Control shadow visibility with <span class="attribute">shadow-intensity</spa
<template>
<model-viewer controls
id="shadow-intensity-demo"
shadow-intensity="0"
background-color="#ff0077"
environment-image="assets/whipple_creek_regional_park_04_1k.jpg"
alt="A 3D model of a reflective sphere depicted within a forest"
Expand All @@ -273,34 +276,6 @@ <h2>Control shadow visibility with <span class="attribute">shadow-intensity</spa
</div>
</div>

<!--
<div class="sample">
<div class="demo" id="demo-container-5"></div>
<div class="content">
<div class="wrapper">
<div class="index">5</div>
<h2>Cycling between <span class="attribute">background-image</span> and <span class="attribute">background-color</span></h2>
<example-snippet stamp-to="demo-container-5" highlight-as="html">
<template>
<model-viewer
id="toggle-image"
background-color="#ff0077"
src="assets/DamagedHelmet/DamagedHelmet.gltf"
alt="A 3D model of a damaged helmet depicted within changing environments"
controls auto-rotate></model-viewer>
<script>
const images = ['assets/whipple_creek_regional_park_04_1k.jpg', 'does-not-exist.png', ''];
let i = 0;
setInterval(() =>
$('#toggle-image').setAttribute('background-image', images[i++ % 3]), 2000);
</script>
</template>
</example-snippet>
</div>
</div>
</div>
-->

<div class="footer">
<ul>
<li class="attribution">
Expand Down
12 changes: 7 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -174,16 +174,18 @@ <h4>environment-image</h4>
</li>
<li>
<h4>environment-intensity</h4>
<p>Controls the intensity of the environmental reflection. There is
always a reflection from the environment, even when background-image
or environment-image are not set. Set this value to 0 to hide the
<p>Controls the intensity of environmental lighting. There is
almost always light reflected from the environment, even when
background-image or environment-image are not set. The one exception
is for models with unlit materials. Set this value to 0 to hide the
environment entirely. Defaults to 1.</p>
</li>
<li>
<h4>experimental-pmrem</h4>
<p>Enables an experimental lighting mode that is more physically
realistic, and emphasizes light from the environment over light from
the built-in scene lights.</p>
the built-in scene lights. Refer to <a href="https://wiki.jmonkeyengine.org/jme3/advanced/pbr_part3.html" target="_blank">this article</a>
for in-depth details related to this lighting mode.</p>
</li>
<li>
<h4>ios-src</h4>
Expand Down Expand Up @@ -231,7 +233,7 @@ <h3 class="grouping-title" style="margin-top: 40px;">EVENTS</h3>

<ul class="list-attribute">
<li>
<h4>environment-changed</h4>
<h4>environment-change</h4>
<p>Fired when the environment has changed. If the environment is
derived from background-image or environment-image, the image will
have loaded by the time this event fires.</p>
Expand Down
2 changes: 1 addition & 1 deletion src/features/environment.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const EnvironmentMixin = (ModelViewerElement) => {
[$applyEnvironmentMap](environmentMap) {
this[$currentEnvironmentMap] = environmentMap;
this[$scene].model.applyEnvironmentMap(this[$currentEnvironmentMap]);
this.dispatchEvent(new CustomEvent('environment-changed'));
this.dispatchEvent(new CustomEvent('environment-change'));

this[$updateLighting]();
this[$needsRender]();
Expand Down
8 changes: 4 additions & 4 deletions src/test/features/environment-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {
await timePasses();
const lightIntensity = scene.light.intensity;
element.experimentalPmrem = true;
await waitForEvent(element, 'environment-changed');
await waitForEvent(element, 'environment-change');
const newLightIntensity = scene.light.intensity;
expect(newLightIntensity).to.be.lessThan(lightIntensity);
});
Expand Down Expand Up @@ -389,7 +389,7 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {

suite('with an environment-image', () => {
setup(async () => {
const environmentChanged = waitForEvent(element, 'environment-changed');
const environmentChanged = waitForEvent(element, 'environment-change');
element.setAttribute('environment-image', ALT_BG_IMAGE_URL);
await environmentChanged;
});
Expand All @@ -401,7 +401,7 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {
suite('and environment-image subsequently removed', () => {
setup(async () => {
const environmentChanged =
waitForEvent(element, 'environment-changed');
waitForEvent(element, 'environment-change');
element.removeAttribute('environment-image');
await environmentChanged;
});
Expand All @@ -414,7 +414,7 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {
suite('and background-image subsequently removed', () => {
setup(async () => {
const environmentChanged =
waitForEvent(element, 'environment-changed');
waitForEvent(element, 'environment-change');
element.removeAttribute('background-image');
await environmentChanged;
});
Expand Down
2 changes: 1 addition & 1 deletion src/test/fidelity/artifact-creator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export class ArtifactCreator {
const environmentChanges = new Promise((resolve, reject) => {
const timeout = setTimeout(reject, 10000);

modelViewer.addEventListener('environment-changed', () => {
modelViewer.addEventListener('environment-change', () => {
clearTimeout(timeout);
resolve();
});
Expand Down

0 comments on commit ca0fc5c

Please sign in to comment.