Update WebGL docs and website.

allenymt · Feb 25, 2020 · 3fd9c49 · 3fd9c49
1 parent 69c0843
commit 3fd9c49
Show file tree

Hide file tree

Showing 49 changed files with 172 additions and 141 deletions.
diff --git a/docs/404.html b/docs/404.html
@@ -4,7 +4,7 @@
   <link href="//gmpg.org/xfn/11" rel="profile">
   <link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta name="generator" content="Hugo 0.50" />
+  <meta name="generator" content="Hugo 0.65.3" />
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/docs/categories/index.html b/docs/categories/index.html
@@ -4,7 +4,7 @@
   <link href="//gmpg.org/xfn/11" rel="profile">
   <link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta name="generator" content="Hugo 0.50" />
+  <meta name="generator" content="Hugo 0.65.3" />
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/docs/categories/index.xml b/docs/categories/index.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
     <title>Categories on Filament</title>

diff --git a/docs/documentation/index.html b/docs/documentation/index.html
@@ -4,7 +4,7 @@
   <link href="//gmpg.org/xfn/11" rel="profile">
   <link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta name="generator" content="Hugo 0.50" />
+  <meta name="generator" content="Hugo 0.65.3" />
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/docs/index.html b/docs/index.html
@@ -4,7 +4,7 @@
   <link href="//gmpg.org/xfn/11" rel="profile">
   <link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta name="generator" content="Hugo 0.50" />
+  <meta name="generator" content="Hugo 0.65.3" />
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/docs/index.xml b/docs/index.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
     <title>Filament</title>
@@ -26,7 +26,7 @@
       <pubDate>Tue, 30 Oct 2018 13:13:14 -0700</pubDate>
 
       <guid>https://google.github.io/filament/webgl/</guid>
-      <description> tutorials  Triangle Tutorial Redball Tutorial Suzanne Tutorial  demos  parquet suzanne helmet knotess  other documentation  JavaScript API reference WebGL Meetup Slides (2018)  </description>
+      <description>tutorials  Triangle Tutorial Redball Tutorial Suzanne Tutorial  demos  parquet suzanne helmet knotess  other documentation  JavaScript API reference WebGL Meetup Slides (2018)  </description>
     </item>
 
   </channel>

diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
 
@@ -8,24 +8,21 @@
   </url>
 
   <url>
-    <loc>https://google.github.io/filament/webgl/</loc>
+    <loc>https://google.github.io/filament/</loc>
     <lastmod>2018-10-30T13:13:14-07:00</lastmod>
   </url>
 
   <url>
-    <loc>https://google.github.io/filament/categories/</loc>
-    <priority>0</priority>
+    <loc>https://google.github.io/filament/webgl/</loc>
+    <lastmod>2018-10-30T13:13:14-07:00</lastmod>
   </url>
 
   <url>
-    <loc>https://google.github.io/filament/</loc>
-    <lastmod>2018-10-30T13:13:14-07:00</lastmod>
-    <priority>0</priority>
+    <loc>https://google.github.io/filament/categories/</loc>
   </url>
 
   <url>
     <loc>https://google.github.io/filament/tags/</loc>
-    <priority>0</priority>
   </url>
 
 </urlset>
diff --git a/docs/tags/index.html b/docs/tags/index.html
@@ -4,7 +4,7 @@
   <link href="//gmpg.org/xfn/11" rel="profile">
   <link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta name="generator" content="Hugo 0.50" />
+  <meta name="generator" content="Hugo 0.65.3" />
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/docs/tags/index.xml b/docs/tags/index.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
     <title>Tags on Filament</title>

diff --git a/docs/webgl/helmet.gltf → docs/webgl/FlightHelmet.gltf b/docs/webgl/helmet.gltf → docs/webgl/FlightHelmet.gltf
diff --git a/docs/webgl/filament.js b/docs/webgl/filament.js
diff --git a/docs/webgl/filament.wasm b/docs/webgl/filament.wasm
diff --git a/docs/webgl/floor_basecolor.jpg b/docs/webgl/floor_basecolor.jpg
diff --git a/docs/webgl/floor_basecolor.png b/docs/webgl/floor_basecolor.png
diff --git a/docs/webgl/helmet.filamat b/docs/webgl/helmet.filamat
diff --git a/docs/webgl/helmet.filamesh b/docs/webgl/helmet.filamesh
diff --git a/docs/webgl/helmet.html b/docs/webgl/helmet.html
@@ -10,7 +10,7 @@
 body       { margin: 0; overflow: hidden; }
 #container { position: relative; height: 100%; }
 canvas     { position: absolute; width: 100%; height: 100%; }
