Update live JS demos and tutorials.

At some point I should probably change the tutorials to use a versioned
NPM package rather than a checked-in prebuilt Filament WASM file.

Fixes #2686.

RELEASE_NOTES.md

@@ -5,6 +5,7 @@ A new header is inserted each time a *tag* is created.
 
 ## Next release
 
+- Fixed regression in JavaScript IcoSphere that caused tutorial to fail.
 - gltf_viewer now supports viewing with glTF cameras.
 - gltfio now supports importing glTF cameras.
 - gltfio now supports simple instancing of entire assets.

docs/webgl/helmet.html

@@ -4,7 +4,7 @@
 <title>FlightHelmet</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
-<link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
+<link href="favicon.png" rel="icon" type="image/x-icon" />
 <style>
 html, body { height: 100%; }
 body       { margin: 0; overflow: hidden; }
@@ -80,8 +80,8 @@ class App {
             // 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));
+            for (const entity of entities) {
+                const instance = rm.getInstance(entity);
                 rm.setCastShadows(instance, true);
                 instance.delete();
             }

docs/webgl/parquet.html

@@ -4,7 +4,7 @@
 <title>Filament Parquet</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
-<link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
+<link href="favicon.png" rel="icon" type="image/x-icon" />
 <style>
 body { margin: 0; overflow: hidden; }
 canvas { touch-action: none; width: 100%; height: 100%; }

docs/webgl/reference.html

@@ -505,12 +505,19 @@
 <li><em>overrides</em> Dictionary with one or more of the following properties: clearColor, clear, discard.</li>
 </ul>
 </li>
+<li><strong>engine.setDepthOfFieldOptions(overrides)</strong>
+<ul>
+<li><em>overrides</em> Dictionary with one or more of the following properties: focusDistance, blurScale, maxApertureDiameter, enabled.</li>
+</ul>
+</li>
 </ul>
 </div>
 <div class='classdoc'>
 <h2>class <a id='Entity' href='#Entity'>Entity</a></h2>
 <p>Handle to an object consisting of a set of components.</p>
-<p>To create an entity with no components, use <a href="#EntityManager">EntityManager</a>.</p>
+<p>To create an entity with no components, use <a href="#EntityManager">EntityManager</a>.
+TODO: It would be better to expose these as JS numbers rather than as JS objects.
+This would also be more consistent with Filament's Java bindings.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='EntityManager' href='#EntityManager'>EntityManager</a></h2>
@@ -621,7 +628,7 @@ wrapper rather than interacting with <code>KtxBundle</code> directly.</p>
 <h2>class <a id='KtxInfo' href='#KtxInfo'>KtxInfo</a></h2>
 <p>Property accessor for KTX header.</p>
 <ul>
-<li><strong>KtxInfo.createAssetFroBinary(buffer)</strong>
+<li><strong>KtxInfo.createAssetFromBinary(buffer)</strong>
 <ul>
 <li><em>buffer</em> asset string, or Uint8Array, or <a href="#Buffer">Buffer</a></li>
 <li><em>returns</em> an instance of <a href="#FilamentAsset">FilamentAsset</a></li>
@@ -633,6 +640,12 @@ wrapper rather than interacting with <code>KtxBundle</code> directly.</p>
 <li><em>returns</em> an instance of <a href="#FilamentAsset">FilamentAsset</a></li>
 </ul>
 </li>
+<li><strong>KtxInfo.createInstancedAsset(buffer)</strong>
+<ul>
+<li><em>buffer</em> asset string, or Uint8Array, or <a href="#Buffer">Buffer</a></li>
+<li><em>returns</em> an instance of <a href="#FilamentAsset">FilamentAsset</a></li>
+</ul>
+</li>
 </ul>
 <p>For example, <code>ktxbundle.info().pixelWidth</code>. See the
 <a href="https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/">KTX spec</a> for the list of

docs/webgl/suzanne.html

@@ -4,7 +4,7 @@
 <title>Filament Suzanne</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
-<link href="https://google.github.io/filament/favicon.png" rel="icon" type="image/x-icon" />
+<link href="favicon.png" rel="icon" type="image/x-icon" />
 <style>
 body { margin: 0; overflow: hidden; }
 canvas { touch-action: none; width: 100%; height: 100%; }

web/docs/build.py

@@ -4,7 +4,7 @@
 # correct packages so that you do not interfere with other Python projects in your system.
 # After installing pipenv, run the following commands from the current folder:
 #
-#  pipenv --python 3.7
+#  pipenv --python /usr/local/opt/python@3.8/bin/python3
 #  pipenv shell
 #  pipenv install
 #  ./build.py
@@ -517,13 +517,19 @@ if __name__ == "__main__":
     build_api_reference()
 
     # Copy resources from "samples" to "docs"
-    copy_built_file('web/samples/suzanne.filamesh')
+    copy_built_file('web/samples/helmet.html')
+
+    copy_built_file('web/samples/parquet.html')
     copy_built_file('web/samples/parquet.filamat')
+
+    copy_built_file('web/samples/suzanne.html')
+    copy_built_file('web/samples/suzanne.filamesh')
     copy_built_file('web/samples/metallic*.ktx')
     copy_built_file('web/samples/normal*.ktx')
     copy_built_file('web/samples/roughness*.ktx')
     copy_built_file('web/samples/ao*.ktx')
     copy_built_file('web/samples/albedo*.ktx')
+
     copy_built_file('web/samples/pillars_2k/pillars_2k_*.ktx', 'pillars_2k')
     copy_built_file('web/samples/venetian_crossroads_2k/venetian_crossroads*.ktx', 'venetian_crossroads_2k')
 

web/filament-js/utilities.js

@@ -141,7 +141,7 @@ Filament.IcoSphere = function(nsubdivs) {
 
     // Allocate room for normals in the heap, and copy position data into it (yay for unit spheres)
     const normals = Filament._malloc(this.vertices.length * this.vertices.BYTES_PER_ELEMENT);
-    Module.HEAPU8.set(new Uint8Array(this.vertices.buffer), normals);
+    Filament.HEAPU8.set(new Uint8Array(this.vertices.buffer), normals);
 
     // Perform computations, then free up the normals.
     const sob = new Filament.SurfaceOrientation$Builder();
@@ -157,7 +157,7 @@ Filament.IcoSphere = function(nsubdivs) {
     orientation.getQuats(quatsBuffer, nverts, Filament.VertexBuffer$AttributeType.SHORT4);
 
     // Create a JavaScript typed array and copy the quat data into it.
-    const tangentsMemory = Module.HEAPU8.subarray(quatsBuffer, quatsBuffer + quatsBufferSize).slice().buffer;
+    const tangentsMemory = Filament.HEAPU8.subarray(quatsBuffer, quatsBuffer + quatsBufferSize).slice().buffer;
     Filament._free(quatsBuffer);
     this.tangents = new Int16Array(tangentsMemory);