diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..6b9bbcc --- /dev/null +++ b/.gitattributes @@ -0,0 +1,4 @@ +*.usdz filter=lfs diff=lfs merge=lfs -text +*.glb filter=lfs diff=lfs merge=lfs -text +*.hdr filter=lfs diff=lfs merge=lfs -text +*.jpg filter=lfs diff=lfs merge=lfs -text diff --git a/autoplay-loop.html b/autoplay-loop.html new file mode 100644 index 0000000..cc1d6e3 --- /dev/null +++ b/autoplay-loop.html @@ -0,0 +1,36 @@ + + + + + + + Model autoplay test + + + +

Model: Autoplay and loop test

+ +
+

+ If a model contains an animation track, it will be available to play once + the model has loaded. autoplay will trigger the playback + automatically, and loop will loop the content, irrespective + of whether the playback was started via the JavaScript + play() or the attribute. +

+ + 
+<model autoplay loop alt="A model of a teapot with a hidden creature">
+  <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
+  <source src="./teapot.glb" type="model/gltf-binary" />
+</model>
+
+
+ + + + An image of a model of a teapot with a creature inside + + + diff --git a/autorotate.html b/autorotate.html new file mode 100644 index 0000000..05be886 --- /dev/null +++ b/autorotate.html @@ -0,0 +1,71 @@ + + + + + + + Model auto-rotate + + + +

Model: auto-rotate test

+
+

+ A model's DOMMatrixReadOnly entityTransform can be set to + display a certain side, or to automatically animate the content. +

+ +

HTML

+ 
+<model alt="A model of a teapot">
+    <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
+    <source src="./teapot.glb"  type="model/gltf-binary" />
+</model>
+
+

JavaScript:

+ 
+let initialTransform;
+const model = document.querySelector('model');
+await model.ready;
+initialTransform = model.entityTransform.translate(0,0,-0.05);
+requestAnimationFrame(update);
+
+function update() {
+    try {
+        const angleY = performance.now()/10;
+        model.entityTransform = initialTransform.rotate(0, angleY,0);
+    } catch(error) {
+        console.warn("failed to set transform", error);
+    }
+    requestAnimationFrame(update);
+}
+
+ +
+ + + + + An image of a model of a teapot + + + + diff --git a/background.html b/background.html new file mode 100644 index 0000000..0ec63fa --- /dev/null +++ b/background.html @@ -0,0 +1,53 @@ + + + + + + + Model: Background color test + + + + +

Model: Background color test

+

+ Set the background with CSS. Note that because the model exists in a plane + conceptually behind the page, it is not recommended to support a + transparent background. +

+
+

HTML

+ 
+<model alt="A model of a teapot">
+  <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
+  <source src="./teapot.glb" type="model/gltf-binary" />
+</model>
+
+

CSS

+ 
+model {
+  background-color:blue;
+}
+
+ + + + + An image of a model of a teapot on a blue background + + + + diff --git a/basic-blob-url.html b/basic-blob-url.html new file mode 100644 index 0000000..6a37468 --- /dev/null +++ b/basic-blob-url.html @@ -0,0 +1,41 @@ + + + + + + + Model: basic Blob URL test + + + +

Model: Basic Blob URL test overriding type

+
+ +

HTML

+ 
+<model alt="A model of a teapot" data-src="./teapot.usdz" data-type="model/vnd.usdz+zip">
+</model>
+
+

JavaScript

+
+const model = document.querySelector('model');
+const {src, type} = model.dataset;
+const bytes = await (await fetch(src)).bytes();
+const srcString = URL.createObjectURL(new Blob([bytes], {type}));
+model.setAttribute('src', srcString);
+
+ + + An image of a model of a teapot + + + + + + diff --git a/basic.html b/basic.html new file mode 100644 index 0000000..0f10ed0 --- /dev/null +++ b/basic.html @@ -0,0 +1,27 @@ + + + + + + + Model: basic test + + + +

Model: Basic test

+
+ 
+  <model alt="A model of a teapot">
+  <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
+  <source src="./teapot.glb" type="model/gltf-binary" />
+  </model>
+
+ + + + + An image of a model of a teapot + + + diff --git a/boundingbox.html b/boundingbox.html new file mode 100644 index 0000000..8c06a3b --- /dev/null +++ b/boundingbox.html @@ -0,0 +1,43 @@ + + + + + + + Model: Bounding-box information + + + +

Model: Bounding-box information

+
+

+ after model.ready promise is resolved, a model can report its + DOMPoint boundingBoxExtents and + DOMPoint boundingBoxCenter. +

+ + + + + An image of a model of a teapot + +
+

Report:

+
+ + + + diff --git a/currenttime.html b/currenttime.html new file mode 100644 index 0000000..8fc31e8 --- /dev/null +++ b/currenttime.html @@ -0,0 +1,39 @@ + + + + + + + Model: currentTime test + + + +

Model: currentTime test

+
+

+ When a model has an animation, its currentTime attribute can + be read and written to update the animation's progress. +

+

JavaScript

+ 
model.currentTime = 2.5;
+ + + + + An image of a model of a teapot with a creature inside + +
+ Current time: + + + + + + diff --git a/ibl.html b/ibl.html new file mode 100644 index 0000000..49ec9c4 --- /dev/null +++ b/ibl.html @@ -0,0 +1,56 @@ + + + + + + + Model: IBL test + + + +

Model: IBL test

+
+