-#messages  { position: absolute; width: 100%; height: 100%; padding-left: 10px; }
+#messages  { position: absolute; width: 100%; height: 100%; padding-left: 10px; color:white; }
 </style>
 </head>
 <body>
@@ -23,15 +23,16 @@
 <script src="https://unpkg.com/gltumble"></script>
 <script>
 
-const env = 'syferfontein_18d_clear_2k';
+const env = 'venetian_crossroads_2k';
 const ibl_url = `${env}/${env}_ibl.ktx`;
 const sky_url = `${env}/${env}_skybox.ktx`;
-const mesh_url = 'helmet.gltf';
+const mesh_url = 'FlightHelmet.gltf';
 
 Filament.init([mesh_url, ibl_url, sky_url], () => {
     window.gltfio = Filament.gltfio;
     window.Fov = Filament.Camera$Fov;
     window.LightType = Filament.LightManager$Type;
+    window.IndirectLight = Filament.IndirectLight;
     window.app = new App(document.getElementsByTagName('canvas')[0]);
 });
 
@@ -42,48 +43,58 @@
         const scene = this.scene = engine.createScene();
         this.trackball = new Trackball(canvas, {startSpin: 0.035});
 
+        const indirectLight = this.ibl = engine.createIblFromKtx(ibl_url);
+        this.scene.setIndirectLight(indirectLight);
+
+        const iblDirection = IndirectLight.getDirectionEstimate(indirectLight.shfloats);
+        const iblColor = IndirectLight.getColorEstimate(indirectLight.shfloats, iblDirection);
+
+        indirectLight.setIntensity(50000);
+
+        const skybox = engine.createSkyFromKtx(sky_url);
+        this.scene.setSkybox(skybox);
+
         const sunlight = Filament.EntityManager.get().create();
         Filament.LightManager.Builder(LightType.SUN)
-            .color([0.98, 0.92, 0.89])
-            .intensity(100000.0)
-            .direction([0.6, -1.0, -0.8])
+            .color(iblColor.slice(0, 3))
+            .intensity(150000)
+            .direction(iblDirection)
             .sunAngularRadius(1.9)
+            .castShadows(true)
             .sunHaloSize(10.0)
             .sunHaloFalloff(80.0)
             .build(engine, sunlight);
         this.scene.addEntity(sunlight);
 
-        const indirectLight = this.ibl = engine.createIblFromKtx(ibl_url);
-        this.scene.setIndirectLight(indirectLight);
-        indirectLight.setIntensity(100000);
-
-        const skybox = engine.createSkyFromKtx(sky_url);
-        this.scene.setSkybox(skybox);
-
         const loader = engine.createAssetLoader();
         const asset = this.asset = loader.createAssetFromJson(mesh_url);
 
         const messages = document.getElementById('messages');
 
-        // Crudely indicate progress by printing the URL of each resource as it is loaded.
-        // Note that we wait 1 ms after the last asset has downloaded, but before finalization.
-        // This gives the browser time to display the latest status.
+        // Crudely indicate progress by printing the URI of each resource as it is loaded.
         const onFetched = (uri) => messages.innerText += `Downloaded ${uri}\n`;
-        const onDone = (finalize) => {
-            messages.innerText += 'Finalizing...\n'
-            setTimeout(() => {
-                finalize();
-                loader.delete();
-                const entities = asset.getEntities();
-                scene.addEntities(entities);
-                messages.remove();
-            }, 1);
+        const onDone = () => {
+            // Destroy the asset loader.
+            loader.delete();
+
+            // Enable shadows on every renderable.
+            const entities = asset.getEntities();
+            const rm = engine.getRenderableManager();
+            for (let i = 0; i < entities.size(); i++) {
+                const instance = rm.getInstance(entities.get(i));
+                rm.setCastShadows(instance, true);
+                instance.delete();
+            }
+
+            // Hide the HUD.
+            messages.remove();
         };
         asset.loadResources(onDone, onFetched);
 
         this.swapChain = engine.createSwapChain();
         this.renderer = engine.createRenderer();
         this.camera = engine.createCamera();
+        this.camera.setExposure(32, 1/125.0, 100);
         this.view = engine.createView();
         this.view.setCamera(this.camera);
         this.view.setScene(this.scene);
@@ -95,10 +106,23 @@
     }
 
     render() {
+        // Spin the model according to the trackball controller.
         const tcm = this.engine.getTransformManager();
         const inst = tcm.getInstance(this.asset.getRoot());
         tcm.setTransform(inst, this.trackball.getMatrix());
         inst.delete();
+
+        // Add renderable entities to the scene as they become ready.
+        let entity;
+        const popRenderable = () => {
+            entity = this.asset.popRenderable();
+            return entity.getId() != 0;
+        }
+        while (popRenderable()) {
+            this.scene.addEntity(entity);
+        }
+
+        // Render the scene and request the next animation frame.
         this.renderer.render(this.swapChain, this.view);
         window.requestAnimationFrame(this.render);
     }

