Texture and Texture View creation

README.md

@@ -31,7 +31,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.google.android.filament:filament-android:1.59.5'
+    implementation 'com.google.android.filament:filament-android:1.59.3'
 }
 ```
 
@@ -51,7 +51,7 @@ Here are all the libraries available in the group `com.google.android.filament`:
 iOS projects can use CocoaPods to install the latest release:
 
 ```shell
-pod 'Filament', '~> 1.59.5'
+pod 'Filament', '~> 1.59.3'
 ```
 
 ## Documentation

RELEASE_NOTES.md

@@ -7,9 +7,6 @@ A new header is inserted each time a *tag* is created.
 Instead, if you are authoring a PR for the main branch, add your release note to
 [NEW_RELEASE_NOTES.md](./NEW_RELEASE_NOTES.md).
 
-## v1.59.5
-
-
 ## v1.59.4
 
 

android/filament-android/src/main/java/com/google/android/filament/View.java

@@ -1980,7 +1980,7 @@ public class View {
         }
 
         /**
-         * reconstruction filter width typically between 1 (sharper) and 2 (smoother)
+         * reconstruction filter width typically between 0.2 (sharper, aliased) and 1.5 (smoother)
          */
         public float filterWidth = 1.0f;
         /**

android/gradle.properties

@@ -1,5 +1,5 @@
 GROUP=com.google.android.filament
-VERSION_NAME=1.59.5
+VERSION_NAME=1.59.3
 
 POM_DESCRIPTION=Real-time physically based rendering engine for Android.
 

docs/Materials.html

@@ -166,7 +166,7 @@ This document is part of the <a href="https://github.com/google/filament">Filame
 </p><ul>
 <li class="minus"><a href="https://github.com/romainguy">Romain Guy</a>, <a href="https://twitter.com/romainguy">@romainguy</a>
 </li>
-<li class="minus"><a href="https://github.com/pixelflinger">Mathias Agopian</a>, <a href="https://bsky.app/profile/pixelflinger.bsky.social">@pixelflinger</a></li></ul>
+<li class="minus"><a href="https://github.com/pixelflinger">Mathias Agopian</a>, <a href="https://twitter.com/darthmoosious">@darthmoosious</a></li></ul>
 
 <p></p>
 <a class="target" name="overview">&nbsp;</a><a class="target" name="overview">&nbsp;</a><a class="target" name="toc2">&nbsp;</a><h1>Overview</h1>
@@ -259,27 +259,26 @@ in <a href="#table_standardproperties">table&nbsp;1</a>.
 </p><div class="table">
 <table class="table"><tbody><tr><th style="text-align:right"> Property </th><th style="text-align:left"> Definition </th></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">baseColor</strong> </td><td style="text-align:left"> Diffuse albedo for non-metallic surfaces, and specular color for metallic surfaces </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">roughness</strong> </td><td style="text-align:left"> Perceived smoothness (1.0) or roughness (0.0) of a surface. Smooth surfaces exhibit sharp reflections </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">metallic</strong> </td><td style="text-align:left"> Whether a surface appears to be dielectric (0.0) or conductor (1.0). Often used as a binary value (0 or 1) </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">roughness</strong> </td><td style="text-align:left"> Perceived smoothness (1.0) or roughness (0.0) of a surface. Smooth surfaces exhibit sharp reflections </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">reflectance</strong> </td><td style="text-align:left"> Fresnel reflectance at normal incidence for dielectric surfaces. This directly controls the strength of the reflections </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">ambientOcclusion</strong> </td><td style="text-align:left"> Defines how much of the ambient light is accessible to a surface point. It is a per-pixel shadowing factor between 0.0 and 1.0 </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">clearCoat</strong> </td><td style="text-align:left"> Strength of the clear coat layer </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">clearCoatRoughness</strong> </td><td style="text-align:left"> Perceived smoothness or roughness of the clear coat layer </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">clearCoatNormal</strong> </td><td style="text-align:left"> A detail normal used to perturb the clear coat layer using <em class="underscore">bump mapping</em> (<em class="underscore">normal mapping</em>) </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">anisotropy</strong> </td><td style="text-align:left"> Amount of anisotropy in either the tangent or bitangent direction </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">anisotropyDirection</strong> </td><td style="text-align:left"> Local surface direction in tangent space </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">thickness</strong> </td><td style="text-align:left"> Thickness of the solid volume of refractive objects </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">sheenColor</strong> </td><td style="text-align:left"> Strength of the sheen layer </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">sheenRoughness</strong> </td><td style="text-align:left"> Perceived smoothness or roughness of the sheen layer </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">emissive</strong> </td><td style="text-align:left"> Additional diffuse albedo to simulate emissive surfaces (such as neons, etc.) This property is mostly useful in an HDR pipeline with a bloom pass </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">clearCoat</strong> </td><td style="text-align:left"> Strength of the clear coat layer </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">clearCoatRoughness</strong> </td><td style="text-align:left"> Perceived smoothness or roughness of the clear coat layer </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">anisotropy</strong> </td><td style="text-align:left"> Amount of anisotropy in either the tangent or bitangent direction </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">anisotropyDirection</strong> </td><td style="text-align:left"> Local surface direction in tangent space </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">ambientOcclusion</strong> </td><td style="text-align:left"> Defines how much of the ambient light is accessible to a surface point. It is a per-pixel shadowing factor between 0.0 and 1.0 </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">normal</strong> </td><td style="text-align:left"> A detail normal used to perturb the surface using <em class="underscore">bump mapping</em> (<em class="underscore">normal mapping</em>) </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">postLightingColor</strong> </td><td style="text-align:left"> Additional color that can be blended with the result of the lighting computations. See <code>postLightingBlending</code> </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">absorption</strong> </td><td style="text-align:left"> Absorption factor for refractive objects </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">transmission</strong> </td><td style="text-align:left"> Defines how much of the diffuse light of a dielectric is transmitted through the object, in other words this defines how transparent an object is </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">ior</strong> </td><td style="text-align:left"> Index of refraction, either for refractive objects or as an alternative to reflectance </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">microThickness</strong> </td><td style="text-align:left"> Thickness of the thin layer of refractive objects </td></tr>
 <tr><td style="text-align:right"> <strong class="asterisk">bentNormal</strong> </td><td style="text-align:left"> A normal pointing in the average unoccluded direction. Can be used to improve indirect lighting quality </td></tr>
-<tr><td style="text-align:right"> <strong class="asterisk">shadowStrength</strong> </td><td style="text-align:left"> Strength factor between 0 and 1 for all shadows received by this material </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">clearCoatNormal</strong> </td><td style="text-align:left"> A detail normal used to perturb the clear coat layer using <em class="underscore">bump mapping</em> (<em class="underscore">normal mapping</em>) </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">emissive</strong> </td><td style="text-align:left"> Additional diffuse albedo to simulate emissive surfaces (such as neons, etc.) This property is mostly useful in an HDR pipeline with a bloom pass </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">postLightingColor</strong> </td><td style="text-align:left"> Additional color that can be blended with the result of the lighting computations. See <code>postLightingBlending</code> </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">ior</strong> </td><td style="text-align:left"> Index of refraction, either for refractive objects or as an alternative to reflectance </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">transmission</strong> </td><td style="text-align:left"> Defines how much of the diffuse light of a dielectric is transmitted through the object, in other words this defines how transparent an object is </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">absorption</strong> </td><td style="text-align:left"> Absorption factor for refractive objects </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">microThickness</strong> </td><td style="text-align:left"> Thickness of the thin layer of refractive objects </td></tr>
+<tr><td style="text-align:right"> <strong class="asterisk">thickness</strong> </td><td style="text-align:left"> Thickness of the solid volume of refractive objects </td></tr>
 </tbody></table><center><div class="tablecaption"><a class="target" name="table_standardproperties">&nbsp;</a><b style="font-style:normal;">Table&nbsp;1:</b> Properties of the standard model</div></center></div>
 
 <p></p><p>
@@ -1487,13 +1486,10 @@ non-shader data.
 </p><dl><dt>Type</dt><dd><p>     array of parameter objects
 
 </p></dd><dt>Value</dt><dd><p>      Each entry is an object with the properties <code>name</code> and <code>type</code>, both of <code>string</code> type. The
-      name must be a valid GLSL identifier. Entries have an optional <code>precision</code>, which can be
+      name must be a valid GLSL identifier. Entries also have an optional <code>precision</code>, which can be
       one of <code>default</code> (best precision for the platform, typically <code>high</code> on desktop, <code>medium</code> on
       mobile), <code>low</code>, <code>medium</code>, <code>high</code>. The type must be one of the types described in
-      <a href="#table_materialparamstypes">table&nbsp;14</a>. For Android external textures, entries also have an optional 
-      transformName parameter to specify the name of the material parameter that will be 
-      used to expose the transform matrix associated with the external sampler. In iOS and Vulkan,
-      this will always be identity. 
+      <a href="#table_materialparamstypes">table&nbsp;14</a>.
 
 </p></dd></dl><div class="table">
 <table class="table"><tbody><tr><th style="text-align:left"> Type </th><th style="text-align:left"> Description </th></tr>
@@ -1756,13 +1752,7 @@ non-shader data.
       when selecting any shading model that is not <code>unlit</code>. See the shader sections of this document
       for more information on how to access these attributes from the shaders.
 
-</p></dd></dl><div class="admonition note"><div class="admonition-title"> Interaction with custom variables</div>
-
-<p></p><p>
-
-    When the <code>color</code> attribute is specified, only four custom variables are available instead of five.</p></div>
-
-<p></p><pre class="listing tilde"><code><span class="line">material {</span>
+</p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    parameters : [</span>
 <span class="line">        {</span>
 <span class="line">           type : sampler2d,</span>
@@ -1789,7 +1779,7 @@ non-shader data.
 
 </p><dl><dt>Type</dt><dd><p>     array of <code>string</code>
 
-</p></dd><dt>Value</dt><dd><p>      Up to 5 strings, each must be a valid GLSL identifier.
+</p></dd><dt>Value</dt><dd><p>      Up to 4 strings, each must be a valid GLSL identifier.
 
 </p></dd><dt>Description</dt><dd><p>      Defines custom interpolants (or variables) that are output by the material's vertex shader.
       Each entry of the array defines the name of an  interpolant. The full name in the fragment
@@ -1804,14 +1794,7 @@ non-shader data.
       particular if <code>default</code> is specified the default precision is used is the fragment shader
       (<code>mediump</code>) and in the vertex shader (<code>highp</code>).
 
-</p></dd></dl><div class="admonition warning"><div class="admonition-title"> Interaction with required attributes</div>
-
-<p></p><p>
-
-    If the <code>color</code> attribute is specified in the <code>required</code> list, then only four variables can be used
-    instead of five.</p></div>
-
-<p></p><pre class="listing tilde"><code><span class="line">material {</span>
+</p></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    name : Skybox,</span>
 <span class="line">    parameters : [</span>
 <span class="line">        {</span>

docs/webgl/reference.html

@@ -49,7 +49,7 @@
 </tr>
 <tr>
 <td align="left"><a href="#EntityManager">EntityManager</a></td>
-<td align="left">Singleton used for constructing entities in Filament's ECS.</td>
+<td align="left">Singleton used for constructing entities in Filament&#x27;s ECS.</td>
 </tr>
 <tr>
 <td align="left"><a href="#Frustum">Frustum</a></td>
@@ -89,7 +89,7 @@
 </tr>
 <tr>
 <td align="left"><a href="#Renderer">Renderer</a></td>
-<td align="left">Represents the platform's native window.</td>
+<td align="left">Represents the platform&#x27;s native window.</td>
 </tr>
 <tr>
 <td align="left"><a href="#Scene">Scene</a></td>
@@ -97,7 +97,7 @@
 </tr>
 <tr>
 <td align="left"><a href="#SwapChain">SwapChain</a></td>
-<td align="left">Represents the platform's native rendering surface.</td>
+<td align="left">Represents the platform&#x27;s native rendering surface.</td>
 </tr>
 <tr>
 <td align="left"><a href="#Texture">Texture</a></td>
@@ -604,11 +604,11 @@
 </ul>
 <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>
+This would also be more consistent with Filament&#x27;s Java bindings.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='EntityManager' href='#EntityManager'>EntityManager</a></h2>
-<p>Singleton used for constructing entities in Filament's ECS.</p>
+<p>Singleton used for constructing entities in Filament&#x27;s ECS.</p>
 <ul>
 <li><strong>entityManager.create()</strong>
 <ul>
@@ -742,7 +742,7 @@ properties.</p>
 </ul>
 </li>
 </ul>
-<p>Be sure to call the instance's <code>delete</code> method when you're done with it.</p>
+<p>Be sure to call the instance&#x27;s <code>delete</code> method when you&#x27;re done with it.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='PixelBufferDescriptor' href='#PixelBufferDescriptor'>PixelBufferDescriptor</a></h2>
@@ -780,11 +780,11 @@ properties.</p>
 </ul>
 </li>
 </ul>
-<p>Be sure to call the instance's <code>delete</code> method when you're done with it.</p>
+<p>Be sure to call the instance&#x27;s <code>delete</code> method when you&#x27;re done with it.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='Renderer' href='#Renderer'>Renderer</a></h2>
-<p>Represents the platform's native window.</p>
+<p>Represents the platform&#x27;s native window.</p>
 <ul>
 <li><strong>renderer.render(swapChain, view)</strong>
 <ul>
@@ -803,7 +803,7 @@ properties.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='SwapChain' href='#SwapChain'>SwapChain</a></h2>
-<p>Represents the platform's native rendering surface.</p>
+<p>Represents the platform&#x27;s native rendering surface.</p>
 <p>See also the <a href="#Engine">Engine</a> methods <code>createSwapChain</code> and <code>destroySwapChain</code>.</p>
 </div>
 <div class='classdoc'>
@@ -847,7 +847,7 @@ properties.</p>
 </ul>
 </li>
 </ul>
-<p>Be sure to call the instance's <code>delete</code> method when you're done with it.</p>
+<p>Be sure to call the instance&#x27;s <code>delete</code> method when you&#x27;re done with it.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='VertexBuffer' href='#VertexBuffer'>VertexBuffer</a></h2>
@@ -944,7 +944,7 @@ See also the <a href="#Engine">Engine</a> methods <code>createView</code> and <c
 <ul>
 <li><strong>assets</strong>
 <ul>
-<li>Array of strings containing URL's of required assets.</li>
+<li>Array of strings containing URL&#x27;s of required assets.</li>
 </ul>
 </li>
 <li><strong>onDone</strong>
@@ -954,7 +954,7 @@ See also the <a href="#Engine">Engine</a> methods <code>createView</code> and <c
 </li>
 <li><strong>onFetched</strong>
 <ul>
-<li>optional callback that's invoked after each asset is downloaded.</li>
+<li>optional callback that&#x27;s invoked after each asset is downloaded.</li>
 </ul>
 </li>
 </ul>
@@ -1001,7 +1001,7 @@ useful for compressed textures. For example, some platforms accept ETC and other
 <ul>
 <li><strong>assets</strong>
 <ul>
-<li>Array of strings containing URL's of required assets.</li>
+<li>Array of strings containing URL&#x27;s of required assets.</li>
 </ul>
 </li>
 <li><strong>onready</strong>
@@ -1010,12 +1010,12 @@ useful for compressed textures. For example, some platforms accept ETC and other
 </ul>
 </li>
 </ul>
-<p>All JavaScript clients must call the init function, passing in a list of asset URL's and a
+<p>All JavaScript clients must call the init function, passing in a list of asset URL&#x27;s and a
 callback. This callback gets invoked only after all assets have been downloaded and the Filament
-WebAssembly module has been loaded. Clients should only pass asset URL's that absolutely must
+WebAssembly module has been loaded. Clients should only pass asset URL&#x27;s that absolutely must
 be ready at initialization time.
 When the callback is called, each downloaded asset is available in the <code>Filament.assets</code> global
-object, which contains a mapping from URL's to Uint8Array objects.</p>
+object, which contains a mapping from URL&#x27;s to Uint8Array objects.</p>
 </div>
 <div class='funcdoc'>
 <h2>function <a id='loadMathExtensions' href='#loadMathExtensions'>loadMathExtensions</a>()</h2>

docs/webgl/tutorial_redball.html

@@ -10,7 +10,7 @@
 textures.</p>
 <p>For starters, create a text file called <code>redball.html</code> and copy over the HTML that we used in the
 <a href="tutorial_triangle.html">previous tutorial</a>. Change the last script tag from <code>triangle.js</code> to <code>redball.js</code>.</p>
-<p>Next you'll need to get a couple command-line tools: <code>matc</code> and <code>cmgen</code>. You can find these in the
+<p>Next you&#x27;ll need to get a couple command-line tools: <code>matc</code> and <code>cmgen</code>. You can find these in the
 appropriate <a href="//github.com/google/filament/releases">Filament release</a>. You should choose the
 archive that corresponds to your development machine rather than the one for web, and the version
 that matches the <code>unpkg.com/filament@x.x.x</code> url in the script tag of <code>redball.html</code> (you may check
@@ -19,7 +19,7 @@ out the last available release of <a href="https://www.npmjs.com/package/filamen
 <p>The <code>matc</code> tool consumes a text file containing a high-level description of a PBR material, and
 produces a binary material package that contains shader code and associated metadata. For more
 information, see the official document describing the <a href="https://google.github.io/filament/Materials.md.html">Filament Material System</a>.</p>
-<p>Let's try out <code>matc</code>. Create the following file in your favorite text editor and call it
+<p>Let&#x27;s try out <code>matc</code>. Create the following file in your favorite text editor and call it
 <code>plastic.mat</code>.</p>
 <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>material {
     name : Lit,
@@ -44,16 +44,16 @@ fragment {
 </pre></div>
 
 <p>Next, invoke <code>matc</code> as follows.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc<span style="color: #BBB"> </span>-a<span style="color: #BBB"> </span>opengl<span style="color: #BBB"> </span>-p<span style="color: #BBB"> </span>mobile<span style="color: #BBB"> </span>-o<span style="color: #BBB"> </span>plastic.filamat<span style="color: #BBB"> </span>plastic.mat
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc -a opengl -p mobile -o plastic.filamat plastic.mat
 </pre></div>
 
-<p>You should now have a material archive in your working directory, which we'll use later in the
+<p>You should now have a material archive in your working directory, which we&#x27;ll use later in the
 tutorial.</p>
 <h2>Bake environment map</h2>
-<p>Next we'll use Filament's <code>cmgen</code> tool to consume a HDR environment map in latlong format, and
+<p>Next we&#x27;ll use Filament&#x27;s <code>cmgen</code> tool to consume a HDR environment map in latlong format, and
 produce two cubemap files: a mipmapped IBL and a blurry skybox.</p>
 <p>Download <a href="//github.com/google/filament/blob/main/third_party/environments/pillars_2k.hdr">pillars_2k.hdr</a>, then invoke the following command in your terminal.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>pillars_2k<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=256</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>pillars_2k.hdr
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen -x pillars_2k --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 pillars_2k.hdr
 </pre></div>
 
 <p>You should now have a <code>pillars_2k</code> folder containing a couple KTX files for the IBL and skybox, as
@@ -61,84 +61,84 @@ well as a text file with spherical harmonics coefficients. You can discard the t
 IBL KTX contains these coefficients in its metadata.</p>
 <h2>Create JavaScript</h2>
 <p>Next, create <code>redball.js</code> with the following content.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>environ<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">&#39;pillars_2k&#39;</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ibl_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>sky_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>filamat_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">&#39;plastic.filamat&#39;</span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;pillars_2k&#39;</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;plastic.filamat&#39;</span><span style="color: #bbbbbb"></span>
 
-Filament.init([<span style="color: #BBB"> </span>filamat_url,<span style="color: #BBB"> </span>ibl_url,<span style="color: #BBB"> </span>sky_url<span style="color: #BBB"> </span>],<span style="color: #BBB"> </span>()<span style="color: #BBB"> </span>=&gt;<span style="color: #BBB"> </span>{
-<span style="color: #BBB">  </span><span style="color: #3D7B7B; font-style: italic">// Create some global aliases to enums for convenience.</span>
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.VertexAttribute<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexAttribute;
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.AttributeType<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexBuffer$AttributeType;
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.PrimitiveType<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.RenderableManager$PrimitiveType;
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.IndexType<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.IndexBuffer$IndexType;
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.Fov<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Camera$Fov;
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.LightType<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.LightManager$Type;
+Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>ibl_url,<span style="color: #bbbbbb"> </span>sky_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #3D7B7B; font-style: italic">// Create some global aliases to enums for convenience.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.AttributeType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer$AttributeType;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.PrimitiveType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.RenderableManager$PrimitiveType;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.IndexType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer$IndexType;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.LightType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.LightManager$Type;<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">  </span><span style="color: #3D7B7B; font-style: italic">// Obtain the canvas DOM object and pass it to the App.</span>
-<span style="color: #BBB">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>canvas<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666">0</span>];
-<span style="color: #BBB">  </span><span style="color: #008000">window</span>.app<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>App(canvas);
-}<span style="color: #BBB"> </span>);
+<span style="color: #bbbbbb">  </span><span style="color: #3D7B7B; font-style: italic">// Obtain the canvas DOM object and pass it to the App.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(canvas);<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"> </span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">class</span><span style="color: #BBB"> </span>App<span style="color: #BBB"> </span>{
-<span style="color: #BBB">  </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>canvas;
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>engine<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Engine.create(canvas);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>scene<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createScene();
+<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createScene();<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create material</span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sphere</span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create lights</span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create IBL</span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create skybox</span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create material</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sphere</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create lights</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create IBL</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create skybox</span><span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createSwapChain();
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createRenderer();
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createCamera(Filament.EntityManager.get().create());
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createView();
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(scene);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.resize();
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #BBB">  </span>}
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(scene);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">  </span>render()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>eye<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">4</span>],<span style="color: #BBB"> </span>center<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>],<span style="color: #BBB"> </span>up<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>];
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>radians<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">Date</span>.now()<span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">10000</span>;
-<span style="color: #BBB">    </span>vec3.rotateY(eye,<span style="color: #BBB"> </span>eye,<span style="color: #BBB"> </span>center,<span style="color: #BBB"> </span>radians);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #BBB"> </span>center,<span style="color: #BBB"> </span>up);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #BBB">  </span>}
+<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>radians<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Date</span>.now()<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">10000</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>vec3.rotateY(eye,<span style="color: #bbbbbb"> </span>eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>radians);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>up);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">  </span>resize()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>dpr<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>width<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span>dpr;
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>height<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span>dpr;
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>width,<span style="color: #BBB"> </span>height]);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666">45</span>,<span style="color: #BBB"> </span>width<span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span>height,<span style="color: #BBB"> </span><span style="color: #666">1.0</span>,<span style="color: #BBB"> </span><span style="color: #666">10.0</span>,<span style="color: #BBB"> </span>Fov.VERTICAL);
-<span style="color: #BBB">  </span>}
-}
+<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>Fov.VERTICAL);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The above boilerplate should be familiar to you from the previous tutorial, although it loads in a
 new set of assets. We also added some animation to the camera.</p>
-<p>Next let's create a material instance from the package that we built at the beginning the tutorial.
+<p>Next let&#x27;s create a material instance from the package that we built at the beginning the tutorial.
 Replace the <strong>create material</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>material<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createMaterial(filamat_url);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>matinstance<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>material.createInstance();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>material<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createMaterial(filamat_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>red<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0.8</span>,<span style="color: #BBB"> </span><span style="color: #666">0.0</span>,<span style="color: #BBB"> </span><span style="color: #666">0.0</span>];
-matinstance.setColor3Parameter(<span style="color: #BA2121">&#39;baseColor&#39;</span>,<span style="color: #BBB"> </span>Filament.RgbType.sRGB,<span style="color: #BBB"> </span>red);
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #BBB"> </span><span style="color: #666">0.5</span>);
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoat&#39;</span>,<span style="color: #BBB"> </span><span style="color: #666">1.0</span>);
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoatRoughness&#39;</span>,<span style="color: #BBB"> </span><span style="color: #666">0.3</span>);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>red<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0.8</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.0</span>];<span style="color: #bbbbbb"></span>
+matinstance.setColor3Parameter(<span style="color: #BA2121">&#39;baseColor&#39;</span>,<span style="color: #bbbbbb"> </span>Filament.RgbType.sRGB,<span style="color: #bbbbbb"> </span>red);<span style="color: #bbbbbb"></span>
+matinstance.setFloatParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.5</span>);<span style="color: #bbbbbb"></span>
+matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoat&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>);<span style="color: #bbbbbb"></span>
+matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoatRoughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.3</span>);<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>The next step is to create a renderable for the sphere. To help with this, we'll use the <code>IcoSphere</code>
+<p>The next step is to create a renderable for the sphere. To help with this, we&#x27;ll use the <code>IcoSphere</code>
 utility class, whose constructor takes a LOD. Its job is to subdivide an icosadedron, producing
 three arrays:</p>
 <ul>
@@ -147,137 +147,137 @@ three arrays:</p>
 as quaternions.</li>
 <li><code>icosphere.triangles</code> Uint16Array with triangle indices.</li>
 </ul>
-<p>Let's go ahead use these arrays to build the vertex buffer and index buffer. Replace <strong>create
+<p>Let&#x27;s go ahead use these arrays to build the vertex buffer and index buffer. Replace <strong>create
 sphere</strong> with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>renderable<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.EntityManager.get().create();
-scene.addEntity(renderable);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>renderable<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+scene.addEntity(renderable);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>icosphere<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>Filament.IcoSphere(<span style="color: #666">5</span>);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>icosphere<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.IcoSphere(<span style="color: #666666">5</span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>vb<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexBuffer.Builder()
-<span style="color: #BBB">  </span>.vertexCount(icosphere.vertices.length<span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>)
-<span style="color: #BBB">  </span>.bufferCount(<span style="color: #666">2</span>)
-<span style="color: #BBB">  </span>.attribute(VertexAttribute.POSITION,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>AttributeType.FLOAT3,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>)
-<span style="color: #BBB">  </span>.attribute(VertexAttribute.TANGENTS,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span>AttributeType.SHORT4,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>)
-<span style="color: #BBB">  </span>.normalized(VertexAttribute.TANGENTS)
-<span style="color: #BBB">  </span>.build(engine);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>vb<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.vertexCount(icosphere.vertices.length<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.attribute(VertexAttribute.POSITION,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>AttributeType.FLOAT3,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.attribute(VertexAttribute.TANGENTS,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>AttributeType.SHORT4,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.normalized(VertexAttribute.TANGENTS)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ib<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.IndexBuffer.Builder()
-<span style="color: #BBB">  </span>.indexCount(icosphere.triangles.length)
-<span style="color: #BBB">  </span>.bufferType(IndexType.USHORT)
-<span style="color: #BBB">  </span>.build(engine);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ib<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.indexCount(icosphere.triangles.length)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.bufferType(IndexType.USHORT)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-vb.setBufferAt(engine,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>icosphere.vertices);
-vb.setBufferAt(engine,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span>icosphere.tangents);
-ib.setBuffer(engine,<span style="color: #BBB"> </span>icosphere.triangles);
+vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>icosphere.vertices);<span style="color: #bbbbbb"></span>
+vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>icosphere.tangents);<span style="color: #bbbbbb"></span>
+ib.setBuffer(engine,<span style="color: #bbbbbb"> </span>icosphere.triangles);<span style="color: #bbbbbb"></span>
 
-Filament.RenderableManager.Builder(<span style="color: #666">1</span>)
-<span style="color: #BBB">  </span>.boundingBox({<span style="color: #BBB"> </span>center<span style="color: #666">:</span><span style="color: #BBB"> </span>[<span style="color: #666">-1</span>,<span style="color: #BBB"> </span><span style="color: #666">-1</span>,<span style="color: #BBB"> </span><span style="color: #666">-1</span>],<span style="color: #BBB"> </span>halfExtent<span style="color: #666">:</span><span style="color: #BBB"> </span>[<span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>]<span style="color: #BBB"> </span>})
-<span style="color: #BBB">  </span>.material(<span style="color: #666">0</span>,<span style="color: #BBB"> </span>matinstance)
-<span style="color: #BBB">  </span>.geometry(<span style="color: #666">0</span>,<span style="color: #BBB"> </span>PrimitiveType.TRIANGLES,<span style="color: #BBB"> </span>vb,<span style="color: #BBB"> </span>ib)
-<span style="color: #BBB">  </span>.build(engine,<span style="color: #BBB"> </span>renderable);
+Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.boundingBox({<span style="color: #bbbbbb"> </span>center<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>],<span style="color: #bbbbbb"> </span>halfExtent<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]<span style="color: #bbbbbb"> </span>})<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinstance)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.geometry(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>PrimitiveType.TRIANGLES,<span style="color: #bbbbbb"> </span>vb,<span style="color: #bbbbbb"> </span>ib)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>renderable);<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>At this point, the app is rendering a sphere, but it is black so it doesn't show up. To prove that
+<p>At this point, the app is rendering a sphere, but it is black so it doesn&#x27;t show up. To prove that
 the sphere is there, you can try changing the background color to blue via <code>setClearColor</code>, like we
 did in the first tutorial.</p>
 <h2>Add lighting</h2>
 <p>In this section we will create some directional light sources, as well as an image-based light (IBL)
 defined by one of the KTX files we built at the start of the demo. First, replace the <strong>create
 lights</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>sunlight<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.EntityManager.get().create();
-scene.addEntity(sunlight);
-Filament.LightManager.Builder(LightType.SUN)
-<span style="color: #BBB">  </span>.color([<span style="color: #666">0.98</span>,<span style="color: #BBB"> </span><span style="color: #666">0.92</span>,<span style="color: #BBB"> </span><span style="color: #666">0.89</span>])
-<span style="color: #BBB">  </span>.intensity(<span style="color: #666">110000.0</span>)
-<span style="color: #BBB">  </span>.direction([<span style="color: #666">0.6</span>,<span style="color: #BBB"> </span><span style="color: #666">-1.0</span>,<span style="color: #BBB"> </span><span style="color: #666">-0.8</span>])
-<span style="color: #BBB">  </span>.sunAngularRadius(<span style="color: #666">1.9</span>)
-<span style="color: #BBB">  </span>.sunHaloSize(<span style="color: #666">10.0</span>)
-<span style="color: #BBB">  </span>.sunHaloFalloff(<span style="color: #666">80.0</span>)
-<span style="color: #BBB">  </span>.build(engine,<span style="color: #BBB"> </span>sunlight);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sunlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+scene.addEntity(sunlight);<span style="color: #bbbbbb"></span>
+Filament.LightManager.Builder(LightType.SUN)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.color([<span style="color: #666666">0.98</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.92</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.89</span>])<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">110000.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.direction([<span style="color: #666666">0.6</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-0.8</span>])<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sunAngularRadius(<span style="color: #666666">1.9</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sunHaloSize(<span style="color: #666666">10.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sunHaloFalloff(<span style="color: #666666">80.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>sunlight);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>backlight<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.EntityManager.get().create();
-scene.addEntity(backlight);
-Filament.LightManager.Builder(LightType.DIRECTIONAL)
-<span style="color: #BBB">        </span>.direction([<span style="color: #666">-1</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>])
-<span style="color: #BBB">        </span>.intensity(<span style="color: #666">50000.0</span>)
-<span style="color: #BBB">        </span>.build(engine,<span style="color: #BBB"> </span>backlight);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>backlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+scene.addEntity(backlight);<span style="color: #bbbbbb"></span>
+Filament.LightManager.Builder(LightType.DIRECTIONAL)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>.direction([<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>])<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>.build(engine,<span style="color: #bbbbbb"> </span>backlight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The <code>SUN</code> light source is similar to the <code>DIRECTIONAL</code> light source, but has some extra
 parameters because Filament will automatically draw a disk into the skybox.</p>
 <p>Next we need to create an <code>IndirectLight</code> object from the KTX IBL. One way of doing this is the
-following (don't type this out, there's an easier way).</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>format<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.PixelDataFormat.RGB;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>datatype<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.PixelDataType.UINT_10F_11F_11F_REV;
+following (don&#x27;t type this out, there&#x27;s an easier way).</p>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>format<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataFormat.RGB;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>datatype<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataType.UINT_10F_11F_11F_REV;<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ibl_package<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Buffer(Filament.assets[ibl_url]);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>iblktx<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>Filament.Ktx1Bundle(ibl_package);
+<span style="color: #3D7B7B; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[ibl_url]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>iblktx<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.Ktx1Bundle(ibl_package);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ibltex<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Texture.Builder()
-<span style="color: #BBB">  </span>.width(iblktx.info().pixelWidth)
-<span style="color: #BBB">  </span>.height(iblktx.info().pixelHeight)
-<span style="color: #BBB">  </span>.levels(iblktx.getNumMipLevels())
-<span style="color: #BBB">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)
-<span style="color: #BBB">  </span>.format(Filament.Texture$InternalFormat.RGBA8)
-<span style="color: #BBB">  </span>.build(engine);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibltex<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Texture.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.width(iblktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.height(iblktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.levels(iblktx.getNumMipLevels())<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">for</span><span style="color: #BBB"> </span>(<span style="color: #008000; font-weight: bold">let</span><span style="color: #BBB"> </span>level<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #666">0</span>;<span style="color: #BBB"> </span>level<span style="color: #BBB"> </span><span style="color: #666">&lt;</span><span style="color: #BBB"> </span>iblktx.getNumMipLevels();<span style="color: #BBB"> </span><span style="color: #666">++</span>level)<span style="color: #BBB"> </span>{
-<span style="color: #BBB">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>uint8array<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>iblktx.getCubeBlob(level).getBytes();
-<span style="color: #BBB">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>pixelbuffer<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.PixelBuffer(uint8array,<span style="color: #BBB"> </span>format,<span style="color: #BBB"> </span>datatype);
-<span style="color: #BBB">  </span>ibltex.setImageCube(engine,<span style="color: #BBB"> </span>level,<span style="color: #BBB"> </span>pixelbuffer);
-}
+<span style="color: #008000; font-weight: bold">for</span><span style="color: #bbbbbb"> </span>(<span style="color: #008000; font-weight: bold">let</span><span style="color: #bbbbbb"> </span>level<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>;<span style="color: #bbbbbb"> </span>level<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span>iblktx.getNumMipLevels();<span style="color: #bbbbbb"> </span><span style="color: #666666">++</span>level)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>uint8array<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>iblktx.getCubeBlob(level).getBytes();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>pixelbuffer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelBuffer(uint8array,<span style="color: #bbbbbb"> </span>format,<span style="color: #bbbbbb"> </span>datatype);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>ibltex.setImageCube(engine,<span style="color: #bbbbbb"> </span>level,<span style="color: #bbbbbb"> </span>pixelbuffer);<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Parse the spherical harmonics metadata.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>shstring<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>iblktx.getMetadata(<span style="color: #BA2121">&#39;sh&#39;</span>);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>shfloats<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>shstring.split(<span style="color: #A45A77">/\s/</span>,<span style="color: #BBB"> </span><span style="color: #666">9</span><span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">3</span>).map(<span style="color: #008000">parseFloat</span>);
+<span style="color: #3D7B7B; font-style: italic">// Parse the spherical harmonics metadata.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>shstring<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>iblktx.getMetadata(<span style="color: #BA2121">&#39;sh&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>shfloats<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>shstring.split(<span style="color: #A45A77">/\s/</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">9</span><span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>).map(<span style="color: #008000">parseFloat</span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Build the IBL object and insert it into the scene.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>indirectLight<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.IndirectLight.Builder()
-<span style="color: #BBB">  </span>.reflections(ibltex)
-<span style="color: #BBB">  </span>.irradianceSh(<span style="color: #666">3</span>,<span style="color: #BBB"> </span>shfloats)
-<span style="color: #BBB">  </span>.intensity(<span style="color: #666">50000.0</span>)
-<span style="color: #BBB">  </span>.build(engine);
+<span style="color: #3D7B7B; font-style: italic">// Build the IBL object and insert it into the scene.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndirectLight.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.reflections(ibltex)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.irradianceSh(<span style="color: #666666">3</span>,<span style="color: #bbbbbb"> </span>shfloats)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-scene.setIndirectLight(indirectLight);
+scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Filament provides a JavaScript utility to make this simpler,
 simply replace the <strong>create IBL</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>indirectLight<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createIblFromKtx1(ibl_url);
-indirectLight.setIntensity(<span style="color: #666">50000</span>);
-scene.setIndirectLight(indirectLight);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
+indirectLight.setIntensity(<span style="color: #666666">50000</span>);<span style="color: #bbbbbb"></span>
+scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Add background</h2>
 <p>At this point you can run the demo and you should see a red plastic ball against a black background.
 Without a skybox, the reflections on the ball are not representative of its surroundings.
-Here's one way to create a texture for the skybox:</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>sky_package<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Buffer(Filament.assets[sky_url]);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>skyktx<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>Filament.Ktx1Bundle(sky_package);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>skytex<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Texture.Builder()
-<span style="color: #BBB">  </span>.width(skyktx.info().pixelWidth)
-<span style="color: #BBB">  </span>.height(skyktx.info().pixelHeight)
-<span style="color: #BBB">  </span>.levels(<span style="color: #666">1</span>)
-<span style="color: #BBB">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)
-<span style="color: #BBB">  </span>.format(Filament.Texture$InternalFormat.RGBA8)
-<span style="color: #BBB">  </span>.build(engine);
+Here&#x27;s one way to create a texture for the skybox:</p>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[sky_url]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skyktx<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.Ktx1Bundle(sky_package);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skytex<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Texture.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.width(skyktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.height(skyktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.levels(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>uint8array<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>skyktx.getCubeBlob(<span style="color: #666">0</span>).getBytes();
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>pixelbuffer<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.PixelBuffer(uint8array,<span style="color: #BBB"> </span>format,<span style="color: #BBB"> </span>datatype);
-skytex.setImageCube(engine,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>pixelbuffer);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>uint8array<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>skyktx.getCubeBlob(<span style="color: #666666">0</span>).getBytes();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>pixelbuffer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelBuffer(uint8array,<span style="color: #bbbbbb"> </span>format,<span style="color: #bbbbbb"> </span>datatype);<span style="color: #bbbbbb"></span>
+skytex.setImageCube(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>pixelbuffer);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Filament provides a Javascript utility to make this easier.
 Replace <strong>create skybox</strong> with the following.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>skybox<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createSkyFromKtx1(sky_url);
-scene.setSkybox(skybox);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSkyFromKtx1(sky_url);<span style="color: #bbbbbb"></span>
+scene.setSkybox(skybox);<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>That's it, we now have a shiny red ball floating in an environment! The complete JavaScript file is
+<p>That&#x27;s it, we now have a shiny red ball floating in an environment! The complete JavaScript file is
 available <a href="tutorial_redball.js">here</a>.</p>
-<p>In the <a href="tutorial_suzanne.html">next tutorial</a>, we'll take a closer look at textures and interaction.</p>
+<p>In the <a href="tutorial_suzanne.html">next tutorial</a>, we&#x27;ll take a closer look at textures and interaction.</p>
 
 </body>
 </html>

docs/webgl/tutorial_suzanne.html

@@ -8,58 +8,58 @@
 <div class="demo_frame"><iframe src="demo_suzanne.html"></iframe><a href="demo_suzanne.html">&#x1F517;</a></div>
 <p>This tutorial will describe how to create the <strong>suzanne</strong> demo, introducing you to compressed
 textures, mipmap generation, asynchronous texture loading, and trackball rotation.</p>
-<p>Much like the <a href="tutorial_redball.html">previous tutorial</a>, you'll need to use the command-line tools that can be found in
+<p>Much like the <a href="tutorial_redball.html">previous tutorial</a>, you&#x27;ll need to use the command-line tools that can be found in
 the appropriate <a href="//github.com/google/filament/releases">Filament release</a> for your development machine. In addition to <code>matc</code> and <code>cmgen</code>,
-we'll also be using <code>filamesh</code> and <code>mipgen</code>.</p>
+we&#x27;ll also be using <code>filamesh</code> and <code>mipgen</code>.</p>
 <h2>Create filamesh file</h2>
 <p>Filament does not have an asset loading system, but it does provide a binary mesh format
-called <code>filamesh</code> for simple use cases. Let's create a compressed filamesh file for suzanne by
+called <code>filamesh</code> for simple use cases. Let&#x27;s create a compressed filamesh file for suzanne by
 converting <a href="https://github.com/google/filament/blob/main/assets/models/monkey/monkey.obj">this OBJ file</a>:</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>filamesh<span style="color: #BBB"> </span>--compress<span style="color: #BBB"> </span>monkey.obj<span style="color: #BBB"> </span>suzanne.filamesh
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>filamesh --compress monkey.obj suzanne.filamesh
 </pre></div>
 
 <h2>Create mipmapped textures</h2>
-<p>Next, let's create mipmapped KTX files using filament's <code>mipgen</code> tool. We'll create compressed and
+<p>Next, let&#x27;s create mipmapped KTX files using filament&#x27;s <code>mipgen</code> tool. We&#x27;ll create compressed and
 non-compressed variants for each texture, since not all platforms support the same compression
 formats. First copy over the PNG files from the <a href="https://github.com/google/filament/blob/main/assets/models/monkey">monkey folder</a>, then do:</p>
 <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic"># Create mipmaps for base color</span>
-mipgen<span style="color: #BBB"> </span>albedo.png<span style="color: #BBB"> </span>albedo.ktx2
-mipgen<span style="color: #BBB"> </span>--compression<span style="color: #666">=</span>uastc<span style="color: #BBB"> </span>albedo.png<span style="color: #BBB"> </span>albedo.ktx2
+mipgen albedo.png albedo.ktx2
+mipgen --compression<span style="color: #666666">=</span>uastc albedo.png albedo.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the normal map and a compressed variant.</span>
-mipgen<span style="color: #BBB"> </span>--strip-alpha<span style="color: #BBB"> </span>--kernel<span style="color: #666">=</span>NORMALS<span style="color: #BBB"> </span>--linear<span style="color: #BBB"> </span>normal.png<span style="color: #BBB"> </span>normal.ktx
-mipgen<span style="color: #BBB"> </span>--strip-alpha<span style="color: #BBB"> </span>--kernel<span style="color: #666">=</span>NORMALS<span style="color: #BBB"> </span>--linear<span style="color: #BBB"> </span>--compression<span style="color: #666">=</span>uastc_normals<span style="color: #BBB"> </span><span style="color: #AA5D1F; font-weight: bold">\</span>
-<span style="color: #BBB">    </span>normal.png<span style="color: #BBB"> </span>normal.ktx2
+mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear normal.png normal.ktx
+mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear --compression<span style="color: #666666">=</span>uastc_normals <span style="color: #AA5D1F; font-weight: bold">\</span>
+    normal.png normal.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component roughness map and a compressed variant.</span>
-mipgen<span style="color: #BBB"> </span>--grayscale<span style="color: #BBB"> </span>roughness.png<span style="color: #BBB"> </span>roughness.ktx
-mipgen<span style="color: #BBB"> </span>--grayscale<span style="color: #BBB"> </span>--compression<span style="color: #666">=</span>uastc<span style="color: #BBB"> </span>roughness.png<span style="color: #BBB"> </span>roughness.ktx2
+mipgen --grayscale roughness.png roughness.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>uastc roughness.png roughness.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component metallic map and a compressed variant.</span>
-mipgen<span style="color: #BBB"> </span>--grayscale<span style="color: #BBB"> </span>metallic.png<span style="color: #BBB"> </span>metallic.ktx
-mipgen<span style="color: #BBB"> </span>--grayscale<span style="color: #BBB"> </span>--compression<span style="color: #666">=</span>uastc<span style="color: #BBB"> </span>metallic.png<span style="color: #BBB"> </span>metallic.ktx2
+mipgen --grayscale metallic.png metallic.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>uastc metallic.png metallic.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component occlusion map and a compressed variant.</span>
-mipgen<span style="color: #BBB"> </span>--grayscale<span style="color: #BBB"> </span>ao.png<span style="color: #BBB"> </span>ao.ktx
-mipgen<span style="color: #BBB"> </span>--grayscale<span style="color: #BBB"> </span>--compression<span style="color: #666">=</span>uastc<span style="color: #BBB"> </span>ao.png<span style="color: #BBB"> </span>ao.ktx2
+mipgen --grayscale ao.png ao.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>uastc ao.png ao.ktx2
 </pre></div>
 
-<p>For more information on mipgen's arguments and supported formats, do <code>mipgen --help</code>.</p>
-<p>In a production setting, you'd want to invoke these commands with a script or build system.</p>
+<p>For more information on mipgen&#x27;s arguments and supported formats, do <code>mipgen --help</code>.</p>
+<p>In a production setting, you&#x27;d want to invoke these commands with a script or build system.</p>
 <h2>Bake environment map</h2>
-<p>Much like the <a href="tutorial_redball.html">previous tutorial</a> we need to use Filament's <code>cmgen</code> tool to produce cubemap files.</p>
+<p>Much like the <a href="tutorial_redball.html">previous tutorial</a> we need to use Filament&#x27;s <code>cmgen</code> tool to produce cubemap files.</p>
 <p>Download <a href="//github.com/google/filament/blob/main/third_party/environments/venetian_crossroads_2k.hdr">venetian_crossroads_2k.hdr</a>, then invoke the following commands in your terminal.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>.<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=64</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>venetian_crossroads_2k.hdr
-<span style="color: #008000">cd</span><span style="color: #BBB"> </span>venetian*<span style="color: #BBB"> </span>;<span style="color: #BBB"> </span>mv<span style="color: #BBB"> </span>venetian*_ibl.ktx<span style="color: #BBB"> </span>venetian_crossroads_2k_skybox_tiny.ktx<span style="color: #BBB"> </span>;<span style="color: #BBB"> </span><span style="color: #008000">cd</span><span style="color: #BBB"> </span>-
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=64</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+<span style="color: #008000">cd</span> venetian* ; mv venetian*_ibl.ktx venetian_crossroads_2k_skybox_tiny.ktx ; <span style="color: #008000">cd</span> -
 
-cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>.<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=256</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>venetian_crossroads_2k.hdr
-cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>.<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=256</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>venetian_crossroads_2k.hdr
-cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>.<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=256</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
 </pre></div>
 
 <h2>Define textured material</h2>
 <p>You might recall the <code>filamat</code> file we generated in the previous tutorial for red plastic. For this
-demo, we'll create a material that uses textures for several parameters.</p>
+demo, we&#x27;ll create a material that uses textures for several parameters.</p>
 <p>Create the following text file and call it <code>textured.mat</code>. Note that our material definition now
 requires a <code>uv0</code> attribute.</p>
 <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>material {
@@ -90,7 +90,7 @@ fragment {
 </pre></div>
 
 <p>Next, invoke <code>matc</code> as follows.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc<span style="color: #BBB"> </span>-a<span style="color: #BBB"> </span>opengl<span style="color: #BBB"> </span>-p<span style="color: #BBB"> </span>mobile<span style="color: #BBB"> </span>-o<span style="color: #BBB"> </span>textured.filamat<span style="color: #BBB"> </span>textured.mat
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc -a opengl -p mobile -o textured.filamat textured.mat
 </pre></div>
 
 <p>You should now have a material archive in your working directory. For the suzanne asset, the normal
@@ -100,65 +100,65 @@ materials, consult the official document describing the <a href="https://google.
 <p>Create a text file called <code>suzanne.html</code> and copy over the HTML that we used in the <a href="tutorial_redball.html">previous
 tutorial</a>. Change the last script tag from <code>redball.js</code> to <code>suzanne.js</code>. Next, create <code>suzanne.js</code>
 with the following content.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// TODO: declare asset URLs</span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// TODO: declare asset URLs</span><span style="color: #bbbbbb"></span>
 
-Filament.init([<span style="color: #BBB"> </span>filamat_url,<span style="color: #BBB"> </span>filamesh_url,<span style="color: #BBB"> </span>sky_small_url,<span style="color: #BBB"> </span>ibl_url<span style="color: #BBB"> </span>],<span style="color: #BBB"> </span>()<span style="color: #BBB"> </span>=&gt;<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.app<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666">0</span>]);
-});
+Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>filamesh_url,<span style="color: #bbbbbb"> </span>sky_small_url,<span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);<span style="color: #bbbbbb"></span>
+});<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">class</span><span style="color: #BBB"> </span>App<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #BBB"> </span>{
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>canvas;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Engine.create(canvas);
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();
+<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>material<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createMaterial(filamat_url);
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.matinstance<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>material.createInstance();
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>material<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createMaterial(filamat_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>filamesh<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.loadFilamesh(filamesh_url,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.matinstance);
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.suzanne<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>filamesh.renderable;
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.loadFilamesh(filamesh_url,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.matinstance);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.suzanne<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>filamesh.renderable;<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sky box and IBL</span>
-<span style="color: #BBB">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: initialize gltumble</span>
-<span style="color: #BBB">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: fetch larger assets</span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sky box and IBL</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: initialize gltumble</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: fetch larger assets</span><span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSwapChain();
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createRenderer();
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createCamera(Filament.EntityManager.get().create());
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createView();
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #BBB">        </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>eye<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">4</span>],<span style="color: #BBB"> </span>center<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>],<span style="color: #BBB"> </span>up<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>];
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #BBB"> </span>center,<span style="color: #BBB"> </span>up);
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>up);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.resize();
-<span style="color: #BBB">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #BBB">    </span>}
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span>render()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</span>
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
-<span style="color: #BBB">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #BBB">    </span>}
+<span style="color: #bbbbbb">    </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span>resize()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>dpr<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>width<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span>dpr;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>height<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span>dpr;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>width,<span style="color: #BBB"> </span>height]);
+<span style="color: #bbbbbb">    </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>aspect<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>width<span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span>height;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>Fov<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Camera$Fov,<span style="color: #BBB"> </span>fov<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>aspect<span style="color: #BBB"> </span><span style="color: #666">&lt;</span><span style="color: #BBB"> </span><span style="color: #666">1</span><span style="color: #BBB"> </span><span style="color: #666">?</span><span style="color: #BBB"> </span>Fov.HORIZONTAL<span style="color: #BBB"> </span><span style="color: #666">:</span><span style="color: #BBB"> </span>Fov.VERTICAL;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666">45</span>,<span style="color: #BBB"> </span>aspect,<span style="color: #BBB"> </span><span style="color: #666">1.0</span>,<span style="color: #BBB"> </span><span style="color: #666">10.0</span>,<span style="color: #BBB"> </span>fov);
-<span style="color: #BBB">    </span>}
-}
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov,<span style="color: #bbbbbb"> </span>fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1</span><span style="color: #bbbbbb"> </span><span style="color: #666666">?</span><span style="color: #bbbbbb"> </span>Fov.HORIZONTAL<span style="color: #bbbbbb"> </span><span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>Fov.VERTICAL;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>fov);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>Our app will only require a subset of assets to be present for <code>App</code> construction. We'll download
+<p>Our app will only require a subset of assets to be present for <code>App</code> construction. We&#x27;ll download
 the other assets after construction. By using a progressive loading strategy, we can reduce the
 perceived load time.</p>
 <p>Next we need to supply the URLs for various assets. This is actually a bit tricky, because different
@@ -171,85 +171,85 @@ string -- which might be empty.</p>
 <p>In our case, we know that our web server will have <code>astc</code> and <code>s3tc</code> variants for albedo, and <code>etc</code>
 variants for the other textures. The uncompressed variants (empty string) are always available as a
 last resort. Go ahead and replace the <strong>declare asset URLs</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>albedo_suffix<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc_srgb&#39;</span>);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>texture_suffix<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc_srgb&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>texture_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>environ<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ibl_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>sky_small_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox_tiny.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>sky_large_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>albedo_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`albedo</span><span style="color: #A45A77; font-weight: bold">${</span>albedo_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ao_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`ao</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>metallic_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`metallic</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>normal_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`normal</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>roughness_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">`roughness</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>filamat_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">&#39;textured.filamat&#39;</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>filamesh_url<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #BA2121">&#39;suzanne.filamesh&#39;</span>;
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_small_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox_tiny.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_large_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`albedo</span><span style="color: #A45A77; font-weight: bold">${</span>albedo_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`ao</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`metallic</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`normal</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`roughness</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;textured.filamat&#39;</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;suzanne.filamesh&#39;</span>;<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Create skybox and IBL</h2>
-<p>Next, let's create the low-resolution skybox and IBL in the <code>App</code> constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);
-<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createIblFromKtx1(ibl_url);
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666">100000</span>);
-<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);
+<p>Next, let&#x27;s create the low-resolution skybox and IBL in the <code>App</code> constructor.</p>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666666">100000</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>This allows users to see a reasonable background fairly quickly, before larger assets have finished
 loading in.</p>
 <h2>Fetch assets asychronously</h2>
-<p>Next we'll invoke the <code>Filament.fetch</code> function from within the app constructor. This function is
+<p>Next we&#x27;ll invoke the <code>Filament.fetch</code> function from within the app constructor. This function is
 very similar to <code>Filament.init</code>. It takes a list of asset URLs and a callback function that triggers
 when the assets have finished downloading.</p>
-<p>In our callback, we'll make several <code>setTextureParameter</code> calls on the material instance, then we'll
+<p>In our callback, we&#x27;ll make several <code>setTextureParameter</code> calls on the material instance, then we&#x27;ll
 recreate the skybox using a higher-resolution texture. As a last step we unhide the renderable that
 was created in the app constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>Filament.fetch([sky_large_url,<span style="color: #BBB"> </span>albedo_url,<span style="color: #BBB"> </span>roughness_url,<span style="color: #BBB"> </span>metallic_url,<span style="color: #BBB"> </span>normal_url,<span style="color: #BBB"> </span>ao_url],<span style="color: #BBB"> </span>()<span style="color: #BBB"> </span>=&gt;<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>albedo<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(albedo_url,<span style="color: #BBB"> </span>{srgb<span style="color: #666">:</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">true</span>});
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>roughness<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(roughness_url);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>metallic<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(metallic_url);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>normal<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(normal_url);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ao<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(ao_url);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>Filament.fetch([sky_large_url,<span style="color: #bbbbbb"> </span>albedo_url,<span style="color: #bbbbbb"> </span>roughness_url,<span style="color: #bbbbbb"> </span>metallic_url,<span style="color: #bbbbbb"> </span>normal_url,<span style="color: #bbbbbb"> </span>ao_url],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(albedo_url,<span style="color: #bbbbbb"> </span>{srgb<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">true</span>});<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(roughness_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(metallic_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(normal_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(ao_url);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>sampler<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>Filament.TextureSampler(
-<span style="color: #BBB">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
-<span style="color: #BBB">        </span>Filament.MagFilter.LINEAR,
-<span style="color: #BBB">        </span>Filament.WrapMode.CLAMP_TO_EDGE);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sampler<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.TextureSampler(<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.MagFilter.LINEAR,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.WrapMode.CLAMP_TO_EDGE);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;albedo&#39;</span>,<span style="color: #BBB"> </span>albedo,<span style="color: #BBB"> </span>sampler);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #BBB"> </span>roughness,<span style="color: #BBB"> </span>sampler);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;metallic&#39;</span>,<span style="color: #BBB"> </span>metallic,<span style="color: #BBB"> </span>sampler);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;normal&#39;</span>,<span style="color: #BBB"> </span>normal,<span style="color: #BBB"> </span>sampler);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;ao&#39;</span>,<span style="color: #BBB"> </span>ao,<span style="color: #BBB"> </span>sampler);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;albedo&#39;</span>,<span style="color: #bbbbbb"> </span>albedo,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span>roughness,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;metallic&#39;</span>,<span style="color: #bbbbbb"> </span>metallic,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;normal&#39;</span>,<span style="color: #bbbbbb"> </span>normal,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;ao&#39;</span>,<span style="color: #bbbbbb"> </span>ao,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// Replace low-res skybox with high-res skybox.</span>
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.engine.destroySkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_large_url);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// Replace low-res skybox with high-res skybox.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.engine.destroySkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_large_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
 
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.suzanne);
-});
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
+});<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Introduce trackball rotation</h2>
 <p>Add the following script tag to your HTML file. This imports a small third-party library that
 listens for drag events and computes a rotation matrix.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>&lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;//unpkg.com/gltumble&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>&lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;//unpkg.com/gltumble&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
 </pre></div>
 
 <p>Next, replace the <strong>initialize gltumble</strong> and <strong>apply gltumble matrix</strong> comments with the following
 two code snippets.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>Trackball(canvas,<span style="color: #BBB"> </span>{startSpin<span style="color: #666">:</span><span style="color: #BBB"> </span><span style="color: #666">0.035</span>});
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Trackball(canvas,<span style="color: #bbbbbb"> </span>{startSpin<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #666666">0.035</span>});<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>tcm<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>inst<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);
-tcm.setTransform(inst,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());
-inst.<span style="color: #A2F; font-weight: bold">delete</span>();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
+tcm.setTransform(inst,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());<span style="color: #bbbbbb"></span>
+inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>That's it, we now have a fast-loading interactive demo. The complete JavaScript file is available
+<p>That&#x27;s it, we now have a fast-loading interactive demo. The complete JavaScript file is available
 <a href="tutorial_suzanne.js">here</a>.</p>
 
 </body>

docs/webgl/tutorial_triangle.html

@@ -8,30 +8,30 @@
 <div class="demo_frame"><iframe src="demo_triangle.html"></iframe><a href="demo_triangle.html">&#x1F517;</a></div>
 <h2>Literate programming</h2>
 <p>The markdown source for this tutorial is not only used to generate this
-web page, it's also used to generate the JavaScript for the above demo.
+web page, it&#x27;s also used to generate the JavaScript for the above demo.
 We use a small Python script for weaving (generating HTML) and tangling
-(generating JS). In the code samples, you'll often see
+(generating JS). In the code samples, you&#x27;ll often see
 <code>// TODO: &lt;some task&gt;</code>. These are special markers that get replaced by
 subsequent code blocks.</p>
 <h2>Start your project</h2>
 <p>First, create a text file called <code>triangle.html</code> and fill it with the following HTML. This creates
 a mobile-friendly page with a full-screen canvas.</p>
 <div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #9C6500">&lt;!DOCTYPE html&gt;</span>
-&lt;<span style="color: #008000; font-weight: bold">html</span> <span style="color: #687822">lang</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;en&quot;</span>&gt;
+&lt;<span style="color: #008000; font-weight: bold">html</span> <span style="color: #687822">lang</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;en&quot;</span>&gt;
 &lt;<span style="color: #008000; font-weight: bold">head</span>&gt;
     &lt;<span style="color: #008000; font-weight: bold">title</span>&gt;Filament Tutorial&lt;/<span style="color: #008000; font-weight: bold">title</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #687822">charset</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;utf-8&quot;</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #687822">name</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;viewport&quot;</span> <span style="color: #687822">content</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;width=device-width,user-scalable=no,initial-scale=1&quot;</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">style</span>&gt;
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">body</span><span style="color: #BBB"> </span>{<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">margin</span>:<span style="color: #BBB"> </span><span style="color: #666">0</span>;<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">overflow</span>:<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">hidden</span>;<span style="color: #BBB"> </span>}
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">canvas</span><span style="color: #BBB"> </span>{<span style="color: #BBB"> </span>touch-action:<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">none</span>;<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">width</span>:<span style="color: #BBB"> </span><span style="color: #666">100</span><span style="color: #B00040">%</span>;<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">height</span>:<span style="color: #BBB"> </span><span style="color: #666">100</span><span style="color: #B00040">%</span>;<span style="color: #BBB"> </span>}
-<span style="color: #BBB">    </span>&lt;/<span style="color: #008000; font-weight: bold">style</span>&gt;
+    &lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #687822">charset</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;utf-8&quot;</span>&gt;
+    &lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #687822">name</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;viewport&quot;</span> <span style="color: #687822">content</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;width=device-width,user-scalable=no,initial-scale=1&quot;</span>&gt;
+    &lt;<span style="color: #008000; font-weight: bold">style</span>&gt;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">body</span><span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">margin</span>:<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>;<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">overflow</span>:<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">hidden</span>;<span style="color: #bbbbbb"> </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">canvas</span><span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"> </span>touch-action:<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">none</span>;<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">width</span>:<span style="color: #bbbbbb"> </span><span style="color: #666666">100</span><span style="color: #B00040">%</span>;<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">height</span>:<span style="color: #bbbbbb"> </span><span style="color: #666666">100</span><span style="color: #B00040">%</span>;<span style="color: #bbbbbb"> </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>&lt;/<span style="color: #008000; font-weight: bold">style</span>&gt;
 &lt;/<span style="color: #008000; font-weight: bold">head</span>&gt;
 &lt;<span style="color: #008000; font-weight: bold">body</span>&gt;
     &lt;<span style="color: #008000; font-weight: bold">canvas</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">canvas</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;filament.js&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;//unpkg.com/gl-matrix@2.8.1&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666">=</span><span style="color: #BA2121">&quot;triangle.js&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
+    &lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;filament.js&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
+    &lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;//unpkg.com/gl-matrix@2.8.1&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
+    &lt;<span style="color: #008000; font-weight: bold">script</span> <span style="color: #687822">src</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;triangle.js&quot;</span>&gt;&lt;/<span style="color: #008000; font-weight: bold">script</span>&gt;
 &lt;/<span style="color: #008000; font-weight: bold">body</span>&gt;
 &lt;/<span style="color: #008000; font-weight: bold">html</span>&gt;
 </pre></div>
@@ -48,63 +48,63 @@ a mobile-friendly page with a full-screen canvas.</p>
 <li><code>triangle.js</code> will contain your application code.</li>
 </ul>
 <p>Go ahead and create <code>triangle.js</code> with the following content.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">class</span><span style="color: #BBB"> </span>App<span style="color: #BBB"> </span>{
-<span style="color: #BBB">  </span><span style="color: #008000; font-weight: bold">constructor</span>()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create entities</span>
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #BBB">  </span>}
-<span style="color: #BBB">  </span>render()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span>
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #BBB">  </span>}
-<span style="color: #BBB">  </span>resize()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: adjust viewport and canvas</span>
-<span style="color: #BBB">  </span>}
-}
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create entities</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: adjust viewport and canvas</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 
-Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>],<span style="color: #BBB"> </span>()<span style="color: #BBB"> </span>=&gt;<span style="color: #BBB"> </span>{<span style="color: #BBB"> </span><span style="color: #008000">window</span>.app<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>App()<span style="color: #BBB"> </span>}<span style="color: #BBB"> </span>);
+Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App()<span style="color: #bbbbbb"> </span>}<span style="color: #bbbbbb"> </span>);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The two calls to <code>bind()</code> allow us to pass instance methods as callbacks for animation and resize
 events.</p>
 <p><code>Filament.init()</code> consumes two things: a list of asset URLs and a callback.</p>
 <p>The callback will be triggered only after all assets finish downloading and the Filament module has
-become ready. In our callback, we simply instantiated the <code>App</code> object, since we'll do most of the
+become ready. In our callback, we simply instantiated the <code>App</code> object, since we&#x27;ll do most of the
 work in its constructor. We also set the app instance into a <code>Window</code> property to make it accessible
 from the developer console.</p>
 <p>Go ahead and download <a href="triangle.filamat">triangle.filamat</a> and place it in your project folder.
 This is a <em>material package</em>, which is a binary file that contains shaders and other bits of data
-that define a PBR material. We'll learn more about material packages in the next tutorial.</p>
+that define a PBR material. We&#x27;ll learn more about material packages in the next tutorial.</p>
 <h2>Spawn a local server</h2>
 <p>Because of CORS restrictions, your web app cannot fetch the material package directly from the
 file system. One way around this is to create a temporary server using Python or node:</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>python3<span style="color: #BBB"> </span>-m<span style="color: #BBB"> </span>http.server<span style="color: #BBB">     </span><span style="color: #3D7B7B; font-style: italic"># Python 3</span>
-python<span style="color: #BBB"> </span>-m<span style="color: #BBB"> </span>SimpleHTTPServer<span style="color: #BBB"> </span><span style="color: #3D7B7B; font-style: italic"># Python 2.7</span>
-npx<span style="color: #BBB"> </span>http-server<span style="color: #BBB"> </span>-p<span style="color: #BBB"> </span><span style="color: #666">8000</span><span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic"># nodejs</span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>python3 -m http.server     <span style="color: #3D7B7B; font-style: italic"># Python 3</span>
+python -m SimpleHTTPServer <span style="color: #3D7B7B; font-style: italic"># Python 2.7</span>
+npx http-server -p <span style="color: #666666">8000</span>    <span style="color: #3D7B7B; font-style: italic"># nodejs</span>
 </pre></div>
 
 <p>To see if this works, navigate to <a href="http://localhost:8000">http://localhost:8000</a> and check if you
 can load the page without any errors appearing in the developer console.</p>
-<p>Take care not to use Python's simple server in production since it does not serve WebAssembly files
+<p>Take care not to use Python&#x27;s simple server in production since it does not serve WebAssembly files
 with the correct MIME type.</p>
 <h2>Create the Engine and Scene</h2>
-<p>We now have a basic skeleton that can respond to paint and resize events. Let's start adding
+<p>We now have a basic skeleton that can respond to paint and resize events. Let&#x27;s start adding
 Filament objects to the app. Insert the following code into the top of the app constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666">0</span>];
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>engine<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Engine.create(<span style="color: #008000; font-weight: bold">this</span>.canvas);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(<span style="color: #008000; font-weight: bold">this</span>.canvas);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The above snippet creates the <code>Engine</code> by passing it a canvas DOM object. The engine needs the
 canvas in order to create a WebGL 2.0 context in its contructor.</p>
 <p>The engine is a factory for many Filament entities, including <code>Scene</code>, which is a flat container of
-entities. Let's go ahead and create a scene, then add a blank entity called <code>triangle</code> into the
+entities. Let&#x27;s go ahead and create a scene, then add a blank entity called <code>triangle</code> into the
 scene.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createScene();
-<span style="color: #008000; font-weight: bold">this</span>.triangle<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.EntityManager.get().create();
-<span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.triangle);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createScene();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.triangle<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Filament uses an <a href="//en.wikipedia.org/wiki/Entity-component-system">Entity-Component System</a>.
@@ -112,30 +112,30 @@ The triangle entity in the above snippet does not yet have an associated compone
 tutorial we will make it into a <em>renderable</em>. Renderables are entities that have associated draw
 calls.</p>
 <h2>Construct typed arrays</h2>
-<p>Next we'll create two typed arrays: a positions array with XY coordinates for each vertex, and a
+<p>Next we&#x27;ll create two typed arrays: a positions array with XY coordinates for each vertex, and a
 colors array with a 32-bit word for each vertex.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>TRIANGLE_POSITIONS<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span><span style="color: #008000">Float32Array</span>([
-<span style="color: #BBB">    </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,
-<span style="color: #BBB">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">2</span><span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>),<span style="color: #BBB"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">2</span><span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>),
-<span style="color: #BBB">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">4</span><span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>),<span style="color: #BBB"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">4</span><span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>),
-]);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Float32Array</span>([<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">2</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">2</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">4</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">4</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"></span>
+]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>TRIANGLE_COLORS<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span><span style="color: #008000">Uint32Array</span>([<span style="color: #666">0xffff0000</span>,<span style="color: #BBB"> </span><span style="color: #666">0xff00ff00</span>,<span style="color: #BBB"> </span><span style="color: #666">0xff0000ff</span>]);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>TRIANGLE_COLORS<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Uint32Array</span>([<span style="color: #666666">0xffff0000</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0xff00ff00</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0xff0000ff</span>]);<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>Next we'll use the positions and colors buffers to create a single <code>VertexBuffer</code> object.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>VertexAttribute<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexAttribute;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>AttributeType<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexBuffer$AttributeType;
-<span style="color: #008000; font-weight: bold">this</span>.vb<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexBuffer.Builder()
-<span style="color: #BBB">    </span>.vertexCount(<span style="color: #666">3</span>)
-<span style="color: #BBB">    </span>.bufferCount(<span style="color: #666">2</span>)
-<span style="color: #BBB">    </span>.attribute(VertexAttribute.POSITION,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>AttributeType.FLOAT2,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">8</span>)
-<span style="color: #BBB">    </span>.attribute(VertexAttribute.COLOR,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span>AttributeType.UBYTE4,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">4</span>)
-<span style="color: #BBB">    </span>.normalized(VertexAttribute.COLOR)
-<span style="color: #BBB">    </span>.build(engine);
+<p>Next we&#x27;ll use the positions and colors buffers to create a single <code>VertexBuffer</code> object.</p>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>AttributeType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer$AttributeType;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.vb<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.vertexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.attribute(VertexAttribute.POSITION,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>AttributeType.FLOAT2,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">8</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.attribute(VertexAttribute.COLOR,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>AttributeType.UBYTE4,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.normalized(VertexAttribute.COLOR)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>TRIANGLE_POSITIONS);
-<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span>TRIANGLE_COLORS);
+<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_COLORS);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The above snippet first creates aliases for two enum types, then constructs the vertex buffer using
@@ -147,74 +147,74 @@ self-documenting.</p>
 <p>Our app sets up two buffer slots in the vertex buffer, and each slot is associated with a single
 attribute. Alternatively, we could have interleaved or concatenated these attributes into a single
 buffer slot.</p>
-<p>Next we'll construct an index buffer. The index buffer for our triangle is trivial: it simply holds
+<p>Next we&#x27;ll construct an index buffer. The index buffer for our triangle is trivial: it simply holds
 the integers 0,1,2.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.ib<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.IndexBuffer.Builder()
-<span style="color: #BBB">    </span>.indexCount(<span style="color: #666">3</span>)
-<span style="color: #BBB">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)
-<span style="color: #BBB">    </span>.build(engine);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.ib<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.indexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine,<span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span><span style="color: #008000">Uint16Array</span>([<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">2</span>]));
+<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine,<span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Uint16Array</span>([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">2</span>]));<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Note that constructing an index buffer is similar to constructing a vertex buffer, but it only has
 one buffer slot, and it can only contain two types of data (USHORT or UINT).</p>
 <h2>Finish up initialization</h2>
-<p>Next let's construct an actual <code>Material</code> from the material package that was downloaded (the
+<p>Next let&#x27;s construct an actual <code>Material</code> from the material package that was downloaded (the
 material is an object; the package is just a binary blob), then extract the default
 <code>MaterialInstance</code> from the material object. Material instances have concrete values for their
-parameters, and they can be bound to renderables. We'll learn more about material instances in the
+parameters, and they can be bound to renderables. We&#x27;ll learn more about material instances in the
 next tutorial.</p>
 <p>After extracting the material instance, we can finally create a renderable component for the
 triangle by setting up a bounding box and passing in the vertex and index buffers.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>mat<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createMaterial(<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>matinst<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>mat.getDefaultInstance();
-Filament.RenderableManager.Builder(<span style="color: #666">1</span>)
-<span style="color: #BBB">    </span>.boundingBox({<span style="color: #BBB"> </span>center<span style="color: #666">:</span><span style="color: #BBB"> </span>[<span style="color: #666">-1</span>,<span style="color: #BBB"> </span><span style="color: #666">-1</span>,<span style="color: #BBB"> </span><span style="color: #666">-1</span>],<span style="color: #BBB"> </span>halfExtent<span style="color: #666">:</span><span style="color: #BBB"> </span>[<span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>]<span style="color: #BBB"> </span>})
-<span style="color: #BBB">    </span>.material(<span style="color: #666">0</span>,<span style="color: #BBB"> </span>matinst)
-<span style="color: #BBB">    </span>.geometry(<span style="color: #666">0</span>,<span style="color: #BBB"> </span>Filament.RenderableManager$PrimitiveType.TRIANGLES,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.vb,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.ib)
-<span style="color: #BBB">    </span>.build(engine,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.triangle);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>mat<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createMaterial(<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>matinst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>mat.getDefaultInstance();<span style="color: #bbbbbb"></span>
+Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.boundingBox({<span style="color: #bbbbbb"> </span>center<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>],<span style="color: #bbbbbb"> </span>halfExtent<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]<span style="color: #bbbbbb"> </span>})<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinst)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.geometry(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>Filament.RenderableManager$PrimitiveType.TRIANGLES,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.vb,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.ib)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.build(engine,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>Next let's wrap up the initialization routine by creating the swap chain, renderer, camera, and
+<p>Next let&#x27;s wrap up the initialization routine by creating the swap chain, renderer, camera, and
 view.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createSwapChain();
-<span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createRenderer();
-<span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createCamera(Filament.EntityManager.get().create());
-<span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createView();
-<span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Set up a blue-green background:</span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #666">:</span><span style="color: #BBB"> </span>[<span style="color: #666">0.0</span>,<span style="color: #BBB"> </span><span style="color: #666">0.1</span>,<span style="color: #BBB"> </span><span style="color: #666">0.2</span>,<span style="color: #BBB"> </span><span style="color: #666">1.0</span>],<span style="color: #BBB"> </span>clear<span style="color: #666">:</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">true</span>});
+<span style="color: #3D7B7B; font-style: italic">// Set up a blue-green background:</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.2</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>],<span style="color: #bbbbbb"> </span>clear<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">true</span>});<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Adjust the initial viewport:</span>
-<span style="color: #008000; font-weight: bold">this</span>.resize();
+<span style="color: #3D7B7B; font-style: italic">// Adjust the initial viewport:</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>At this point, we're done creating all Filament entities, and the code should run without errors.
+<p>At this point, we&#x27;re done creating all Filament entities, and the code should run without errors.
 However the canvas is still blank!</p>
 <h2>Render and resize handlers</h2>
 <p>Recall that our App class has a skeletal render method, which the browser calls every time it needs
 to repaint. Often this is 60 times a second.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>render()<span style="color: #BBB"> </span>{
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span>
-<span style="color: #BBB">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-}
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<p>Let's flesh this out by rotating the triangle and invoking the Filament renderer. Add the following
+<p>Let&#x27;s flesh this out by rotating the triangle and invoking the Filament renderer. Add the following
 code to the top of the render method.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// Rotate the triangle.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>radians<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">Date</span>.now()<span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">1000</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>transform<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>mat4.fromRotation(mat4.create(),<span style="color: #BBB"> </span>radians,<span style="color: #BBB"> </span>[<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>]);
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>tcm<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>inst<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.triangle);
-tcm.setTransform(inst,<span style="color: #BBB"> </span>transform);
-inst.<span style="color: #A2F; font-weight: bold">delete</span>();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// Rotate the triangle.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>radians<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Date</span>.now()<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1000</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>transform<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>mat4.fromRotation(mat4.create(),<span style="color: #bbbbbb"> </span>radians,<span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
+tcm.setTransform(inst,<span style="color: #bbbbbb"> </span>transform);<span style="color: #bbbbbb"></span>
+inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Render the frame.</span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
+<span style="color: #3D7B7B; font-style: italic">// Render the frame.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The first half of our render method obtains the transform component of the triangle entity and uses
@@ -225,19 +225,19 @@ that it wants to skip a frame, hence the <code>if</code> statement.</p>
 <p>One last step. Add the following code to the resize method. This adjusts the resolution of the
 rendering surface when the window size changes, taking <code>devicePixelRatio</code> into account for high-DPI
 displays. It also adjusts the camera frustum accordingly.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>dpr<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>width<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span>dpr;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>height<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span>dpr;
-<span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>width,<span style="color: #BBB"> </span>height]);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>aspect<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>width<span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span>height;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>Projection<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Camera$Projection;
-<span style="color: #008000; font-weight: bold">this</span>.camera.setProjection(Projection.ORTHO,<span style="color: #BBB"> </span><span style="color: #666">-</span>aspect,<span style="color: #BBB"> </span>aspect,<span style="color: #BBB"> </span><span style="color: #666">-1</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">1</span>);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Projection<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Projection;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.camera.setProjection(Projection.ORTHO,<span style="color: #bbbbbb"> </span><span style="color: #666666">-</span>aspect,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>You should now have a spinning triangle! The completed JavaScript is available
 <a href="tutorial_triangle.js">here</a>.</p>
-<p>In the <a href="tutorial_redball.html">next tutorial</a>, we'll take a closer look at Filament materials and 3D rendering.</p>
+<p>In the <a href="tutorial_redball.html">next tutorial</a>, we&#x27;ll take a closer look at Filament materials and 3D rendering.</p>
 
 </body>
 </html>

filament/backend/include/backend/DriverEnums.h

@@ -1455,11 +1455,6 @@ enum class Workaround : uint16_t {
     DISABLE_BLIT_INTO_TEXTURE_ARRAY,
     // Multiple workarounds needed for PowerVR GPUs
     POWER_VR_SHADER_WORKAROUNDS,
-    // Some browsers, such as Firefox on Mac, struggle with slow shader compile/link times when
-    // creating programs for the default material, leading to startup stutters. This workaround
-    // prevents these stutters by not precaching depth variants of the default material for those
-    // particular browsers.
-    DISABLE_DEPTH_PRECACHE_FOR_DEFAULT_MATERIAL,
 };
 
 using StereoscopicType = backend::Platform::StereoscopicType;

filament/backend/include/backend/Platform.h

@@ -149,13 +149,6 @@ public:
          *      - PlatformEGLAndroid
          */
         bool assertNativeWindowIsValid = false;
-
-        /**
-         * The action to take if a Drawable cannot be acquired. If true, the
-         * frame is aborted instead of panic. This is only supported for:
-         *      - PlatformMetal
-         */
-        bool metalDisablePanicOnDrawableFailure = false;
     };
 
     Platform() noexcept;

filament/backend/src/CommandStream.cpp

@@ -84,7 +84,7 @@ void CommandStream::execute(void* buffer) {
 
     Profiler profiler;
 
-    if (SYSTRACE_TAG) {
+    if constexpr (SYSTRACE_TAG) {
         if (UTILS_UNLIKELY(mUsePerformanceCounter)) {
             // we want to remove all this when tracing is completely disabled
             profiler.resetEvents(Profiler::EV_CPU_CYCLES  | Profiler::EV_BPU_MISSES);
@@ -100,7 +100,7 @@ void CommandStream::execute(void* buffer) {
         }
     });
 
-    if (SYSTRACE_TAG) {
+    if constexpr (SYSTRACE_TAG) {
         if (UTILS_UNLIKELY(mUsePerformanceCounter)) {
             // we want to remove all this when tracing is completely disabled
             profiler.stop();

filament/backend/src/metal/PlatformMetal.mm

@@ -45,9 +45,6 @@ PlatformMetal::~PlatformMetal() noexcept {
 }
 
 Driver* PlatformMetal::createDriver(void* /*sharedContext*/, const Platform::DriverConfig& driverConfig) noexcept {
-    pImpl->mDrawableFailureBehavior = driverConfig.metalDisablePanicOnDrawableFailure
-            ? DrawableFailureBehavior::ABORT_FRAME
-            : DrawableFailureBehavior::PANIC;
     return MetalDriverFactory::create(this, driverConfig);
 }
 

filament/backend/src/opengl/OpenGLContext.cpp

@@ -340,7 +340,7 @@ void OpenGLContext::setDefaultState() noexcept {
         GL_DITHER,
         GL_SAMPLE_ALPHA_TO_COVERAGE,
         GL_SAMPLE_COVERAGE,
-        GL_POLYGON_OFFSET_FILL,
+        GL_POLYGON_OFFSET_FILL,  
     };
 
     UTILS_NOUNROLL
@@ -600,12 +600,6 @@ void OpenGLContext::initBugs(Bugs* bugs, Extensions const& exts,
         // For Mozilla, the issue appears to be observed regardless of whether the renderer is
         // ANGLE or not. (b/376125497)
         bugs->rebind_buffer_after_deletion = true;
-
-        // We disable depth precache for the default material on Mozilla FireFox. It struggles with
-        // slow shader compile/link times if the shader contains large arrays of uniform. Some depth
-        // program variants have skinning-related data, which incurs this slowness and end up
-        // causing an initial startup stalls. (b/392917621)
-        bugs->disable_depth_precache_for_default_material = true;
     }
 
 #ifdef BACKEND_OPENGL_VERSION_GLES
@@ -1075,41 +1069,41 @@ void OpenGLContext::resetState() noexcept {
     glCullFace(state.raster.cullFace);
     glBlendEquationSeparate(state.raster.blendEquationRGB, state.raster.blendEquationA);
     glBlendFuncSeparate(
-        state.raster.blendFunctionSrcRGB,
+        state.raster.blendFunctionSrcRGB, 
         state.raster.blendFunctionDstRGB,
         state.raster.blendFunctionSrcA,
         state.raster.blendFunctionDstA
     );
     glColorMask(
-        state.raster.colorMask,
-        state.raster.colorMask,
-        state.raster.colorMask,
+        state.raster.colorMask, 
+        state.raster.colorMask, 
+        state.raster.colorMask, 
         state.raster.colorMask
     );
     glDepthMask(state.raster.depthMask);
     glDepthFunc(state.raster.depthFunc);
-
+    
     // state.stencil
     glStencilFuncSeparate(
-        GL_FRONT,
-        state.stencil.front.func.func,
-        state.stencil.front.func.ref,
+        GL_FRONT, 
+        state.stencil.front.func.func, 
+        state.stencil.front.func.ref, 
         state.stencil.front.func.mask
     );
     glStencilFuncSeparate(
-        GL_BACK,
-        state.stencil.back.func.func,
-        state.stencil.back.func.ref,
+        GL_BACK, 
+        state.stencil.back.func.func, 
+        state.stencil.back.func.ref, 
         state.stencil.back.func.mask
     );
     glStencilOpSeparate(
-        GL_FRONT,
+        GL_FRONT, 
         state.stencil.front.op.sfail,
         state.stencil.front.op.dpfail,
         state.stencil.front.op.dppass
     );
     glStencilOpSeparate(
-        GL_BACK,
+        GL_BACK, 
         state.stencil.back.op.sfail,
         state.stencil.back.op.dpfail,
         state.stencil.back.op.dppass
@@ -1212,9 +1206,9 @@ void OpenGLContext::resetState() noexcept {
 
     // state.window
     glScissor(
-        state.window.scissor.x,
-        state.window.scissor.y,
-        state.window.scissor.z,
+        state.window.scissor.x, 
+        state.window.scissor.y, 
+        state.window.scissor.z, 
         state.window.scissor.w
     );
     glViewport(

filament/backend/src/opengl/OpenGLContext.h

@@ -328,11 +328,6 @@ public:
         // bugs or performance issues.
         bool force_feature_level0;
 
-        // Some browsers, such as Firefox on Mac, struggle with slow shader compile/link times when
-        // creating programs for the default material, leading to startup stutters. This workaround
-        // prevents these stutters by not precaching depth variants of the default material for
-        // those particular browsers.
-        bool disable_depth_precache_for_default_material;
 
     } bugs = {};
 
@@ -574,9 +569,6 @@ private:
             {   bugs.force_feature_level0,
                     "force_feature_level0",
                     ""},
-            {   bugs.disable_depth_precache_for_default_material,
-                    "disable_depth_precache_for_default_material",
-                    ""},
     }};
 
     // this is chosen to minimize code size

filament/backend/src/opengl/OpenGLDriver.cpp

@@ -2435,8 +2435,6 @@ bool OpenGLDriver::isWorkaroundNeeded(Workaround workaround) {
             return mContext.bugs.disable_blit_into_texture_array;
         case Workaround::POWER_VR_SHADER_WORKAROUNDS:
             return mContext.bugs.powervr_shader_workarounds;
-        case Workaround::DISABLE_DEPTH_PRECACHE_FOR_DEFAULT_MATERIAL:
-            return mContext.bugs.disable_depth_precache_for_default_material;
         default:
             return false;
     }

filament/backend/src/vulkan/VulkanConstants.h

@@ -152,12 +152,12 @@ static_assert(FVK_ENABLED(FVK_DEBUG_VALIDATION));
 #elif FVK_ENABLED(FVK_DEBUG_SYSTRACE)
 
     #include <utils/Systrace.h>
-    
+
     #define FVK_SYSTRACE_CONTEXT()      SYSTRACE_CONTEXT()
     #define FVK_SYSTRACE_START(marker)  SYSTRACE_NAME_BEGIN(marker)
     #define FVK_SYSTRACE_END()          SYSTRACE_NAME_END()
-    #define FVK_SYSTRACE_SCOPE()        SYSTRACE_NAME(__func__)
-    #define FVK_PROFILE_MARKER(marker)  FVK_SYSTRACE_SCOPE()
+    #define FVK_SYSTRACE_SCOPE()        SYSTRACE_CALL()
+    #define FVK_PROFILE_MARKER(marker)  SYSTRACE_CALL()
 
 #else
     #define FVK_SYSTRACE_CONTEXT()

filament/backend/src/webgpu/WebGPUDriver.cpp

@@ -292,22 +292,7 @@ void WebGPUDriver::endFrame(uint32_t frameId) {
 void WebGPUDriver::flush(int) {
 }
 
-void WebGPUDriver::finish(int /* dummy */) {
-    if (mCommandEncoder != nullptr) {
-        // submit the command buffer thus far...
-        assert_invariant(mRenderPassEncoder == nullptr);
-        wgpu::CommandBufferDescriptor commandBufferDescriptor{
-            .label = "command_buffer",
-        };
-        mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
-        assert_invariant(mCommandBuffer);
-        mQueue.Submit(1, &mCommandBuffer);
-        mCommandBuffer = nullptr;
-        // create a new command buffer encoder to continue recording the next command for frame...
-        wgpu::CommandEncoderDescriptor commandEncoderDescriptor = { .label = "command_encoder" };
-        mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
-        assert_invariant(mCommandEncoder);
-    }
+void WebGPUDriver::finish(int) {
 }
 
 void WebGPUDriver::destroyRenderPrimitive(Handle<HwRenderPrimitive> rph) {
@@ -389,9 +374,7 @@ Handle<HwTexture> WebGPUDriver::createTextureS() noexcept {
     return allocHandle<WGPUTexture>();
 }
 
-Handle<HwTexture> WebGPUDriver::importTextureS() noexcept {
-    return Handle<HwTexture>((Handle<HwTexture>::HandleId) mNextFakeHandle++);
-}
+Handle<HwTexture> WebGPUDriver::importTextureS() noexcept { return allocHandle<WGPUTexture>(); }
 
 Handle<HwProgram> WebGPUDriver::createProgramS() noexcept {
     return allocHandle<WGPUProgram>();
@@ -410,7 +393,7 @@ Handle<HwIndexBuffer> WebGPUDriver::createIndexBufferS() noexcept {
 }
 
 Handle<HwTexture> WebGPUDriver::createTextureViewS() noexcept {
-    return Handle<HwTexture>((Handle<HwTexture>::HandleId) mNextFakeHandle++);
+    return allocHandle<WGPUTexture>();
 }
 
 Handle<HwBufferObject> WebGPUDriver::createBufferObjectS() noexcept {
@@ -438,7 +421,7 @@ Handle<HwVertexBufferInfo> WebGPUDriver::createVertexBufferInfoS() noexcept {
 }
 
 Handle<HwTexture> WebGPUDriver::createTextureViewSwizzleS() noexcept {
-    return Handle<HwTexture>((Handle<HwTexture>::HandleId) mNextFakeHandle++);
+    return allocHandle<WGPUTexture>();
 }
 
 Handle<HwRenderTarget> WebGPUDriver::createDefaultRenderTargetS() noexcept {
@@ -450,15 +433,15 @@ Handle<HwDescriptorSetLayout> WebGPUDriver::createDescriptorSetLayoutS() noexcep
 }
 
 Handle<HwTexture> WebGPUDriver::createTextureExternalImageS() noexcept {
-    return Handle<HwTexture>((Handle<HwTexture>::HandleId) mNextFakeHandle++);
+    return allocHandle<WGPUTexture>();
 }
 
 Handle<HwTexture> WebGPUDriver::createTextureExternalImage2S() noexcept {
-    return Handle<HwTexture>((Handle<HwTexture>::HandleId) mNextFakeHandle++);
+    return allocHandle<WGPUTexture>();
 }
 
 Handle<HwTexture> WebGPUDriver::createTextureExternalImagePlaneS() noexcept {
-    return Handle<HwTexture>((Handle<HwTexture>::HandleId) mNextFakeHandle++);
+    return allocHandle<WGPUTexture>();
 }
 
 void WebGPUDriver::createSwapChainR(Handle<HwSwapChain> sch, void* nativeWindow, uint64_t flags) {
@@ -512,30 +495,46 @@ void WebGPUDriver::createBufferObjectR(Handle<HwBufferObject> boh, uint32_t byte
 
 void WebGPUDriver::createTextureR(Handle<HwTexture> th, SamplerType target, uint8_t levels,
         TextureFormat format, uint8_t samples, uint32_t w, uint32_t h, uint32_t depth,
-        TextureUsage usage) {}
+        TextureUsage usage) {
+    constructHandle<WGPUTexture>(th, target, levels, format, samples, w, h, depth, usage, mDevice);
+}
 
 void WebGPUDriver::createTextureViewR(Handle<HwTexture> th, Handle<HwTexture> srch,
-        uint8_t baseLevel, uint8_t levelCount) {}
+        uint8_t baseLevel, uint8_t levelCount) {
+    auto source = handleCast<WGPUTexture>(srch);
+
+    constructHandle<WGPUTexture>(th, source, baseLevel, levelCount);
+}
 
 void WebGPUDriver::createTextureViewSwizzleR(Handle<HwTexture> th, Handle<HwTexture> srch,
         backend::TextureSwizzle r, backend::TextureSwizzle g, backend::TextureSwizzle b,
-        backend::TextureSwizzle a) {}
+        backend::TextureSwizzle a) {
+    PANIC_POSTCONDITION("Swizzle WebGPU Texture is not supported");
+}
 
 void WebGPUDriver::createTextureExternalImage2R(Handle<HwTexture> th, backend::SamplerType target,
         backend::TextureFormat format, uint32_t width, uint32_t height, backend::TextureUsage usage,
-        Platform::ExternalImageHandleRef externalImage) {}
+        Platform::ExternalImageHandleRef externalImage) {
+    PANIC_POSTCONDITION("External WebGPU Texture is not supported");
+}
 
 void WebGPUDriver::createTextureExternalImageR(Handle<HwTexture> th, backend::SamplerType target,
         backend::TextureFormat format, uint32_t width, uint32_t height, backend::TextureUsage usage,
-        void* externalImage) {}
+        void* externalImage) {
+    PANIC_POSTCONDITION("External WebGPU Texture is not supported");
+}
 
 void WebGPUDriver::createTextureExternalImagePlaneR(Handle<HwTexture> th,
         backend::TextureFormat format, uint32_t width, uint32_t height, backend::TextureUsage usage,
-        void* image, uint32_t plane) {}
+        void* image, uint32_t plane) {
+    PANIC_POSTCONDITION("External WebGPU Texture is not supported");
+}
 
 void WebGPUDriver::importTextureR(Handle<HwTexture> th, intptr_t id, SamplerType target,
         uint8_t levels, TextureFormat format, uint8_t samples, uint32_t w, uint32_t h,
-        uint32_t depth, TextureUsage usage) {}
+        uint32_t depth, TextureUsage usage) {
+    PANIC_POSTCONDITION("Import WebGPU Texture is not supported");
+}
 
 void WebGPUDriver::createRenderPrimitiveR(Handle<HwRenderPrimitive> rph, Handle<HwVertexBuffer> vbh,
         Handle<HwIndexBuffer> ibh, PrimitiveType pt) {
@@ -612,7 +611,7 @@ FenceStatus WebGPUDriver::getFenceStatus(Handle<HwFence> fh) {
 // We create all textures using VK_IMAGE_TILING_OPTIMAL, so our definition of "supported" is that
 // the GPU supports the given texture format with non-zero optimal tiling features.
 bool WebGPUDriver::isTextureFormatSupported(TextureFormat format) {
-    return true;
+    return WGPUTexture::fToWGPUTextureFormat(format) != wgpu::TextureFormat::Undefined;
 }
 
 bool WebGPUDriver::isTextureSwizzleSupported() {
@@ -761,7 +760,12 @@ void WebGPUDriver::compilePrograms(CompilerPriorityQueue priority,
 }
 
 void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, const RenderPassParams& params) {
+    wgpu::CommandEncoderDescriptor commandEncoderDescriptor = {
+        .label = "command_encoder"
+    };
+    mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
     assert_invariant(mCommandEncoder);
+
     // TODO: Remove this code once WebGPU pipeline is implemented
     static float red = 1.0f;
     if (red - 0.01 > 0) {
@@ -791,9 +795,14 @@ void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, const RenderPassP
             params.viewport.width, params.viewport.height, params.depthRange.near, params.depthRange.far);
 }
 
-void WebGPUDriver::endRenderPass(int /* dummy */) {
+void WebGPUDriver::endRenderPass(int) {
     mRenderPassEncoder.End();
     mRenderPassEncoder = nullptr;
+    wgpu::CommandBufferDescriptor commandBufferDescriptor {
+        .label = "command_buffer",
+    };
+    mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
+    assert_invariant(mCommandBuffer);
 }
 
 void WebGPUDriver::nextSubpass(int) {
@@ -808,19 +817,9 @@ void WebGPUDriver::makeCurrent(Handle<HwSwapChain> drawSch, Handle<HwSwapChain>
     wgpu::Extent2D surfaceSize = mPlatform.getSurfaceExtent(mNativeWindow);
     mTextureView = mSwapChain->getCurrentSurfaceTextureView(surfaceSize);
     assert_invariant(mTextureView);
-    wgpu::CommandEncoderDescriptor commandEncoderDescriptor = {
-        .label = "command_encoder"
-    };
-    mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
-    assert_invariant(mCommandEncoder);
 }
 
 void WebGPUDriver::commit(Handle<HwSwapChain> sch) {
-    wgpu::CommandBufferDescriptor commandBufferDescriptor{
-        .label = "command_buffer",
-    };
-    mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
-    assert_invariant(mCommandBuffer);
     mCommandEncoder = nullptr;
     mQueue.Submit(1, &mCommandBuffer);
     mCommandBuffer = nullptr;

filament/backend/src/webgpu/WebGPUHandles.cpp

@@ -294,4 +294,362 @@ void WebGPUDescriptorSet::addEntry(uint index, wgpu::BindGroupEntry&& entry) {
     // layout index for efficiency. Add guards if wrong.
     entries[index] = std::move(entry);
 }
+// From createTextureR
+WGPUTexture::WGPUTexture(SamplerType target, uint8_t levels, TextureFormat format, uint8_t samples,
+        uint32_t width, uint32_t height, uint32_t depth, TextureUsage usage,
+        wgpu::Device device) noexcept {
+
+    // First the texture aspect
+    wgpu::TextureDescriptor desc;
+
+    switch (target) {
+        case SamplerType::SAMPLER_CUBEMAP:
+        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
+        case SamplerType::SAMPLER_2D:
+        case SamplerType::SAMPLER_2D_ARRAY:
+        // Should be safe to assume external is 2d
+        case SamplerType::SAMPLER_EXTERNAL: {
+            desc.dimension = wgpu::TextureDimension::e2D;
+            break;
+        }
+        case SamplerType::SAMPLER_3D: {
+            desc.dimension = wgpu::TextureDimension::e3D;
+            break;
+        }
+    }
+    desc.size = { .width = width, .height = height, .depthOrArrayLayers = depth };
+    desc.format = fToWGPUTextureFormat(format);
+    assert_invariant(desc.format != wgpu::TextureFormat::Undefined);
+
+    // WGPU requires this to be true. Filament should comply
+    assert(samples == 1 || samples || 4);
+
+    desc.sampleCount = samples;
+    desc.usage = fToWGPUTextureUsage(usage);
+    desc.mipLevelCount = levels;
+
+    // TODO Is this fine? Could do all-the-things, a naive mapping or get something from Filament
+    desc.viewFormats = nullptr;
+
+    texture = device.CreateTexture(&desc);
+
+    // TODO should a default levelCount be something other than 0? Sample count?
+    texView = makeTextureView(0, 1);
+}
+// From createTextureViewR
+WGPUTexture::WGPUTexture(WGPUTexture* src, uint8_t baseLevel, uint8_t levelCount) noexcept {
+    texture = src->texture;
+    texView = makeTextureView(baseLevel, levelCount);
+}
+
+wgpu::TextureUsage WGPUTexture::fToWGPUTextureUsage(const TextureUsage& fUsage) {
+    wgpu::TextureUsage retUsage = wgpu::TextureUsage::None;
+
+    // Basing this mapping off of VulkanTexture.cpp's getUsage func and suggestions from Gemini
+    // TODO Validate assumptions, revisit if issues.
+    if (any(TextureUsage::BLIT_SRC & fUsage)) {
+        retUsage |= wgpu::TextureUsage::CopySrc;
+    }
+    if (any((TextureUsage::BLIT_DST | TextureUsage::UPLOADABLE) & fUsage)) {
+        retUsage |= wgpu::TextureUsage::CopyDst;
+    }
+    if (any(TextureUsage::SAMPLEABLE & fUsage)) {
+        retUsage |= wgpu::TextureUsage::TextureBinding;
+    }
+    // WGPU Render attachment covers either color or stencil situation dependant
+    // NOTE: Depth attachment isn't used this way in Vulkan but logically maps to WGPU docs. If
+    // issues, investigate here.
+    if (any((TextureUsage::COLOR_ATTACHMENT | TextureUsage::STENCIL_ATTACHMENT |
+                    TextureUsage::DEPTH_ATTACHMENT) &
+                fUsage)) {
+        retUsage |= wgpu::TextureUsage::RenderAttachment;
+    }
+
+    // This is from Vulkan logic- if there are any issues try disabling this first, allows perf
+    // benefit though
+    const bool useTransientAttachment =
+            // Usage consists of attachment flags only.
+            none(fUsage & ~TextureUsage::ALL_ATTACHMENTS) &&
+            // Usage contains at least one attachment flag.
+            any(fUsage & TextureUsage::ALL_ATTACHMENTS) &&
+            // Depth resolve cannot use transient attachment because it uses a custom shader.
+            // TODO: see VulkanDriver::isDepthStencilResolveSupported() to know when to remove this
+            // restriction.
+            // Note that the custom shader does not resolve stencil. We do need to move to vk 1.2
+            // and above to be able to support stencil resolve (along with depth).
+            !(any(fUsage & TextureUsage::DEPTH_ATTACHMENT) && samples > 1);
+    if (useTransientAttachment) {
+        retUsage |= wgpu::TextureUsage::TransientAttachment;
+    }
+    // NOTE: Unused wgpu flags:
+    //  StorageBinding
+    //  StorageAttachment
+
+    // NOTE: Unused Filament flags:
+    //  SUBPASS_INPUT VK goes to input attachment which we don't support right now
+    //  PROTECTED
+    return retUsage;
+}
+wgpu::TextureFormat WGPUTexture::fToWGPUTextureFormat(const TextureFormat& fUsage) {
+    switch (fUsage) {
+        case filament::backend::TextureFormat::R8:
+            return wgpu::TextureFormat::R8Unorm;
+        case filament::backend::TextureFormat::R8_SNORM:
+            return wgpu::TextureFormat::R8Snorm;
+        case filament::backend::TextureFormat::R8UI:
+            return wgpu::TextureFormat::R8Uint;
+        case filament::backend::TextureFormat::R8I:
+            return wgpu::TextureFormat::R8Sint;
+        case filament::backend::TextureFormat::STENCIL8:
+            return wgpu::TextureFormat::Stencil8;
+        case filament::backend::TextureFormat::R16F:
+            return wgpu::TextureFormat::R16Float;
+        case filament::backend::TextureFormat::R16UI:
+            return wgpu::TextureFormat::R16Uint;
+        case filament::backend::TextureFormat::R16I:
+            return wgpu::TextureFormat::R16Sint;
+        case filament::backend::TextureFormat::RG8:
+            return wgpu::TextureFormat::RG8Unorm;
+        case filament::backend::TextureFormat::RG8_SNORM:
+            return wgpu::TextureFormat::RG8Snorm;
+        case filament::backend::TextureFormat::RG8UI:
+            return wgpu::TextureFormat::RG8Uint;
+        case filament::backend::TextureFormat::RG8I:
+            return wgpu::TextureFormat::RG8Sint;
+        case filament::backend::TextureFormat::R32F:
+            return wgpu::TextureFormat::R32Float;
+        case filament::backend::TextureFormat::R32UI:
+            return wgpu::TextureFormat::R32Uint;
+        case filament::backend::TextureFormat::R32I:
+            return wgpu::TextureFormat::R32Sint;
+        case filament::backend::TextureFormat::RG16F:
+            return wgpu::TextureFormat::RG16Float;
+        case filament::backend::TextureFormat::RG16UI:
+            return wgpu::TextureFormat::RG16Uint;
+        case filament::backend::TextureFormat::RG16I:
+            return wgpu::TextureFormat::RG16Sint;
+        case filament::backend::TextureFormat::RGBA8:
+            return wgpu::TextureFormat::RGBA8Unorm;
+        case filament::backend::TextureFormat::SRGB8_A8:
+            return wgpu::TextureFormat::RGBA8UnormSrgb;
+        case filament::backend::TextureFormat::RGBA8_SNORM:
+            return wgpu::TextureFormat::RGBA8Snorm;
+        case filament::backend::TextureFormat::RGBA8UI:
+            return wgpu::TextureFormat::RGBA8Uint;
+        case filament::backend::TextureFormat::RGBA8I:
+            return wgpu::TextureFormat::RGBA8Sint;
+        case filament::backend::TextureFormat::DEPTH16:
+            return wgpu::TextureFormat::Depth16Unorm;
+        case filament::backend::TextureFormat::DEPTH24:
+            return wgpu::TextureFormat::Depth24Plus;
+        case filament::backend::TextureFormat::DEPTH32F:
+            return wgpu::TextureFormat::Depth32Float;
+        case filament::backend::TextureFormat::DEPTH24_STENCIL8:
+            return wgpu::TextureFormat::Depth24PlusStencil8;
+        case filament::backend::TextureFormat::DEPTH32F_STENCIL8:
+            return wgpu::TextureFormat::Depth32FloatStencil8;
+        case filament::backend::TextureFormat::RG32F:
+            return wgpu::TextureFormat::RG32Float;
+        case filament::backend::TextureFormat::RG32UI:
+            return wgpu::TextureFormat::RG32Uint;
+        case filament::backend::TextureFormat::RG32I:
+            return wgpu::TextureFormat::RG32Sint;
+        case filament::backend::TextureFormat::RGBA16F:
+            return wgpu::TextureFormat::RGBA16Float;
+        case filament::backend::TextureFormat::RGBA16UI:
+            return wgpu::TextureFormat::RGBA16Uint;
+        case filament::backend::TextureFormat::RGBA16I:
+            return wgpu::TextureFormat::RGBA16Sint;
+        case filament::backend::TextureFormat::RGBA32F:
+            return wgpu::TextureFormat::RGBA32Float;
+        case filament::backend::TextureFormat::RGBA32UI:
+            return wgpu::TextureFormat::RGBA32Uint;
+        case filament::backend::TextureFormat::RGBA32I:
+            return wgpu::TextureFormat::RGBA32Sint;
+        case filament::backend::TextureFormat::EAC_R11:
+            return wgpu::TextureFormat::EACR11Unorm;
+        case filament::backend::TextureFormat::EAC_R11_SIGNED:
+            return wgpu::TextureFormat::EACR11Snorm;
+        case filament::backend::TextureFormat::EAC_RG11:
+            return wgpu::TextureFormat::EACRG11Unorm;
+        case filament::backend::TextureFormat::EAC_RG11_SIGNED:
+            return wgpu::TextureFormat::EACRG11Snorm;
+        case filament::backend::TextureFormat::ETC2_RGB8:
+            return wgpu::TextureFormat::ETC2RGB8Unorm;
+        case filament::backend::TextureFormat::ETC2_SRGB8:
+            return wgpu::TextureFormat::ETC2RGB8UnormSrgb;
+        case filament::backend::TextureFormat::ETC2_RGB8_A1:
+            return wgpu::TextureFormat::ETC2RGB8A1Unorm;
+        case filament::backend::TextureFormat::ETC2_SRGB8_A1:
+            return wgpu::TextureFormat::ETC2RGB8A1UnormSrgb;
+        case filament::backend::TextureFormat::ETC2_EAC_RGBA8:
+            return wgpu::TextureFormat::ETC2RGBA8Unorm;
+        case filament::backend::TextureFormat::ETC2_EAC_SRGBA8:
+            return wgpu::TextureFormat::ETC2RGBA8UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_4x4:
+            return wgpu::TextureFormat::ASTC4x4Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_4x4:
+            return wgpu::TextureFormat::ASTC4x4UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_5x4:
+            return wgpu::TextureFormat::ASTC5x4Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_5x4:
+            return wgpu::TextureFormat::ASTC5x4UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_5x5:
+            return wgpu::TextureFormat::ASTC5x5Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_5x5:
+            return wgpu::TextureFormat::ASTC5x5UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_6x5:
+            return wgpu::TextureFormat::ASTC6x5Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_6x5:
+            return wgpu::TextureFormat::ASTC6x5UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_6x6:
+            return wgpu::TextureFormat::ASTC6x6Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_6x6:
+            return wgpu::TextureFormat::ASTC6x6UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_8x5:
+            return wgpu::TextureFormat::ASTC8x5Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_8x5:
+            return wgpu::TextureFormat::ASTC8x5UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_8x6:
+            return wgpu::TextureFormat::ASTC8x6Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_8x6:
+            return wgpu::TextureFormat::ASTC8x6UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_8x8:
+            return wgpu::TextureFormat::ASTC8x8Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_8x8:
+            return wgpu::TextureFormat::ASTC8x8UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_10x5:
+            return wgpu::TextureFormat::ASTC10x5Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_10x5:
+            return wgpu::TextureFormat::ASTC10x5UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_10x6:
+            return wgpu::TextureFormat::ASTC10x6Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_10x6:
+            return wgpu::TextureFormat::ASTC10x6UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_10x8:
+            return wgpu::TextureFormat::ASTC10x8Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_10x8:
+            return wgpu::TextureFormat::ASTC10x8UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_10x10:
+            return wgpu::TextureFormat::ASTC10x10Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_10x10:
+            return wgpu::TextureFormat::ASTC10x10UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_12x10:
+            return wgpu::TextureFormat::ASTC12x10Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_12x10:
+            return wgpu::TextureFormat::ASTC12x10UnormSrgb;
+        case filament::backend::TextureFormat::RGBA_ASTC_12x12:
+            return wgpu::TextureFormat::ASTC12x12Unorm;
+        case filament::backend::TextureFormat::SRGB8_ALPHA8_ASTC_12x12:
+            return wgpu::TextureFormat::ASTC12x12UnormSrgb;
+        case filament::backend::TextureFormat::RED_RGTC1:
+            return wgpu::TextureFormat::BC4RUnorm;
+        case filament::backend::TextureFormat::SIGNED_RED_RGTC1:
+            return wgpu::TextureFormat::BC4RSnorm;
+        case filament::backend::TextureFormat::RED_GREEN_RGTC2:
+            return wgpu::TextureFormat::BC5RGUnorm;
+        case filament::backend::TextureFormat::SIGNED_RED_GREEN_RGTC2:
+            return wgpu::TextureFormat::BC5RGSnorm;
+        case filament::backend::TextureFormat::RGB_BPTC_UNSIGNED_FLOAT:
+            return wgpu::TextureFormat::BC6HRGBUfloat;
+        case filament::backend::TextureFormat::RGB_BPTC_SIGNED_FLOAT:
+            return wgpu::TextureFormat::BC6HRGBFloat;
+        case filament::backend::TextureFormat::RGBA_BPTC_UNORM:
+            return wgpu::TextureFormat::BC7RGBAUnorm;
+        case filament::backend::TextureFormat::SRGB_ALPHA_BPTC_UNORM:
+            return wgpu::TextureFormat::BC7RGBAUnormSrgb;
+        case filament::backend::TextureFormat::RGB565:
+            // No direct mapping in wgpu. Could potentially map to RGBA8Unorm
+            // and discard the alpha and lower precision.
+            return wgpu::TextureFormat::Undefined;
+        case filament::backend::TextureFormat::RGB9_E5:
+            return wgpu::TextureFormat::RGB9E5Ufloat;
+        case filament::backend::TextureFormat::RGB5_A1:
+            // No direct mapping in wgpu. Could potentially map to RGBA8Unorm
+            // and handle the packing/unpacking in shaders.
+            return wgpu::TextureFormat::Undefined;
+        case filament::backend::TextureFormat::RGBA4:
+            // No direct mapping in wgpu. Could potentially map to RGBA8Unorm
+            // and handle the packing/unpacking in shaders.
+            return wgpu::TextureFormat::Undefined;
+        case filament::backend::TextureFormat::RGB8:
+            // No direct sRGB equivalent in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA8Unorm;
+        case filament::backend::TextureFormat::SRGB8:
+            // No direct sRGB equivalent in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA8UnormSrgb;
+        case filament::backend::TextureFormat::RGB8_SNORM:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA8Snorm;
+        case filament::backend::TextureFormat::RGB8UI:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA8Uint;
+        case filament::backend::TextureFormat::RGB8I:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA8Sint;
+        case filament::backend::TextureFormat::R11F_G11F_B10F:
+            return wgpu::TextureFormat::RG11B10Ufloat;
+        case filament::backend::TextureFormat::UNUSED:
+            return wgpu::TextureFormat::Undefined;
+        case filament::backend::TextureFormat::RGB10_A2:
+            return wgpu::TextureFormat::RGB10A2Unorm;
+        case filament::backend::TextureFormat::RGB16F:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA16Float;
+        case filament::backend::TextureFormat::RGB16UI:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA16Uint;
+        case filament::backend::TextureFormat::RGB16I:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA16Sint;
+        case filament::backend::TextureFormat::RGB32F:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA32Float;
+        case filament::backend::TextureFormat::RGB32UI:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA32Uint;
+        case filament::backend::TextureFormat::RGB32I:
+            // No direct mapping in wgpu without alpha.
+            return wgpu::TextureFormat::RGBA32Sint;
+        case filament::backend::TextureFormat::DXT1_RGB:
+            return wgpu::TextureFormat::BC1RGBAUnorm;
+        case filament::backend::TextureFormat::DXT1_RGBA:
+            return wgpu::TextureFormat::BC1RGBAUnorm;
+        case filament::backend::TextureFormat::DXT3_RGBA:
+            return wgpu::TextureFormat::BC2RGBAUnorm;
+        case filament::backend::TextureFormat::DXT5_RGBA:
+            return wgpu::TextureFormat::BC3RGBAUnorm;
+        case filament::backend::TextureFormat::DXT1_SRGB:
+            return wgpu::TextureFormat::BC1RGBAUnormSrgb;
+        case filament::backend::TextureFormat::DXT1_SRGBA:
+            return wgpu::TextureFormat::BC1RGBAUnormSrgb;
+        case filament::backend::TextureFormat::DXT3_SRGBA:
+            return wgpu::TextureFormat::BC2RGBAUnormSrgb;
+        case filament::backend::TextureFormat::DXT5_SRGBA:
+            return wgpu::TextureFormat::BC3RGBAUnormSrgb;
+    }
+}
+
+wgpu::TextureView WGPUTexture::makeTextureView(const uint8_t& baseLevel,
+        const uint8_t& levelCount) {
+    wgpu::TextureViewDescriptor desc;
+    desc.baseMipLevel = baseLevel;
+    desc.mipLevelCount = levelCount;
+
+    // baseArrayLayer is required, making a guess
+    desc.baseArrayLayer = 0;
+    // Have not found an analouge to aspect in other drivers, but ALL should be unrestrictive.
+    // TODO Can we make this better?
+    desc.aspect = wgpu::TextureAspect::All;
+
+    // The rest of the properties should be fine to leave as default, using the texture params.
+    desc.label = "TODO";
+
+    desc.format = wgpu::TextureFormat::Undefined;
+    desc.dimension = wgpu::TextureViewDimension::Undefined;
+    desc.usage = wgpu::TextureUsage::None;
+
+    return texture.CreateView(&desc);
+}
+
 }// namespace filament::backend

filament/backend/src/webgpu/WebGPUHandles.h

@@ -132,21 +132,32 @@ private:
     wgpu::BindGroup mBindGroup;
 };
 
-// TODO: Currently WGPUTexture is not used by WebGPU for useful task.
-// Update the struct when used by WebGPU driver.
-struct WGPUTexture : public HwTexture {
+class WGPUTexture : public HwTexture {
+public:
     WGPUTexture(SamplerType target, uint8_t levels, TextureFormat format, uint8_t samples,
-            uint32_t width, uint32_t height, uint32_t depth, TextureUsage usage) noexcept;
+            uint32_t width, uint32_t height, uint32_t depth, TextureUsage usage,
+            wgpu::Device device) noexcept;
 
-    // constructors for creating texture views
-    WGPUTexture(WGPUTexture const* src, uint8_t baseLevel, uint8_t levelCount) noexcept;
+    WGPUTexture(WGPUTexture* src, uint8_t baseLevel, uint8_t levelCount) noexcept;
 
+    const wgpu::Texture& getTexture() const { return texture; }
+    const wgpu::Sampler& getSampler() const { return sampler; }
+    const wgpu::TextureView& getTexView() const { return texView; }
+
+    static wgpu::TextureFormat fToWGPUTextureFormat(const filament::backend::TextureFormat& fUsage);
+
+private:
+    wgpu::TextureView makeTextureView(const uint8_t& baseLevel, const uint8_t& levelCount);
+    // CreateTextureR has info for a texture and sampler. Texture Views are needed for binding,
+    // along with a sampler Current plan: Inherit the sampler and Texture to always exist (It is a
+    // ref counted pointer) when making views. View is optional
     wgpu::Texture texture = nullptr;
     // TODO: Adding this but not yet setting it up. Filament "Textures" are combined image samplers,
     // rep both.
     wgpu::Sampler sampler = nullptr;
-    //TODO: Not sure all the ways HwTexture is used. Overloading like this might be entirely wrong.
+    // TODO: Not sure all the ways HwTexture is used. Overloading like this might be entirely wrong.
     wgpu::TextureView texView = nullptr;
+    wgpu::TextureUsage fToWGPUTextureUsage(const filament::backend::TextureUsage& fUsage);
 };
 
 struct WGPURenderPrimitive : public HwRenderPrimitive {
@@ -170,7 +181,7 @@ struct WGPURenderTarget : public HwRenderTarget {
         Attachment(WGPUTexture* gpuTexture, uint8_t level = 0, uint16_t layer = 0)
             : level(level),
               layer(layer),
-              texture(gpuTexture->texture),
+              texture(gpuTexture->getTexture()),
               mWGPUTexture(gpuTexture) {}
 
         uint8_t level = 0;

filament/backend/test/Lifetimes.h

@@ -21,9 +21,6 @@
 #include <functional>
 #include <optional>
 
-#include "gtest/gtest.h"
-#include "gmock/gmock.h"
-
 #include "backend/Handle.h"
 #include "backend/DriverApiForward.h"
 #include "BackendTest.h"
@@ -74,7 +71,6 @@ private:
 
 template <typename HandleType>
 filament::backend::Handle<HandleType> Cleanup::add(filament::backend::Handle<HandleType> handle) {
-    EXPECT_THAT(handle, ::testing::IsTrue()) << "Added a null handle to clean up.";
     addInternal(handle);
     return handle;
 }

filament/backend/test/Shader.cpp

@@ -34,7 +34,7 @@ Shader::Shader(DriverApi& api, Cleanup& cleanup, ShaderConfig config) : mCleanup
     // This assumes that the uniforms will all be in a single descriptor set at index 1.
     // If there are shaders with uniforms in other sets then ShaderConfig will need to be expanded
     // to accommodate that.
-    size_t kDescriptorSetIndex = 0;
+    size_t kDescriptorSetIndex = 1;
     filamat::DescriptorSets descriptors;
     descriptors[kDescriptorSetIndex] = filamat::DescriptorSetInfo(config.uniforms.size());
     for (unsigned char i = 0; i < config.uniforms.size(); ++i) {
@@ -52,7 +52,7 @@ Shader::Shader(DriverApi& api, Cleanup& cleanup, ShaderConfig config) : mCleanup
                 config.uniforms[i].name,
                 config.uniforms[i].type.value_or(DescriptorType::UNIFORM_BUFFER), i };
     }
-    prog.descriptorBindings(0, bindingsInfo);
+    prog.descriptorBindings(1, bindingsInfo);
     mProgram = cleanup.add(api.createProgram(std::move(prog)));
 
     if (!kLayouts.empty()) {
@@ -66,15 +66,10 @@ filament::backend::DescriptorSetHandle Shader::createDescriptorSet(DriverApi& ap
 }
 
 filament::backend::ProgramHandle Shader::getProgram() const {
-    assert(mProgram);
-    EXPECT_THAT(mProgram, ::testing::IsTrue())
-                        << "Shader program accessed despite being null.";
     return mProgram;
 }
 
 filament::backend::DescriptorSetLayoutHandle Shader::getDescriptorSetLayout() const {
-    EXPECT_THAT(mDescriptorSetLayout, ::testing::IsTrue())
-            << "Shader descriptor set layout accessed despite being null.";
     return mDescriptorSetLayout;
 }
 

filament/backend/test/Shader.h

@@ -107,7 +107,7 @@ ResolvedUniformBindingConfig UniformBindingConfig::resolve() {
             .dataSize = resolvedDataSize,
             .bufferSize = bufferSize.value_or(resolvedDataSize),
             .byteOffset = byteOffset.value_or(0),
-            .set = set.value_or(0),
+            .set = set.value_or(1),
             .binding = binding.value_or(0),
             .descriptorSet = descriptorSet
     };

filament/backend/test/SharedShaders.cpp

@@ -138,7 +138,7 @@ std::optional<std::string> GetGlslUniform(ShaderUniformType type) {
         }
         case ShaderUniformType::Simple: {
             return R"(
-layout(binding = 0, set = 0) uniform Params {
+layout(binding = 0, set = 1) uniform Params {
     highp vec4 color;
     // Use scaleMinusOne instead of scale so that a 0 initialized value is a good default
     highp vec4 scaleMinusOne;
@@ -148,7 +148,7 @@ layout(binding = 0, set = 0) uniform Params {
         }
         case ShaderUniformType::SimpleWithPadding: {
             return R"(
-layout(binding = 0, set = 0) uniform Params {
+layout(binding = 0, set = 1) uniform Params {
     highp vec4 padding[4];  // offset of 64 bytes
 
     highp vec4 color;
@@ -160,7 +160,7 @@ layout(binding = 0, set = 0) uniform Params {
         }
         case ShaderUniformType::Sampler: {
             return R"(
-layout(location = 0, set = 0) uniform sampler2D test_tex;
+layout(location = 0, set = 1) uniform sampler2D test_tex;
 )";
         }
         default:

filament/backend/test/Skip.h

@@ -20,8 +20,7 @@
 #include <gtest/gtest.h>
 #include "BackendTest.h"
 
-// skipEnvironment must be a test::SkipEnvironment or something that can be passed to the type's
-// constructor
+// skipEnvironment must be a test::SkipEnvironment
 // rationale must be a string
 #define SKIP_IF(skipEnvironment, rationale)                                                    \
 do {                                                                                           \
@@ -32,17 +31,6 @@ do {
     }                                                                                          \
 } while (false)
 
-#define FAIL_IF(skipEnvironment, rationale)                                                    \
-do {                                                                                           \
-    SkipEnvironment skip(skipEnvironment);                                                     \
-    if (skip.matches()) {                                                                      \
-        GTEST_FAIL()                                                                           \
-                << "Failing test as the " << skip.describe() << "\n"                           \
-                << " This test should be able to succeed but it needs to fail early because"   \
-                << rationale;                                                                  \
-    }                                                                                          \
-} while (false)
-
 namespace test {
 
 struct SkipEnvironment {

filament/backend/test/test_Blit.cpp

@@ -20,7 +20,6 @@
 #include "Lifetimes.h"
 #include "Shader.h"
 #include "SharedShaders.h"
-#include "Skip.h"
 #include "TrianglePrimitive.h"
 
 #include <utils/Hash.h>
@@ -310,7 +309,7 @@ TEST_F(BlitTest, ColorResolve) {
 
     PipelineState state = {};
     state.program = shader.getProgram();
-    state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
+    state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
     state.rasterState.colorWrite = true;
     state.rasterState.depthWrite = false;
     state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -490,7 +489,6 @@ TEST_F(BlitTest, BlitRegion) {
 }
 
 TEST_F(BlitTest, BlitRegionToSwapChain) {
-    FAIL_IF(Backend::VULKAN, "Crashes due to not finding color attachment");
     auto& api = getDriverApi();
     mCleanup.addPostCall([&]() { executeCommands(); });
 

filament/backend/test/test_BufferUpdates.cpp

@@ -84,7 +84,7 @@ TEST_F(BufferUpdatesTest, VertexBufferUpdate) {
 
         PipelineState state;
         state.program = shader.getProgram();
-        state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
+        state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
         state.rasterState.colorWrite = true;
         state.rasterState.depthWrite = false;
         state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -199,8 +199,8 @@ TEST_F(BufferUpdatesTest, BufferObjectUpdateWithOffset) {
     params.flags.discardEnd = TargetBufferFlags::NONE;
     params.viewport.height = 512;
     params.viewport.width = 512;
-    renderTriangle({ { shader.getDescriptorSetLayout() } }, renderTarget, swapChain,
-            shader.getProgram(), params);
+    renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
+            renderTarget, swapChain, shader.getProgram(), params);
 
     // Upload uniforms for the second triangle. To test partial buffer updates, we'll only update
     // color.b, color.a, scaleMinusOne, offset.x, and offset.y.
@@ -218,7 +218,7 @@ TEST_F(BufferUpdatesTest, BufferObjectUpdateWithOffset) {
 
     params.flags.clear = TargetBufferFlags::NONE;
     params.flags.discardStart = TargetBufferFlags::NONE;
-    renderTriangle({{ shader.getDescriptorSetLayout() }},
+    renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
             renderTarget, swapChain, shader.getProgram(), params);
 
 

filament/backend/test/test_FeedbackLoops.cpp

@@ -57,9 +57,9 @@ layout(location = 0) out vec4 fragColor;
 
 // Filament's Vulkan backend requires a descriptor set index of 1 for all samplers.
 // This parameter is ignored for other backends.
-layout(binding = 0, set = 0) uniform sampler2D test_tex;
+layout(binding = 0, set = 1) uniform sampler2D test_tex;
 
-layout(binding = 1, set = 0) uniform Params {
+layout(binding = 1, set = 1) uniform Params {
     highp float fbWidth;
     highp float fbHeight;
     highp float sourceLevel;
@@ -167,7 +167,7 @@ TEST_F(BackendTest, FeedbackLoops) {
             state.rasterState.depthWrite = false;
             state.rasterState.depthFunc = RasterState::DepthFunc::A;
             state.program = shader.getProgram();
-            state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
+            state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
 
             api.makeCurrent(swapChain, swapChain);
             api.beginFrame(0, 0, 0);

filament/backend/test/test_LoadImage.cpp

@@ -20,7 +20,6 @@
 #include "Lifetimes.h"
 #include "Shader.h"
 #include "SharedShaders.h"
-#include "Skip.h"
 
 #include <backend/DriverEnums.h>
 #include <backend/Handle.h>
@@ -47,7 +46,7 @@ layout(location = 0) out vec4 fragColor;
 
 // Filament's Vulkan backend requires a descriptor set index of 1 for all samplers.
 // This parameter is ignored for other backends.
-layout(location = 0, set = 0) uniform {samplerType} test_tex;
+layout(location = 0, set = 1) uniform {samplerType} test_tex;
 
 void main() {
     vec2 fbsize = vec2(512);
@@ -65,7 +64,7 @@ std::string fragmentUpdateImage3DTemplate (R"(#version 450 core
 layout(location = 0) out vec4 fragColor;
 
 // Filament's Vulkan backend requires a descriptor set index of 1 for all samplers.
-layout(location = 0, set = 0) uniform {samplerType} test_tex;
+layout(location = 0, set = 1) uniform {samplerType} test_tex;
 
 float getLayer(in sampler3D s) { return 2.5f / 4.0f; }
 float getLayer(in sampler2DArray s) { return 2.0f; }
@@ -86,7 +85,7 @@ std::string fragmentUpdateImageMip (R"(#version 450 core
 layout(location = 0) out vec4 fragColor;
 
 // Filament's Vulkan backend requires a descriptor set index of 1 for all samplers.
-layout(location = 0, set = 0) uniform sampler2D test_tex;
+layout(location = 0, set = 1) uniform sampler2D test_tex;
 
 void main() {
     vec2 fbsize = vec2(512);
@@ -212,7 +211,6 @@ static SamplerFormat getSamplerFormat(TextureFormat textureFormat) {
 }
 
 TEST_F(LoadImageTest, UpdateImage2D) {
-    FAIL_IF(Backend::VULKAN, "Multiple test cases crash");
 
     // All of these test cases should result in the same rendered image, and thus the same hash.
     static const uint32_t expectedHash = 3644679986;
@@ -336,9 +334,9 @@ TEST_F(LoadImageTest, UpdateImage2D) {
                 .filterMag = SamplerMagFilter::NEAREST,
                 .filterMin = SamplerMinFilter::NEAREST_MIPMAP_NEAREST });
 
-        api.bindDescriptorSet(descriptorSet, 0, {});
+        api.bindDescriptorSet(descriptorSet, 1, {});
 
-        renderTriangle({{ shader.getDescriptorSetLayout() }},
+        renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
                 defaultRenderTarget, swapChain, shader.getProgram());
 
         EXPECT_IMAGE(defaultRenderTarget, getExpectations(),
@@ -411,9 +409,9 @@ TEST_F(LoadImageTest, UpdateImageSRGB) {
             .filterMin = SamplerMinFilter::LINEAR_MIPMAP_NEAREST
     });
 
-    api.bindDescriptorSet(descriptorSet, 0, {});
+    api.bindDescriptorSet(descriptorSet, 1, {});
 
-    renderTriangle({{ shader.getDescriptorSetLayout() }},
+    renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
             defaultRenderTarget, swapChain, shader.getProgram());
 
     EXPECT_IMAGE(defaultRenderTarget, getExpectations(),
@@ -470,9 +468,9 @@ TEST_F(LoadImageTest, UpdateImageMipLevel) {
             .filterMin = SamplerMinFilter::LINEAR_MIPMAP_NEAREST
     });
 
-    api.bindDescriptorSet(descriptorSet, 0, {});
+    api.bindDescriptorSet(descriptorSet, 1, {});
 
-    renderTriangle({{ shader.getDescriptorSetLayout() }},
+    renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
             defaultRenderTarget, swapChain, shader.getProgram());
 
     EXPECT_IMAGE(defaultRenderTarget, getExpectations(),
@@ -541,9 +539,9 @@ TEST_F(LoadImageTest, UpdateImage3D) {
                 { .filterMag = SamplerMagFilter::LINEAR,
                     .filterMin = SamplerMinFilter::LINEAR_MIPMAP_NEAREST });
 
-        api.bindDescriptorSet(descriptorSet, 0, {});
+        api.bindDescriptorSet(descriptorSet, 1, {});
 
-        renderTriangle({ { shader.getDescriptorSetLayout() } },
+        renderTriangle({ { DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() } },
                 defaultRenderTarget, swapChain, shader.getProgram());
 
         EXPECT_IMAGE(defaultRenderTarget, getExpectations(),

filament/backend/test/test_MipLevels.cpp

@@ -40,7 +40,7 @@ std::string fragmentTexturedLod (R"(#version 450 core
 layout(location = 0) out vec4 fragColor;
 layout(location = 0) in vec2 uv;
 
-layout(location = 0, set = 0) uniform sampler2D backend_test_sib_tex;
+layout(location = 0, set = 1) uniform sampler2D backend_test_sib_tex;
 
 void main() {
     fragColor = textureLod(backend_test_sib_tex, uv, 1);

filament/backend/test/test_PushConstants.cpp

@@ -81,7 +81,6 @@ void main() {
 
 TEST_F(BackendTest, PushConstants) {
     SKIP_IF(Backend::OPENGL, "Push constants not supported on OpenGL");
-    FAIL_IF(Backend::VULKAN, "Crashing due to no program set when setting push constants");
 
     auto& api = getDriverApi();
 

filament/backend/test/test_RenderExternalImage.cpp

@@ -47,7 +47,6 @@ Shader createShader(DriverApi& api, Cleanup& cleanup, Backend backend) {
 // Rendering an external image without setting any data should not crash.
 TEST_F(BackendTest, RenderExternalImageWithoutSet) {
     SKIP_IF(Backend::METAL, "External images aren't supported in metal");
-    SKIP_IF(Backend::VULKAN, "External images aren't supported in vulkan");
     auto& api = getDriverApi();
     Cleanup cleanup(api);
 
@@ -82,7 +81,7 @@ TEST_F(BackendTest, RenderExternalImageWithoutSet) {
 
     PipelineState state;
     state.program = shader.getProgram();
-    state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
+    state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
     state.rasterState.colorWrite = true;
     state.rasterState.depthWrite = false;
     state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -95,7 +94,7 @@ TEST_F(BackendTest, RenderExternalImageWithoutSet) {
     api.beginFrame(0, 0, 0);
 
     api.updateDescriptorSetTexture(descriptorSet, 0, texture, {});
-    api.bindDescriptorSet(descriptorSet, 0, {});
+    api.bindDescriptorSet(descriptorSet, 1, {});
 
     // Render a triangle.
     api.beginRenderPass(defaultRenderTarget, params);
@@ -115,7 +114,6 @@ TEST_F(BackendTest, RenderExternalImageWithoutSet) {
 
 TEST_F(BackendTest, RenderExternalImage) {
     SKIP_IF(Backend::METAL, "External images aren't supported in metal");
-    SKIP_IF(Backend::VULKAN, "External images aren't supported in vulkan");
     auto& api = getDriverApi();
     Cleanup cleanup(api);
 
@@ -188,7 +186,7 @@ TEST_F(BackendTest, RenderExternalImage) {
 
     PipelineState state;
     state.program = shader.getProgram();
-    state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
+    state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
     state.rasterState.colorWrite = true;
     state.rasterState.depthWrite = false;
     state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -199,7 +197,7 @@ TEST_F(BackendTest, RenderExternalImage) {
     api.beginFrame(0, 0, 0);
 
     api.updateDescriptorSetTexture(descriptorSet, 0, texture, {});
-    api.bindDescriptorSet(descriptorSet, 0, {});
+    api.bindDescriptorSet(descriptorSet, 1, {});
 
     // Render a triangle.
     api.beginRenderPass(defaultRenderTarget, params);

filament/include/filament/Engine.h

@@ -317,15 +317,6 @@ public:
          */
         size_t metalUploadBufferSizeBytes = 512 * 1024;
 
-        /**
-         * The action to take if a Drawable cannot be acquired.
-         *
-         * Each frame rendered requires a CAMetalDrawable texture, which is
-         * presented on-screen at the completion of each frame. These are
-         * limited and provided round-robin style by the system.
-         */
-        bool metalDisablePanicOnDrawableFailure = false;
-
         /**
          * Set to `true` to forcibly disable parallel shader compilation in the backend.
          * Currently only honored by the GL and Metal backends.

filament/src/details/Engine.cpp

@@ -138,7 +138,6 @@ Engine* FEngine::create(Builder const& builder) {
                 .forceGLES2Context = instance->getConfig().forceGLES2Context,
                 .stereoscopicType = instance->getConfig().stereoscopicType,
                 .assertNativeWindowIsValid = instance->features.backend.opengl.assert_native_window_is_valid,
-                .metalDisablePanicOnDrawableFailure = instance->getConfig().metalDisablePanicOnDrawableFailure,
         };
         instance->mDriver = platform->createDriver(sharedContext, driverConfig);
 
@@ -734,7 +733,6 @@ int FEngine::loop() {
             .forceGLES2Context = mConfig.forceGLES2Context,
             .stereoscopicType =  mConfig.stereoscopicType,
             .assertNativeWindowIsValid = features.backend.opengl.assert_native_window_is_valid,
-            .metalDisablePanicOnDrawableFailure = mConfig.metalDisablePanicOnDrawableFailure,
     };
     mDriver = mPlatform->createDriver(mSharedGLContext, driverConfig);
 

filament/src/details/Material.cpp

@@ -1098,16 +1098,12 @@ void FMaterial::processPushConstants(FEngine&, MaterialParser const* parser) {
             });
 }
 
-void FMaterial::precacheDepthVariants(FEngine& engine) {
-
-    bool const disableDepthPrecacheForDefaultMaterial = engine.getDriverApi().isWorkaroundNeeded(
-                               Workaround::DISABLE_DEPTH_PRECACHE_FOR_DEFAULT_MATERIAL);
-
+void FMaterial::precacheDepthVariants(FEngine const& engine) {
     // pre-cache all depth variants inside the default material. Note that this should be
     // entirely optional; if we remove this pre-caching, these variants will be populated
     // later, when/if needed by createAndCacheProgram(). Doing it now potentially uses more
     // memory and increases init time, but reduces hiccups during the first frame.
-    if (UTILS_UNLIKELY(mIsDefaultMaterial && !disableDepthPrecacheForDefaultMaterial)) {
+    if (UTILS_UNLIKELY(mIsDefaultMaterial)) {
         const bool stereoSupported = mEngine.getDriverApi().isStereoSupported();
         auto const allDepthVariants = VariantUtils::getDepthVariants();
         for (auto const variant: allDepthVariants) {

filament/src/details/Material.h

@@ -298,7 +298,7 @@ private:
 
     void processPushConstants(FEngine& engine, MaterialParser const* parser);
 
-    void precacheDepthVariants(FEngine& engine);
+    void precacheDepthVariants(FEngine const& engine);
 
     void processDescriptorSets(FEngine& engine, MaterialParser const* parser);
 

filament/src/details/Renderer.cpp

@@ -824,9 +824,6 @@ void FRenderer::renderJob(RootArenaScope& rootArenaScope, FView& view) {
     variant.setDirectionalLighting(view.hasDirectionalLighting());
     variant.setDynamicLighting(view.hasDynamicLighting());
     variant.setFog(view.hasFog());
-    // The VSM bit has a different meaning for STANDARD_VARIANT (as opposed to DEPTH_VARIANT),
-    // In the STANDARD_VARIANT case, we are *using* the shadow-map, and the VSM only decides which
-    // type of sampler is used (samplerShadow or sampler2D).
     variant.setVsm(view.hasShadowing() && view.getShadowType() != ShadowType::PCF);
     variant.setStereo(view.hasStereo());
 
@@ -844,11 +841,7 @@ void FRenderer::renderJob(RootArenaScope& rootArenaScope, FView& view) {
 
     if (view.needsShadowMap()) {
         Variant shadowVariant(Variant::DEPTH_VARIANT);
-        // The VSM bit has a different meaning for DEPTH_VARIANT (as opposed to STANDARD_VARIANT),
-        // In the DEPTH_VARIANT case, we are *generating* the shadow-map, and some computations
-        // are handled differently. In addition, the color buffer is used.
         shadowVariant.setVsm(view.getShadowType() == ShadowType::VSM);
-
         auto shadows = view.renderShadowMaps(engine, fg, cameraInfo, mShaderUserTime,
                 RenderPassBuilder{ commandArena }
                     .renderFlags(renderFlags)

ios/CocoaPods/Filament.podspec

@@ -1,12 +1,12 @@
 Pod::Spec.new do |spec|
   spec.name = "Filament"
-  spec.version = "1.59.5"
+  spec.version = "1.59.3"
   spec.license = { :type => "Apache 2.0", :file => "LICENSE" }
   spec.homepage = "https://google.github.io/filament"
   spec.authors = "Google LLC."
   spec.summary = "Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WASM/WebGL."
   spec.platform = :ios, "11.0"
-  spec.source = { :http => "https://github.com/google/filament/releases/download/v1.59.5/filament-v1.59.5-ios.tgz" }
+  spec.source = { :http => "https://github.com/google/filament/releases/download/v1.59.3/filament-v1.59.3-ios.tgz" }
 
   # Fix linking error with Xcode 12; we do not yet support the simulator on Apple silicon.
   spec.pod_target_xcconfig = {

libs/filabridge/include/private/filament/Variant.h

@@ -50,7 +50,7 @@ struct Variant {
     // DEP: Depth only
     // FOG: Fog
     // PCK: Picking (depth variant only)
-    // VSM: Variance shadow maps (depth) / sampler type (standard)
+    // VSM: Variance shadow maps
     // STE: Instanced stereo rendering
     //
     //   X: either 1 or 0
@@ -75,8 +75,7 @@ struct Variant {
     //                      | STE | VSM | PCK |  1  | SKN |  0  |  0  |  0  |   16 - 4 = 12
     //                      +-----+-----+-----+-----+-----+-----+-----+-----+
     //       Vertex depth      X     X     0     1     X     0     0     0
-    //     Fragment depth      0     0     X     1     0     0     0     0
-    //     Fragment depth      0     1     0     1     0     0     0     0
+    //     Fragment depth      0     X     X     1     0     0     0     0
     //           Reserved      X     1     1     1     X     0     0     0     [  -4]
     //
     // 96 variants used, 160 reserved (256 - 96)
@@ -96,7 +95,7 @@ struct Variant {
     static constexpr type_t DEP   = 0x10; // depth only variants
     static constexpr type_t FOG   = 0x20; // fog (standard)
     static constexpr type_t PCK   = 0x20; // picking (depth)
-    static constexpr type_t VSM   = 0x40; // variance shadow maps / sampler type
+    static constexpr type_t VSM   = 0x40; // variance shadow maps
     static constexpr type_t STE   = 0x80; // instanced stereo
 
     // special variants (variants that use the reserved space)
@@ -114,21 +113,21 @@ struct Variant {
     static constexpr type_t UNLIT_MASK         = STE | SKN | FOG;
 
     // returns raw variant bits
-    bool hasDirectionalLighting() const noexcept { return key & DIR; }
-    bool hasDynamicLighting() const noexcept     { return key & DYN; }
-    bool hasSkinningOrMorphing() const noexcept  { return key & SKN; }
-    bool hasStereo() const noexcept              { return key & STE; }
+    inline bool hasDirectionalLighting() const noexcept { return key & DIR; }
+    inline bool hasDynamicLighting() const noexcept     { return key & DYN; }
+    inline bool hasSkinningOrMorphing() const noexcept  { return key & SKN; }
+    inline bool hasStereo() const noexcept              { return key & STE; }
 
-    void setDirectionalLighting(bool v) noexcept { set(v, DIR); }
-    void setDynamicLighting(bool v) noexcept     { set(v, DYN); }
-    void setShadowReceiver(bool v) noexcept      { set(v, SRE); }
-    void setSkinning(bool v) noexcept            { set(v, SKN); }
-    void setFog(bool v) noexcept                 { set(v, FOG); }
-    void setPicking(bool v) noexcept             { set(v, PCK); }
-    void setVsm(bool v) noexcept                 { set(v, VSM); }
-    void setStereo(bool v) noexcept              { set(v, STE); }
+    inline void setDirectionalLighting(bool v) noexcept { set(v, DIR); }
+    inline void setDynamicLighting(bool v) noexcept     { set(v, DYN); }
+    inline void setShadowReceiver(bool v) noexcept      { set(v, SRE); }
+    inline void setSkinning(bool v) noexcept            { set(v, SKN); }
+    inline void setFog(bool v) noexcept                 { set(v, FOG); }
+    inline void setPicking(bool v) noexcept             { set(v, PCK); }
+    inline void setVsm(bool v) noexcept                 { set(v, VSM); }
+    inline void setStereo(bool v) noexcept              { set(v, STE); }
 
-    static constexpr bool isValidDepthVariant(Variant variant) noexcept {
+    inline static constexpr bool isValidDepthVariant(Variant variant) noexcept {
         // Can't have VSM and PICKING together with DEPTH variants
         constexpr type_t RESERVED_MASK  = VSM | PCK | DEP | SRE | DYN | DIR;
         constexpr type_t RESERVED_VALUE = VSM | PCK | DEP;
@@ -136,7 +135,7 @@ struct Variant {
                ((variant.key & RESERVED_MASK) != RESERVED_VALUE);
    }
 
-    static constexpr bool isValidStandardVariant(Variant variant) noexcept {
+    inline static constexpr bool isValidStandardVariant(Variant variant) noexcept {
         // can't have shadow receiver if we don't have any lighting
         constexpr type_t RESERVED0_MASK  = VSM | FOG | SRE | DYN | DIR;
         constexpr type_t RESERVED0_VALUE = VSM | FOG | SRE;
@@ -155,11 +154,11 @@ struct Variant {
                ((variant.key & RESERVED2_MASK) != RESERVED2_VALUE);
     }
 
-    static constexpr bool isVertexVariant(Variant variant) noexcept {
+    inline static constexpr bool isVertexVariant(Variant variant) noexcept {
         return filterVariantVertex(variant) == variant;
     }
 
-    static constexpr bool isFragmentVariant(Variant variant) noexcept {
+    inline static constexpr bool isFragmentVariant(Variant variant) noexcept {
         return filterVariantFragment(variant) == variant;
     }
 
@@ -171,32 +170,32 @@ struct Variant {
         return isValidStandardVariant(variant) || isValidDepthVariant(variant);
     }
 
-    static constexpr bool isSSRVariant(Variant variant) noexcept {
+    inline static constexpr bool isSSRVariant(Variant variant) noexcept {
         return (variant.key & (STE | VSM | DEP | SRE | DYN | DIR)) == (VSM | SRE);
     }
 
-    static constexpr bool isVSMVariant(Variant variant) noexcept {
+    inline static constexpr bool isVSMVariant(Variant variant) noexcept {
         return !isSSRVariant(variant) && ((variant.key & VSM) == VSM);
     }
 
-    static constexpr bool isShadowReceiverVariant(Variant variant) noexcept {
+    inline static constexpr bool isShadowReceiverVariant(Variant variant) noexcept {
         return !isSSRVariant(variant) && ((variant.key & SRE) == SRE);
     }
 
-    static constexpr bool isFogVariant(Variant variant) noexcept {
+    inline static constexpr bool isFogVariant(Variant variant) noexcept {
         return (variant.key & (FOG | DEP)) == FOG;
     }
 
-    static constexpr bool isPickingVariant(Variant variant) noexcept {
+    inline static constexpr bool isPickingVariant(Variant variant) noexcept {
         return (variant.key & (PCK | DEP)) == (PCK | DEP);
     }
 
-    static constexpr bool isStereoVariant(Variant variant) noexcept {
+    inline static constexpr bool isStereoVariant(Variant variant) noexcept {
         return (variant.key & STE) == STE;
     }
 
     static constexpr Variant filterVariantVertex(Variant variant) noexcept {
-        // Filter out vertex variants that are not needed. For e.g. fog doesn't affect the
+        // filter out vertex variants that are not needed. For e.g. fog doesn't affect the
         // vertex shader.
         if ((variant.key & STANDARD_MASK) == STANDARD_VARIANT) {
             if (isSSRVariant(variant)) {

libs/gltfio/src/AssetLoader.cpp

@@ -50,6 +50,8 @@
 #include <utils/Log.h>
 #include <utils/Panic.h>
 #include <utils/NameComponentManager.h>
+
+#define SYSTRACE_TAG SYSTRACE_TAG_GLTFIO
 #include <utils/Systrace.h>
 
 #include <tsl/robin_map.h>

libs/gltfio/src/ResourceLoader.cpp

@@ -37,7 +37,10 @@
 #include <utils/compiler.h>
 #include <utils/JobSystem.h>
 #include <utils/Log.h>
+
+#define SYSTRACE_TAG SYSTRACE_TAG_GLTFIO
 #include <utils/Systrace.h>
+
 #include <utils/Path.h>
 
 #include <cgltf.h>

libs/gltfio/src/Utility.cpp

@@ -21,6 +21,8 @@
 #include "GltfEnums.h"
 
 #include <utils/Log.h>
+
+#define SYSTRACE_TAG SYSTRACE_TAG_GLTFIO
 #include <utils/Systrace.h>
 
 #define CGLTF_IMPLEMENTATION

libs/matdbg/src/ApiHandler.cpp

@@ -90,7 +90,6 @@ bool ApiHandler::handleGetApiShader(struct mg_connection* conn,
     std::string_view const essl1("essl1");
     std::string_view const msl("msl");
     std::string_view const spirv("spirv");
-    std::string_view const wgsl("wgsl");
     size_t const qlength = strlen(request->query_string);
 
     char type[6] = {};
@@ -103,13 +102,11 @@ bool ApiHandler::handleGetApiShader(struct mg_connection* conn,
     char glindex[4] = {};
     char vkindex[4] = {};
     char metalindex[4] = {};
-    char wgpuindex[4] = {};
     mg_get_var(request->query_string, qlength, "glindex", glindex, sizeof(glindex));
     mg_get_var(request->query_string, qlength, "vkindex", vkindex, sizeof(vkindex));
     mg_get_var(request->query_string, qlength, "metalindex", metalindex, sizeof(metalindex));
-    mg_get_var(request->query_string, qlength, "wgpuindex", wgpuindex, sizeof(wgpuindex));
 
-    if (!glindex[0] && !vkindex[0] && !metalindex[0] && !wgpuindex[0]) {
+    if (!glindex[0] && !vkindex[0] && !metalindex[0]) {
         return error(__LINE__, uri);
     }
 
@@ -221,37 +218,6 @@ bool ApiHandler::handleGetApiShader(struct mg_connection* conn,
 
         return softError("Only MSL is supported.");
     }
-
-    if (wgpuindex[0]) {
-        ShaderExtractor extractor(ShaderLanguage::WGSL, result->package, result->packageSize);
-        if (!extractor.parse()) {
-            return error(__LINE__, uri);
-        }
-
-        FixedCapacityVector<ShaderInfo> info(getShaderCount(package, ChunkType::MaterialWgsl));
-        if (!getShaderInfo(package, info.data(), ChunkType::MaterialWgsl)) {
-            return error(__LINE__, uri);
-        }
-
-        int const shaderIndex = std::stoi(wgpuindex);
-        if (shaderIndex >= info.size()) {
-            return error(__LINE__, uri);
-        }
-
-        auto const& item = info[shaderIndex];
-        filaflat::ShaderContent content;
-        extractor.getShader(item.shaderModel, item.variant, item.pipelineStage, content);
-
-        if (language == wgsl) {
-            std::string const shader = mFormatter.format((char const*) content.data());
-            mg_printf(conn, kSuccessHeader.data(), "application/txt");
-            mg_write(conn, shader.c_str(), shader.size());
-            return true;
-        }
-
-        return softError("Only WGSL is supported.");
-    }
-
     return error(__LINE__, uri);
 }
 

libs/matdbg/src/JsonWriter.cpp

@@ -181,18 +181,6 @@ static bool printMetalInfo(ostream& json, const ChunkContainer& container) {
     return true;
 }
 
-static bool printWGPUInfo(ostream& json, const ChunkContainer& container) {
-    std::vector<ShaderInfo> info;
-    info.resize(getShaderCount(container, ChunkType::MaterialWgsl));
-    if (!getShaderInfo(container, info.data(), ChunkType::MaterialWgsl)) {
-        return false;
-    }
-    json << "\"webgpu\": [\n";
-    printShaderInfo(json, info, container);
-    json << "],\n";
-    return true;
-}
-
 bool JsonWriter::writeMaterialInfo(const filaflat::ChunkContainer& container) {
     ostringstream json;
     if (!printMaterial(json, container)) {
@@ -213,9 +201,6 @@ bool JsonWriter::writeMaterialInfo(const filaflat::ChunkContainer& container) {
     if (!printMetalInfo(json, container)) {
         return false;
     }
-    if (!printWGPUInfo(json, container)) {
-        return false;
-    }
 
     json << "\"required_attributes\": [\n";
     uint32_t requiredAttributes;

libs/matdbg/web/api.js

@@ -39,9 +39,6 @@ async function fetchShaderCode(matid, backend, language, index) {
         case "metal":
             query = `type=${language}&metalindex=${index}`;
             break;
-        case "webgpu":
-            query = `type=${language}&wgpuindex=${index}`;
-            break;
     }
     return await _fetchText(`api/shader?matid=${matid}&${query}`);
 }
@@ -91,7 +88,6 @@ function rebuildMaterial(materialId, backend, shaderIndex, editedText) {
             break;
         case "vulkan": api = 2; break;
         case "metal":  api = 3; break;
-        case "webgpu":  api = 4; break;
     }
     return new Promise((ok, fail) => {
         const req = new XMLHttpRequest();

libs/matdbg/web/app.js

@@ -14,7 +14,7 @@
 * limitations under the License.
 */
 
-import { LitElement, html, css, unsafeCSS, nothing } from "https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";
+import { LitElement, html, css, unsafeCSS, nothing } from "https://unpkg.com/lit@2.8.0?module";
 
 const kUntitledPlaceholder = "untitled";
 
@@ -24,7 +24,6 @@ const LANGUAGE_CHOICES = {
     'essl1': ['essl3', 'essl1'],
     'vulkan': ['glsl', 'spirv'],
     'metal': ['msl'],
-    'webgpu': ['wgsl'],
 };
 
 const DEFAULT_LANGUAGE_FOR_BACKEND = {
@@ -32,7 +31,6 @@ const DEFAULT_LANGUAGE_FOR_BACKEND = {
     'essl1': 'essl1',
     'vulkan': 'glsl',
     'metal': 'msl',
-    'webgpu': 'wgsl',
 };
 
 const BACKENDS = Object.keys(LANGUAGE_CHOICES);

libs/utils/include/utils/Systrace.h

@@ -17,24 +17,23 @@
 #ifndef TNT_UTILS_SYSTRACE_H
 #define TNT_UTILS_SYSTRACE_H
 
-
-#define SYSTRACE_TAG_NEVER          (0)
-#define SYSTRACE_TAG_ALWAYS         (1<<0)
-#define SYSTRACE_TAG_FILAMENT       (1<<1)  // don't change, used in makefiles
-#define SYSTRACE_TAG_JOBSYSTEM      (1<<2)
+#define SYSTRACE_TAG_DISABLED       (0)
+#define SYSTRACE_TAG_FILAMENT       (2) // don't change used in makefiles
+#define SYSTRACE_TAG_JOBSYSTEM      (3)
+#define SYSTRACE_TAG_GLTFIO         (4)
 
 /*
- * The SYSTRACE_ macros use SYSTRACE_TAG as a the TAG, which should be defined
- * before this file is included. If not, the SYSTRACE_TAG_ALWAYS tag will be used.
+ * The SYSTRACE_ macros use SYSTRACE_TAG as a category, which must be defined
+ * before this file is included.
  */
 
 #ifndef SYSTRACE_TAG
-#define SYSTRACE_TAG (SYSTRACE_TAG_ALWAYS)
+#   error SYSTRACE_TAG must be set to SYSTRACE_TAG_{DISABLED|FILAMENT|JOBSYSTEM}
 #endif
 
 // Systrace on Apple platforms is fragile and adds overhead, should only be enabled in dev builds.
 #ifndef FILAMENT_APPLE_SYSTRACE
-#define FILAMENT_APPLE_SYSTRACE 0
+#   define FILAMENT_APPLE_SYSTRACE 0
 #endif
 
 #if defined(__ANDROID__)
@@ -44,7 +43,6 @@
 #else
 
 #define SYSTRACE_ENABLE()
-#define SYSTRACE_DISABLE()
 #define SYSTRACE_CONTEXT()
 #define SYSTRACE_NAME(name)
 #define SYSTRACE_FRAME_ID(frame)
@@ -56,6 +54,6 @@
 #define SYSTRACE_VALUE32(name, val)
 #define SYSTRACE_VALUE64(name, val)
 
-#endif // ANDROID
+#endif
 
 #endif // TNT_UTILS_SYSTRACE_H

libs/utils/include/utils/android/Systrace.h

@@ -17,226 +17,75 @@
 #ifndef TNT_UTILS_ANDROID_SYSTRACE_H
 #define TNT_UTILS_ANDROID_SYSTRACE_H
 
-#include <atomic>
+#include <perfetto/perfetto.h>
 
 #include <stdint.h>
-#include <stdio.h>
-#include <unistd.h>
 
-#include <utils/compiler.h>
+PERFETTO_DEFINE_CATEGORIES_IN_NAMESPACE(systrace,
+        perfetto::Category("filament"),
+        perfetto::Category("jobsystem"),
+        perfetto::Category("gltfio"));
 
-// enable tracing
-#define SYSTRACE_ENABLE() ::utils::details::Systrace::enable(SYSTRACE_TAG)
+PERFETTO_USE_CATEGORIES_FROM_NAMESPACE(systrace);
 
-// disable tracing
-#define SYSTRACE_DISABLE() ::utils::details::Systrace::disable(SYSTRACE_TAG)
+#if SYSTRACE_TAG == SYSTRACE_TAG_FILAMENT
+#   define UTILS_PERFETTO_CATEGORY "filament"
+#elif SYSTRACE_TAG == SYSTRACE_TAG_JOBSYSTEM
+#   define UTILS_PERFETTO_CATEGORY "jobsystem"
+#elif SYSTRACE_TAG == SYSTRACE_TAG_GLTFIO
+#   define UTILS_PERFETTO_CATEGORY "gltfio"
+#endif
 
+#if SYSTRACE_TAG == SYSTRACE_TAG_DISABLED
 
-/**
- * Creates a Systrace context in the current scope. needed for calling all other systrace
- * commands below.
- */
-#define SYSTRACE_CONTEXT() ::utils::details::Systrace ___trctx(SYSTRACE_TAG)
+#define SYSTRACE_ENABLE()
+#define SYSTRACE_CONTEXT()
+#define SYSTRACE_NAME(name)
+#define SYSTRACE_FRAME_ID(frame)
+#define SYSTRACE_NAME_BEGIN(name)
+#define SYSTRACE_NAME_END()
+#define SYSTRACE_CALL()
+#define SYSTRACE_ASYNC_BEGIN(name, cookie)
+#define SYSTRACE_ASYNC_END(name, cookie)
+#define SYSTRACE_VALUE32(name, val)
+#define SYSTRACE_VALUE64(name, val)
 
+#else
 
-// SYSTRACE_NAME traces the beginning and end of the current scope.  To trace
-// the correct start and end times this macro should be declared first in the
-// scope body.
-// It also automatically creates a Systrace context
-#define SYSTRACE_NAME(name) ::utils::details::ScopedTrace ___tracer(SYSTRACE_TAG, name)
+#define SYSTRACE_ENABLE()
+#define SYSTRACE_CONTEXT()
 
-// Denotes that a new frame has started processing.
-#define SYSTRACE_FRAME_ID(frame) \
-    { /* scope for frame id trace */ \
-        char buf[64]; \
-        snprintf(buf, 64, "frame %u", frame); \
-        SYSTRACE_NAME(buf); \
-    }
+#define SYSTRACE_CALL() \
+    auto constexpr FILAMENT_SYSTRACE_FUNCTION = perfetto::StaticString(__FUNCTION__); \
+    TRACE_EVENT(UTILS_PERFETTO_CATEGORY, FILAMENT_SYSTRACE_FUNCTION)
 
-// SYSTRACE_CALL is an SYSTRACE_NAME that uses the current function name.
-#define SYSTRACE_CALL() SYSTRACE_NAME(__FUNCTION__)
+#define SYSTRACE_NAME(name) TRACE_EVENT(UTILS_PERFETTO_CATEGORY, nullptr,   \
+        [&](perfetto::EventContext ctx) {                                   \
+            ctx.event()->set_name(name);                                    \
+        })
 
-#define SYSTRACE_NAME_BEGIN(name) \
-        ___trctx.traceBegin(SYSTRACE_TAG, name)
+#define SYSTRACE_NAME_BEGIN(name) TRACE_EVENT_BEGIN(UTILS_PERFETTO_CATEGORY, nullptr,   \
+        [&](perfetto::EventContext ctx) {                                               \
+            ctx.event()->set_name(name);                                                \
+        })
 
-#define SYSTRACE_NAME_END() \
-        ___trctx.traceEnd(SYSTRACE_TAG)
+#define SYSTRACE_NAME_END() TRACE_EVENT_END(UTILS_PERFETTO_CATEGORY)
 
-
-/**
- * Trace the beginning of an asynchronous event. Unlike ATRACE_BEGIN/ATRACE_END
- * contexts, asynchronous events do not need to be nested. The name describes
- * the event, and the cookie provides a unique identifier for distinguishing
- * simultaneous events. The name and cookie used to begin an event must be
- * used to end it.
- */
 #define SYSTRACE_ASYNC_BEGIN(name, cookie) \
-        ___trctx.asyncBegin(SYSTRACE_TAG, name, cookie)
+        TRACE_EVENT_BEGIN(UTILS_PERFETTO_CATEGORY, name, perfetto::Track(cookie))
 
-/**
- * Trace the end of an asynchronous event.
- * This should have a corresponding SYSTRACE_ASYNC_BEGIN.
- */
 #define SYSTRACE_ASYNC_END(name, cookie) \
-        ___trctx.asyncEnd(SYSTRACE_TAG, name, cookie)
+        TRACE_EVENT_END(UTILS_PERFETTO_CATEGORY, perfetto::Track(cookie))
+
+#define SYSTRACE_FRAME_ID(frame) \
+    TRACE_EVENT_INSTANT(UTILS_PERFETTO_CATEGORY, "frame", "id", frame)
 
-/**
- * Traces an integer counter value.  name is used to identify the counter.
- * This can be used to track how a value changes over time.
- */
 #define SYSTRACE_VALUE32(name, val) \
-        ___trctx.value(SYSTRACE_TAG, name, int32_t(val))
+    TRACE_COUNTER(UTILS_PERFETTO_CATEGORY, name, val)
 
 #define SYSTRACE_VALUE64(name, val) \
-        ___trctx.value(SYSTRACE_TAG, name, int64_t(val))
+    TRACE_COUNTER(UTILS_PERFETTO_CATEGORY, name, val)
 
-// ------------------------------------------------------------------------------------------------
-// No user serviceable code below...
-// ------------------------------------------------------------------------------------------------
-
-namespace utils {
-namespace details {
-
-class UTILS_PUBLIC Systrace {
-   public:
-
-    enum tags {
-        NEVER       = SYSTRACE_TAG_NEVER,
-        ALWAYS      = SYSTRACE_TAG_ALWAYS,
-        FILAMENT    = SYSTRACE_TAG_FILAMENT,
-        JOBSYSTEM   = SYSTRACE_TAG_JOBSYSTEM
-        // we could define more TAGS here, as we need them.
-    };
-
-    explicit Systrace(uint32_t tag) noexcept {
-        if (tag) init(tag);
-    }
-
-    static void enable(uint32_t tags) noexcept;
-    static void disable(uint32_t tags) noexcept;
-
-
-    inline void traceBegin(uint32_t tag, const char* name) noexcept {
-        if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            beginSection(this, name);
-        }
-    }
-
-    inline void traceEnd(uint32_t tag) noexcept {
-        if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            endSection(this);
-        }
-    }
-
-    inline void asyncBegin(uint32_t tag, const char* name, int32_t cookie) noexcept {
-        if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            beginAsyncSection(this, name, cookie);
-        }
-    }
-
-    inline void asyncEnd(uint32_t tag, const char* name, int32_t cookie) noexcept {
-        if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            endAsyncSection(this, name, cookie);
-        }
-    }
-
-    inline void value(uint32_t tag, const char* name, int32_t value) noexcept {
-        if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            setCounter(this, name, value);
-        }
-    }
-
-    inline void value(uint32_t tag, const char* name, int64_t value) noexcept {
-        if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            setCounter(this, name, value);
-        }
-    }
-
-   private:
-    friend class ScopedTrace;
-
-    // whether tracing is supported at all by the platform
-
-    using ATrace_isEnabled_t          = bool (*)();
-    using ATrace_beginSection_t       = void (*)(const char* sectionName);
-    using ATrace_endSection_t         = void (*)();
-    using ATrace_beginAsyncSection_t  = void (*)(const char* sectionName, int32_t cookie);
-    using ATrace_endAsyncSection_t    = void (*)(const char* sectionName, int32_t cookie);
-    using ATrace_setCounter_t         = void (*)(const char* counterName, int64_t counterValue);
-
-    struct GlobalState {
-        bool isTracingAvailable;
-        std::atomic<uint32_t> isTracingEnabled;
-        int markerFd;
-
-        ATrace_isEnabled_t ATrace_isEnabled;
-        ATrace_beginSection_t ATrace_beginSection;
-        ATrace_endSection_t ATrace_endSection;
-        ATrace_beginAsyncSection_t ATrace_beginAsyncSection;
-        ATrace_endAsyncSection_t ATrace_endAsyncSection;
-        ATrace_setCounter_t ATrace_setCounter;
-
-        void (*beginSection)(Systrace* that, const char* name);
-        void (*endSection)(Systrace* that);
-        void (*beginAsyncSection)(Systrace* that, const char* name, int32_t cookie);
-        void (*endAsyncSection)(Systrace* that, const char* name, int32_t cookie);
-        void (*setCounter)(Systrace* that, const char* name, int64_t value);
-    };
-
-    static GlobalState sGlobalState;
-
-
-    // per-instance versions for better performance
-    ATrace_isEnabled_t ATrace_isEnabled;
-    ATrace_beginSection_t ATrace_beginSection;
-    ATrace_endSection_t ATrace_endSection;
-    ATrace_beginAsyncSection_t ATrace_beginAsyncSection;
-    ATrace_endAsyncSection_t ATrace_endAsyncSection;
-    ATrace_setCounter_t ATrace_setCounter;
-
-    void (*beginSection)(Systrace* that, const char* name);
-    void (*endSection)(Systrace* that);
-    void (*beginAsyncSection)(Systrace* that, const char* name, int32_t cookie);
-    void (*endAsyncSection)(Systrace* that, const char* name, int32_t cookie);
-    void (*setCounter)(Systrace* that, const char* name, int64_t value);
-
-    void init(uint32_t tag) noexcept;
-
-    // cached values for faster access, no need to be initialized
-    bool mIsTracingEnabled;
-    int mMarkerFd = -1;
-    pid_t mPid;
-
-    static void setup() noexcept;
-    static void init_once() noexcept;
-    static bool isTracingEnabled(uint32_t tag) noexcept;
-
-    static void begin_body(int fd, int pid, const char* name) noexcept;
-    static void end_body(int fd, int pid) noexcept;
-    static void async_begin_body(int fd, int pid, const char* name, int32_t cookie) noexcept;
-    static void async_end_body(int fd, int pid, const char* name, int32_t cookie) noexcept;
-    static void int64_body(int fd, int pid, const char* name, int64_t value) noexcept;
-};
-
-// ------------------------------------------------------------------------------------------------
-
-class UTILS_PUBLIC ScopedTrace {
-public:
-    // we don't inline this because it's relatively heavy due to a global check
-    ScopedTrace(uint32_t tag, const char* name) noexcept: mTrace(tag), mTag(tag) {
-        mTrace.traceBegin(tag, name);
-    }
-
-    inline ~ScopedTrace() noexcept {
-        mTrace.traceEnd(mTag);
-    }
-
-private:
-    Systrace mTrace;
-    const uint32_t mTag;
-};
-
-} // namespace details
-} // namespace utils
+#endif // SYSTRACE_TAG == SYSTRACE_TAG_DISABLED
 
 #endif // TNT_UTILS_ANDROID_SYSTRACE_H

libs/utils/include/utils/darwin/Systrace.h

@@ -29,13 +29,25 @@
 #include <utils/compiler.h>
 #include <stack>
 
+#if SYSTRACE_TAG == SYSTRACE_TAG_DISABLED
+
+#define SYSTRACE_ENABLE()
+#define SYSTRACE_CONTEXT()
+#define SYSTRACE_NAME(name)
+#define SYSTRACE_FRAME_ID(frame)
+#define SYSTRACE_NAME_BEGIN(name)
+#define SYSTRACE_NAME_END()
+#define SYSTRACE_CALL()
+#define SYSTRACE_ASYNC_BEGIN(name, cookie)
+#define SYSTRACE_ASYNC_END(name, cookie)
+#define SYSTRACE_VALUE32(name, val)
+#define SYSTRACE_VALUE64(name, val)
+
+#else
+
 // enable tracing
 #define SYSTRACE_ENABLE() ::utils::details::Systrace::enable(SYSTRACE_TAG)
 
-// disable tracing
-#define SYSTRACE_DISABLE() ::utils::details::Systrace::disable(SYSTRACE_TAG)
-
-
 /**
  * Creates a Systrace context in the current scope. needed for calling all other systrace
  * commands below.
@@ -93,6 +105,8 @@ extern thread_local std::stack<const char*> ___tracerSections;
 #define SYSTRACE_VALUE64(name, val) \
         ___tracer.value(SYSTRACE_TAG, name, int64_t(val))
 
+#endif // SYSTRACE_TAG == SYSTRACE_TAG_DISABLED
+
 // ------------------------------------------------------------------------------------------------
 // No user serviceable code below...
 // ------------------------------------------------------------------------------------------------
@@ -118,50 +132,40 @@ namespace utils {
 namespace details {
 
 class Systrace {
-   public:
-
-    enum tags {
-        NEVER       = SYSTRACE_TAG_NEVER,
-        ALWAYS      = SYSTRACE_TAG_ALWAYS,
-        FILAMENT    = SYSTRACE_TAG_FILAMENT,
-        JOBSYSTEM   = SYSTRACE_TAG_JOBSYSTEM
-        // we could define more TAGS here, as we need them.
-    };
-
+public:
     explicit Systrace(uint32_t tag) noexcept {
         if (tag) init(tag);
     }
 
-    static void enable(uint32_t tags) noexcept;
-    static void disable(uint32_t tags) noexcept;
+    static void enable(uint32_t tag) noexcept;
 
-    inline void traceBegin(uint32_t tag, const char* name) noexcept {
+    void traceBegin(uint32_t tag, const char* name) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
             APPLE_SIGNPOST_EMIT(sGlobalState.systraceLog, OS_SIGNPOST_INTERVAL_BEGIN,
                     OS_SIGNPOST_ID_EXCLUSIVE, name, name)
         }
     }
 
-    inline void traceEnd(uint32_t tag, const char* name) noexcept {
+    void traceEnd(uint32_t tag, const char* name) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
             APPLE_SIGNPOST_EMIT(sGlobalState.systraceLog, OS_SIGNPOST_INTERVAL_END,
                     OS_SIGNPOST_ID_EXCLUSIVE, name, "")
         }
     }
 
-    inline void asyncBegin(uint32_t tag, const char* name, int32_t cookie) noexcept {
+    void asyncBegin(uint32_t tag, const char* name, int32_t cookie) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
             // TODO
         }
     }
 
-    inline void asyncEnd(uint32_t tag, const char* name, int32_t cookie) noexcept {
+    void asyncEnd(uint32_t tag, const char* name, int32_t cookie) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
             // TODO
         }
     }
 
-    inline void value(uint32_t tag, const char* name, int32_t value) noexcept {
+    void value(uint32_t tag, const char* name, int32_t value) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
             char buf[64];
             snprintf(buf, 64, "%s - %d", name, value);
@@ -170,7 +174,7 @@ class Systrace {
         }
     }
 
-    inline void value(uint32_t tag, const char* name, int64_t value) noexcept {
+    void value(uint32_t tag, const char* name, int64_t value) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
             char buf[64];
             snprintf(buf, 64, "%s - %lld", name, value);
@@ -179,16 +183,16 @@ class Systrace {
         }
     }
 
-    inline void frameId(uint32_t tag, uint32_t frame) noexcept {
+    void frameId(uint32_t tag, uint32_t frame) noexcept {
         if (tag && UTILS_UNLIKELY(mIsTracingEnabled)) {
-            char buf[64]; \
-            snprintf(buf, 64, "frame %u", frame); \
+            char buf[64];
+            snprintf(buf, 64, "frame %u", frame);
             APPLE_SIGNPOST_EMIT(sGlobalState.frameIdLog, OS_SIGNPOST_EVENT,
                     OS_SIGNPOST_ID_EXCLUSIVE, "frame", buf)
         }
     }
 
-   private:
+private:
     friend class ScopedTrace;
 
     struct GlobalState {
@@ -213,25 +217,25 @@ class Systrace {
 // ------------------------------------------------------------------------------------------------
 
 class ScopedTrace {
-   public:
+public:
     // we don't inline this because it's relatively heavy due to a global check
     ScopedTrace(uint32_t tag, const char* name) noexcept : mTrace(tag), mName(name), mTag(tag) {
         mTrace.traceBegin(tag, name);
     }
 
-    inline ~ScopedTrace() noexcept {
+    ~ScopedTrace() noexcept {
         mTrace.traceEnd(mTag, mName);
     }
 
-    inline void value(uint32_t tag, const char* name, int32_t v) noexcept {
+    void value(uint32_t tag, const char* name, int32_t v) noexcept {
         mTrace.value(tag, name, v);
     }
 
-    inline void value(uint32_t tag, const char* name, int64_t v) noexcept {
+    void value(uint32_t tag, const char* name, int64_t v) noexcept {
         mTrace.value(tag, name, v);
     }
 
-   private:
+private:
     Systrace mTrace;
     const char* mName;
     const uint32_t mTag;

libs/utils/src/JobSystem.cpp

@@ -15,10 +15,8 @@
  */
 
 // Note: The overhead of SYSTRACE_TAG_JOBSYSTEM is not negligible especially with parallel_for().
-#ifndef SYSTRACE_TAG
+#define SYSTRACE_TAG SYSTRACE_TAG_DISABLED
 //#define SYSTRACE_TAG SYSTRACE_TAG_JOBSYSTEM
-#define SYSTRACE_TAG SYSTRACE_TAG_NEVER
-#endif
 
 // when SYSTRACE_TAG_JOBSYSTEM is used, enables even heavier systraces
 #define HEAVY_SYSTRACE  0

libs/utils/src/android/Systrace.cpp

@@ -14,206 +14,26 @@
  * limitations under the License.
  */
 
-#include <utils/Systrace.h>
-#include <utils/Log.h>
+#include <utils/compiler.h>
+#include <utils/android/Systrace.h>
 
-#include <cinttypes>
+#include <perfetto/perfetto.h>
 
-#include <string.h>
+PERFETTO_TRACK_EVENT_STATIC_STORAGE_IN_NAMESPACE(systrace);
 
-#include <errno.h>
-#include <fcntl.h>
-#include <pthread.h>
-#include <dlfcn.h>
+namespace {
 
-namespace utils {
-namespace details {
-
-static pthread_once_t atrace_once_control = PTHREAD_ONCE_INIT;
-
-template <typename T>
-static void loadSymbol(T*& pfn, const char *symbol) noexcept {
-    pfn = (T*)dlsym(RTLD_DEFAULT, symbol);
-}
-
-Systrace::GlobalState Systrace::sGlobalState = {};
-
-void Systrace::init_once() noexcept {
-    GlobalState& s = sGlobalState;
-
-    s.markerFd = -1;
-
-    // API 23
-    loadSymbol(s.ATrace_isEnabled, "ATrace_isEnabled");
-    loadSymbol(s.ATrace_beginSection, "ATrace_beginSection");
-    loadSymbol(s.ATrace_endSection, "ATrace_endSection");
-    // API 29
-    loadSymbol(s.ATrace_beginAsyncSection, "ATrace_beginAsyncSection");
-    loadSymbol(s.ATrace_endAsyncSection, "ATrace_endAsyncSection");
-    loadSymbol(s.ATrace_setCounter, "ATrace_setCounter");
-
-
-    const bool hasBasicAtrace = s.ATrace_isEnabled &&
-                                s.ATrace_beginSection &&
-                                s.ATrace_endSection;
-
-    const bool hasFullATrace = hasBasicAtrace &&
-                               s.ATrace_beginAsyncSection &&
-                               s.ATrace_endAsyncSection &&
-                               s.ATrace_setCounter;
-
-    if (!hasFullATrace) {
-        s.markerFd = open("/sys/kernel/debug/tracing/trace_marker", O_WRONLY | O_CLOEXEC);
+class SystraceStaticInitialization {
+public:
+    SystraceStaticInitialization() {
+        perfetto::TracingInitArgs args;
+        args.backends |= perfetto::kSystemBackend;
+        perfetto::Tracing::Initialize(args);
+        systrace::TrackEvent::Register();
     }
+};
 
-    if (hasBasicAtrace && !hasFullATrace) {
-        // no-op if we don't have all these
-        s.ATrace_beginAsyncSection = [](const char* sectionName, int32_t cookie){};
-        s.ATrace_endAsyncSection = [](const char* sectionName, int32_t cookie){};
-        s.ATrace_setCounter = [](const char* sectionName, int64_t counterValue){};
-    }
+UTILS_UNUSED SystraceStaticInitialization sSystraceStaticInitialization{};
 
-    const bool hasLegacySystrace = s.markerFd != -1;
-
-    if (hasLegacySystrace && !hasFullATrace) {
-        // use legacy
-        s.beginSection = [](Systrace* that, const char* name) {
-            begin_body(that->mMarkerFd, that->mPid, name);
-        };
-        s.endSection = [](Systrace* that) {
-            end_body(that->mMarkerFd, that->mPid);
-        };
-        s.beginAsyncSection = [](Systrace* that, const char* name, int32_t cookie) {
-            async_begin_body(that->mMarkerFd, that->mPid, name, cookie);
-        };
-        s.endAsyncSection = [](Systrace* that, const char* name, int32_t cookie) {
-            async_end_body(that->mMarkerFd, that->mPid, name, cookie);
-        };
-        s.setCounter = [](Systrace* that, const char* name, int64_t value) {
-            int64_body(that->mMarkerFd, that->mPid, name, value);
-        };
-    } else if (hasBasicAtrace) {
-        // we have at least basic ATrace
-        s.beginSection = [](Systrace* that, const char* name) {
-            that->ATrace_beginSection(name);
-        };
-        s.endSection = [](Systrace* that) {
-            that->ATrace_endSection();
-        };
-        s.beginAsyncSection = [](Systrace* that, const char* name, int32_t cookie) {
-            that->ATrace_beginAsyncSection(name, cookie);
-        };
-        s.endAsyncSection = [](Systrace* that, const char* name, int32_t cookie) {
-            that->ATrace_endAsyncSection(name, cookie);
-        };
-        s.setCounter = [](Systrace* that, const char* name, int64_t value) {
-            that->ATrace_setCounter(name, value);
-        };
-    }
-
-    s.isTracingAvailable = hasLegacySystrace || hasFullATrace || hasBasicAtrace;
 }
 
-void Systrace::setup() noexcept {
-    pthread_once(&atrace_once_control, init_once);
-}
-
-void Systrace::enable(uint32_t tags) noexcept {
-    setup();
-    if (UTILS_LIKELY(sGlobalState.isTracingAvailable)) {
-        sGlobalState.isTracingEnabled.fetch_or(tags, std::memory_order_relaxed);
-    }
-}
-
-void Systrace::disable(uint32_t tags) noexcept {
-    sGlobalState.isTracingEnabled.fetch_and(~tags, std::memory_order_relaxed);
-}
-
-// unfortunately, this generates quite a bit of code because reading a global is not
-// trivial. For this reason, we do not inline this method.
-bool Systrace::isTracingEnabled(uint32_t tag) noexcept {
-    if (tag) {
-        setup();
-        return bool((sGlobalState.isTracingEnabled.load(std::memory_order_relaxed) | SYSTRACE_TAG_ALWAYS) & tag);
-    }
-    return false;
-}
-
-// ------------------------------------------------------------------------------------------------
-
-void Systrace::init(uint32_t tag) noexcept {
-    // must be called first
-    mIsTracingEnabled = isTracingEnabled(tag);
-
-    // cache static variables for better efficiency
-    GlobalState& s = sGlobalState;
-    ATrace_isEnabled         = s.ATrace_isEnabled;
-    ATrace_beginSection      = s.ATrace_beginSection;
-    ATrace_endSection        = s.ATrace_endSection;
-    ATrace_beginAsyncSection = s.ATrace_beginAsyncSection;
-    ATrace_endAsyncSection   = s.ATrace_endAsyncSection;
-    ATrace_setCounter        = s.ATrace_setCounter;
-
-    beginSection = s.beginSection;
-    endSection = s.endSection;
-    beginAsyncSection = s.beginAsyncSection;
-    endAsyncSection = s.endAsyncSection;
-    setCounter = s.setCounter;
-
-    mMarkerFd = s.markerFd;
-
-    mPid = getpid();
-}
-
-// ------------------------------------------------------------------------------------------------
-
-/**
- * Maximum size of a message that can be logged to the trace buffer.
- * Note this message includes a tag, the pid, and the string given as the name.
- * Names should be kept short to get the most use of the trace buffer.
- */
-#define ATRACE_MESSAGE_LENGTH 512
-
-#define WRITE_MSG(format_begin, format_end, pid, name, value) {                 \
-    char buf[ATRACE_MESSAGE_LENGTH];                                            \
-    int len = snprintf(buf, sizeof(buf), format_begin "%s" format_end, pid,     \
-        name, value);                                                           \
-    if (len >= (int) sizeof(buf)) {                                             \
-        /* Given the sizeof(buf), and all of the current format buffers,        \
-         * it is impossible for name_len to be < 0 if len >= sizeof(buf). */    \
-        int name_len = strlen(name) - (len - sizeof(buf)) - 1;                  \
-        /* Truncate the name to make the message fit. */                        \
-        len = snprintf(buf, sizeof(buf), format_begin "%.*s" format_end, pid,   \
-            name_len, name, value);                                             \
-    }                                                                           \
-    write(fd, buf, len);                                                        \
-}
-
-void Systrace::begin_body(int fd, int pid, const char* name) noexcept {
-    char buf[ATRACE_MESSAGE_LENGTH];
-    ssize_t len = snprintf(buf, sizeof(buf), "B|%d|%s", pid, name);
-    if (len >= sizeof(buf)) {
-        len = sizeof(buf) - 1;
-    }
-    write(fd, buf, size_t(len));
-}
-
-void Systrace::end_body(int fd, int pid) noexcept {
-    const char END_TAG = 'E';
-    write(fd, &END_TAG, 1);
-}
-
-void Systrace::async_begin_body(int fd, int pid, const char* name, int32_t cookie) noexcept {
-    WRITE_MSG("S|%d|", "|%" PRId32, pid, name, cookie);
-}
-
-void Systrace::async_end_body(int fd, int pid, const char* name, int32_t cookie) noexcept {
-    WRITE_MSG("F|%d|", "|%" PRId32, pid, name, cookie);
-}
-
-void Systrace::int64_body(int fd, int pid, const char* name, int64_t value) noexcept {
-    WRITE_MSG("C|%d|", "|%" PRId64, pid, name, value);
-}
-
-} // namespace details
-} // namespace utils

libs/utils/src/darwin/Systrace.cpp

@@ -14,11 +14,17 @@
  * limitations under the License.
  */
 
-#include <utils/Systrace.h>
-#include <utils/Log.h>
+#include <utils/darwin/Systrace.h>
+
+#ifndef FILAMENT_APPLE_SYSTRACE
+#   define FILAMENT_APPLE_SYSTRACE 0
+#endif
 
 #if FILAMENT_APPLE_SYSTRACE
 
+#include <atomic>
+#include <stack>
+#include <stdint.h>
 #include <pthread.h>
 
 static pthread_once_t atrace_once_control = PTHREAD_ONCE_INIT;
@@ -41,21 +47,24 @@ void Systrace::setup() noexcept {
     pthread_once(&atrace_once_control, init_once);
 }
 
-void Systrace::enable(uint32_t tags) noexcept {
+void Systrace::enable(uint32_t tag) noexcept {
     setup();
-    sGlobalState.isTracingEnabled.fetch_or(tags, std::memory_order_relaxed);
+    uint32_t const mask = 1 << tag;
+    sGlobalState.isTracingEnabled.fetch_or(mask, std::memory_order_relaxed);
 }
 
-void Systrace::disable(uint32_t tags) noexcept {
-    sGlobalState.isTracingEnabled.fetch_and(~tags, std::memory_order_relaxed);
+void Systrace::disable(uint32_t tag) noexcept {
+    uint32_t const mask = 1 << tag;
+    sGlobalState.isTracingEnabled.fetch_and(~mask, std::memory_order_relaxed);
 }
 
-// unfortunately, this generates quite a bit of code because reading a global is not
+// Unfortunately, this generates quite a bit of code because reading a global is not
 // trivial. For this reason, we do not inline this method.
 bool Systrace::isTracingEnabled(uint32_t tag) noexcept {
     if (tag) {
         setup();
-        return bool((sGlobalState.isTracingEnabled.load(std::memory_order_relaxed) | SYSTRACE_TAG_ALWAYS) & tag);
+        uint32_t const mask = 1 << tag;
+        return bool(sGlobalState.isTracingEnabled.load(std::memory_order_relaxed) & mask);
     }
     return false;
 }

web/filament-js/filament.d.ts

@@ -1176,10 +1176,10 @@ export interface View$DynamicResolutionOptions {
     /**
      * Upscaling quality
      * LOW:    bilinear filtered blit. Fastest, poor quality
-     * MEDIUM: Qualcomm Snapdragon Game Super Resolution (SGSR) 1.0
+     * MEDIUM: AMD FidelityFX FSR1 w/ mobile optimizations
      * HIGH:   AMD FidelityFX FSR1 w/ mobile optimizations
      * ULTRA:  AMD FidelityFX FSR1
-     *      FSR1 and SGSR require a well anti-aliased (MSAA or TAA), noise free scene. Avoid FXAA and dithering.
+     *      FSR1 require a well anti-aliased (MSAA or TAA), noise free scene.
      *
      * The default upscaling quality is set to LOW.
      */
@@ -1675,7 +1675,7 @@ export enum View$TemporalAntiAliasingOptions$JitterPattern {
  */
 export interface View$TemporalAntiAliasingOptions {
     /**
-     * reconstruction filter width typically between 1 (sharper) and 2 (smoother)
+     * reconstruction filter width typically between 0.2 (sharper, aliased) and 1.5 (smoother)
      */
     filterWidth?: number;
     /**

web/filament-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "filament",
-  "version": "1.59.5",
+  "version": "1.59.3",
   "description": "Real-time physically based rendering engine",
   "main": "filament.js",
   "module": "filament.js",