+ Use of the environmentmap attribute to set a custom image-based light (IBL) resource. + Note that while the resource may be an image in any format, the dynamic range requirements for an IBL + mean that it is strongly recommended to use a raw, high-dynamic range (HDR) format like + the Radiance RGBE .hdr format, or the OpenEXR .exr format. Resources are assumed + to be presented in the equirectangular projection. +

+ 
+<model environmentmap="night.hdr" alt="a teapot in a dark environment">
+  <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
+  <source src="./teapot.glb" type="model/gltf-binary" />
+  <img src="./teapot-fallback-ibl.jpg" alt="An image of a model of a teapot lit by a dark environment" >
+</model>
+
+
+

Result

+ + + + + An image of a model of a teapot lit by a dark environment + + + diff --git a/index.html b/index.html index 2c7dd21..213dfdd 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,32 @@ - + - - - Spec proposal - - - - -
-

- This specification does neat stuff. -

-
-
-

- This is an unofficial proposal. -

-
+ + + + + Model samples + + + -
-

Introduction

-

- See ReSpec's user guide - for how toget started! -

-
- - +

List of model samples:

+ + + + + + \ No newline at end of file diff --git a/jsorbit.html b/jsorbit.html new file mode 100644 index 0000000..65f046e --- /dev/null +++ b/jsorbit.html @@ -0,0 +1,110 @@ + + + + + + + Model: JS-Orbit test + + + +

Model: JS-Orbit test

+
+

+ A custom JavaScript-based demonstration of a behavior similar to the + expectation for stagemode="orbit" provided by the UA. +

+

Result

+ + + + + An image of a model of a teapot + +
+ + + + diff --git a/night.hdr b/night.hdr new file mode 100644 index 0000000..8336e6b --- /dev/null +++ b/night.hdr @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:898c60fd1c3e93cb922c541f327c7a7847f52e1b2c37c21e0747c60348f5546f +size 5940838 diff --git a/orbit.html b/orbit.html new file mode 100644 index 0000000..203237d --- /dev/null +++ b/orbit.html @@ -0,0 +1,34 @@ + + + + + + + Model: Orbit test + + + +

Model: Orbit test

+
+

+ The application of the automatic + stagemode="orbit" interaction, with the expectation that it + is broadly similar to the behavior presented in + JavaScript orbit implementation. +

+ + 
+<model stagemode="orbit" alt="A model of a teapot">
+  <source src="./teapot.usdz" type="model/vnd.usdz+zip" />
+  <source src="./teapot.glb" type="model/gltf-binary" />
+  <img src="./teapot-fallback-black.jpg" alt="An image of a model of a teapot" >
+</model>
+

Result

+ + + + + An image of a model of a teapot + + + diff --git a/playbackrate.html b/playbackrate.html new file mode 100644 index 0000000..5717c64 --- /dev/null +++ b/playbackrate.html @@ -0,0 +1,43 @@ + + + + + + + Model: playbackRate test + + + +

Model: playbackRate test

+
+

+ A model's playbackRate may be altered to change the speed of + the animation. While playing, the animation will advance according to the + rate specified. +

+ +

JavaScript

+ 
model.playbackRate = 2; //double the default rate
+ + + + + An image of a model of a teapot with a creature inside + +
+ Playback rate: + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..07587e2 --- /dev/null +++ b/style.css @@ -0,0 +1,32 @@ +html { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + padding:20px; + max-width:1024px; +} +a { + display:inline-block; + background-color: #d3d3d3; + padding:20px; + border-radius:20px; + margin:5px; + text-decoration: none;; +} + +model { + width: 400px; + display: block; + height: 400px; + background-color: black; + } + +model img { + width:400px; + +} + + + pre { + background-color: rgb(213, 213, 213); + display: inline-block; + padding: 10px; +} \ No newline at end of file diff --git a/teapot-fallback-animated.jpg b/teapot-fallback-animated.jpg new file mode 100644 index 0000000..a32ad53 --- /dev/null +++ b/teapot-fallback-animated.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6c99dd1b777913b9432ccc8d9764c6b020b54f6c5bfdc245f0c0e0e8e82c4dc9 +size 69213 diff --git a/teapot-fallback-black.jpg b/teapot-fallback-black.jpg new file mode 100644 index 0000000..5643d13 --- /dev/null +++ b/teapot-fallback-black.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:56df20f889dd2157d0e2b0b619557a68e2b4e9baf74c8c51119726a33e5036a6 +size 106288 diff --git a/teapot-fallback-blue.jpg b/teapot-fallback-blue.jpg new file mode 100644 index 0000000..bd735bb --- /dev/null +++ b/teapot-fallback-blue.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:21b59780d60971e8baade9614037734921be4a0f7ade76257f7e117cc14ca31f +size 356467 diff --git a/teapot-fallback-ibl.jpg b/teapot-fallback-ibl.jpg new file mode 100644 index 0000000..acaa217 --- /dev/null +++ b/teapot-fallback-ibl.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aa8fabee1da291b03a1bfe505dada3c9b6134984e89e4e6c8ab53c9a23d722d0 +size 266397 diff --git a/teapot.glb b/teapot.glb new file mode 100644 index 0000000..1e48888 --- /dev/null +++ b/teapot.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a619494b725e6befaf6498f0aeb9fbd49afb6b951300c4656331e4612a62987 +size 351772 diff --git a/teapot.usdz b/teapot.usdz new file mode 100644 index 0000000..c551f3c --- /dev/null +++ b/teapot.usdz @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d17b68e8801a517bc4d58416d94c83a83a4d8531218fe757165038affc9abe15 +size 872426