diff --git a/docs/webgl/index.html b/docs/webgl/index.html
@@ -4,7 +4,7 @@
   <link href="//gmpg.org/xfn/11" rel="profile">
   <link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta name="generator" content="Hugo 0.50" />
+  <meta name="generator" content="Hugo 0.65.3" />
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -64,29 +64,22 @@
     <main class="content container">
     <div class="post">
   <h1>Web Docs / Demos</h1>
-
-
-<h2 id="tutorials">tutorials</h2>
-
+  <h2 id="tutorials">tutorials</h2>
 <ol>
-<li><a href="https://google.github.io/filament/webgl/tutorial_triangle.html">Triangle Tutorial</a></li>
-<li><a href="https://google.github.io/filament/webgl/tutorial_redball.html">Redball Tutorial</a></li>
-<li><a href="https://google.github.io/filament/webgl/tutorial_suzanne.html">Suzanne Tutorial</a></li>
+<li><a href="tutorial_triangle.html">Triangle Tutorial</a></li>
+<li><a href="tutorial_redball.html">Redball Tutorial</a></li>
+<li><a href="tutorial_suzanne.html">Suzanne Tutorial</a></li>
 </ol>
-
 <h2 id="demos">demos</h2>
-
 <ul>
-<li><a href="https://google.github.io/filament/webgl/parquet.html">parquet</a></li>
-<li><a href="https://google.github.io/filament/webgl/suzanne.html">suzanne</a></li>
-<li><a href="https://google.github.io/filament/webgl/helmet.html">helmet</a></li>
+<li><a href="parquet.html">parquet</a></li>
+<li><a href="suzanne.html">suzanne</a></li>
+<li><a href="helmet.html">helmet</a></li>
 <li><a href="https://prideout.net/knotess/">knotess</a></li>
 </ul>
-
 <h2 id="other-documentation">other documentation</h2>
-
 <ul>
-<li><a href="https://google.github.io/filament/webgl/reference.html">JavaScript API reference</a></li>
+<li><a href="reference.html">JavaScript API reference</a></li>
 <li><a href="https://prideout.net/slides/filawasm">WebGL Meetup Slides</a> (2018)</li>
 </ul>
 

diff --git a/docs/webgl/normal_etc.ktx b/docs/webgl/normal_etc.ktx
diff --git a/docs/webgl/parquet.filamat b/docs/webgl/parquet.filamat
diff --git a/docs/webgl/parquet.html b/docs/webgl/parquet.html
@@ -19,13 +19,11 @@
 const iblfile = 'venetian_crossroads_2k/venetian_crossroads_2k_ibl.ktx';
 const skyfile = 'venetian_crossroads_2k/venetian_crossroads_2k_skybox.ktx';
 
-let ready = true;
-
 Filament.init([
     'parquet.filamat',
     'shader_ball.filamesh',
     'floor_ao_roughness_metallic.png',
-    'floor_basecolor.png',
+    'floor_basecolor.jpg',
     'floor_normal.png',
     iblfile, skyfile
 ], () => {
@@ -75,7 +73,7 @@
             Filament.WrapMode.REPEAT);
 
         const ao = engine.createTextureFromPng('floor_ao_roughness_metallic.png');
-        const basecolor = engine.createTextureFromPng('floor_basecolor.png', {'srgb': true});
+        const basecolor = engine.createTextureFromJpeg('floor_basecolor.jpg', {'srgb': true});
         const normal = engine.createTextureFromPng('floor_normal.png');
         matinstance.setTextureParameter('aoRoughnessMetallic', ao, sampler)
         matinstance.setTextureParameter('baseColor', basecolor, sampler)

diff --git a/docs/webgl/pillars_2k/pillars_2k_ibl.ktx b/docs/webgl/pillars_2k/pillars_2k_ibl.ktx
diff --git a/docs/webgl/pillars_2k/pillars_2k_ibl_etc.ktx b/docs/webgl/pillars_2k/pillars_2k_ibl_etc.ktx
diff --git a/docs/webgl/pillars_2k/pillars_2k_ibl_s3tc.ktx b/docs/webgl/pillars_2k/pillars_2k_ibl_s3tc.ktx
diff --git a/docs/webgl/pillars_2k/pillars_2k_skybox.ktx b/docs/webgl/pillars_2k/pillars_2k_skybox.ktx
diff --git a/docs/webgl/pillars_2k/pillars_2k_skybox_tiny.ktx b/docs/webgl/pillars_2k/pillars_2k_skybox_tiny.ktx
diff --git a/docs/webgl/plastic.filamat b/docs/webgl/plastic.filamat