Quick fix for descriptor set types.

DescriptorType now also encodes wether the descriptor expects a 2D, 3D,
Cubemap and/or Array.

This is needed by both Metal and WebGPU.

[**New Material Version**]

.github/actions/dep-versions/action.yml

@@ -3,5 +3,5 @@ runs:
   using: "composite"
   steps:
     - name: Set up dependency versions
-      shell: bash    
+      shell: bash
       run: cat ./build/common/versions >> $GITHUB_ENV

.github/actions/web-prereq/action.yml

@@ -0,0 +1,16 @@
+name: 'Web Preqrequisites'
+runs:
+  using: "composite"
+  steps:
+    - uses: ./.github/actions/dep-versions
+    - name: Cache EMSDK
+      id: emsdk-cache
+      uses: actions/cache@v4 # Use a specific version
+      with:
+        path: emsdk
+        key: ${{ runner.os }}-emsdk-${{ env.GITHUB_EMSDK_VERSION }}
+    - name: Install Web Prerequisites
+      shell: bash
+      run: |
+        bash ./build/common/get-emscripten.sh
+        echo "EMSDK=$PWD/emsdk" >> $GITHUB_ENV

.github/workflows/mac-continuous.yml

@@ -26,4 +26,4 @@ jobs:
           path: out/filament-release-darwin.tgz
       - name: Check public headers
         run: |
-          build/common/check-headers.sh out/release/filament/include
+          test/check-headers/test.sh out/release/filament/include

.github/workflows/presubmit.yml

@@ -96,6 +96,7 @@ jobs:
         with:
           fetch-depth: 0
       - uses: ./.github/actions/linux-prereq
+      - uses: ./.github/actions/web-prereq
       - name: Run build script
         run: |
           cd build/web && printf "y" | ./build.sh presubmit
@@ -123,13 +124,15 @@ jobs:
       - uses: ./.github/actions/mac-prereq
       - name: Cache Mesa and deps
         id: mesa-cache
-        uses: actions/cache@v4 # Use a specific version
+        uses: actions/cache@v4
         with:
           path: mesa
           key: ${{ runner.os }}-mesa-deps-2-${{ vars.MESA_VERSION }}
-      - name: Get Mesa
-        id: mesa-prereq
-        run: bash test/utils/get_mesa.sh
+      - name: Prerequisites
+        id: prereqs
+        run: |
+          bash build/common/get-mesa.sh
+          pip install tifffile numpy
       - name: Run Test
         run: bash test/renderdiff/test.sh
       - uses: actions/upload-artifact@v4
@@ -150,8 +153,8 @@ jobs:
       - name: Run test
         run: ./out/cmake-debug/libs/filamat/test_filamat --gtest_filter=MaterialCompiler.Wgsl*
 
-  code-correcteness:
-    name: code-correctness
+  test-code-correctness:
+    name: test-code-correctness
     runs-on: 'macos-14-xlarge'
     steps:
       - uses: actions/checkout@v4.1.6

.github/workflows/release.yml

@@ -65,13 +65,9 @@ jobs:
 
   build-mac:
     name: build-mac
-    runs-on: ${{ matrix.os }}
+    runs-on: macos-14-xlarge
     if: github.event_name == 'release' || github.event.inputs.platform == 'desktop'
 
-    strategy:
-      matrix:
-        os: [macos-14-xlarge, ubuntu-22.04-32core]
-
     steps:
       - name: Decide Git ref
         id: git_ref
@@ -118,6 +114,7 @@ jobs:
         with:
           ref: ${{ steps.git_ref.outputs.ref }}
       - uses: ./.github/actions/linux-prereq
+      - uses: ./.github/actions/web-prereq
       - name: Run build script
         env:
           TAG: ${{ steps.git_ref.outputs.tag }}
@@ -166,6 +163,9 @@ jobs:
           mv out/filamat-android-release.aar out/filamat-${TAG}-android.aar
           mv out/gltfio-android-release.aar out/gltfio-${TAG}-android.aar
           mv out/filament-utils-android-release.aar out/filament-utils-${TAG}-android.aar
+          cd out/android-release/filament
+          tar -czf ../../filament-${TAG}-android-native.tgz .
+          cd ../../..
       - name: Sign sample-gltf-viewer
         run: |
           echo "${APK_KEYSTORE_BASE64}" > filament.jks.base64
@@ -187,7 +187,7 @@ jobs:
           script: |
             const upload = require('./build/common/upload-release-assets');
             const { TAG } = process.env;
-            const globber = await glob.create(['out/*.aar', 'out/*.apk'].join('\n'));
+            const globber = await glob.create(['out/*.aar', 'out/*.apk', 'out/*.tgz'].join('\n'));
             await upload({ github, context }, await globber.glob(), TAG);
 
   build-ios:

.github/workflows/web-continuous.yml

@@ -17,6 +17,7 @@ jobs:
         with:
           fetch-depth: 0
       - uses: ./.github/actions/linux-prereq
+      - uses: ./.github/actions/web-prereq
       - name: Run build script
         run: |
           cd build/web && printf "y" | ./build.sh continuous

BUILDING.md

@@ -363,6 +363,8 @@ python ./emsdk.py activate latest
 source ./emsdk_env.sh
 ```
 
+Alternatively, you can try running the script `build/common/get-emscripten.sh`.
+
 After this you can invoke the [easy build](#easy-build) script as follows:
 
 ```shell

NEW_RELEASE_NOTES.md

@@ -7,3 +7,5 @@ for next branch cut* header.
 appropriate header in [RELEASE_NOTES.md](./RELEASE_NOTES.md).
 
 ## Release notes for next branch cut
+
+- materials: sampler now export their type in the material binary [⚠️ **New Material Version**]

README.md

@@ -31,7 +31,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.google.android.filament:filament-android:1.59.3'
+    implementation 'com.google.android.filament:filament-android:1.59.5'
 }
 ```
 
@@ -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.3'
+pod 'Filament', '~> 1.59.5'
 ```
 
 ## Documentation

RELEASE_NOTES.md

@@ -7,6 +7,14 @@ 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.60.0
+
+- materials: remove dependence on per-view descset layout from filamat. [⚠️ **New Material Version**]
+- `ColorGrading::Builder::toneMapper` now takes a `shared_ptr<ToneMapper>`
+
+## v1.59.5
+
+
 ## v1.59.4
 
 

android/filament-android/src/main/cpp/ColorGrading.cpp

@@ -18,6 +18,7 @@
 
 #include <filament/ColorGrading.h>
 #include <filament/ToneMapper.h>
+#include <memory>
 
 #include <math/vec3.h>
 #include <math/vec4.h>
@@ -67,8 +68,9 @@ extern "C" JNIEXPORT void JNICALL
 Java_com_google_android_filament_ColorGrading_nBuilderToneMapper(JNIEnv*, jclass,
         jlong nativeBuilder, jlong toneMapper_) {
     ColorGrading::Builder* builder = (ColorGrading::Builder*) nativeBuilder;
-    const ToneMapper* toneMapper = (const ToneMapper*) toneMapper_;
-    builder->toneMapper(toneMapper);
+    ToneMapper* toneMapper = reinterpret_cast<ToneMapper*>(toneMapper_);
+    std::shared_ptr<ToneMapper> toneMapperCopy(toneMapper->clone());
+    builder->toneMapper(toneMapperCopy);
 }
 
 #pragma clang diagnostic push

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

@@ -214,9 +214,9 @@ public class ColorGrading {
          *
          * The default tone mapping operator is {@link ToneMapper.ACESLegacy}.
          *
-         * The specified tone mapper must have a lifecycle that exceeds the lifetime of
-         * this builder. Since the build(Engine&) method is synchronous, it is safe to
-         * delete the tone mapper object after that finishes executing.
+         * The copy of the specified tone mapper is set to this builder. It is safe to delete
+         * the original tone mapper object while the copied one is held by the built ColorGrading
+         * object.
          *
          * @param toneMapper The tone mapping operator to apply to the HDR color buffer
          *

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

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

android/gradle.properties

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

build.sh

@@ -151,7 +151,7 @@ function print_fgviewer_help {
 }
 
 # Unless explicitly specified, NDK version will be selected as highest available version within same major release chain
-FILAMENT_NDK_VERSION=${FILAMENT_NDK_VERSION:-$(cat `dirname $0`/build/android/ndk.version | cut -f 1 -d ".")}
+FILAMENT_NDK_VERSION=${FILAMENT_NDK_VERSION:-$(cat `dirname $0`/build/common/versions | grep GITHUB_NDK_VERSION | cut -f 1 -d ".")}
 
 # Requirements
 CMAKE_MAJOR=3

build/android/build.sh

@@ -1,28 +1,6 @@
 #!/bin/bash
 
-# Usage: the first argument selects the build type:
-# - release, to build release only
-# - debug, to build debug only
-# - continuous, to build release and debug
-# - presubmit, for presubmit builds
-#
-# The default is release
-
-echo "This script is intended to run in a CI environment and may modify your current environment."
-echo "Please refer to BUILDING.md for more information."
-
-read -r -p "Do you wish to proceed (y/n)? " choice
-case "${choice}" in
-    y|Y)
-              echo "Build will proceed..."
-              ;;
-    n|N)
-          exit 0
-          ;;
-          *)
-        exit 0
-        ;;
-esac
+source `dirname $0`/../common/ci-check.sh
 
 set -e
 set -x
@@ -30,11 +8,6 @@ set -x
 UNAME=`echo $(uname)`
 LC_UNAME=`echo $UNAME | tr '[:upper:]' '[:lower:]'`
 
-# build-common.sh will generate the following variables:
-#     $GENERATE_ARCHIVES
-#     $BUILD_DEBUG
-#     $BUILD_RELEASE
-source `dirname $0`/../common/ci-common.sh
 source `dirname $0`/../common/build-common.sh
 
 if [[ "$GITHUB_WORKFLOW" ]]; then

build/common/build-common.sh

@@ -1,5 +1,20 @@
 #!/bin/bash
 
+# build-common.sh will generate the following variables:
+#     $GENERATE_ARCHIVES
+#     $BUILD_DEBUG
+#     $BUILD_RELEASE
+
+# Typically a build script (build.sh) would source this script. For example,
+#   source `dirname $0`/../common/build-common.sh
+
+# Usage: the first argument selects the build type:
+# - release, to build release only
+# - debug, to build debug only
+# - continuous, to build release and debug
+# - presubmit, for presubmit builds
+#
+# The default is release
 if [[ ! "$TARGET" ]]; then
     if [[ "$1" ]]; then
         TARGET=$1

build/common/ci-check.sh

@@ -0,0 +1,19 @@
+echo "This script is intended to run in a CI environment and may modify your current environment."
+echo "Please refer to BUILDING.md for more information."
+
+read -r -p "Do you wish to proceed (y/n)? " choice
+case "${choice}" in
+    y|Y)
+	      echo "Build will proceed..."
+	      ;;
+    n|N)
+    	  exit 0
+    	  ;;
+	  *)
+        exit 0
+        ;;
+esac
+
+if [[ "$GITHUB_WORKFLOW" ]]; then
+    echo "Running workflow $GITHUB_WORKFLOW (event: $GITHUB_EVENT_NAME, action: $GITHUB_ACTION)"
+fi

build/common/ci-common.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-if [[ "$GITHUB_WORKFLOW" ]]; then
-    echo "Running workflow $GITHUB_WORKFLOW (event: $GITHUB_EVENT_NAME, action: $GITHUB_ACTION)"
-fi

build/common/get-emscripten.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+if [ -d "./emsdk" ]; then
+    echo "emsdk folder found. Assume emsdk has been installed."
+    cd emsdk
+    ./emsdk activate latest
+    source ./emsdk_env.sh
+    export EMSDK="$PWD"
+    cd ..
+    exit 0
+fi
+
+# Install emscripten.
+EMSDK_VERSION=${GITHUB_EMSDK_VERSION-3.1.60}
+curl -L https://github.com/emscripten-core/emsdk/archive/refs/tags/${EMSDK_VERSION}.zip > emsdk.zip
+unzip emsdk.zip ; mv emsdk-* emsdk ; cd emsdk
+./emsdk install latest
+./emsdk activate latest
+source ./emsdk_env.sh
+
+export EMSDK="$PWD"
+cd ..

build/common/get-mesa.sh

@@ -14,9 +14,9 @@
 
 #!/usr/bin/bash
 
-set -x
+set -e
 if [[ "$GITHUB_WORKFLOW" ]]; then
-    set -e
+    set -x
 fi
 
 OS_NAME=$(uname -s)
@@ -35,7 +35,7 @@ source ${ORIG_DIR}/venv/bin/activate
 
 NEEDED_PYTHON_DEPS=("mako" "setuptools" "pyyaml")
 for cmd in "${NEEDED_PYTHON_DEPS[@]}"; do
-    if ! python3 -m pip show "${cmd}" >/dev/null 2>&1; then
+    if ! python3 -m pip show -q "${cmd}" >/dev/null 2>&1; then
         python3 -m pip install ${cmd}
     fi
 done
@@ -145,6 +145,6 @@ deactivate
 popd
 
 if [[ "$GITHUB_WORKFLOW" ]]; then
-    set +e
+    set +x
 fi
-set +x
+set +e

build/common/versions

@@ -3,4 +3,5 @@ GITHUB_CMAKE_VERSION=3.19.5
 GITHUB_NINJA_VERSION=1.10.2
 GITHUB_MESA_VERSION=24.2.1
 GITHUB_LLVM_VERSION=16
-GITHUB_NDK_VERSION=27.0.11718014
+GITHUB_NDK_VERSION=27.0.11718014
+GITHUB_EMSDK_VERSION=3.1.60

build/ios/build.sh

@@ -1,35 +1,11 @@
 #!/bin/bash
 
-# Usage: the first argument selects the build type:
-# - release, to build release only
-# - debug, to build debug only
-# - continuous, to build release and debug
-# - presubmit, for presubmit builds
-#
-# The default is release
-
-echo "This script is intended to run in a CI environment and may modify your current environment."
-echo "Please refer to BUILDING.md for more information."
-
-read -r -p "Do you wish to proceed (y/n)? " choice
-case "${choice}" in
-    y|Y)
-	      echo "Build will proceed..."
-	      ;;
-    n|N)
-    	  exit 0
-    	  ;;
-	  *)
-        exit 0
-        ;;
-esac
+source `dirname $0`/../common/ci-check.sh
 
 set -e
 set -x
 
-source `dirname $0`/../common/ci-common.sh
 source `dirname $0`/../common/build-common.sh
-
 pushd `dirname $0`/../.. > /dev/null
 
 # If we're generating an archive for release or continuous builds, then we'll also build for the

build/linux/build.sh

@@ -1,38 +1,11 @@
 #!/bin/bash
 
-# Usage: the first argument selects the build type:
-# - release, to build release only
-# - debug, to build debug only
-# - continuous, to build release and debug
-# - presubmit, for presubmit builds
-#
-# The default is release
-
-echo "This script is intended to run in a CI environment and may modify your current environment."
-echo "Please refer to BUILDING.md for more information."
-
-read -r -p "Do you wish to proceed (y/n)? " choice
-case "${choice}" in
-    y|Y)
-	      echo "Build will proceed..."
-	      ;;
-    n|N)
-    	  exit 0
-    	  ;;
-	  *)
-        exit 0
-        ;;
-esac
+source `dirname $0`/../common/ci-check.sh
 
 set -e
 set -x
 
-# build-common.sh will generate the following variables:
-#     $GENERATE_ARCHIVES
-#     $BUILD_DEBUG
-#     $BUILD_RELEASE
-source `dirname $0`/../common/ci-common.sh
 source `dirname $0`/../common/build-common.sh
-
 pushd `dirname $0`/../.. > /dev/null
+
 ./build.sh -c $RUN_TESTS $GENERATE_ARCHIVES $BUILD_DEBUG $BUILD_RELEASE

build/mac/build.sh

@@ -1,34 +1,11 @@
 #!/bin/bash
 
-# Usage: the first argument selects the build type:
-# - release, to build release only
-# - debug, to build debug only
-# - continuous, to build release and debug
-# - presubmit, for presubmit builds
-#
-# The default is release
-
-echo "This script is intended to run in a CI environment and may modify your current environment."
-echo "Please refer to BUILDING.md for more information."
-
-read -r -p "Do you wish to proceed (y/n)? " choice
-case "${choice}" in
-    y|Y)
-	      echo "Build will proceed..."
-	      ;;
-    n|N)
-    	  exit 0
-    	  ;;
-	  *)
-        exit 0
-        ;;
-esac
+source `dirname $0`/../common/ci-check.sh
 
 set -e
 set -x
 
-source `dirname $0`/../common/ci-common.sh
 source `dirname $0`/../common/build-common.sh
-
 pushd `dirname $0`/../.. > /dev/null
+
 ./build.sh -c $RUN_TESTS $GENERATE_ARCHIVES $BUILD_DEBUG $BUILD_RELEASE

build/web/build.sh

@@ -1,34 +1,10 @@
 #!/bin/bash
 
-# Usage: the first argument selects the build type:
-# - release, to build release only
-# - debug, to build debug only
-# - continuous, to build release and debug
-# - presubmit, for presubmit builds
-#
-# The default is release
-
-echo "This script is intended to run in a CI environment and may modify your current environment."
-echo "Please refer to BUILDING.md for more information."
-
-read -r -p "Do you wish to proceed (y/n)? " choice
-case "${choice}" in
-    y|Y)
-	      echo "Build will proceed..."
-	      ;;
-    n|N)
-    	  exit 0
-    	  ;;
-	  *)
-        exit 0
-        ;;
-esac
+source `dirname $0`/../common/ci-check.sh
 
 set -e
 set -x
 
-source `dirname $0`/../common/ci-common.sh
-source `dirname $0`/ci-common.sh
 source `dirname $0`/../common/build-common.sh
 pushd `dirname $0`/../.. > /dev/null
 

build/web/ci-common.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-
-# Install emscripten.
-curl -L https://github.com/emscripten-core/emsdk/archive/refs/tags/3.1.60.zip > emsdk.zip
-unzip emsdk.zip ; mv emsdk-* emsdk ; cd emsdk
-./emsdk install latest
-./emsdk activate latest
-source ./emsdk_env.sh
-
-export EMSDK="$PWD"
-cd ..

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://twitter.com/darthmoosious">@darthmoosious</a></li></ul>
+<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>
 
 <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,26 +259,27 @@ 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">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">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">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">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">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">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">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">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>
+<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">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>
 </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>
@@ -1486,10 +1487,13 @@ 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 also have an optional <code>precision</code>, which can be
+      name must be a valid GLSL identifier. Entries 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>.
+      <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. 
 
 </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>
@@ -1752,7 +1756,13 @@ 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><p></p><pre class="listing tilde"><code><span class="line">material {</span>
+</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>
 <span class="line">    parameters : [</span>
 <span class="line">        {</span>
 <span class="line">           type : sampler2d,</span>
@@ -1779,7 +1789,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 4 strings, each must be a valid GLSL identifier.
+</p></dd><dt>Value</dt><dd><p>      Up to 5 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
@@ -1794,7 +1804,14 @@ 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><p></p><pre class="listing tilde"><code><span class="line">material {</span>
+</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>
 <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&#x27;s ECS.</td>
+<td align="left">Singleton used for constructing entities in Filament'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&#x27;s native window.</td>
+<td align="left">Represents the platform'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&#x27;s native rendering surface.</td>
+<td align="left">Represents the platform'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&#x27;s Java bindings.</p>
+This would also be more consistent with Filament's Java bindings.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='EntityManager' href='#EntityManager'>EntityManager</a></h2>
-<p>Singleton used for constructing entities in Filament&#x27;s ECS.</p>
+<p>Singleton used for constructing entities in Filament'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&#x27;s <code>delete</code> method when you&#x27;re done with it.</p>
+<p>Be sure to call the instance's <code>delete</code> method when you'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&#x27;s <code>delete</code> method when you&#x27;re done with it.</p>
+<p>Be sure to call the instance's <code>delete</code> method when you're done with it.</p>
 </div>
 <div class='classdoc'>
 <h2>class <a id='Renderer' href='#Renderer'>Renderer</a></h2>
-<p>Represents the platform&#x27;s native window.</p>
+<p>Represents the platform'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&#x27;s native rendering surface.</p>
+<p>Represents the platform'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&#x27;s <code>delete</code> method when you&#x27;re done with it.</p>
+<p>Be sure to call the instance's <code>delete</code> method when you'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&#x27;s of required assets.</li>
+<li>Array of strings containing URL'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&#x27;s invoked after each asset is downloaded.</li>
+<li>optional callback that'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&#x27;s of required assets.</li>
+<li>Array of strings containing URL'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&#x27;s and a
+<p>All JavaScript clients must call the init function, passing in a list of asset URL'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&#x27;s that absolutely must
+WebAssembly module has been loaded. Clients should only pass asset URL'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&#x27;s to Uint8Array objects.</p>
+object, which contains a mapping from URL'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&#x27;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'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&#x27;s try out <code>matc</code>. Create the following file in your favorite text editor and call it
+<p>Let'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 -a opengl -p mobile -o plastic.filamat plastic.mat
+<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
 </pre></div>
 
-<p>You should now have a material archive in your working directory, which we&#x27;ll use later in the
+<p>You should now have a material archive in your working directory, which we'll use later in the
 tutorial.</p>
 <h2>Bake environment map</h2>
-<p>Next we&#x27;ll use Filament&#x27;s <code>cmgen</code> tool to consume a HDR environment map in latlong format, and
+<p>Next we'll use Filament'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 -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
+<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
 </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: #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>
+<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>
 
-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>
+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;
 
-<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: #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: #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: #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: #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: #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: #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><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>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>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>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>
+<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>}
+}
 </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&#x27;s create a material instance from the package that we built at the beginning the tutorial.
+<p>Next let'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: #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>
+<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();
 
-<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>
+<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>);
 </pre></div>
 
-<p>The next step is to create a renderable for the sphere. To help with this, we&#x27;ll use the <code>IcoSphere</code>
+<p>The next step is to create a renderable for the sphere. To help with this, we'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&#x27;s go ahead use these arrays to build the vertex buffer and index buffer. Replace <strong>create
+<p>Let'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: #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>
+<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);
 
-<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>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>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>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>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>
+<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);
 
-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>
+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);
 
-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>
+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);
 </pre></div>
 
-<p>At this point, the app is rendering a sphere, but it is black so it doesn&#x27;t show up. To prove that
+<p>At this point, the app is rendering a sphere, but it is black so it doesn'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: #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>
+<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);
 
-<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>
+<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);
 </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&#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>
+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;
 
-<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: #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: #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">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">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: #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: #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">// 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">// 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>
+<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);
 
-scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
+scene.setIndirectLight(indirectLight);
 </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: #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>
+<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);
 </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&#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>
+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);
 
-<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>
+<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);
 </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: #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>
+<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);
 </pre></div>
 
-<p>That&#x27;s it, we now have a shiny red ball floating in an environment! The complete JavaScript file is
+<p>That'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&#x27;ll take a closer look at textures and interaction.</p>
+<p>In the <a href="tutorial_suzanne.html">next tutorial</a>, we'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&#x27;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'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&#x27;ll also be using <code>filamesh</code> and <code>mipgen</code>.</p>
+we'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&#x27;s create a compressed filamesh file for suzanne by
+called <code>filamesh</code> for simple use cases. Let'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 --compress monkey.obj suzanne.filamesh
+<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
 </pre></div>
 
 <h2>Create mipmapped textures</h2>
-<p>Next, let&#x27;s create mipmapped KTX files using filament&#x27;s <code>mipgen</code> tool. We&#x27;ll create compressed and
+<p>Next, let's create mipmapped KTX files using filament's <code>mipgen</code> tool. We'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 albedo.png albedo.ktx2
-mipgen --compression<span style="color: #666666">=</span>uastc albedo.png albedo.ktx2
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the normal map and a compressed variant.</span>
-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
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component roughness map and a compressed variant.</span>
-mipgen --grayscale roughness.png roughness.ktx
-mipgen --grayscale --compression<span style="color: #666666">=</span>uastc roughness.png roughness.ktx2
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component metallic map and a compressed variant.</span>
-mipgen --grayscale metallic.png metallic.ktx
-mipgen --grayscale --compression<span style="color: #666666">=</span>uastc metallic.png metallic.ktx2
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component occlusion map and a compressed variant.</span>
-mipgen --grayscale ao.png ao.ktx
-mipgen --grayscale --compression<span style="color: #666666">=</span>uastc ao.png ao.ktx2
+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
 </pre></div>
 
-<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>
+<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>
 <h2>Bake environment map</h2>
-<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>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>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 -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> -
+<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>-
 
-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
+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
 </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&#x27;ll create a material that uses textures for several parameters.</p>
+demo, we'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 -a opengl -p mobile -o textured.filamat textured.mat
+<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
 </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><span style="color: #bbbbbb"></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>
 
-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>
+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>]);
+});
 
-<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: #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: #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>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>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: #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: #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: #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: #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">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">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">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">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><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>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>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>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>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><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>
+<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>}
+}
 </pre></div>
 
-<p>Our app will only require a subset of assets to be present for <code>App</code> construction. We&#x27;ll download
+<p>Our app will only require a subset of assets to be present for <code>App</code> construction. We'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: #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>
+<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>);
 
-<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>
+<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>;
 </pre></div>
 
 <h2>Create skybox and IBL</h2>
-<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>
+<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);
 </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&#x27;ll invoke the <code>Filament.fetch</code> function from within the app constructor. This function is
+<p>Next we'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&#x27;ll make several <code>setTextureParameter</code> calls on the material instance, then we&#x27;ll
+<p>In our callback, we'll make several <code>setTextureParameter</code> calls on the material instance, then we'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: #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>
+<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);
 
-<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">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">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: #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: #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: #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: #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>
+<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);
+});
 </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: #666666">=</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: #666">=</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: #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>
+<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>});
 </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: #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>
+<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>();
 </pre></div>
 
-<p>That&#x27;s it, we now have a fast-loading interactive demo. The complete JavaScript file is available
+<p>That'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&#x27;s also used to generate the JavaScript for the above demo.
+web page, it'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&#x27;ll often see
+(generating JS). In the code samples, you'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: #666666">=</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: #666">=</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: #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">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">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: #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">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">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: #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>
+<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>}
+}
 
-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>
+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>);
 </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&#x27;ll do most of the
+become ready. In our callback, we simply instantiated the <code>App</code> object, since we'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&#x27;ll learn more about material packages in the next tutorial.</p>
+that define a PBR material. We'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 -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>
+<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>
 </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&#x27;s simple server in production since it does not serve WebAssembly files
+<p>Take care not to use Python'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&#x27;s start adding
+<p>We now have a basic skeleton that can respond to paint and resize events. Let'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: #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>
+<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);
 </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&#x27;s go ahead and create a scene, then add a blank entity called <code>triangle</code> into the
+entities. Let'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: #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>
+<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);
 </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&#x27;ll create two typed arrays: a positions array with XY coordinates for each vertex, and a
+<p>Next we'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: #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>
+<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>),
+]);
 
-<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>
+<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>]);
 </pre></div>
 
-<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>
+<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);
 
-<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>
+<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);
 </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&#x27;ll construct an index buffer. The index buffer for our triangle is trivial: it simply holds
+<p>Next we'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: #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>
+<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);
 
-<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>
+<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>]));
 </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&#x27;s construct an actual <code>Material</code> from the material package that was downloaded (the
+<p>Next let'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&#x27;ll learn more about material instances in the
+parameters, and they can be bound to renderables. We'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: #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>
+<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);
 </pre></div>
 
-<p>Next let&#x27;s wrap up the initialization routine by creating the swap chain, renderer, camera, and
+<p>Next let'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: #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>
+<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);
 
-<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">// 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">// 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>
+<span style="color: #3D7B7B; font-style: italic">// Adjust the initial viewport:</span>
+<span style="color: #008000; font-weight: bold">this</span>.resize();
 </pre></div>
 
-<p>At this point, we&#x27;re done creating all Filament entities, and the code should run without errors.
+<p>At this point, we'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: #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>
+<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);
+}
 </pre></div>
 
-<p>Let&#x27;s flesh this out by rotating the triangle and invoking the Filament renderer. Add the following
+<p>Let'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: #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>
+<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>();
 
-<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>
+<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);
 </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: #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>
+<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]);
 
-<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>
+<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>);
 </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&#x27;ll take a closer look at Filament materials and 3D rendering.</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>
 
 </body>
 </html>

docs_src/src/SUMMARY.md

@@ -18,6 +18,7 @@
     - [Metal](./notes/metal_debugging.md)
     - [Vulkan](./notes/vulkan_debugging.md)
     - [SPIR-V](./notes/spirv_debugging.md)
+    - [Running with ASAN and UBSAN](./notes/asan_ubsan.md)
   - [Libraries](./notes/libs.md)
     - [bluegl](./dup/bluegl.md)
     - [bluevk](./dup/bluevk.md)

docs_src/src/notes/asan_ubsan.md

@@ -0,0 +1,41 @@
+# Running with ASAN/UBSAN
+
+## Enabling
+
+When building though build.sh, pass the `-b` flag. This sets the cmake variable
+`FILAMENT_ENABLE_ASAN_UBSAN=ON` which eventually passes `"-fsanitize=address -fsanitize=undefined"`
+to all compile and link operations.
+
+If building through CMake directly, or an IDE like CLion that doesn't use build.sh, instead pass
+`-DFILAMENT_ENABLE_ASAN_UBSAN=ON` to cmake in order to get the same result.
+
+## Getting memory leak detection on Mac
+
+Memory leak detection isn't enabled by default on MacOS. There are two issues to address, first is
+using a version of clang that supports memory leak detection and second is enabling it at runtime.
+
+The version of clang distributed by Apple (with a version like "Apple clang version 16.0.0") doesn't
+currently support leak detection at all. Instead you will need to get or build a different LLVM,
+such as the one distributed through homebrew and get CMake to use that instead.
+
+Then during runtime you'll need to have the environment variable `ASAN_OPTIONS` include the option
+`detect_leaks=1`. Multiple `ASAN_OPTIONS` values are concatenated with `:`.
+
+## Getting memory leak output in CLion
+
+### Setting variables
+
+Under `Settings | Build, Execution, Deployment | Dynamic Analysis Tools | Sanitizers` there is an
+ASAN Settings field that overrides whatever other `ASAN_OPTIONS` you might set elsewhere, so you
+must use that instead of setting it through your Run/Debug Configuration.
+
+To pass `-DFILAMENT_ENABLE_ASAN_UBSAN=ON` to CMake you'll want to create a new CMake Profile and
+pass it as a CMake argument.
+
+### Avoiding losing output
+
+CMake will consume ASAN output and display it through a separate "Sanitizers" tab. Unfortunately
+certain leak detection errors that interrupt the executable seem to not show up in this tab, but are
+still removed from the user-visible console output. If this is happening and you need to see the
+unfiltered console output you'll need to go to `Settings | Build, Execution, Deployment | Dynamic
+Analysis Tools | Sanitizers` and uncheck "Use visual representation for Sanitizer's output".

filament/backend/include/backend/DriverEnums.h

@@ -30,12 +30,14 @@
 #include <utils/compiler.h>
 #include <utils/debug.h>
 #include <utils/ostream.h>
+#include <utils/StaticString.h>
 
 #include <math/vec4.h>
 
 #include <array>
 #include <type_traits>
 #include <variant>
+#include <string_view>
 
 #include <stddef.h>
 #include <stdint.h>
@@ -158,7 +160,7 @@ enum class TimerQueryResult : int8_t {
     AVAILABLE = 1,  // result is available
 };
 
-static constexpr const char* backendToString(Backend backend) {
+ constexpr std::string_view to_string(Backend const backend) noexcept {
     switch (backend) {
         case Backend::NOOP:
             return "Noop";
@@ -170,9 +172,11 @@ static constexpr const char* backendToString(Backend backend) {
             return "Metal";
         case Backend::WEBGPU:
             return "WebGPU";
-        default:
-            return "Unknown";
+        case Backend::DEFAULT:
+            return "Default";
+            break;
     }
+    return "Unknown";
 }
 
 /**
@@ -189,7 +193,7 @@ enum class ShaderLanguage {
     WGSL = 5,
 };
 
-static constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguage) {
+constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguage) noexcept {
     switch (shaderLanguage) {
         case ShaderLanguage::ESSL1:
             return "ESSL 1.0";
@@ -204,6 +208,7 @@ static constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguag
         case ShaderLanguage::WGSL:
             return "WGSL";
     }
+    return "UNKNOWN";
 }
 
 enum class ShaderStage : uint8_t {
@@ -221,7 +226,7 @@ enum class ShaderStageFlags : uint8_t {
     ALL_SHADER_STAGE_FLAGS = VERTEX | FRAGMENT | COMPUTE
 };
 
-static inline constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage type) noexcept {
+ constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage type) noexcept {
     switch (type) {
         case ShaderStage::VERTEX:
             return bool(uint8_t(flags) & uint8_t(ShaderStageFlags::VERTEX));
@@ -232,14 +237,114 @@ static inline constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage t
     }
 }
 
-enum class DescriptorType : uint8_t {
-    UNIFORM_BUFFER,
-    SHADER_STORAGE_BUFFER,
-    SAMPLER,
-    INPUT_ATTACHMENT,
-    SAMPLER_EXTERNAL
+enum class TextureType : uint8_t {
+    FLOAT,
+    INT,
+    UINT,
+    DEPTH,
+    STENCIL,
+    DEPTH_STENCIL
 };
 
+ constexpr std::string_view to_string(TextureType type) noexcept {
+    switch (type) {
+        case TextureType::FLOAT:            return "FLOAT";
+        case TextureType::INT:              return "INT";
+        case TextureType::UINT:             return "UINT";
+        case TextureType::DEPTH:            return "DEPTH";
+        case TextureType::STENCIL:          return "STENCIL";
+        case TextureType::DEPTH_STENCIL:    return "DEPTH_STENCIL";
+    }
+    return "UNKNOWN";
+}
+
+ enum class DescriptorType : uint8_t {
+     SAMPLER_2D_FLOAT,
+     SAMPLER_2D_INT,
+     SAMPLER_2D_UINT,
+     SAMPLER_2D_DEPTH,
+
+     SAMPLER_2D_ARRAY_FLOAT,
+     SAMPLER_2D_ARRAY_INT,
+     SAMPLER_2D_ARRAY_UINT,
+     SAMPLER_2D_ARRAY_DEPTH,
+
+     SAMPLER_CUBE_FLOAT,
+     SAMPLER_CUBE_INT,
+     SAMPLER_CUBE_UINT,
+     SAMPLER_CUBE_DEPTH,
+
+     SAMPLER_CUBE_ARRAY_FLOAT,
+     SAMPLER_CUBE_ARRAY_INT,
+     SAMPLER_CUBE_ARRAY_UINT,
+     SAMPLER_CUBE_ARRAY_DEPTH,
+
+     SAMPLER_3D_FLOAT,
+     SAMPLER_3D_INT,
+     SAMPLER_3D_UINT,
+
+     SAMPLER_EXTERNAL,
+     UNIFORM_BUFFER,
+     SHADER_STORAGE_BUFFER,
+     INPUT_ATTACHMENT,
+ };
+
+ constexpr bool isDepthDescriptor(DescriptorType const type) noexcept {
+     switch (type) {
+         case DescriptorType::SAMPLER_2D_DEPTH:
+         case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+         case DescriptorType::SAMPLER_CUBE_DEPTH:
+         case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+             return true;
+         default: ;
+     }
+     return false;
+ }
+
+ constexpr bool isFloatDescriptor(DescriptorType const type) noexcept {
+     switch (type) {
+         case DescriptorType::SAMPLER_2D_FLOAT:
+         case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+         case DescriptorType::SAMPLER_CUBE_FLOAT:
+         case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+         case DescriptorType::SAMPLER_3D_FLOAT:
+             return true;
+         default: ;
+     }
+     return false;
+ }
+
+constexpr std::string_view to_string(DescriptorType type) noexcept {
+    #define DESCRIPTOR_TYPE_CASE(TYPE)  case DescriptorType::TYPE: return #TYPE;
+    switch (type) {
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_FLOAT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_INT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_UINT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_DEPTH)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_ARRAY_FLOAT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_ARRAY_INT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_ARRAY_UINT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_ARRAY_DEPTH)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_FLOAT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_INT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_UINT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_DEPTH)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_ARRAY_FLOAT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_ARRAY_INT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_ARRAY_UINT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_CUBE_ARRAY_DEPTH)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_3D_FLOAT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_3D_INT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_3D_UINT)
+        DESCRIPTOR_TYPE_CASE(SAMPLER_EXTERNAL)
+        DESCRIPTOR_TYPE_CASE(UNIFORM_BUFFER)
+        DESCRIPTOR_TYPE_CASE(SHADER_STORAGE_BUFFER)
+        DESCRIPTOR_TYPE_CASE(INPUT_ATTACHMENT)
+    }
+    return "UNKNOWN";
+    #undef DESCRIPTOR_TYPE_CASE
+}
+
 enum class DescriptorFlags : uint8_t {
     NONE = 0x00,
     DYNAMIC_OFFSET = 0x01
@@ -250,6 +355,13 @@ using descriptor_set_t = uint8_t;
 using descriptor_binding_t = uint8_t;
 
 struct DescriptorSetLayoutBinding {
+    static bool isSampler(DescriptorType type) noexcept {
+        return int(type) <= int(DescriptorType::SAMPLER_EXTERNAL);
+    }
+    static bool isBuffer(DescriptorType type) noexcept {
+        return type == DescriptorType::UNIFORM_BUFFER ||
+               type == DescriptorType::SHADER_STORAGE_BUFFER;
+    }
     DescriptorType type;
     ShaderStageFlags stageFlags;
     descriptor_binding_t binding;
@@ -260,7 +372,7 @@ struct DescriptorSetLayoutBinding {
     //  no uninitialized padding bytes.
     //    uint8_t externalSamplerDataIndex = EXTERNAL_SAMPLER_DATA_INDEX_UNUSED;
 
-    friend inline bool operator==(DescriptorSetLayoutBinding const& lhs,
+    friend bool operator==(DescriptorSetLayoutBinding const& lhs,
             DescriptorSetLayoutBinding const& rhs) noexcept {
         return lhs.type == rhs.type &&
                lhs.flags == rhs.flags &&
@@ -293,7 +405,7 @@ enum class TargetBufferFlags : uint32_t {
     ALL = COLOR_ALL | DEPTH | STENCIL       //!< Color, depth and stencil buffer selected.
 };
 
-inline constexpr TargetBufferFlags getTargetBufferFlagsAt(size_t index) noexcept {
+ constexpr TargetBufferFlags getTargetBufferFlagsAt(size_t index) noexcept {
     if (index == 0u) return TargetBufferFlags::COLOR0;
     if (index == 1u) return TargetBufferFlags::COLOR1;
     if (index == 2u) return TargetBufferFlags::COLOR2;
@@ -450,6 +562,24 @@ enum class SamplerType : uint8_t {
     SAMPLER_CUBEMAP_ARRAY,  //!< Cube map array texture (feature level 2)
 };
 
+constexpr std::string_view to_string(SamplerType const type) noexcept {
+    switch (type) {
+        case SamplerType::SAMPLER_2D:
+            return "SAMPLER_2D";
+        case SamplerType::SAMPLER_2D_ARRAY:
+            return "SAMPLER_2D_ARRAY";
+        case SamplerType::SAMPLER_CUBEMAP:
+            return "SAMPLER_CUBEMAP";
+        case SamplerType::SAMPLER_EXTERNAL:
+            return "SAMPLER_EXTERNAL";
+        case SamplerType::SAMPLER_3D:
+            return "SAMPLER_3D";
+        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
+            return "SAMPLER_CUBEMAP_ARRAY";
+    }
+    return "Unknown";
+}
+
 //! Subpass type
 enum class SubpassType : uint8_t {
     SUBPASS_INPUT
@@ -463,6 +593,20 @@ enum class SamplerFormat : uint8_t {
     SHADOW = 3      //!< shadow sampler (PCF)
 };
 
+constexpr std::string_view to_string(SamplerFormat const format) noexcept {
+    switch (format) {
+        case SamplerFormat::INT:
+            return "INT";
+        case SamplerFormat::UINT:
+            return "UINT";
+        case SamplerFormat::FLOAT:
+            return "FLOAT";
+        case SamplerFormat::SHADOW:
+            return "SHADOW";
+    }
+    return "Unknown";
+}
+
 /**
  * Supported element types
  */
@@ -763,6 +907,8 @@ enum class TextureFormat : uint16_t {
     SRGB_ALPHA_BPTC_UNORM,  // BC7 sRGB
 };
 
+TextureType getTextureType(TextureFormat format) noexcept;
+
 //! Bitmask describing the intended Texture Usage
 enum class TextureUsage : uint16_t {
     NONE                = 0x0000,
@@ -790,7 +936,7 @@ enum class TextureSwizzle : uint8_t {
 };
 
 //! returns whether this format a depth format
-static constexpr bool isDepthFormat(TextureFormat format) noexcept {
+ constexpr bool isDepthFormat(TextureFormat format) noexcept {
     switch (format) {
         case TextureFormat::DEPTH32F:
         case TextureFormat::DEPTH24:
@@ -803,7 +949,7 @@ static constexpr bool isDepthFormat(TextureFormat format) noexcept {
     }
 }
 
-static constexpr bool isStencilFormat(TextureFormat format) noexcept {
+ constexpr bool isStencilFormat(TextureFormat format) noexcept {
     switch (format) {
         case TextureFormat::STENCIL8:
         case TextureFormat::DEPTH24_STENCIL8:
@@ -814,7 +960,7 @@ static constexpr bool isStencilFormat(TextureFormat format) noexcept {
     }
 }
 
-inline constexpr bool isColorFormat(TextureFormat format) noexcept {
+ constexpr bool isColorFormat(TextureFormat format) noexcept {
     switch (format) {
         // Standard color formats
         case TextureFormat::R8:
@@ -841,7 +987,7 @@ inline constexpr bool isColorFormat(TextureFormat format) noexcept {
     return false;
 }
 
-static constexpr bool isUnsignedIntFormat(TextureFormat format) {
+ constexpr bool isUnsignedIntFormat(TextureFormat format) {
     switch (format) {
         case TextureFormat::R8UI:
         case TextureFormat::R16UI:
@@ -862,7 +1008,7 @@ static constexpr bool isUnsignedIntFormat(TextureFormat format) {
     }
 }
 
-static constexpr bool isSignedIntFormat(TextureFormat format) {
+ constexpr bool isSignedIntFormat(TextureFormat format) {
     switch (format) {
         case TextureFormat::R8I:
         case TextureFormat::R16I:
@@ -884,35 +1030,35 @@ static constexpr bool isSignedIntFormat(TextureFormat format) {
 }
 
 //! returns whether this format is a compressed format
-static constexpr bool isCompressedFormat(TextureFormat format) noexcept {
+ constexpr bool isCompressedFormat(TextureFormat format) noexcept {
     return format >= TextureFormat::EAC_R11;
 }
 
 //! returns whether this format is an ETC2 compressed format
-static constexpr bool isETC2Compression(TextureFormat format) noexcept {
+ constexpr bool isETC2Compression(TextureFormat format) noexcept {
     return format >= TextureFormat::EAC_R11 && format <= TextureFormat::ETC2_EAC_SRGBA8;
 }
 
 //! returns whether this format is an S3TC compressed format
-static constexpr bool isS3TCCompression(TextureFormat format) noexcept {
+ constexpr bool isS3TCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::DXT1_RGB && format <= TextureFormat::DXT5_SRGBA;
 }
 
-static constexpr bool isS3TCSRGBCompression(TextureFormat format) noexcept {
+ constexpr bool isS3TCSRGBCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::DXT1_SRGB && format <= TextureFormat::DXT5_SRGBA;
 }
 
 //! returns whether this format is an RGTC compressed format
-static constexpr bool isRGTCCompression(TextureFormat format) noexcept {
+ constexpr bool isRGTCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::RED_RGTC1 && format <= TextureFormat::SIGNED_RED_GREEN_RGTC2;
 }
 
 //! returns whether this format is an BPTC compressed format
-static constexpr bool isBPTCCompression(TextureFormat format) noexcept {
+constexpr bool isBPTCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::RGB_BPTC_SIGNED_FLOAT && format <= TextureFormat::SRGB_ALPHA_BPTC_UNORM;
 }
 
-static constexpr bool isASTCCompression(TextureFormat format) noexcept {
+constexpr bool isASTCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::RGBA_ASTC_4x4 && format <= TextureFormat::SRGB8_ALPHA8_ASTC_12x12;
 }
 
@@ -1037,15 +1183,19 @@ struct SamplerParams {             // NOLINT
         }
     };
 
+    bool isFiltered() const noexcept {
+        return filterMag != SamplerMagFilter::NEAREST || filterMin != SamplerMinFilter::NEAREST;
+    }
+
 private:
-    friend inline bool operator == (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return SamplerParams::EqualTo{}(lhs, rhs);
+    friend bool operator == (SamplerParams lhs, SamplerParams rhs) noexcept {
+        return EqualTo{}(lhs, rhs);
     }
-    friend inline bool operator != (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return  !SamplerParams::EqualTo{}(lhs, rhs);
+    friend bool operator != (SamplerParams lhs, SamplerParams rhs) noexcept {
+        return  !EqualTo{}(lhs, rhs);
     }
-    friend inline bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return SamplerParams::LessThan{}(lhs, rhs);
+    friend bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
+        return LessThan{}(lhs, rhs);
     }
 };
 
@@ -1095,15 +1245,15 @@ struct SamplerYcbcrConversion {// NOLINT
     };
 
 private:
-    friend inline bool operator == (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+    friend bool operator == (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
             noexcept {
         return SamplerYcbcrConversion::EqualTo{}(lhs, rhs);
     }
-    friend inline bool operator != (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+    friend bool operator != (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
             noexcept {
         return  !SamplerYcbcrConversion::EqualTo{}(lhs, rhs);
     }
-    friend inline bool operator < (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+    friend bool operator < (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
             noexcept {
         return SamplerYcbcrConversion::LessThan{}(lhs, rhs);
     }
@@ -1139,6 +1289,7 @@ struct ExternalSamplerDatum {
 static_assert(sizeof(ExternalSamplerDatum) == 12);
 
 struct DescriptorSetLayout {
+    std::variant<utils::StaticString, utils::CString, std::monostate> label;
     utils::FixedCapacityVector<DescriptorSetLayoutBinding> bindings;
 
 //  TODO: uncomment when needed
@@ -1455,6 +1606,11 @@ 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/Program.h

@@ -44,8 +44,8 @@ public:
 
     struct Descriptor {
         utils::CString name;
-        backend::DescriptorType type;
-        backend::descriptor_binding_t binding;
+        DescriptorType type;
+        descriptor_binding_t binding;
     };
 
     struct SpecializationConstant {

filament/backend/src/BackendUtils.cpp

@@ -18,6 +18,8 @@
 
 #include "DataReshaper.h"
 
+#include <backend/DriverEnums.h>
+
 #include <utils/CString.h>
 
 #include <string_view>
@@ -223,6 +225,143 @@ size_t getFormatSize(TextureFormat format) noexcept {
     }
 }
 
+TextureType getTextureType(TextureFormat const format) noexcept {
+    switch (format) {
+        case TextureFormat::UNUSED:
+            // should not happen
+            return TextureType::FLOAT;
+
+        case TextureFormat::R8:
+        case TextureFormat::R16F:
+        case TextureFormat::RG8:
+        case TextureFormat::RGB565:
+        case TextureFormat::RGB5_A1:
+        case TextureFormat::RGBA4:
+        case TextureFormat::R32F:
+        case TextureFormat::RGB8:
+        case TextureFormat::SRGB8:
+        case TextureFormat::RG16F:
+        case TextureFormat::R11F_G11F_B10F:
+        case TextureFormat::RGB9_E5:
+        case TextureFormat::RGBA8:
+        case TextureFormat::SRGB8_A8:
+        case TextureFormat::RGB10_A2:
+        case TextureFormat::RGB16F:
+        case TextureFormat::RG32F:
+        case TextureFormat::RGBA16F:
+        case TextureFormat::RGB32F:
+        case TextureFormat::RGBA32F:
+            return TextureType::FLOAT;
+
+        case TextureFormat::R8_SNORM:
+        case TextureFormat::RG8_SNORM:
+        case TextureFormat::RGB8_SNORM:
+        case TextureFormat::RGBA8_SNORM:
+            // SNORM are treated as float
+            return TextureType::FLOAT;
+
+        case TextureFormat::R8UI:
+        case TextureFormat::R16UI:
+        case TextureFormat::RG8UI:
+        case TextureFormat::RGB8UI:
+        case TextureFormat::R32UI:
+        case TextureFormat::RG16UI:
+        case TextureFormat::RGBA8UI:
+        case TextureFormat::RGB16UI:
+        case TextureFormat::RG32UI:
+        case TextureFormat::RGBA16UI:
+        case TextureFormat::RGB32UI:
+        case TextureFormat::RGBA32UI:
+            return TextureType::UINT;
+
+        case TextureFormat::R8I:
+        case TextureFormat::R16I:
+        case TextureFormat::RG8I:
+        case TextureFormat::RGB8I:
+        case TextureFormat::R32I:
+        case TextureFormat::RG16I:
+        case TextureFormat::RGBA8I:
+        case TextureFormat::RGB16I:
+        case TextureFormat::RG32I:
+        case TextureFormat::RGBA16I:
+        case TextureFormat::RGB32I:
+        case TextureFormat::RGBA32I:
+            return TextureType::INT;
+
+        case TextureFormat::DEPTH16:
+        case TextureFormat::DEPTH24:
+        case TextureFormat::DEPTH32F:
+            return TextureType::DEPTH;
+
+        case TextureFormat::STENCIL8:
+            return TextureType::STENCIL;
+
+        case TextureFormat::DEPTH24_STENCIL8:
+        case TextureFormat::DEPTH32F_STENCIL8:
+            return TextureType::DEPTH_STENCIL;
+
+        // Compressed formats ---------------------------------------------------------------------
+
+        case TextureFormat::EAC_RG11:
+        case TextureFormat::EAC_RG11_SIGNED:
+        case TextureFormat::ETC2_EAC_RGBA8:
+        case TextureFormat::ETC2_EAC_SRGBA8:
+        case TextureFormat::EAC_R11:
+        case TextureFormat::EAC_R11_SIGNED:
+        case TextureFormat::ETC2_RGB8:
+        case TextureFormat::ETC2_SRGB8:
+        case TextureFormat::ETC2_RGB8_A1:
+        case TextureFormat::ETC2_SRGB8_A1:
+        case TextureFormat::DXT1_RGB:
+        case TextureFormat::DXT1_RGBA:
+        case TextureFormat::DXT1_SRGB:
+        case TextureFormat::DXT1_SRGBA:
+        case TextureFormat::DXT3_RGBA:
+        case TextureFormat::DXT3_SRGBA:
+        case TextureFormat::DXT5_RGBA:
+        case TextureFormat::DXT5_SRGBA:
+        case TextureFormat::RED_RGTC1:
+        case TextureFormat::SIGNED_RED_RGTC1:
+        case TextureFormat::RED_GREEN_RGTC2:
+        case TextureFormat::SIGNED_RED_GREEN_RGTC2:
+        case TextureFormat::RGB_BPTC_SIGNED_FLOAT:
+        case TextureFormat::RGB_BPTC_UNSIGNED_FLOAT:
+        case TextureFormat::RGBA_BPTC_UNORM:
+        case TextureFormat::SRGB_ALPHA_BPTC_UNORM:
+        case TextureFormat::RGBA_ASTC_4x4:
+        case TextureFormat::RGBA_ASTC_5x4:
+        case TextureFormat::RGBA_ASTC_5x5:
+        case TextureFormat::RGBA_ASTC_6x5:
+        case TextureFormat::RGBA_ASTC_6x6:
+        case TextureFormat::RGBA_ASTC_8x5:
+        case TextureFormat::RGBA_ASTC_8x6:
+        case TextureFormat::RGBA_ASTC_8x8:
+        case TextureFormat::RGBA_ASTC_10x5:
+        case TextureFormat::RGBA_ASTC_10x6:
+        case TextureFormat::RGBA_ASTC_10x8:
+        case TextureFormat::RGBA_ASTC_10x10:
+        case TextureFormat::RGBA_ASTC_12x10:
+        case TextureFormat::RGBA_ASTC_12x12:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_4x4:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_5x4:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_5x5:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_6x5:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_6x6:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_8x5:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_8x6:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_8x8:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_10x5:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_10x6:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_10x8:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_10x10:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_12x10:
+        case TextureFormat::SRGB8_ALPHA8_ASTC_12x12:
+            return TextureType::FLOAT;
+    }
+
+    return TextureType::FLOAT;
+}
+
 size_t getFormatComponentCount(TextureFormat format) noexcept {
     switch (format) {
         case TextureFormat::R8:

filament/backend/src/CommandStream.cpp

@@ -84,7 +84,7 @@ void CommandStream::execute(void* buffer) {
 
     Profiler profiler;
 
-    if constexpr (SYSTRACE_TAG) {
+    if (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 constexpr (SYSTRACE_TAG) {
+    if (SYSTRACE_TAG) {
         if (UTILS_UNLIKELY(mUsePerformanceCounter)) {
             // we want to remove all this when tracing is completely disabled
             profiler.stop();

filament/backend/src/metal/MetalDriver.mm

@@ -672,22 +672,8 @@ void MetalDriver::createTimerQueryR(Handle<HwTimerQuery> tqh, int) {
     // nothing to do, timer query was constructed in createTimerQueryS
 }
 
-const char* toString(DescriptorType type) {
-    switch (type) {
-        case DescriptorType::UNIFORM_BUFFER:
-            return "UNIFORM_BUFFER";
-        case DescriptorType::SHADER_STORAGE_BUFFER:
-            return "SHADER_STORAGE_BUFFER";
-        case DescriptorType::SAMPLER:
-            return "SAMPLER";
-        case DescriptorType::INPUT_ATTACHMENT:
-            return "INPUT_ATTACHMENT";
-        case DescriptorType::SAMPLER_EXTERNAL:
-            return "SAMPLER_EXTERNAL";
-    }
-}
-
-const char* toString(ShaderStageFlags flags) {
+UTILS_UNUSED
+static const char* toString(ShaderStageFlags flags) {
     std::vector<const char*> stages;
     if (any(flags & ShaderStageFlags::VERTEX)) {
         stages.push_back("VERTEX");

filament/backend/src/metal/MetalEnums.h

@@ -185,6 +185,7 @@ inline MTLPixelFormat getMetalFormat(PixelDataFormat format, PixelDataType type)
     CONVERT(RGBA_INTEGER, UINT, RGBA32Uint);
     CONVERT(RGBA_INTEGER, INT, RGBA32Sint);
     CONVERT(RGBA, FLOAT, RGBA32Float);
+    CONVERT(DEPTH_COMPONENT, FLOAT, Depth32Float);
     #undef CONVERT
 
     return MTLPixelFormatInvalid;

filament/backend/src/metal/MetalHandles.mm

@@ -1356,7 +1356,25 @@ id<MTLArgumentEncoder> MetalDescriptorSetLayout::getArgumentEncoderSlow(id<MTLDe
                 [arguments addObject:bufferArgument];
                 break;
             }
-            case DescriptorType::SAMPLER:
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_DEPTH:
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_3D_FLOAT:
+            case DescriptorType::SAMPLER_3D_INT:
+            case DescriptorType::SAMPLER_3D_UINT:
             case DescriptorType::SAMPLER_EXTERNAL: {
                 MTLArgumentDescriptor* textureArgument = [MTLArgumentDescriptor argumentDescriptor];
                 textureArgument.index = binding.binding * 2;
@@ -1472,7 +1490,25 @@ id<MTLBuffer> MetalDescriptorSet::finalizeAndGetBuffer(MetalDriver* driver, Shad
                            atIndex:binding.binding * 2];
                 break;
             }
-            case DescriptorType::SAMPLER:
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_DEPTH:
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_3D_FLOAT:
+            case DescriptorType::SAMPLER_3D_INT:
+            case DescriptorType::SAMPLER_3D_UINT:
             case DescriptorType::SAMPLER_EXTERNAL: {
                 auto found = textures.find(binding.binding);
                 if (found == textures.end()) {

filament/backend/src/opengl/BindingMap.h

@@ -69,9 +69,8 @@ public:
         assert_invariant(set < MAX_DESCRIPTOR_SET_COUNT);
         assert_invariant(binding < MAX_DESCRIPTOR_COUNT);
         assert_invariant(entry.binding < 128); // we reserve 1 bit for the type right now
-        mStorage[set][binding] = { (uint8_t)entry.binding,
-                                   entry.type == DescriptorType::SAMPLER ||
-                                   entry.type == DescriptorType::SAMPLER_EXTERNAL };
+        mStorage[set][binding] = { uint8_t(entry.binding),
+                                   DescriptorSetLayoutBinding::isSampler(entry.type) };
         mActiveDescriptors[set].set(binding);
     }
 

filament/backend/src/opengl/GLDescriptorSet.cpp

@@ -95,7 +95,26 @@ GLDescriptorSet::GLDescriptorSet(OpenGLContext& gl, DescriptorSetLayoutHandle ds
                 }
                 break;
             }
-            case DescriptorType::SAMPLER:
+
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_DEPTH:
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_3D_FLOAT:
+            case DescriptorType::SAMPLER_3D_INT:
+            case DescriptorType::SAMPLER_3D_UINT:
             case DescriptorType::SAMPLER_EXTERNAL:
                 if (UTILS_UNLIKELY(gl.isES2())) {
                     desc.emplace<SamplerGLES2>();

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,6 +600,12 @@ 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
@@ -1069,41 +1075,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
@@ -1206,9 +1212,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,6 +328,11 @@ 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 = {};
 
@@ -569,6 +574,9 @@ 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,6 +2435,8 @@ 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/opengl/OpenGLProgram.cpp

@@ -175,7 +175,25 @@ void OpenGLProgram::initializeProgramState(OpenGLContext& context, GLuint progra
                     }
                     break;
                 }
-                case DescriptorType::SAMPLER:
+                case DescriptorType::SAMPLER_2D_FLOAT:
+                case DescriptorType::SAMPLER_2D_INT:
+                case DescriptorType::SAMPLER_2D_UINT:
+                case DescriptorType::SAMPLER_2D_DEPTH:
+                case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+                case DescriptorType::SAMPLER_2D_ARRAY_INT:
+                case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+                case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+                case DescriptorType::SAMPLER_CUBE_FLOAT:
+                case DescriptorType::SAMPLER_CUBE_INT:
+                case DescriptorType::SAMPLER_CUBE_UINT:
+                case DescriptorType::SAMPLER_CUBE_DEPTH:
+                case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+                case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+                case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+                case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+                case DescriptorType::SAMPLER_3D_FLOAT:
+                case DescriptorType::SAMPLER_3D_INT:
+                case DescriptorType::SAMPLER_3D_UINT:
                 case DescriptorType::SAMPLER_EXTERNAL: {
                     if (!entry.name.empty()) {
                         GLint const loc = glGetUniformLocation(program, entry.name.c_str());

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_CALL()
-    #define FVK_PROFILE_MARKER(marker)  SYSTRACE_CALL()
+    #define FVK_SYSTRACE_SCOPE()        SYSTRACE_NAME(__func__)
+    #define FVK_PROFILE_MARKER(marker)  FVK_SYSTRACE_SCOPE()
 
 #else
     #define FVK_SYSTRACE_CONTEXT()

filament/backend/src/vulkan/VulkanContext.h

@@ -142,6 +142,10 @@ public:
         return mPortabilitySubsetFeatures.imageView2DOn3DImage == VK_TRUE;
     }
 
+    inline bool isUnifiedMemoryArchitecture() const noexcept {
+        return mIsUnifiedMemoryArchitecture;
+    }
+
 private:
     VkPhysicalDeviceMemoryProperties mMemoryProperties = {};
     VkPhysicalDeviceProperties2 mPhysicalDeviceProperties = {
@@ -164,6 +168,7 @@ private:
     bool mDebugUtilsSupported = false;
     bool mLazilyAllocatedMemorySupported = false;
     bool mProtectedMemorySupported = false;
+    bool mIsUnifiedMemoryArchitecture = false;
 
     fvkutils::VkFormatList mDepthStencilFormats;
     fvkutils::VkFormatList mBlittableDepthStencilFormats;

filament/backend/src/vulkan/VulkanHandles.cpp

@@ -93,7 +93,26 @@ BitmaskGroup fromBackendLayout(DescriptorSetLayout const& layout) {
             case DescriptorType::SAMPLER_EXTERNAL:
                 fromStageFlags(binding.stageFlags, binding.binding, mask.externalSampler);
                 UTILS_FALLTHROUGH;
-            case DescriptorType::SAMPLER: {
+
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_DEPTH:
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_3D_FLOAT:
+            case DescriptorType::SAMPLER_3D_INT:
+            case DescriptorType::SAMPLER_3D_UINT: {
                 fromStageFlags(binding.stageFlags, binding.binding, mask.sampler);
                 break;
             }

filament/backend/src/vulkan/platform/VulkanPlatform.cpp

@@ -631,6 +631,21 @@ fvkutils::VkFormatList findBlittableDepthStencilFormats(VkPhysicalDevice device)
     return ret;
 }
 
+/**
+ *  Check if the GPU has a unified memory architecture.
+ */
+bool hasUnifiedMemoryArchitecture(VkPhysicalDeviceMemoryProperties memoryProperties) noexcept {
+    // Try to identify if the platform is running on a Unified Memory Architecture by inspecting the
+    // memory heap flags, if they are all VK_MEMORY_HEAP_DEVICE_LOCAL_BIT it's UMA, otherwise not
+    // enough information to make a decision, so default to false.
+    for (uint32_t i = 0; i < memoryProperties.memoryHeapCount; ++i) {
+        if ((memoryProperties.memoryHeaps[i].flags & VK_MEMORY_HEAP_DEVICE_LOCAL_BIT) == 0) {
+            return false;
+        }
+    }
+    return true;
+}
+
 }// anonymous namespace
 
 using SwapChainPtr = VulkanPlatform::SwapChainPtr;
@@ -864,6 +879,8 @@ Driver* VulkanPlatform::createDriver(void* sharedContext,
         }
     }
 
+    context.mIsUnifiedMemoryArchitecture = hasUnifiedMemoryArchitecture(context.mMemoryProperties);
+
 #ifdef NDEBUG
     // If we are in release build, we should not have turned on debug extensions
     FILAMENT_CHECK_POSTCONDITION(!context.mDebugUtilsSupported && !context.mDebugMarkersSupported)

filament/backend/src/webgpu/WGPUProgram.cpp

@@ -27,6 +27,7 @@
 
 #include <webgpu/webgpu_cpp.h>
 
+#include <algorithm>
 #include <sstream>
 #include <string_view>
 #include <vector>
@@ -125,21 +126,64 @@ namespace {
     return module;
 }
 
+// This is a 1 to 1 mapping of the ReservedSpecializationConstants enum in EngineEnums.h
+// The _hack is a workaround until https://issues.chromium.org/issues/42250586 is resolved
+// This workaround is the same one being used on the generateSpecializationConstant() function
+wgpu::StringView getSpecConstantStringId(uint32_t id) {
+    switch (id) {
+        case 0:
+            return "0";// BACKEND_FEATURE_LEVEL_hack
+        case 1:
+            return "1";// CONFIG_MAX_INSTANCES_hack
+        case 2:
+            return "2";// ONFIG_STATIC_TEXTURE_TARGET_WORKAROUND_hack
+        case 3:
+            return "3";// CONFIG_SRGB_SWAPCHAIN_EMULATION_hack
+        case 4:
+            return "4";// CONFIG_FROXEL_BUFFER_HEIGHT_hack
+        case 5:
+            return "5";// CONFIG_POWER_VR_SHADER_WORKAROUNDS_hack
+        case 6:
+            return "6";// CONFIG_DEBUG_DIRECTIONAL_SHADOWMAP_hack
+        case 7:
+            return "7";// CONFIG_DEBUG_FROXEL_VISUALIZATION_hack
+        case 8:
+            return "8";// CONFIG_STEREO_EYE_COUNT_hack
+        case 9:
+            return "9";// CONFIG_SH_BANDS_COUNT_hack
+        case 10:
+            return "10";// CONFIG_SHADOW_SAMPLING_METHOD_hack
+        default:
+            PANIC_POSTCONDITION("Unknown/unhandled spec constant key/id: %d", id);
+    }
+}
+
 std::vector<wgpu::ConstantEntry> convertConstants(
         utils::FixedCapacityVector<filament::backend::Program::SpecializationConstant> const&
                 constantsInfo) {
-    std::vector<wgpu::ConstantEntry> constants(constantsInfo.size());
-    for (size_t i = 0; i < constantsInfo.size(); i++) {
-        filament::backend::Program::SpecializationConstant const& specConstant = constantsInfo[i];
-        wgpu::ConstantEntry& constantEntry = constants[i];
-        constantEntry.key = wgpu::StringView(std::to_string(specConstant.id));
-        if (auto* v = std::get_if<int32_t>(&specConstant.value)) {
-            constantEntry.value = static_cast<double>(*v);
-        } else if (auto* f = std::get_if<float>(&specConstant.value)) {
-            constantEntry.value = static_cast<double>(*f);
-        } else if (auto* b = std::get_if<bool>(&specConstant.value)) {
-            constantEntry.value = *b ? 0.0 : 1.0;
+    std::vector<wgpu::ConstantEntry> constants;
+    constants.reserve(constantsInfo.size());
+    for (filament::backend::Program::SpecializationConstant const& constant: constantsInfo) {
+        // CONFIG_MAX_INSTANCES (1) and CONFIG_FROXEL_BUFFER_HEIGHT (4) will not be present
+        // as constant overrides in the generated WGSL, because WGSL doesn't support specialization
+        // constants as an array length
+        // More information at https://github.com/gpuweb/gpuweb/issues/572#issuecomment-649760005
+        // CONFIG_SRGB_SWAPCHAIN_EMULATION (3) is being skipped all together since it's only
+        // included for the case of mFeatureLevel == FeatureLevel::FEATURE_LEVEL_0, which should
+        // not be possible for WebGPU
+        if (constant.id == 1 || constant.id == 3 || constant.id == 4) {
+            continue;
         }
+        double value = 0.0;
+        if (auto* v = std::get_if<int32_t>(&constant.value)) {
+            value = static_cast<double>(*v);
+        } else if (auto* f = std::get_if<float>(&constant.value)) {
+            value = static_cast<double>(*f);
+        } else if (auto* b = std::get_if<bool>(&constant.value)) {
+            value = *b ? 0.0 : 1.0;
+        }
+        constants.push_back(
+                wgpu::ConstantEntry{ .key = getSpecConstantStringId(constant.id), .value = value });
     }
     return constants;
 }

filament/backend/src/webgpu/WebGPUDriver.cpp

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+#include <utils/Hash.h>
 #include "webgpu/WebGPUDriver.h"
 
 #include "WebGPUPipelineCreation.h"
@@ -292,7 +292,22 @@ void WebGPUDriver::endFrame(uint32_t frameId) {
 void WebGPUDriver::flush(int) {
 }
 
-void WebGPUDriver::finish(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::destroyRenderPrimitive(Handle<HwRenderPrimitive> rph) {
@@ -453,6 +468,8 @@ void WebGPUDriver::createSwapChainR(Handle<HwSwapChain> sch, void* nativeWindow,
     mSwapChain = constructHandle<WebGPUSwapChain>(sch, std::move(surface), surfaceSize, mAdapter,
             mDevice, flags);
     assert_invariant(mSwapChain);
+    WebGPUDescriptorSet::initializeDummyResourcesIfNotAlready(mDevice,
+            mSwapChain->getColorFormat(), mSwapChain->getDepthFormat());
     FWGPU_LOGW << "WebGPU support is still essentially a no-op at this point in development (only "
                   "background components have been instantiated/selected, such as surface/screen, "
                   "graphics device/GPU, etc.), thus nothing is being drawn to the screen."
@@ -574,7 +591,7 @@ void WebGPUDriver::createDescriptorSetLayoutR(Handle<HwDescriptorSetLayout> dslh
 void WebGPUDriver::createDescriptorSetR(Handle<HwDescriptorSet> dsh,
         Handle<HwDescriptorSetLayout> dslh) {
     auto layout = handleCast<WebGPUDescriptorSetLayout>(dslh);
-    constructHandle<WebGPUDescriptorSet>(dsh, layout->getLayout(), layout->getLayoutSize());
+    constructHandle<WebGPUDescriptorSet>(dsh, layout->getLayout(), layout->getBindGroupEntries(), layout->label);
 }
 
 Handle<HwStream> WebGPUDriver::createStreamNative(void* nativeStream) {
@@ -759,13 +776,31 @@ void WebGPUDriver::compilePrograms(CompilerPriorityQueue priority,
     }
 }
 
-void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, const RenderPassParams& params) {
-    wgpu::CommandEncoderDescriptor commandEncoderDescriptor = {
-        .label = "command_encoder"
-    };
-    mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
+void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, RenderPassParams const& params) {
     assert_invariant(mCommandEncoder);
 
+    auto* renderTarget = handleCast<WGPURenderTarget>(rth);
+    // if (renderTarget == mDefaultRenderTarget) {
+    //     FWGPU_LOGW << "Default render target"
+    //                << utils::io::endl;
+    // } else {
+    //     FWGPU_LOGW << "Non Default render target"
+    //                << utils::io::endl;
+    // }
+    wgpu::RenderPassDescriptor renderPassDescriptor2;
+    wgpu::RenderPassDepthStencilAttachment depthStencilAttachment{
+        .view = mSwapChain->getDepthTextureView(),
+        .depthLoadOp = WGPURenderTarget::getLoadOperation(params, TargetBufferFlags::DEPTH),
+        .depthStoreOp = WGPURenderTarget::getStoreOperation(params, TargetBufferFlags::DEPTH),
+        .depthClearValue = static_cast<float>(params.clearDepth),
+        .depthReadOnly = (params.readOnlyDepthStencil & RenderPassParams::READONLY_DEPTH) > 0,
+        .stencilLoadOp = WGPURenderTarget::getLoadOperation(params, TargetBufferFlags::STENCIL),
+        .stencilStoreOp = WGPURenderTarget::getStoreOperation(params, TargetBufferFlags::STENCIL),
+        .stencilClearValue = params.clearStencil,
+        .stencilReadOnly = (params.readOnlyDepthStencil & RenderPassParams::READONLY_STENCIL) > 0
+    };
+    renderTarget->setUpRenderPassAttachments(renderPassDescriptor2, mTextureView, params);
+    renderPassDescriptor2.depthStencilAttachment = &depthStencilAttachment;
     // TODO: Remove this code once WebGPU pipeline is implemented
     static float red = 1.0f;
     if (red - 0.01 > 0) {
@@ -790,19 +825,14 @@ void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, const RenderPassP
         .timestampWrites = nullptr,
     };
 
-    mRenderPassEncoder = mCommandEncoder.BeginRenderPass(&renderPassDescriptor);
+    mRenderPassEncoder = mCommandEncoder.BeginRenderPass(&renderPassDescriptor2);
     mRenderPassEncoder.SetViewport(params.viewport.left, params.viewport.bottom,
             params.viewport.width, params.viewport.height, params.depthRange.near, params.depthRange.far);
 }
 
-void WebGPUDriver::endRenderPass(int) {
+void WebGPUDriver::endRenderPass(int /* dummy */) {
     mRenderPassEncoder.End();
     mRenderPassEncoder = nullptr;
-    wgpu::CommandBufferDescriptor commandBufferDescriptor {
-        .label = "command_buffer",
-    };
-    mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
-    assert_invariant(mCommandBuffer);
 }
 
 void WebGPUDriver::nextSubpass(int) {
@@ -817,9 +847,19 @@ 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;
@@ -876,6 +916,14 @@ void WebGPUDriver::blit(
 }
 
 void WebGPUDriver::bindPipeline(PipelineState const& pipelineState) {
+    // TODO Investigate implications of this hash more closely. Vulkan has a whole class
+    // VulkanPipelineCache to handle this, may be missing nuance
+    static auto pipleineStateHasher = utils::hash::MurmurHashFn<filament::backend::PipelineState>();
+    auto hash = pipleineStateHasher(pipelineState);
+    if(mPipelineMap.find(hash) != mPipelineMap.end()){
+        mRenderPassEncoder.SetPipeline(mPipelineMap[hash]);
+        return;
+    }
     const auto* program = handleCast<WGPUProgram>(pipelineState.program);
     assert_invariant(program);
     assert_invariant(program->computeShaderModule == nullptr &&
@@ -912,8 +960,8 @@ void WebGPUDriver::bindPipeline(PipelineState const& pipelineState) {
             *vertexBufferInfo, layout, pipelineState.rasterState, pipelineState.stencilState,
             pipelineState.polygonOffset, pipelineState.primitiveType, mSwapChain->getColorFormat(),
             mSwapChain->getDepthFormat());
-    // TODO: uncomment once we have a valid pipeline to set
-    // mRenderPassEncoder.SetPipeline(pipeline);
+    mPipelineMap[hash] = pipeline;
+    mRenderPassEncoder.SetPipeline(pipeline);
 }
 
 void WebGPUDriver::bindRenderPrimitive(Handle<HwRenderPrimitive> rph) {
@@ -933,10 +981,18 @@ void WebGPUDriver::bindRenderPrimitive(Handle<HwRenderPrimitive> rph) {
 }
 
 void WebGPUDriver::draw2(uint32_t indexOffset, uint32_t indexCount, uint32_t instanceCount) {
+    // Calling DrawIndexed with "firstInstance = 0" results in a NON spinning triangle
+    //    mRenderPassEncoder.DrawIndexed(indexCount, instanceCount, indexOffset, 0, 0);
+    // Calling DrawIndexed with "firstInstance = 1" results in a spinning triangle
+    mRenderPassEncoder.DrawIndexed(indexCount, instanceCount, indexOffset, 0, 1);
+    // Calling Draw with "firstInstance = 0" results in a NON spinning triangle
+    // Calling Draw with "firstInstance = 1" results in a spinning triangle
+    //    mRenderPassEncoder.Draw(indexCount, instanceCount, 0, 1);
 }
 
-void WebGPUDriver::draw(PipelineState pipelineState, Handle<HwRenderPrimitive> rph,
-        uint32_t indexOffset, uint32_t indexCount, uint32_t instanceCount) {
+void WebGPUDriver::draw(PipelineState, Handle<HwRenderPrimitive>, uint32_t indexOffset,
+        uint32_t indexCount, uint32_t instanceCount) {
+    draw2(indexOffset, indexCount, instanceCount);
 }
 
 void WebGPUDriver::dispatchCompute(Handle<HwProgram> program, math::uint3 workGroupCount) {
@@ -972,34 +1028,157 @@ void WebGPUDriver::updateDescriptorSetBuffer(Handle<HwDescriptorSet> dsh,
 
 void WebGPUDriver::updateDescriptorSetTexture(Handle<HwDescriptorSet> dsh,
         backend::descriptor_binding_t binding, Handle<HwTexture> th, SamplerParams params) {
-    /*
     auto bindGroup = handleCast<WebGPUDescriptorSet>(dsh);
     auto texture = handleCast<WGPUTexture>(th);
 
-    // TODO very high odds badd assumptions are in here about handling HwTexture. Revisit with more
-    // understanding. Right now assuming there is a wgpu::TextureView filled in
     if (!bindGroup->getIsLocked()) {
+        // Dawn will cache duplicate samplers, so we don't strictly need to maintain a cache.
+        //  Making a cache might save us minor perf by reducing param translation
+        auto sampler = makeSampler(params);
         // TODO making assumptions that size and offset mean the same thing here.
         wgpu::BindGroupEntry tEntry{ .binding = static_cast<uint32_t>(binding * 2),
-            .textureView = texture->texView };
+            .textureView = texture->getTexView() };
         bindGroup->addEntry(tEntry.binding, std::move(tEntry));
 
         wgpu::BindGroupEntry sEntry{ .binding = static_cast<uint32_t>(binding * 2 + 1),
-            .sampler = texture->sampler };
+            .sampler = sampler };
         bindGroup->addEntry(sEntry.binding, std::move(sEntry));
     }
-    //TODO Just the setup, this function stilll needs the rest of logic implemented
-     */
 }
 
-void WebGPUDriver::bindDescriptorSet(Handle<HwDescriptorSet> dsh, backend::descriptor_set_t set,
-        backend::DescriptorSetOffsetArray&& offsets) {
-    auto bindGroup = handleCast<WebGPUDescriptorSet>(dsh);
-    // TODO: presume we need this, use it. Probably Encoder::SetBindGroup
-    auto wbg = bindGroup->lockAndReturn(mDevice);
+void WebGPUDriver::bindDescriptorSet(Handle<HwDescriptorSet> dsh,
+        backend::descriptor_set_t setIndex, backend::DescriptorSetOffsetArray&& offsets) {
+    const auto bindGroup = handleCast<WebGPUDescriptorSet>(dsh);
+    const auto wbg = bindGroup->lockAndReturn(mDevice);
+    assert_invariant(mRenderPassEncoder);
+    // TODO is this how we should be getting the dynamic offsets?
+    //      should we add offsets for unused entries or is the input already have them?
+    //      this implementation assumes unused entries are not provided, and adds dummy values.
+    //      The count also includes unused entities, as not doing so produces errors
+    const size_t dynamicOffsetCount = bindGroup->countEntitiesWithDynamicOffsets();
+    uint32_t const* const dynamicOffsetsWithUnused = bindGroup->setDynamicOffsets(offsets.data());
+    mRenderPassEncoder.SetBindGroup(setIndex, wbg, dynamicOffsetCount, dynamicOffsetsWithUnused);
 }
 
 void WebGPUDriver::setDebugTag(HandleBase::HandleId handleId, utils::CString tag) {
 }
+wgpu::Sampler WebGPUDriver::makeSampler(SamplerParams const& params) {
+    wgpu::SamplerDescriptor desc;
+
+    desc.label = "TODO";
+    desc.addressModeU = fWrapModeToWAddressMode(params.wrapS);
+    desc.addressModeV = fWrapModeToWAddressMode(params.wrapR);
+    desc.addressModeW = fWrapModeToWAddressMode(params.wrapT);
+    if (params.compareMode == SamplerCompareMode::COMPARE_TO_TEXTURE) {
+        switch (params.filterMag) {
+            case SamplerMagFilter::NEAREST: {
+                desc.magFilter = wgpu::FilterMode::Nearest;
+                break;
+            }
+            case SamplerMagFilter::LINEAR: {
+                desc.magFilter = wgpu::FilterMode::Linear;
+                break;
+            }
+        }
+        switch (params.filterMin) {
+            case SamplerMinFilter::NEAREST: {
+                desc.minFilter = wgpu::FilterMode::Nearest;
+                // Metal Driver uses an explicit not-mipmapped value webgpu lacks. Nearest should
+                // suffice
+                desc.mipmapFilter = wgpu::MipmapFilterMode::Undefined;
+                break;
+            }
+            case SamplerMinFilter::LINEAR: {
+                desc.minFilter = wgpu::FilterMode::Linear;
+                // Metal Driver uses an explicit not-mipmapped value webgpu lacks. Nearest should
+                // suffice
+
+                desc.mipmapFilter = wgpu::MipmapFilterMode::Undefined;
+                break;
+            }
+            case SamplerMinFilter::NEAREST_MIPMAP_NEAREST: {
+                desc.minFilter = wgpu::FilterMode::Nearest;
+                desc.mipmapFilter = wgpu::MipmapFilterMode::Nearest;
+                break;
+            }
+            case SamplerMinFilter::LINEAR_MIPMAP_NEAREST: {
+                desc.minFilter = wgpu::FilterMode::Linear;
+                desc.mipmapFilter = wgpu::MipmapFilterMode::Nearest;
+
+                break;
+            }
+            case SamplerMinFilter::NEAREST_MIPMAP_LINEAR: {
+                desc.minFilter = wgpu::FilterMode::Nearest;
+                desc.mipmapFilter = wgpu::MipmapFilterMode::Linear;
+
+                break;
+            }
+            case SamplerMinFilter::LINEAR_MIPMAP_LINEAR: {
+                desc.minFilter = wgpu::FilterMode::Linear;
+                desc.mipmapFilter = wgpu::MipmapFilterMode::Linear;
+                break;
+            }
+        }
+        switch (params.compareFunc) {
+            case SamplerCompareFunc::LE: {
+                desc.compare = wgpu::CompareFunction::LessEqual;
+                break;
+            }
+            case SamplerCompareFunc::GE: {
+                desc.compare = wgpu::CompareFunction::GreaterEqual;
+                break;
+            }
+            case SamplerCompareFunc::L: {
+                desc.compare = wgpu::CompareFunction::Less;
+                break;
+            }
+            case SamplerCompareFunc::G: {
+                desc.compare = wgpu::CompareFunction::Greater;
+                break;
+            }
+            case SamplerCompareFunc::E: {
+                desc.compare = wgpu::CompareFunction::Equal;
+                break;
+            }
+            case SamplerCompareFunc::NE: {
+                desc.compare = wgpu::CompareFunction::NotEqual;
+                break;
+            }
+            case SamplerCompareFunc::A: {
+                desc.compare = wgpu::CompareFunction::Always;
+                break;
+            }
+            case SamplerCompareFunc::N: {
+                desc.compare = wgpu::CompareFunction::Never;
+                break;
+            }
+        }
+    }
+
+    desc.maxAnisotropy = 1u << params.anisotropyLog2;
+
+
+    // Unused: WGPU lodMinClamp/lodMaxClamp
+
+    return mDevice.CreateSampler(&desc);
+}
+wgpu::AddressMode WebGPUDriver::fWrapModeToWAddressMode(const SamplerWrapMode& fWrapMode) {
+    switch (fWrapMode) {
+        case SamplerWrapMode::CLAMP_TO_EDGE: {
+            return wgpu::AddressMode::ClampToEdge;
+            break;
+        }
+        case SamplerWrapMode::REPEAT: {
+            return wgpu::AddressMode::Repeat;
+            break;
+        }
+        case SamplerWrapMode::MIRRORED_REPEAT: {
+            return wgpu::AddressMode::MirrorRepeat;
+            break;
+        }
+    }
+    return wgpu::AddressMode::Undefined;
+}
+
 
 } // namespace filament

filament/backend/src/webgpu/WebGPUDriver.h

@@ -56,7 +56,8 @@ private:
     explicit WebGPUDriver(WebGPUPlatform& platform, const Platform::DriverConfig& driverConfig) noexcept;
     [[nodiscard]] ShaderModel getShaderModel() const noexcept final;
     [[nodiscard]] ShaderLanguage getShaderLanguage() const noexcept final;
-
+    [[nodiscard]] wgpu::Sampler makeSampler(SamplerParams const& params);
+    [[nodiscard]] static wgpu::AddressMode fWrapModeToWAddressMode(const filament::backend::SamplerWrapMode& fUsage);
     template<typename GPUBufferObject>
     void updateGPUBuffer(GPUBufferObject* gpuBufferObject, BufferDescriptor&& bufferDescriptor,
             uint32_t byteOffset) {
@@ -92,6 +93,8 @@ private:
     wgpu::RenderPassEncoder mRenderPassEncoder = nullptr;
     wgpu::CommandBuffer mCommandBuffer = nullptr;
     WGPURenderTarget* mDefaultRenderTarget = nullptr;
+
+    tsl::robin_map<uint32_t, wgpu::RenderPipeline> mPipelineMap;
     /*
      * Driver interface
      */

filament/backend/src/webgpu/WebGPUHandles.cpp

@@ -16,7 +16,16 @@
 
 #include "WebGPUHandles.h"
 
+#include <backend/DriverEnums.h>
+
+#include <utils/BitmaskEnum.h>
+
+#include <webgpu/webgpu_cpp.h>
+
+#include <algorithm>
+#include <cstdint>
 #include <utility>
+#include <vector>
 
 namespace {
 constexpr wgpu::BufferUsage getBufferObjectUsage(
@@ -110,6 +119,44 @@ wgpu::VertexFormat getVertexFormat(filament::backend::ElementType type, bool nor
     }
 }
 
+wgpu::StringView getUserTextureLabel(filament::backend::SamplerType target) {
+    // TODO will be helpful to get more useful info than this
+    using filament::backend::SamplerType;
+    switch (target) {
+        case SamplerType::SAMPLER_2D:
+            return "a_2D_user_texture";
+        case SamplerType::SAMPLER_2D_ARRAY:
+            return "a_2D_array_user_texture";
+        case SamplerType::SAMPLER_CUBEMAP:
+            return "a_cube_map_user_texture";
+        case SamplerType::SAMPLER_EXTERNAL:
+            return "an_external_user_texture";
+        case SamplerType::SAMPLER_3D:
+            return "a_3D_user_texture";
+        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
+            return "a_cube_mape_array_user_texture";
+    }
+}
+
+wgpu::StringView getUserTextureViewLabel(filament::backend::SamplerType target) {
+    // TODO will be helpful to get more useful info than this
+    using filament::backend::SamplerType;
+    switch (target) {
+        case SamplerType::SAMPLER_2D:
+            return "a_2D_user_texture_view";
+        case SamplerType::SAMPLER_2D_ARRAY:
+            return "a_2D_array_user_texture_view";
+        case SamplerType::SAMPLER_CUBEMAP:
+            return "a_cube_map_user_texture_view";
+        case SamplerType::SAMPLER_EXTERNAL:
+            return "an_external_user_texture_view";
+        case SamplerType::SAMPLER_3D:
+            return "a_3D_user_texture_view";
+        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
+            return "a_cube_mape_array_user_texture_view";
+    }
+}
+
 }// namespace
 
 namespace filament::backend {
@@ -137,7 +184,7 @@ WGPUVertexBufferInfo::WGPUVertexBufferInfo(uint8_t bufferCount, uint8_t attribut
         mAttributes[attrib.buffer].push_back({
             .format = vertexFormat,
             .offset = attrib.offset,
-            .shaderLocation = static_cast<uint32_t>(mAttributes[attrib.buffer].size()),
+            .shaderLocation = attribIndex,
         });
 
         mVertexBufferLayout[attrib.buffer].stepMode = wgpu::VertexStepMode::Vertex;
@@ -192,99 +239,387 @@ WebGPUDescriptorSetLayout::WebGPUDescriptorSetLayout(DescriptorSetLayout const&
         wgpu::Device const& device) {
     assert_invariant(device);
 
+    std::string baseLabel;
+    if (std::holds_alternative<utils::StaticString>(layout.label)) {
+        const auto& temp = std::get_if<utils::StaticString>(&layout.label);
+        baseLabel = temp->c_str();
+    } else if (std::holds_alternative<utils::CString>(layout.label)) {
+        const auto& temp = std::get_if<utils::CString>(&layout.label);
+        baseLabel = temp->c_str();
+    }
+    label = baseLabel;
+
     // TODO: layoutDescriptor has a "Label". Ideally we can get info on what this layout is for
     // debugging. For now, hack an incrementing value.
     static int layoutNum = 0;
 
-    uint samplerCount =
+    unsigned int samplerCount =
             std::count_if(layout.bindings.begin(), layout.bindings.end(), [](auto& fEntry) {
-                return fEntry.type == DescriptorType::SAMPLER ||
-                       fEntry.type == DescriptorType::SAMPLER_EXTERNAL;
+                return DescriptorSetLayoutBinding::isSampler(fEntry.type);
             });
 
 
     std::vector<wgpu::BindGroupLayoutEntry> wEntries;
     wEntries.reserve(layout.bindings.size() + samplerCount);
+    mBindGroupEntries.reserve(wEntries.capacity());
 
     for (auto fEntry: layout.bindings) {
         auto& wEntry = wEntries.emplace_back();
+        auto& entryInfo = mBindGroupEntries.emplace_back();
         wEntry.visibility = filamentStageToWGPUStage(fEntry.stageFlags);
         wEntry.binding = fEntry.binding * 2;
+        entryInfo.binding = wEntry.binding;
+        wgpu::BindGroupLayoutEntry* sEntry;
 
         switch (fEntry.type) {
-            // TODO Metal treats these the same. Is this fine?
-            case DescriptorType::SAMPLER_EXTERNAL:
-            case DescriptorType::SAMPLER: {
-                // Sampler binding is 2n+1 due to split.
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_DEPTH:
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_3D_FLOAT:
+            case DescriptorType::SAMPLER_3D_INT:
+            case DescriptorType::SAMPLER_3D_UINT: {
                 auto& samplerEntry = wEntries.emplace_back();
+                auto& samplerEntryInfo = mBindGroupEntries.emplace_back();
+                sEntry = &samplerEntry;
                 samplerEntry.binding = fEntry.binding * 2 + 1;
+                samplerEntryInfo.binding = samplerEntry.binding;
+                samplerEntryInfo.type = WebGPUDescriptorSetLayout::BindGroupEntryType::SAMPLER;
                 samplerEntry.visibility = wEntry.visibility;
                 // We are simply hoping that undefined and defaults suffices here.
-                samplerEntry.sampler.type = wgpu::SamplerBindingType::Undefined;
-                wEntry.texture.sampleType = wgpu::TextureSampleType::Undefined;
+                samplerEntry.sampler.type = wgpu::SamplerBindingType::NonFiltering; // Example default
+                wEntry.texture.sampleType = wgpu::TextureSampleType::Float;      // Example default
                 break;
             }
             case DescriptorType::UNIFORM_BUFFER: {
                 wEntry.buffer.hasDynamicOffset =
                         any(fEntry.flags & DescriptorFlags::DYNAMIC_OFFSET);
+                entryInfo.hasDynamicOffset = wEntry.buffer.hasDynamicOffset;
                 wEntry.buffer.type = wgpu::BufferBindingType::Uniform;
                 // TODO: Ideally we fill minBindingSize
                 break;
             }
 
             case DescriptorType::INPUT_ATTACHMENT: {
-                // TODO: support INPUT_ATTACHMENT. Metal does not currently.
                 PANIC_POSTCONDITION("Input Attachment is not supported");
                 break;
             }
-
             case DescriptorType::SHADER_STORAGE_BUFFER: {
-                // TODO: Vulkan does not support this, can we?
                 PANIC_POSTCONDITION("Shader storage is not supported");
                 break;
             }
+            case DescriptorType::SAMPLER_EXTERNAL: {
+                PANIC_POSTCONDITION("External Sampler is not supported");
+                break;
+            }
         }
-
-        // Currently flags are only used to specify dynamic offset.
-
-        // UNUSED
-        // fEntry.count
+        switch (fEntry.type) {
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_DEPTH:
+                wEntry.texture.viewDimension = wgpu::TextureViewDimension::e2D;
+                entryInfo.type = WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_2D;
+                break;
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+                wEntry.texture.viewDimension = wgpu::TextureViewDimension::e2DArray;
+                entryInfo.type = WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_2DA;
+                break;
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+                wEntry.texture.viewDimension = wgpu::TextureViewDimension::Cube;
+                entryInfo.type = WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_CUBE;
+                break;
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+                wEntry.texture.viewDimension = wgpu::TextureViewDimension::CubeArray;
+                entryInfo.type = WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_CUBEA;
+                break;
+            case DescriptorType::SAMPLER_3D_FLOAT:
+            case DescriptorType::SAMPLER_3D_INT:
+            case DescriptorType::SAMPLER_3D_UINT:
+                wEntry.texture.viewDimension = wgpu::TextureViewDimension::e3D;
+                entryInfo.type = WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_3D;
+                break;
+            default:
+                break;
+        }
+        switch (fEntry.type) {
+            case DescriptorType::SAMPLER_2D_FLOAT:
+            case DescriptorType::SAMPLER_2D_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_FLOAT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
+            case DescriptorType::SAMPLER_3D_FLOAT:
+                wEntry.texture.sampleType = wgpu::TextureSampleType::UnfilterableFloat;
+                break;
+            case DescriptorType::SAMPLER_2D_INT:
+            case DescriptorType::SAMPLER_2D_ARRAY_INT:
+            case DescriptorType::SAMPLER_CUBE_INT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
+            case DescriptorType::SAMPLER_3D_INT:
+                wEntry.texture.sampleType = wgpu::TextureSampleType::Sint;
+                break;
+            case DescriptorType::SAMPLER_2D_UINT:
+            case DescriptorType::SAMPLER_2D_ARRAY_UINT:
+            case DescriptorType::SAMPLER_CUBE_UINT:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
+            case DescriptorType::SAMPLER_3D_UINT:
+                wEntry.texture.sampleType = wgpu::TextureSampleType::Uint;
+                break;
+            case DescriptorType::SAMPLER_2D_DEPTH:
+            case DescriptorType::SAMPLER_2D_ARRAY_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_DEPTH:
+            case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
+                //Dummies complain if you set this correctly without having an associated dummy
+                wEntry.texture.sampleType = wgpu::TextureSampleType::Depth;
+                sEntry->sampler.type = wgpu::SamplerBindingType::Comparison;
+                break;
+            default:
+                break;
+        }
+        // fEntry.count is unused currently
     }
-
+    std::string label =  "layout_" + baseLabel + std::to_string(++layoutNum) ;
     wgpu::BindGroupLayoutDescriptor layoutDescriptor{
-        // TODO: layoutDescriptor has a "Label". Ideally we can get info on what this layout is for
-        // debugging. For now, hack an incrementing value.
-        .label{ "layout_" + std::to_string(++layoutNum) },
+        .label{label.c_str()}, // Use .c_str() if label needs to be const char*
         .entryCount = wEntries.size(),
         .entries = wEntries.data()
     };
-    // TODO Do we need to defer this until we have more info on textures and samplers??
-    mLayoutSize = wEntries.size();
     mLayout = device.CreateBindGroupLayout(&layoutDescriptor);
 }
 
 WebGPUDescriptorSetLayout::~WebGPUDescriptorSetLayout() {}
 
-WebGPUDescriptorSet::WebGPUDescriptorSet(const wgpu::BindGroupLayout& layout, uint layoutSize)
+wgpu::Buffer WebGPUDescriptorSet::sDummyUniformBuffer = nullptr;
+std::unordered_map<wgpu::TextureDimension, wgpu::Texture> WebGPUDescriptorSet::sDummyTextureMap;
+std::unordered_map<wgpu::TextureViewDimension, wgpu::TextureView> WebGPUDescriptorSet::sDummyTextureViewMap;
+wgpu::Sampler WebGPUDescriptorSet::sDummySampler = nullptr;
+
+void WebGPUDescriptorSet::initializeDummyResourcesIfNotAlready(wgpu::Device const& device,
+        wgpu::TextureFormat aColorFormat, wgpu::TextureFormat aDepthFormat) {
+    if (!sDummyUniformBuffer) {
+        wgpu::BufferDescriptor bufferDescriptor{
+            .label = "dummy_uniform_not_to_be_used",
+            .usage = wgpu::BufferUsage::Uniform,
+            .size = 4
+        };
+        sDummyUniformBuffer = device.CreateBuffer(&bufferDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyUniformBuffer)
+                << "Failed to create dummy uniform buffer?";
+    }
+    if (sDummyTextureMap.empty() || sDummyTextureViewMap.empty()) {
+        wgpu::TextureDescriptor textureDescriptor{
+            .label = "dummy_texture_not_to_be_used",
+            .usage = wgpu::TextureUsage::TextureBinding,
+            .dimension = wgpu::TextureDimension::e2D,
+            .size = wgpu::Extent3D{ .width = 4, .height = 4, .depthOrArrayLayers = 1 },
+            .format = aColorFormat,
+ //           .viewFormatCount = 1,
+   //         .viewFormats = &aDepthFormat
+        };
+        sDummyTextureMap[wgpu::TextureDimension::e2D] = device.CreateTexture(&textureDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureMap[wgpu::TextureDimension::e2D])
+                << "Failed to create dummy texture 2D?";
+        textureDescriptor.dimension = wgpu::TextureDimension::e3D;
+        sDummyTextureMap[wgpu::TextureDimension::e3D] = device.CreateTexture(&textureDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureMap[wgpu::TextureDimension::e3D])
+                << "Failed to create dummy texture 3D?";
+
+        //Hacking as an experiment, treating 1D as cube arbitrarilly since my map key was bad idea
+        textureDescriptor.dimension = wgpu::TextureDimension::e2D;
+        textureDescriptor.size.depthOrArrayLayers = 6;
+        sDummyTextureMap[wgpu::TextureDimension::e1D] = device.CreateTexture(&textureDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureMap[wgpu::TextureDimension::e1D])
+                << "Failed to create dummy texture 3D?";
+
+
+        wgpu::TextureViewDescriptor textureViewDescriptor{
+            .label = "dummy_texture_view_not_to_be_used",
+        };
+
+        textureViewDescriptor.dimension = wgpu::TextureViewDimension::e2D;
+        sDummyTextureViewMap[wgpu::TextureViewDimension::e2D] =
+                sDummyTextureMap[wgpu::TextureDimension::e2D].CreateView(&textureViewDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureViewMap[wgpu::TextureViewDimension::e2D])
+                << "Failed to create dummy texture view?";
+
+        textureViewDescriptor.dimension = wgpu::TextureViewDimension::e2DArray;
+        sDummyTextureViewMap[wgpu::TextureViewDimension::e2DArray] =
+                sDummyTextureMap[wgpu::TextureDimension::e2D].CreateView(&textureViewDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureViewMap[wgpu::TextureViewDimension::e2D])
+                << "Failed to create dummy texture view?";
+
+        textureViewDescriptor.dimension = wgpu::TextureViewDimension::e2DArray;
+        sDummyTextureViewMap[wgpu::TextureViewDimension::e2DArray] =
+                sDummyTextureMap[wgpu::TextureDimension::e2D].CreateView(&textureViewDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureViewMap[wgpu::TextureViewDimension::e2DArray])
+                << "Failed to create dummy texture view?";
+
+        textureViewDescriptor.dimension = wgpu::TextureViewDimension::e3D;
+        sDummyTextureViewMap[wgpu::TextureViewDimension::e3D] =
+                sDummyTextureMap[wgpu::TextureDimension::e3D].CreateView(&textureViewDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureViewMap[wgpu::TextureViewDimension::e3D])
+                << "Failed to create dummy texture view?";
+
+        textureViewDescriptor.arrayLayerCount = 6;
+        textureViewDescriptor.dimension = wgpu::TextureViewDimension::Cube;
+        sDummyTextureViewMap[wgpu::TextureViewDimension::Cube] =
+                sDummyTextureMap[wgpu::TextureDimension::e1D].CreateView(&textureViewDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureViewMap[wgpu::TextureViewDimension::Cube])
+                << "Failed to create dummy texture view?";
+
+        textureViewDescriptor.dimension = wgpu::TextureViewDimension::CubeArray;
+        sDummyTextureViewMap[wgpu::TextureViewDimension::CubeArray] =
+                sDummyTextureMap[wgpu::TextureDimension::e1D].CreateView(&textureViewDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyTextureViewMap[wgpu::TextureViewDimension::CubeArray])
+                << "Failed to create dummy texture view?";
+    }
+    if (!sDummySampler) {
+        wgpu::SamplerDescriptor samplerDescriptor{ .label = "dummy_sampler_not_to_be_used" , .addressModeU = wgpu::AddressMode::MirrorRepeat};
+        sDummySampler = device.CreateSampler(&samplerDescriptor);
+        FILAMENT_CHECK_POSTCONDITION(sDummyUniformBuffer) << "Failed to create dummy sampler?";
+    }
+}
+
+std::vector<wgpu::BindGroupEntry> WebGPUDescriptorSet::createDummyEntriesSortedByBinding(
+        std::vector<filament::backend::WebGPUDescriptorSetLayout::BindGroupEntryInfo> const&
+                bindGroupEntries) {
+    assert_invariant(WebGPUDescriptorSet::sDummyUniformBuffer &&
+                     "Dummy uniform buffer must have been created before "
+                     "creating dummy bind group entries.");
+   /* assert_invariant(
+            WebGPUDescriptorSet::sDummyTexture &&
+            "Dummy texture must have been created before creating dummy bind group entries.");
+    assert_invariant(
+            WebGPUDescriptorSet::sDummyTextureView &&
+            "Dummy texture view must have been created before creating dummy bind group entries.");*/
+    assert_invariant(
+            WebGPUDescriptorSet::sDummySampler &&
+            "Dummy sampler must have been created before creating dummy bind group entries.");
+    using filament::backend::WebGPUDescriptorSetLayout;
+    std::vector<wgpu::BindGroupEntry> entries;
+    entries.reserve(bindGroupEntries.size());
+    for (auto const& entryInfo: bindGroupEntries) {
+        auto& entry = entries.emplace_back();
+        entry.binding = entryInfo.binding;
+        switch (entryInfo.type) {
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::UNIFORM_BUFFER:
+                //entry.buffer = WebGPUDescriptorSet::sDummyUniformBuffer;
+                break;
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::SAMPLER:
+               // entry.sampler = WebGPUDescriptorSet::sDummySampler;
+                break;
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_2D:
+              //  entry.textureView = WebGPUDescriptorSet::sDummyTextureViewMap[wgpu::TextureViewDimension::e2D];
+                break;
+
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_2DA:
+             //   entry.textureView = WebGPUDescriptorSet::sDummyTextureViewMap[wgpu::TextureViewDimension::e2DArray];
+                break;
+
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_CUBE:
+            //    entry.textureView = WebGPUDescriptorSet::sDummyTextureViewMap[wgpu::TextureViewDimension::Cube];
+                break;
+
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_CUBEA:
+             //   entry.textureView = WebGPUDescriptorSet::sDummyTextureViewMap[wgpu::TextureViewDimension::CubeArray];
+                break;
+
+            case WebGPUDescriptorSetLayout::BindGroupEntryType::TEXTURE_VIEW_3D:
+               // entry.textureView = WebGPUDescriptorSet::sDummyTextureViewMap[wgpu::TextureViewDimension::e3D];
+                break;
+            default: break;
+        }
+    }
+    std::sort(entries.begin(), entries.end(),
+            [](wgpu::BindGroupEntry const& a, wgpu::BindGroupEntry const& b) {
+                return a.binding < b.binding;
+            });
+    return entries;
+}
+
+WebGPUDescriptorSet::WebGPUDescriptorSet(wgpu::BindGroupLayout const& layout,
+        std::vector<WebGPUDescriptorSetLayout::BindGroupEntryInfo> const& bindGroupEntries, std::string label)
     : mLayout(layout),
-      entries(layoutSize, wgpu::BindGroupEntry{}) {
+      mEntriesSortedByBinding(createDummyEntriesSortedByBinding(bindGroupEntries)) {
+    bglLabel = label;
     // Establish the size of entries based on the layout. This should be reliable and efficient.
+    assert_invariant(INVALID_INDEX > mEntryIndexByBinding.size());
+    for (size_t i = 0; i < mEntryIndexByBinding.size(); i++) {
+        mEntryIndexByBinding[i] = INVALID_INDEX;
+    }
+    for (size_t index = 0; index < mEntriesSortedByBinding.size(); index++) {
+        wgpu::BindGroupEntry const& entry = mEntriesSortedByBinding[index];
+        assert_invariant(entry.binding < mEntryIndexByBinding.size());
+        mEntryIndexByBinding[entry.binding] = static_cast<uint8_t>(index);
+    }
+    for (auto const& entry : bindGroupEntries) {
+        if (entry.hasDynamicOffset) {
+            assert_invariant(entry.binding < mEntriesByBindingWithDynamicOffsets.size());
+            mEntriesByBindingWithDynamicOffsets[entry.binding] = true;
+        }
+    }
+    mDynamicOffsets.reserve(mEntriesSortedByBinding.size());
+}
+
+WebGPUDescriptorSet::~WebGPUDescriptorSet() {
+    mBindGroup = nullptr;
+    mLayout = nullptr;
 }
-WebGPUDescriptorSet::~WebGPUDescriptorSet() {}
 
 wgpu::BindGroup WebGPUDescriptorSet::lockAndReturn(const wgpu::Device& device) {
     if (mBindGroup) {
         return mBindGroup;
     }
     // TODO label? Should we just copy layout label?
-    wgpu::BindGroupDescriptor desc{ .layout = mLayout,
-        .entryCount = entries.size(),
-        .entries = entries.data() };
+    wgpu::BindGroupDescriptor desc{
+        .layout = mLayout,
+        .entryCount = mEntriesSortedByBinding.size(),
+        .entries = mEntriesSortedByBinding.data()
+    };
+    for(auto e : mEntriesSortedByBinding){
+        if(e.sampler.Get() == sDummySampler.Get()){
+            printf("===R Dummy %s UBO %i\n", bglLabel.c_str(), e.binding/2);
+        }
+        for(auto dt : sDummyTextureViewMap){
+            if(e.textureView.Get() == dt.second.Get())
+            {
+                printf("===R Dummy %s Tex %i\n", bglLabel.c_str(), e.binding/2);
+            }
+        }
+        if(e.buffer.Get() == sDummyUniformBuffer.Get()){
+            printf("===R Dummy %s Sam %i\n", bglLabel.c_str(),(e.binding-1)/2);
+        }
+    }
     mBindGroup = device.CreateBindGroup(&desc);
+    FILAMENT_CHECK_POSTCONDITION(mBindGroup) << "Failed to create bind group?";
+    // once we have created the bind group itself we should no longer need any other state
+    mLayout = nullptr;
+    mEntriesSortedByBinding.clear();
+    mEntriesSortedByBinding.shrink_to_fit();
     return mBindGroup;
 }
 
-void WebGPUDescriptorSet::addEntry(uint index, wgpu::BindGroupEntry&& entry) {
+void WebGPUDescriptorSet::addEntry(unsigned int index, wgpu::BindGroupEntry&& entry) {
     if (mBindGroup) {
         // We will keep getting hits from future updates, but shouldn't do anything
         // Filament guarantees this won't change after things have locked.
@@ -292,54 +627,104 @@ void WebGPUDescriptorSet::addEntry(uint index, wgpu::BindGroupEntry&& entry) {
     }
     // TODO: Putting some level of trust that Filament is not going to reuse indexes or go past the
     // layout index for efficiency. Add guards if wrong.
-    entries[index] = std::move(entry);
+    FILAMENT_CHECK_POSTCONDITION(index < mEntryIndexByBinding.size())
+            << "impossible/invalid index for a descriptor/binding (our of range or >= "
+               "MAX_DESCRIPTOR_COUNT) "
+            << index;
+    uint8_t entryIndex = mEntryIndexByBinding[index];
+    FILAMENT_CHECK_POSTCONDITION(
+            entryIndex != INVALID_INDEX && entryIndex < mEntriesSortedByBinding.size())
+            << "Invalid binding " << index;
+    entry.binding = index;
+    mEntriesSortedByBinding[entryIndex] = std::move(entry);
+    mEntriesByBindingAdded[index] = true;
 }
+
+uint32_t const* WebGPUDescriptorSet::setDynamicOffsets(uint32_t const* offsets) {
+    // mDynamicOffsets already reserves enough memory for the number of entries in the set
+    mDynamicOffsets.clear();
+    // this implementation copies the offsets to mDynamicOffsets, but also adds values for
+    // unused entries TODO: is this necessary?
+    size_t inputIndex = 0;
+    size_t outputIndex = 0;
+    for (auto const& entry : mEntriesSortedByBinding) {
+        if (mEntriesByBindingWithDynamicOffsets[entry.binding]) {
+            if (mEntriesByBindingAdded[entry.binding]) {
+                mDynamicOffsets[outputIndex++] = offsets[inputIndex++];
+            } else {
+                mDynamicOffsets[outputIndex++] = 0; // dummy offset, as it was never added
+            }
+        }
+    }
+    return mDynamicOffsets.data();
+}
+
+size_t WebGPUDescriptorSet::countEntitiesWithDynamicOffsets() const {
+    return mEntriesByBindingWithDynamicOffsets.count();
+}
+
 // 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;
-
+        wgpu::Device const& device) noexcept {
+    assert_invariant(
+            samples == 1 ||
+            samples == 4 &&
+                    "An invalid number of samples were requested, as WGPU requires the sample "
+                    "count to either be 1 (no multisampling) or 4, at least as of April 2025 of "
+                    "the spec. See https://www.w3.org/TR/webgpu/#texture-creation or "
+                    "https://gpuweb.github.io/gpuweb/#multisample-state");
+    // First, the texture aspect, starting with the defaults/basic configuration
+    mUsage = fToWGPUTextureUsage(usage);
+    mFormat = fToWGPUTextureFormat(format);
+    wgpu::TextureDescriptor textureDescriptor{
+        .label = getUserTextureLabel(target),
+        .usage = mUsage,
+        .dimension = target == SamplerType::SAMPLER_3D ? wgpu::TextureDimension::e3D
+                                                       : wgpu::TextureDimension::e2D,
+        .size = { .width = width, .height = height, .depthOrArrayLayers = depth },
+        .format = mFormat,
+        .mipLevelCount = levels,
+        .sampleCount = samples,
+        // TODO Is this fine? Could do all-the-things, a naive mapping or get something from
+        // Filament
+        .viewFormatCount = 0,
+        .viewFormats = nullptr,
+    };
+    // adjust for specific cases
     switch (target) {
-        case SamplerType::SAMPLER_CUBEMAP:
-        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
         case SamplerType::SAMPLER_2D:
+            mArrayLayerCount = 1;
+            break;
         case SamplerType::SAMPLER_2D_ARRAY:
-        // Should be safe to assume external is 2d
-        case SamplerType::SAMPLER_EXTERNAL: {
-            desc.dimension = wgpu::TextureDimension::e2D;
+            mArrayLayerCount = textureDescriptor.size.depthOrArrayLayers;
             break;
-        }
-        case SamplerType::SAMPLER_3D: {
-            desc.dimension = wgpu::TextureDimension::e3D;
+        case SamplerType::SAMPLER_CUBEMAP:
+            textureDescriptor.size.depthOrArrayLayers = 6;
+            mArrayLayerCount = textureDescriptor.size.depthOrArrayLayers;
+            break;
+        case SamplerType::SAMPLER_EXTERNAL:
+        case SamplerType::SAMPLER_3D:
+            mArrayLayerCount = 1;
+            break;
+        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
+            textureDescriptor.size.depthOrArrayLayers = depth * 6;
+            mArrayLayerCount = textureDescriptor.size.depthOrArrayLayers;
             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);
+    assert_invariant(textureDescriptor.format != wgpu::TextureFormat::Undefined &&
+                     "Could not find appropriate WebGPU format");
+    mTexture = device.CreateTexture(&textureDescriptor);
+    FILAMENT_CHECK_POSTCONDITION(mTexture)
+            << "Failed to create texture for " << textureDescriptor.label;
+    // Second, the texture view aspect
+    mTexView = makeTextureView(0, levels, target);
 }
+
 // From createTextureViewR
 WGPUTexture::WGPUTexture(WGPUTexture* src, uint8_t baseLevel, uint8_t levelCount) noexcept {
-    texture = src->texture;
-    texView = makeTextureView(baseLevel, levelCount);
+    mTexture = src->mTexture;
+    mTexView = makeTextureView(baseLevel, levelCount, target);
 }
 
 wgpu::TextureUsage WGPUTexture::fToWGPUTextureUsage(const TextureUsage& fUsage) {
@@ -630,26 +1015,102 @@ wgpu::TextureFormat WGPUTexture::fToWGPUTextureFormat(const TextureFormat& fUsag
     }
 }
 
-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);
+wgpu::TextureView WGPUTexture::makeTextureView(const uint8_t& baseLevel, const uint8_t& levelCount,
+        SamplerType target) {
+    // starting with the defaults/basic configuration
+    wgpu::TextureViewDescriptor textureViewDescriptor{
+        .label = getUserTextureViewLabel(target),
+        .format = mFormat,
+        // dimension depends on target and is set below
+        .baseMipLevel = baseLevel,
+        .mipLevelCount = levelCount,
+        // baseArrayLayer is required, making a guess
+        .baseArrayLayer = 0,
+        .arrayLayerCount = mArrayLayerCount,
+        // Have not found an analog to aspect in other drivers, but ALL should be unrestrictive.
+        // TODO Can we make this better?
+        .aspect = wgpu::TextureAspect::All,
+        .usage = mUsage
+    };
+    // adjust for specific cases
+    switch (target) {
+        case SamplerType::SAMPLER_2D:
+            textureViewDescriptor.dimension = wgpu::TextureViewDimension::e2D;
+            break;
+        case SamplerType::SAMPLER_2D_ARRAY:
+            textureViewDescriptor.dimension = wgpu::TextureViewDimension::e2DArray;
+            break;
+        case SamplerType::SAMPLER_CUBEMAP:
+            textureViewDescriptor.dimension = wgpu::TextureViewDimension::Cube;
+            break;
+        case SamplerType::SAMPLER_EXTERNAL:
+            textureViewDescriptor.dimension = wgpu::TextureViewDimension::e2D;
+            break;
+        case SamplerType::SAMPLER_3D:
+            textureViewDescriptor.dimension = wgpu::TextureViewDimension::e3D;
+            break;
+        case SamplerType::SAMPLER_CUBEMAP_ARRAY:
+            textureViewDescriptor.dimension = wgpu::TextureViewDimension::CubeArray;
+            break;
+    }
+    wgpu::TextureView textureView = mTexture.CreateView(&textureViewDescriptor);
+    FILAMENT_CHECK_POSTCONDITION(textureView)
+            << "Failed to create texture view " << textureViewDescriptor.label;
+    return textureView;
 }
 
+WGPURenderTarget::Attachment WGPURenderTarget::getDrawColorAttachment(size_t index) {
+    assert_invariant( index < MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT);
+    auto result = color[index];
+    if (index == 0 && defaultRenderTarget) {
+
+    }
+
+    return result;
+}
+
+wgpu::LoadOp WGPURenderTarget::getLoadOperation(RenderPassParams const& params,
+                                             TargetBufferFlags buffer) {
+    auto clearFlags = params.flags.clear;
+    auto discardStartFlags = params.flags.discardStart;
+    if (any(clearFlags & buffer)) {
+        return wgpu::LoadOp::Clear;
+    } else if (any(discardStartFlags & buffer)) {
+        return wgpu::LoadOp::Clear;
+    }
+    return wgpu::LoadOp::Load;
+}
+
+wgpu::StoreOp WGPURenderTarget::getStoreOperation(RenderPassParams const& params,
+                                               TargetBufferFlags buffer) {
+    const auto discardEndFlags = params.flags.discardEnd;
+    if (any(discardEndFlags & buffer)) {
+        return wgpu::StoreOp::Discard;
+    }
+    return wgpu::StoreOp::Store;
+}
+void WGPURenderTarget::setUpRenderPassAttachments(wgpu::RenderPassDescriptor& descriptor,
+        wgpu::TextureView const& textureView, RenderPassParams const& params) {
+    // auto discardFlags = params.flags.discardEnd;
+    // (void) discardFlags;
+    // std::vector<wgpu::RenderPassColorAttachment> colorAttachments;
+    colorAttachments.clear();
+    for (size_t i = 0; i < 1/*MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT*/; i++) {
+        // auto attachment = getDrawColorAttachment(i);
+        // if (attachment) {
+            wgpu::RenderPassColorAttachment colorAttachment;
+            colorAttachment.view = textureView;
+            colorAttachment.loadOp  = getLoadOperation(params, getTargetBufferFlagsAt(i));
+            colorAttachment.storeOp = getStoreOperation(params, getTargetBufferFlagsAt(i));
+            colorAttachment.clearValue = { params.clearColor.r, params.clearColor.g, params.clearColor.b, params.clearColor.a };
+            colorAttachments.emplace_back(colorAttachment);
+        // }
+    }
+    descriptor.colorAttachments = colorAttachments.data();
+    descriptor.colorAttachmentCount = colorAttachments.size();
+    descriptor.depthStencilAttachment = nullptr;
+    descriptor.timestampWrites = nullptr;
+}
+
+
 }// namespace filament::backend

filament/backend/src/webgpu/WebGPUHandles.h

@@ -27,6 +27,8 @@
 
 #include <webgpu/webgpu_cpp.h>
 
+#include <array>
+#include <bitset>
 #include <cstdint>
 #include <vector>
 
@@ -98,84 +100,121 @@ struct WGPUBufferObject : HwBufferObject {
     wgpu::Buffer buffer = nullptr;
     const BufferObjectBinding bufferObjectBinding;
 };
+
 class WebGPUDescriptorSetLayout final : public HwDescriptorSetLayout {
 public:
+    std::string label;
+
+    enum class BindGroupEntryType : uint8_t {
+        UNIFORM_BUFFER,
+        TEXTURE_VIEW_2D,
+        TEXTURE_VIEW_2DA,
+        TEXTURE_VIEW_CUBE,
+        TEXTURE_VIEW_CUBEA,
+        TEXTURE_VIEW_3D,
+        SAMPLER
+    };
+
+    struct BindGroupEntryInfo final {
+        uint8_t binding = 0;
+        BindGroupEntryType type = BindGroupEntryType::UNIFORM_BUFFER;
+        bool hasDynamicOffset = false;
+    };
+
     WebGPUDescriptorSetLayout(DescriptorSetLayout const& layout, wgpu::Device const& device);
     ~WebGPUDescriptorSetLayout();
     [[nodiscard]] const wgpu::BindGroupLayout& getLayout() const { return mLayout; }
-    [[nodiscard]] uint getLayoutSize() const { return mLayoutSize; }
+    [[nodiscard]] std::vector<BindGroupEntryInfo> const& getBindGroupEntries() const {
+        return mBindGroupEntries;
+    }
 
 private:
     // TODO: If this is useful elsewhere, remove it from this class
     // Convert Filament Shader Stage Flags bitmask to webgpu equivilant
     static wgpu::ShaderStage filamentStageToWGPUStage(ShaderStageFlags fFlags);
-    uint mLayoutSize;
+    std::vector<BindGroupEntryInfo> mBindGroupEntries;
     wgpu::BindGroupLayout mLayout;
 };
 
 class WebGPUDescriptorSet final : public HwDescriptorSet {
 public:
-    WebGPUDescriptorSet(const wgpu::BindGroupLayout& layout, uint layoutSize);
+    std::string bglLabel;
+    static void initializeDummyResourcesIfNotAlready(wgpu::Device const&,
+            wgpu::TextureFormat aColorFormat,
+            wgpu::TextureFormat aDepthFormat);
+
+    WebGPUDescriptorSet(wgpu::BindGroupLayout const& layout,
+            std::vector<WebGPUDescriptorSetLayout::BindGroupEntryInfo> const& bindGroupEntries, std::string label);
     ~WebGPUDescriptorSet();
 
-    wgpu::BindGroup lockAndReturn(wgpu::Device const& device);
-    void addEntry(uint index, wgpu::BindGroupEntry&& entry);
+    wgpu::BindGroup lockAndReturn(wgpu::Device const&);
+    void addEntry(unsigned int index, wgpu::BindGroupEntry&& entry);
+    [[nodiscard]] uint32_t const* setDynamicOffsets(uint32_t const* offsets);
     [[nodiscard]] bool getIsLocked() const { return mBindGroup != nullptr; }
-
+    [[nodiscard]] size_t countEntitiesWithDynamicOffsets() const;
 private:
+
+    static wgpu::Buffer sDummyUniformBuffer;
+    static std::unordered_map<wgpu::TextureDimension, wgpu::Texture> sDummyTextureMap;
+    static std::unordered_map<wgpu::TextureViewDimension, wgpu::TextureView> sDummyTextureViewMap;
+    static wgpu::Sampler sDummySampler;
+
+    static std::vector<wgpu::BindGroupEntry> createDummyEntriesSortedByBinding(
+            std::vector<filament::backend::WebGPUDescriptorSetLayout::BindGroupEntryInfo> const&);
+
     // TODO: Consider storing what we used to make the layout. However we need to essentially
     // Recreate some of the info (Sampler in slot X with the actual sampler) so letting Dawn confirm
     // there isn't a mismatch may be easiest.
     // Also storing the wgpu ObjectBase takes care of ownership challenges in theory
-    wgpu::BindGroupLayout mLayout;
-    std::vector<wgpu::BindGroupEntry> entries;
-    wgpu::BindGroup mBindGroup;
+    wgpu::BindGroupLayout mLayout = nullptr;
+    static constexpr uint8_t INVALID_INDEX = MAX_DESCRIPTOR_COUNT + 1;
+    std::array<uint8_t, MAX_DESCRIPTOR_COUNT> mEntryIndexByBinding {};
+    std::vector<wgpu::BindGroupEntry> mEntriesSortedByBinding;
+    std::bitset<MAX_DESCRIPTOR_COUNT> mEntriesByBindingWithDynamicOffsets {};
+    std::bitset<MAX_DESCRIPTOR_COUNT> mEntriesByBindingAdded {};
+    std::vector<uint32_t> mDynamicOffsets;
+    wgpu::BindGroup mBindGroup = nullptr;
 };
 
 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,
-            wgpu::Device device) noexcept;
+            wgpu::Device const& device) 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; }
+    const wgpu::Texture& getTexture() const { return mTexture; }
+    const wgpu::TextureView& getTexView() const { return mTexView; }
 
+    // Public to allow checking for support of a texture format
     static wgpu::TextureFormat fToWGPUTextureFormat(const filament::backend::TextureFormat& fUsage);
 
 private:
-    wgpu::TextureView makeTextureView(const uint8_t& baseLevel, const uint8_t& levelCount);
+    wgpu::TextureView makeTextureView(const uint8_t& baseLevel, const uint8_t& levelCount,
+            SamplerType target);
     // 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.
-    wgpu::TextureView texView = nullptr;
+    wgpu::Texture mTexture = nullptr;
+    wgpu::TextureUsage mUsage = wgpu::TextureUsage::None;
+    wgpu::TextureFormat mFormat = wgpu::TextureFormat::Undefined;
+    uint32_t mArrayLayerCount = 1;
+    wgpu::TextureView mTexView = nullptr;
     wgpu::TextureUsage fToWGPUTextureUsage(const filament::backend::TextureUsage& fUsage);
 };
 
 struct WGPURenderPrimitive : public HwRenderPrimitive {
-    WGPURenderPrimitive() {}
-
-    void setBuffers(WGPUVertexBufferInfo const* const vbi,
-            WGPUVertexBuffer* vertexBuffer, WGPUIndexBuffer* indexBuffer);
 
     WGPUVertexBuffer* vertexBuffer = nullptr;
     WGPUIndexBuffer* indexBuffer = nullptr;
 };
 
-// TODO: Currently WGPURenderTarget is not used by WebGPU for useful task.
-// Update the struct when used by WebGPU driver.
-struct WGPURenderTarget : public HwRenderTarget {
+class WGPURenderTarget : public HwRenderTarget {
+public:
     class Attachment {
     public:
-        friend struct WGPURenderTarget;
+        friend class WGPURenderTarget;
 
         Attachment() = default;
         Attachment(WGPUTexture* gpuTexture, uint8_t level = 0, uint16_t layer = 0)
@@ -183,6 +222,9 @@ struct WGPURenderTarget : public HwRenderTarget {
               layer(layer),
               texture(gpuTexture->getTexture()),
               mWGPUTexture(gpuTexture) {}
+        operator bool() const {
+            return mWGPUTexture != nullptr;
+        }
 
         uint8_t level = 0;
         uint16_t layer = 0;
@@ -198,8 +240,8 @@ struct WGPURenderTarget : public HwRenderTarget {
         : HwRenderTarget(0, 0),
           defaultRenderTarget(true) {}
 
-    void setUpRenderPassAttachments(wgpu::RenderPassDescriptor* descriptor,
-            const RenderPassParams& params);
+    void setUpRenderPassAttachments(wgpu::RenderPassDescriptor& descriptor,
+            wgpu::TextureView const& textureView, RenderPassParams const& params);
 
     math::uint2 getAttachmentSize() noexcept;
 
@@ -209,15 +251,15 @@ struct WGPURenderTarget : public HwRenderTarget {
     Attachment getDrawColorAttachment(size_t index);
     Attachment getReadColorAttachment(size_t index);
 
+    static wgpu::LoadOp getLoadOperation(const RenderPassParams& params, TargetBufferFlags buffer);
+    static wgpu::StoreOp getStoreOperation(const RenderPassParams& params, TargetBufferFlags buffer);
 private:
-    static wgpu::LoadOp getLoadAction(const RenderPassParams& params, TargetBufferFlags buffer);
-    static wgpu::LoadOp getStoreAction(const RenderPassParams& params, TargetBufferFlags buffer);
-
     bool defaultRenderTarget = false;
     uint8_t samples = 1;
 
     Attachment color[MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT] = {};
     math::uint2 attachmentSize = {};
+    std::vector<wgpu::RenderPassColorAttachment> colorAttachments {};
 };
 
 }// namespace filament::backend

filament/backend/src/webgpu/WebGPUPipelineCreation.cpp

@@ -235,6 +235,7 @@ wgpu::RenderPipeline createWebGPURenderPipeline(wgpu::Device const& device,
         fragmentState.constantCount = program.constants.size(),
         fragmentState.constants = program.constants.data(),
         fragmentState.targetCount = 1; // TODO need to get this from the render target
+        fragmentState.targets = colorTargets.data();
         assert_invariant(fragmentState.targetCount <= MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT);
         for (size_t targetIndex = 0; targetIndex < fragmentState.targetCount; targetIndex++) {
             auto& colorTarget = colorTargets[targetIndex];

filament/backend/src/webgpu/WebGPUSwapChain.cpp

@@ -105,7 +105,7 @@ void printSurfaceConfiguration(wgpu::SurfaceConfiguration const& config,
 }
 #endif
 
-constexpr wgpu::TextureFormat selectColorFormat(size_t availableFormatsCount,
+[[nodiscard]] constexpr wgpu::TextureFormat selectColorFormat(size_t availableFormatsCount,
         wgpu::TextureFormat const* availableFormats, bool useSRGBColorSpace) {
     const std::array expectedColorFormats =
             useSRGBColorSpace ?
@@ -123,7 +123,7 @@ constexpr wgpu::TextureFormat selectColorFormat(size_t availableFormatsCount,
     return *firstFoundColorFormat;
 }
 
-constexpr wgpu::TextureFormat selectDepthFormat(bool depth32FloatStencil8Enabled,
+[[nodiscard]] constexpr wgpu::TextureFormat selectDepthFormat(bool depth32FloatStencil8Enabled,
         bool needStencil) {
     if (needStencil) {
         if (depth32FloatStencil8Enabled) {
@@ -137,7 +137,7 @@ constexpr wgpu::TextureFormat selectDepthFormat(bool depth32FloatStencil8Enabled
     }
 }
 
-constexpr wgpu::PresentMode selectPresentMode(size_t availablePresentModesCount,
+[[nodiscard]] constexpr wgpu::PresentMode selectPresentMode(size_t availablePresentModesCount,
         wgpu::PresentMode const* availablePresentModes) {
     // Verify that our chosen present mode is supported. In practice all devices support the FIFO
     // mode, but we check for it anyway for completeness.  (and to avoid validation warnings)
@@ -151,7 +151,7 @@ constexpr wgpu::PresentMode selectPresentMode(size_t availablePresentModesCount,
     return desiredPresentMode;
 }
 
-constexpr wgpu::CompositeAlphaMode selectAlphaMode(size_t availableAlphaModesCount,
+[[nodiscard]] constexpr wgpu::CompositeAlphaMode selectAlphaMode(size_t availableAlphaModesCount,
         wgpu::CompositeAlphaMode const* availableAlphaModes) {
     bool autoAvailable = false;
     bool inheritAvailable = false;
@@ -222,13 +222,58 @@ void initConfig(wgpu::SurfaceConfiguration& config, wgpu::Device const& device,
     config.alphaMode = selectAlphaMode(capabilities.alphaModeCount, capabilities.alphaModes);
 }
 
+[[nodiscard]] wgpu::Texture createDepthTexture(wgpu::Device const& device,
+        wgpu::Extent2D const& extent, wgpu::TextureFormat depthFormat) {
+    wgpu::TextureDescriptor descriptor{ .label = "depth_texture",
+        .usage = wgpu::TextureUsage::TextureBinding | wgpu::TextureUsage::RenderAttachment,
+        .dimension = wgpu::TextureDimension::e2D,
+        .size = { .width = extent.width, .height = extent.height, .depthOrArrayLayers = 1 },
+        .format = depthFormat,
+        .mipLevelCount = 1,
+        .sampleCount = 1,
+        .viewFormatCount = 1,
+        .viewFormats = &depthFormat
+    };
+    wgpu::Texture depthTexture = device.CreateTexture(&descriptor);
+    FILAMENT_CHECK_POSTCONDITION(depthTexture) << "Failed to create depth texture with width "
+                                               << extent.width << " and height " << extent.height;
+    return depthTexture;
+}
+
+[[nodiscard]] wgpu::TextureView createDepthTextureView(wgpu::Texture const& depthTexture,
+        wgpu::TextureFormat depthFormat, bool needStencil) {
+    wgpu::TextureViewDescriptor descriptor{
+        .label = "depth_texture_view",
+        .format = depthFormat,
+        .dimension = wgpu::TextureViewDimension::e2D,
+        .baseMipLevel = 0,
+        .mipLevelCount = 1,
+        .baseArrayLayer = 0,
+        .arrayLayerCount = 1,
+        .aspect = wgpu::TextureAspect::DepthOnly,
+        .usage = wgpu::TextureUsage::TextureBinding | wgpu::TextureUsage::RenderAttachment
+    };
+    if (needStencil) {
+        descriptor.aspect = wgpu::TextureAspect::All;
+    }
+    wgpu::TextureView depthTextureView = depthTexture.CreateView(&descriptor);
+    FILAMENT_CHECK_POSTCONDITION(depthTextureView) << "Failed to create depth texture view";
+    return depthTextureView;
+}
+
 }// namespace
 
 namespace filament::backend {
 
 WebGPUSwapChain::WebGPUSwapChain(wgpu::Surface&& surface, wgpu::Extent2D const& surfaceSize,
         wgpu::Adapter const& adapter, wgpu::Device const& device, uint64_t flags)
-    : mSurface(surface) {
+    : mDevice(device),
+      mSurface(surface),
+      mNeedStencil((flags & SWAP_CHAIN_HAS_STENCIL_BUFFER) != 0),
+      mDepthFormat(selectDepthFormat(device.HasFeature(wgpu::FeatureName::Depth32FloatStencil8),
+              mNeedStencil)),
+      mDepthTexture(createDepthTexture(device, surfaceSize, mDepthFormat)),
+      mDepthTextureView(createDepthTextureView(mDepthTexture, mDepthFormat, mNeedStencil)) {
     wgpu::SurfaceCapabilities capabilities = {};
     if (!mSurface.GetCapabilities(adapter, &capabilities)) {
         FWGPU_LOGW << "Failed to get WebGPU surface capabilities" << utils::io::endl;
@@ -238,19 +283,14 @@ WebGPUSwapChain::WebGPUSwapChain(wgpu::Surface&& surface, wgpu::Extent2D const&
 #endif
     }
     const bool useSRGBColorSpace = (flags & SWAP_CHAIN_CONFIG_SRGB_COLORSPACE) != 0;
-    const bool needStencil = (flags & SWAP_CHAIN_HAS_STENCIL_BUFFER) != 0;
     initConfig(mConfig, device, capabilities, surfaceSize, useSRGBColorSpace);
-    mDepthFormat = selectDepthFormat(device.HasFeature(wgpu::FeatureName::Depth32FloatStencil8),
-            needStencil);
 #if FWGPU_ENABLED(FWGPU_PRINT_SYSTEM)
     printSurfaceConfiguration(mConfig, mDepthFormat);
 #endif
     mSurface.Configure(&mConfig);
 }
 
-WebGPUSwapChain::~WebGPUSwapChain() {
-    mSurface.Unconfigure();
-}
+WebGPUSwapChain::~WebGPUSwapChain() { mSurface.Unconfigure(); }
 
 void WebGPUSwapChain::setExtent(wgpu::Extent2D const& currentSurfaceSize) {
     FILAMENT_CHECK_POSTCONDITION(currentSurfaceSize.width > 0 || currentSurfaceSize.height > 0)
@@ -267,6 +307,8 @@ void WebGPUSwapChain::setExtent(wgpu::Extent2D const& currentSurfaceSize) {
         // TODO we may need to ensure no surface texture is in flight when we do this. some
         //      synchronization may be necessary
         mSurface.Configure(&mConfig);
+        mDepthTexture = createDepthTexture(mDevice, currentSurfaceSize, mDepthFormat);
+        mDepthTextureView = createDepthTextureView(mDepthTexture, mDepthFormat, mNeedStencil);
     }
 }
 

filament/backend/src/webgpu/WebGPUSwapChain.h

@@ -38,14 +38,20 @@ public:
 
     [[nodiscard]] wgpu::TextureView getCurrentSurfaceTextureView(wgpu::Extent2D const&);
 
+    [[nodiscard]] wgpu::TextureView getDepthTextureView() const { return mDepthTextureView; }
+
     void present();
 
 private:
     void setExtent(wgpu::Extent2D const&);
 
+    wgpu::Device mDevice = nullptr;
     wgpu::Surface mSurface = {};
     wgpu::SurfaceConfiguration mConfig = {};
+    bool mNeedStencil = false;
     wgpu::TextureFormat mDepthFormat = wgpu::TextureFormat::Undefined;
+    wgpu::Texture mDepthTexture = nullptr;
+    wgpu::TextureView mDepthTextureView = nullptr;
 };
 
 } // namespace filament::backend

filament/backend/src/webgpu/platform/WebGPUPlatform.cpp

@@ -99,22 +99,45 @@ wgpu::Adapter WebGPUPlatform::requestAdapter(wgpu::Surface const& surface) {
 
 wgpu::Device WebGPUPlatform::requestDevice(wgpu::Adapter const& adapter) {
     // TODO consider passing limits
-    constexpr std::array desiredFeatures = {
-        wgpu::FeatureName::DepthClipControl,
-        wgpu::FeatureName::Depth32FloatStencil8,
-        wgpu::FeatureName::CoreFeaturesAndLimits };
-    std::vector<wgpu::FeatureName> requiredFeatures;
-    requiredFeatures.reserve(desiredFeatures.size());
+    constexpr std::array optionalFeatures = { wgpu::FeatureName::DepthClipControl,
+        wgpu::FeatureName::Depth32FloatStencil8, wgpu::FeatureName::CoreFeaturesAndLimits };
+
+    constexpr std::array requiredFeatures = { wgpu::FeatureName::TransientAttachments };
+
     wgpu::SupportedFeatures supportedFeatures;
     adapter.GetFeatures(&supportedFeatures);
+
+    std::vector<wgpu::FeatureName> enabledFeatures;
+    enabledFeatures.reserve(requiredFeatures.size() + optionalFeatures.size());
+
     std::set_intersection(supportedFeatures.features,
-            supportedFeatures.features + supportedFeatures.featureCount, desiredFeatures.begin(),
-            desiredFeatures.end(), std::back_inserter(requiredFeatures));
+            supportedFeatures.features + supportedFeatures.featureCount, requiredFeatures.begin(),
+            requiredFeatures.end(), std::back_inserter(enabledFeatures));
+
+    if (enabledFeatures.size() != requiredFeatures.size()) {
+        std::vector<wgpu::FeatureName> missingFeatures;
+        std::set_difference(requiredFeatures.begin(), requiredFeatures.end(),
+                supportedFeatures.features,
+                supportedFeatures.features + supportedFeatures.featureCount,
+                std::back_inserter(missingFeatures));
+
+        std::stringstream missingFeaturesStream{};
+        for (const auto& entry: missingFeatures) {
+            missingFeaturesStream << std::to_string(static_cast<uint32_t>(entry)) << " ";
+        }
+        PANIC_POSTCONDITION("Some required features are not available %s/n",
+                missingFeaturesStream.str().c_str());
+    }
+
+    std::set_intersection(supportedFeatures.features,
+            supportedFeatures.features + supportedFeatures.featureCount, optionalFeatures.begin(),
+            optionalFeatures.end(), std::back_inserter(enabledFeatures));
+
     wgpu::DeviceDescriptor deviceDescriptor{};
     deviceDescriptor.label = "graphics_device";
     deviceDescriptor.defaultQueue.label = "default_queue";
-    deviceDescriptor.requiredFeatureCount = requiredFeatures.size();
-    deviceDescriptor.requiredFeatures = requiredFeatures.data();
+    deviceDescriptor.requiredFeatureCount = enabledFeatures.size();
+    deviceDescriptor.requiredFeatures = enabledFeatures.data();
     deviceDescriptor.SetDeviceLostCallback(wgpu::CallbackMode::AllowSpontaneous,
             [](wgpu::Device const&, wgpu::DeviceLostReason const& reason,
                     wgpu::StringView message) {

filament/backend/test/BackendTest.cpp

@@ -45,6 +45,7 @@ namespace test {
 Backend BackendTest::sBackend = Backend::NOOP;
 OperatingSystem BackendTest::sOperatingSystem = OperatingSystem::OTHER;
 bool BackendTest::sIsMobilePlatform = false;
+std::vector<std::string> BackendTest::sFailedImages;
 
 void BackendTest::init(Backend backend, OperatingSystem operatingSystem, bool isMobilePlatform) {
     sBackend = backend;
@@ -63,11 +64,12 @@ BackendTest::~BackendTest() {
     flushAndWait();
     mImageExpectations->evaluate();
     // Note: Don't terminate the driver for OpenGL, as it wipes away the context and removes the buffer from the screen.
-    if (sBackend == Backend::OPENGL) {
-        return;
+    if (sBackend != Backend::OPENGL) {
+        driver->terminate();
+        delete driver;
     }
-    driver->terminate();
-    delete driver;
+
+    recordFailedImages();
 }
 
 void BackendTest::initializeDriver() {
@@ -167,8 +169,24 @@ bool BackendTest::matchesEnvironment(OperatingSystem operatingSystem) {
     return sOperatingSystem == operatingSystem;
 }
 
-bool BackendTest::matchesEnvironment(OperatingSystem operatingSystem, Backend backend) {
-    return matchesEnvironment(operatingSystem) && matchesEnvironment(backend);
+void BackendTest::markImageAsFailure(std::string failedImageName) {
+    sFailedImages.emplace_back(std::move(failedImageName));
+}
+
+void BackendTest::recordFailedImages() {
+    if (!sFailedImages.empty()) {
+        std::string failedImages;
+        for (auto& failedTestImageName: sFailedImages) {
+            if (failedImages.empty()) {
+                failedImages = failedTestImageName;
+            } else {
+                failedImages.append(",");
+                failedImages.append(failedTestImageName);
+            }
+        }
+        RecordProperty("FailedImages", failedImages);
+    }
+    sFailedImages.clear();
 }
 
 class Environment : public ::testing::Environment {

filament/backend/test/BackendTest.h

@@ -38,6 +38,9 @@ public:
     static OperatingSystem sOperatingSystem;
     static bool sIsMobilePlatform;
 
+    // Takes the name of the image that wasn't correct, without the .png suffix
+    static void markImageAsFailure(std::string failedImageName);
+
 protected:
 
     BackendTest();
@@ -73,8 +76,13 @@ protected:
 
     static bool matchesEnvironment(Backend backend);
     static bool matchesEnvironment(OperatingSystem operatingSystem);
-    static bool matchesEnvironment(OperatingSystem operatingSystem, Backend backend);
 private:
+    // Adds all the images that failed an ImageExpectation to the XML metadata for the current tests
+    // case. Add --gtest_output=xml as a command line argument to generate a test_detail.xml file in
+    // the directory where the tests are run.
+    static void recordFailedImages();
+
+    static std::vector<std::string> sFailedImages;
 
     filament::backend::Driver* driver = nullptr;
     filament::backend::CommandBufferQueue commandBufferQueue;

filament/backend/test/ImageExpectations.cpp

@@ -21,6 +21,7 @@
 #include "utils/Hash.h"
 #include <fstream>
 
+#include "BackendTest.h"
 #include "backend/PixelBufferDescriptor.h"
 #include "private/backend/DriverApi.h"
 
@@ -32,6 +33,8 @@
 
 #endif
 
+namespace test {
+
 ScreenshotParams::ScreenshotParams(int width, int height, std::string fileName,
         uint32_t expectedHash, bool isSrgb)
     : mWidth(width),
@@ -80,6 +83,10 @@ std::string ScreenshotParams::expectedFilePath() const {
     return absl::StrFormat("%s/%s", expectedDirectoryPath(), expectedFileName());
 }
 
+const std::string ScreenshotParams::filePrefix() const {
+    return mFileName;
+}
+
 ImageExpectation::ImageExpectation(const char* fileName, int lineNumber,
         filament::backend::DriverApi& api, ScreenshotParams params,
         filament::backend::RenderTargetHandle renderTarget)
@@ -113,7 +120,11 @@ void ImageExpectation::compareImage() const {
 #ifndef FILAMENT_IOS
         LoadedPng loadedImage(mParams.expectedFilePath());
         uint32_t loadedImageHash = loadedImage.hash();
-        EXPECT_THAT(actualHash, testing::Eq(loadedImageHash)) << mParams.expectedFileName();
+        auto compareToImageMatcher = testing::Eq(loadedImageHash);
+        if (!testing::Matches(compareToImageMatcher)(actualHash)) {
+            BackendTest::markImageAsFailure(mParams.filePrefix());
+        }
+        EXPECT_THAT(actualHash, compareToImageMatcher) << mParams.expectedFileName();
 #endif
         // For builds that can't load PNGs (currently iOS only) use the expected hash.
         EXPECT_THAT(actualHash, testing::Eq(mParams.expectedHash())) << mParams.expectedFileName();
@@ -237,3 +248,5 @@ uint32_t LoadedPng::hash() const {
 const std::vector<unsigned char>& LoadedPng::bytes() const {
     return mBytes;
 }
+
+} // namespace test

filament/backend/test/ImageExpectations.h

@@ -35,6 +35,8 @@ do {                                                                \
         screenshotParams);                                          \
 } while (0)
 
+namespace test {
+
 /**
  * Stores user-provided configuration values for an image expectation
  */
@@ -54,6 +56,7 @@ public:
     static std::string expectedDirectoryPath();
     std::string expectedFileName() const;
     std::string expectedFilePath() const;
+    const std::string filePrefix() const;
 
 private:
     int mWidth;
@@ -153,4 +156,6 @@ private:
     std::vector<std::unique_ptr<ImageExpectation>> mExpectations;
 };
 
+} // namespace test
+
 #endif //TNT_IMAGE_EXPECTATIONS_H

filament/backend/test/Lifetimes.h

@@ -21,6 +21,9 @@
 #include <functional>
 #include <optional>
 
+#include "gtest/gtest.h"
+#include "gmock/gmock.h"
+
 #include "backend/Handle.h"
 #include "backend/DriverApiForward.h"
 #include "BackendTest.h"
@@ -71,6 +74,7 @@ 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 = 1;
+    size_t kDescriptorSetIndex = 0;
     filamat::DescriptorSets descriptors;
     descriptors[kDescriptorSetIndex] = filamat::DescriptorSetInfo(config.uniforms.size());
     for (unsigned char i = 0; i < config.uniforms.size(); ++i) {
@@ -52,12 +52,12 @@ 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(1, bindingsInfo);
+    prog.descriptorBindings(0, bindingsInfo);
     mProgram = cleanup.add(api.createProgram(std::move(prog)));
 
     if (!kLayouts.empty()) {
         mDescriptorSetLayout =
-                cleanup.add(api.createDescriptorSetLayout(DescriptorSetLayout{ kLayouts }));
+                cleanup.add(api.createDescriptorSetLayout(DescriptorSetLayout{ .bindings = kLayouts }));
     }
 }
 
@@ -66,10 +66,15 @@ 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(1),
+            .set = set.value_or(0),
             .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 = 1) uniform Params {
+layout(binding = 0, set = 0) 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 = 1) uniform Params {
         }
         case ShaderUniformType::SimpleWithPadding: {
             return R"(
-layout(binding = 0, set = 1) uniform Params {
+layout(binding = 0, set = 0) uniform Params {
     highp vec4 padding[4];  // offset of 64 bytes
 
     highp vec4 color;
@@ -160,7 +160,7 @@ layout(binding = 0, set = 1) uniform Params {
         }
         case ShaderUniformType::Sampler: {
             return R"(
-layout(location = 0, set = 1) uniform sampler2D test_tex;
+layout(location = 0, set = 0) uniform sampler2D test_tex;
 )";
         }
         default:
@@ -184,7 +184,7 @@ std::vector<UniformConfig> GetUniformConfig(ShaderUniformType type) {
                     "backend_test", "test_tex", 0,
                     SamplerType::SAMPLER_2D, SamplerFormat::FLOAT, Precision::HIGH, false };
             return {{
-                            "test_tex", DescriptorType::SAMPLER, samplerInfo
+                            "test_tex", DescriptorType::SAMPLER_2D_FLOAT, samplerInfo
                     }};
         }
         default:

filament/backend/test/Skip.h

@@ -20,7 +20,8 @@
 #include <gtest/gtest.h>
 #include "BackendTest.h"
 
-// skipEnvironment must be a test::SkipEnvironment
+// skipEnvironment must be a test::SkipEnvironment or something that can be passed to the type's
+// constructor
 // rationale must be a string
 #define SKIP_IF(skipEnvironment, rationale)                                                    \
 do {                                                                                           \
@@ -31,6 +32,17 @@ 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/move_actual_images_to_expected.py

@@ -1,62 +1,143 @@
-import os, shutil, argparse, typing
-
-def match_sufffix(file_name: str, suffix: str, accepted_prefixes: typing.List[str]) -> str:
-  """
-  Check if the file name is one of the searched for ones with the given suffix and if so return it.
-  :param accepted_prefixes: If None accepts any prefix
-  :return: file_name with the suffix removed or "" if it doesn't match. This does mean a string that
-  is just the suffix is considered to not match as it will return the empty string.
-  """
-  if file_name.endswith(suffix):
-    prefix = file_name.removesuffix(suffix)
-    if accepted_prefixes is None or prefix in accepted_prefixes:
-      return prefix
-  return ""
+import os, shutil, argparse, typing, xml.etree.ElementTree, subprocess, platform
 
 
-def replace_file_names(path: str, removed: str, replacement: str = "", output_path: str = "",
-                       prefixes: typing.List[str] = None):
-  if not output_path:
-    output_path = path
-  for file_name in os.listdir(path=path):
-    prefix = match_sufffix(file_name, removed, prefixes)
-    if prefix:
-      # Remove the prefix from the list so that prefixes is the list of intended but not yet found
-      # files.
-      if prefixes is not None:
-        prefixes.remove(prefix)
-      new_file_name = prefix + replacement
-      new_file_path = os.path.join(output_path, new_file_name)
-      old_file_path = os.path.join(path, file_name)
-      print(f'{old_file_path} to {new_file_path}')
-      shutil.move(old_file_path, new_file_path)
-  if prefixes is not None:
-    for unfound_prefix in prefixes:
-      print(f'Failed to find {unfound_prefix}_actual.png')
+class TestResults(object):
+    ACTUAL_SUFFIX = '_actual.png'
+    EXPECTED_SUFFIX = '.png'
+
+    def __init__(self, results_directory: str, source_expected_directory: str):
+        self.results_directory = results_directory
+        self.actual_directory = os.path.join(self.results_directory, 'images', 'actual_images')
+        self.expected_directory = os.path.join(self.results_directory, 'images', 'expected_images')
+        self.source_expected_directory = source_expected_directory
+
+    def get_latest_failed_images(self) -> typing.List[str]:
+        failed_images = []
+        xml_tree = xml.etree.ElementTree.parse(
+            os.path.join(self.results_directory, 'test_detail.xml'))
+        testsuites = xml_tree.getroot()
+        for testsuite in testsuites.findall('testsuite'):
+            for testcase in testsuite.findall('testcase'):
+                for properties in testcase.findall('properties'):
+                    for property in properties.findall('property'):
+                        if property.get('name') == 'FailedImages':
+                            failed_images.extend(property.get('value').split(','))
+
+        return failed_images
+
+    def handle_failed_image(self, failed_image):
+        self.show_images(failed_image)
+        print(f'Update {failed_image}\'s expected image? y/n')
+        while True:
+            user_input = input()
+            if user_input == 'y':
+                self.move_actual_to_source([failed_image])
+                break
+            elif user_input == 'n':
+                break
+
+    def handle_all_failed_images(self):
+        for failed_image in self.get_latest_failed_images():
+            self.handle_failed_image(failed_image)
+
+    def show_images(self, failed_image):
+        # TODO: Test more on non-mac systems
+        open_command: str
+        os_name = platform.system().lower()
+        if 'windows' in os_name:
+            open_command = 'start'
+        elif 'osx' in os_name or 'darwin' in os_name:
+            open_command = 'open'
+        else:
+            open_command = 'xdg-open'
+
+        subprocess.run(
+            [open_command,
+             os.path.join(self.actual_directory, failed_image + TestResults.ACTUAL_SUFFIX)])
+        subprocess.run(
+            [open_command,
+             os.path.join(self.expected_directory, failed_image + TestResults.EXPECTED_SUFFIX)])
+
+    def move_actual_to_source(self, file_prefixes: typing.List[str]):
+        replace_file_names(path=self.actual_directory, removed=TestResults.ACTUAL_SUFFIX,
+                           replacement=TestResults.EXPECTED_SUFFIX,
+                           output_path=self.source_expected_directory, prefixes=file_prefixes)
+
+    def batch_move(self, prefixes: typing.Optional[typing.List[str]] = None):
+        replace_file_names(path=self.actual_directory, removed=TestResults.ACTUAL_SUFFIX,
+                           replacement=TestResults.EXPECTED_SUFFIX,
+                           output_path=self.source_expected_directory, prefixes=prefixes)
+
+
+def match_suffix(file_name: str, suffix: str, accepted_prefixes: typing.List[str]) -> str:
+    """
+    Check if the file name is one of the searched for ones with the given suffix and if so return
+    it.
+    :param accepted_prefixes: If None accepts any prefix
+    :return: file_name with the suffix removed or "" if it doesn't match. This does mean a string
+    that is just the suffix is considered to not match as it will return the empty string.
+    """
+    if file_name.endswith(suffix):
+        prefix = file_name.removesuffix(suffix)
+        if accepted_prefixes is None or prefix in accepted_prefixes:
+            return prefix
+    return ''
+
+
+def replace_file_names(path: str, removed: str, replacement: str = '', output_path: str = '',
+                       prefixes: typing.Optional[typing.List[str]] = None):
+    if not output_path:
+        output_path = path
+    for file_name in os.listdir(path=path):
+        prefix = match_suffix(file_name, removed, prefixes)
+        if prefix:
+            # Remove the prefix from the list so that prefixes is the list of intended but not yet
+            # found files.
+            if prefixes is not None:
+                prefixes.remove(prefix)
+            new_file_name = prefix + replacement
+            new_file_path = os.path.join(output_path, new_file_name)
+            old_file_path = os.path.join(path, file_name)
+            print(f'{old_file_path} to {new_file_path}')
+            shutil.copyfile(old_file_path, new_file_path)
+    if prefixes is not None:
+        for unfound_prefix in prefixes:
+            print(f'Failed to find {unfound_prefix}_actual.png')
+
 
 if __name__ == "__main__":
-  parser = argparse.ArgumentParser(prog='Backend Test File Renamer',
-                                   description='Moves actual generated test images to the expected '
-                                               'images directory, to update the test requirements. '
-                                               'test_cases accepts multiple arguments that should '
-                                               'be the name of the expected image file without the '
-                                               '.png suffix. Also --all can be passed to copy all '
-                                               'images.\n'
-                                               'Remember to sync CMake after running this to move '
-                                               'the new expected images to the binary directory.')
-  parser.add_argument('-i', '--input_path')
-  parser.add_argument('-o', '--output_path', default="./expected_images")
-  parser.add_argument('-t', '--test_cases', action='extend', nargs='*')
-  parser.add_argument('-a', '--all', action='store_true')
+    parser = argparse.ArgumentParser(prog='Backend Test File Renamer',
+                                     description='Moves actual generated test images to the '
+                                                 'expected images directory, to update the test '
+                                                 'requirements. test_cases accepts multiple '
+                                                 'arguments that should be the name of the '
+                                                 'expected image file without the .png suffix. '
+                                                 'Also --all can be passed to copy all images.\n'
+                                                 'Remember to sync CMake after running this to '
+                                                 'move the new expected images to the binary '
+                                                 'directory.')
+    parser.add_argument('-r', '--results_path')
+    parser.add_argument('-s', '--source_expected_path', default="./expected_images")
+    # The mutually exclusive options for how to process the actual images
+    parser.add_argument('-b', '--batch', action='extend', nargs='*')
+    parser.add_argument('-a', '--all', action='store_true')
+    parser.add_argument('-t', '--tests', action='store_true')
+    parser.add_argument('-c', '--compare', action='extend', nargs='*')
 
-  args = parser.parse_args()
-  input_path = "."
-  if args.input_path:
-    input_path = args.input_path
+    args = parser.parse_args()
+    if not args.results_path:
+        raise AssertionError("No result path provided")
+    results_path = args.results_path
 
-  prefixes = args.test_cases
-  if args.all:
-    prefixes = None
+    results = TestResults(results_directory=results_path,
+                          source_expected_directory=args.source_expected_path)
 
-  replace_file_names(path=input_path, output_path=args.output_path, removed="_actual.png",
-                     replacement=".png", prefixes=prefixes)
+    if args.all:
+        results.batch_move()
+    elif args.tests:
+        results.handle_all_failed_images()
+    elif args.compare:
+        for file_prefix in args.compare:
+            results.show_images(file_prefix)
+    else:
+        results.batch_move(args.batch)

filament/backend/test/test_Blit.cpp

@@ -20,6 +20,7 @@
 #include "Lifetimes.h"
 #include "Shader.h"
 #include "SharedShaders.h"
+#include "Skip.h"
 #include "TrianglePrimitive.h"
 
 #include <utils/Hash.h>
@@ -309,7 +310,7 @@ TEST_F(BlitTest, ColorResolve) {
 
     PipelineState state = {};
     state.program = shader.getProgram();
-    state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
+    state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
     state.rasterState.colorWrite = true;
     state.rasterState.depthWrite = false;
     state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -489,6 +490,7 @@ 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[1] = { shader.getDescriptorSetLayout() };
+        state.pipelineLayout.setLayout[0] = { 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({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
-            renderTarget, swapChain, shader.getProgram(), params);
+    renderTriangle({ { 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({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
+    renderTriangle({{ 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 = 1) uniform sampler2D test_tex;
+layout(binding = 0, set = 0) uniform sampler2D test_tex;
 
-layout(binding = 1, set = 1) uniform Params {
+layout(binding = 1, set = 0) uniform Params {
     highp float fbWidth;
     highp float fbHeight;
     highp float sourceLevel;
@@ -118,7 +118,7 @@ TEST_F(BackendTest, FeedbackLoops) {
         Shader shader = Shader(api, cleanup, ShaderConfig {
             .vertexShader = fullscreenVs,
             .fragmentShader = fullscreenFs,
-            .uniforms = {{"test_tex", DescriptorType::SAMPLER, samplerInfo}, {"Params"}}
+            .uniforms = {{"test_tex", DescriptorType::SAMPLER_2D_FLOAT, samplerInfo}, {"Params"}}
         });
 
         TrianglePrimitive const triangle(getDriverApi());
@@ -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[1] = { shader.getDescriptorSetLayout() };
+            state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
 
             api.makeCurrent(swapChain, swapChain);
             api.beginFrame(0, 0, 0);

filament/backend/test/test_LoadImage.cpp

@@ -20,6 +20,7 @@
 #include "Lifetimes.h"
 #include "Shader.h"
 #include "SharedShaders.h"
+#include "Skip.h"
 
 #include <backend/DriverEnums.h>
 #include <backend/Handle.h>
@@ -46,7 +47,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 = 1) uniform {samplerType} test_tex;
+layout(location = 0, set = 0) uniform {samplerType} test_tex;
 
 void main() {
     vec2 fbsize = vec2(512);
@@ -64,7 +65,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 = 1) uniform {samplerType} test_tex;
+layout(location = 0, set = 0) uniform {samplerType} test_tex;
 
 float getLayer(in sampler3D s) { return 2.5f / 4.0f; }
 float getLayer(in sampler2DArray s) { return 2.0f; }
@@ -85,7 +86,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 = 1) uniform sampler2D test_tex;
+layout(location = 0, set = 0) uniform sampler2D test_tex;
 
 void main() {
     vec2 fbsize = vec2(512);
@@ -211,6 +212,7 @@ 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;
@@ -306,7 +308,7 @@ TEST_F(LoadImageTest, UpdateImage2D) {
         Shader shader(api, cleanup, ShaderConfig{
            .vertexShader = mVertexShader,
            .fragmentShader= fragment,
-           .uniforms = {{"test_tex", DescriptorType::SAMPLER, samplerInfo}}
+           .uniforms = {{"test_tex", DescriptorType::SAMPLER_2D_FLOAT, samplerInfo}}
         });
 
         // Create a Texture.
@@ -334,9 +336,9 @@ TEST_F(LoadImageTest, UpdateImage2D) {
                 .filterMag = SamplerMagFilter::NEAREST,
                 .filterMin = SamplerMinFilter::NEAREST_MIPMAP_NEAREST });
 
-        api.bindDescriptorSet(descriptorSet, 1, {});
+        api.bindDescriptorSet(descriptorSet, 0, {});
 
-        renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
+        renderTriangle({{ shader.getDescriptorSetLayout() }},
                 defaultRenderTarget, swapChain, shader.getProgram());
 
         EXPECT_IMAGE(defaultRenderTarget, getExpectations(),
@@ -370,7 +372,7 @@ TEST_F(LoadImageTest, UpdateImageSRGB) {
             getSamplerTypeName(textureFormat), fragmentTemplate);
     Shader shader(api, cleanup, ShaderConfig{
         .vertexShader = mVertexShader, .fragmentShader = fragment, .uniforms = {{
-            "test_tex", DescriptorType::SAMPLER, samplerInfo
+            "test_tex", DescriptorType::SAMPLER_2D_FLOAT, samplerInfo
     }}});
 
     // Create a texture.
@@ -409,9 +411,9 @@ TEST_F(LoadImageTest, UpdateImageSRGB) {
             .filterMin = SamplerMinFilter::LINEAR_MIPMAP_NEAREST
     });
 
-    api.bindDescriptorSet(descriptorSet, 1, {});
+    api.bindDescriptorSet(descriptorSet, 0, {});
 
-    renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
+    renderTriangle({{ shader.getDescriptorSetLayout() }},
             defaultRenderTarget, swapChain, shader.getProgram());
 
     EXPECT_IMAGE(defaultRenderTarget, getExpectations(),
@@ -445,7 +447,7 @@ TEST_F(LoadImageTest, UpdateImageMipLevel) {
     Shader shader(api, cleanup, ShaderConfig {
         .vertexShader = mVertexShader,
         .fragmentShader = fragment,
-        .uniforms = {{"test_tex", DescriptorType::SAMPLER, samplerInfo}}
+        .uniforms = {{"test_tex", DescriptorType::SAMPLER_2D_FLOAT, samplerInfo}}
     });
 
     // Create a texture with 3 mip levels.
@@ -468,9 +470,9 @@ TEST_F(LoadImageTest, UpdateImageMipLevel) {
             .filterMin = SamplerMinFilter::LINEAR_MIPMAP_NEAREST
     });
 
-    api.bindDescriptorSet(descriptorSet, 1, {});
+    api.bindDescriptorSet(descriptorSet, 0, {});
 
-    renderTriangle({{ DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() }},
+    renderTriangle({{ shader.getDescriptorSetLayout() }},
             defaultRenderTarget, swapChain, shader.getProgram());
 
     EXPECT_IMAGE(defaultRenderTarget, getExpectations(),
@@ -506,7 +508,7 @@ TEST_F(LoadImageTest, UpdateImage3D) {
     Shader shader(api, cleanup, ShaderConfig {
         .vertexShader = mVertexShader,
         .fragmentShader = fragment,
-        .uniforms = {{"test_tex", DescriptorType::SAMPLER, samplerInfo}}
+        .uniforms = {{"test_tex", DescriptorType::SAMPLER_2D_ARRAY_FLOAT, samplerInfo}}
     });
 
     // Create a texture.
@@ -539,9 +541,9 @@ TEST_F(LoadImageTest, UpdateImage3D) {
                 { .filterMag = SamplerMagFilter::LINEAR,
                     .filterMin = SamplerMinFilter::LINEAR_MIPMAP_NEAREST });
 
-        api.bindDescriptorSet(descriptorSet, 1, {});
+        api.bindDescriptorSet(descriptorSet, 0, {});
 
-        renderTriangle({ { DescriptorSetLayoutHandle{}, shader.getDescriptorSetLayout() } },
+        renderTriangle({ { 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 = 1) uniform sampler2D backend_test_sib_tex;
+layout(location = 0, set = 0) uniform sampler2D backend_test_sib_tex;
 
 void main() {
     fragColor = textureLod(backend_test_sib_tex, uv, 1);
@@ -82,7 +82,7 @@ TEST_F(BackendTest, TextureViewLod) {
            .vertexShader = vertexShader,
            .fragmentShader = fragmentTexturedLod,
            .uniforms = {{
-               "backend_test_sib_tex", DescriptorType::SAMPLER, samplerInfo
+               "backend_test_sib_tex", DescriptorType::SAMPLER_2D_FLOAT, samplerInfo
            }}
         });
 

filament/backend/test/test_PushConstants.cpp

@@ -81,6 +81,7 @@ 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,6 +47,7 @@ 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);
 
@@ -81,7 +82,7 @@ TEST_F(BackendTest, RenderExternalImageWithoutSet) {
 
     PipelineState state;
     state.program = shader.getProgram();
-    state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
+    state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
     state.rasterState.colorWrite = true;
     state.rasterState.depthWrite = false;
     state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -94,7 +95,7 @@ TEST_F(BackendTest, RenderExternalImageWithoutSet) {
     api.beginFrame(0, 0, 0);
 
     api.updateDescriptorSetTexture(descriptorSet, 0, texture, {});
-    api.bindDescriptorSet(descriptorSet, 1, {});
+    api.bindDescriptorSet(descriptorSet, 0, {});
 
     // Render a triangle.
     api.beginRenderPass(defaultRenderTarget, params);
@@ -114,6 +115,7 @@ 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);
 
@@ -186,7 +188,7 @@ TEST_F(BackendTest, RenderExternalImage) {
 
     PipelineState state;
     state.program = shader.getProgram();
-    state.pipelineLayout.setLayout[1] = { shader.getDescriptorSetLayout() };
+    state.pipelineLayout.setLayout[0] = { shader.getDescriptorSetLayout() };
     state.rasterState.colorWrite = true;
     state.rasterState.depthWrite = false;
     state.rasterState.depthFunc = RasterState::DepthFunc::A;
@@ -197,7 +199,7 @@ TEST_F(BackendTest, RenderExternalImage) {
     api.beginFrame(0, 0, 0);
 
     api.updateDescriptorSetTexture(descriptorSet, 0, texture, {});
-    api.bindDescriptorSet(descriptorSet, 1, {});
+    api.bindDescriptorSet(descriptorSet, 0, {});
 
     // Render a triangle.
     api.beginRenderPass(defaultRenderTarget, params);

filament/include/filament/ColorGrading.h

@@ -21,13 +21,17 @@
 
 #include <filament/FilamentAPI.h>
 #include <filament/ToneMapper.h>
+#include <filament/ColorSpace.h>
 
 #include <utils/compiler.h>
 
 #include <math/mathfwd.h>
+#include <math/vec3.h>
+#include <math/vec4.h>
 
 #include <stdint.h>
 #include <stddef.h>
+#include <memory>
 
 namespace filament {
 
@@ -201,15 +205,14 @@ public:
          *
          * The default tone mapping operator is ACESLegacyToneMapper.
          *
-         * The specified tone mapper must have a lifecycle that exceeds the lifetime of
-         * this builder. Since the build(Engine&) method is synchronous, it is safe to
-         * delete the tone mapper object after that finishes executing.
+         * The ownership of the specified tone mapper is shared with the builder and built
+         * ColorGrading object.
          *
          * @param toneMapper The tone mapping operator to apply to the HDR color buffer
          *
          * @return This Builder, for chaining calls
          */
-        Builder& toneMapper(ToneMapper const* UTILS_NULLABLE toneMapper) noexcept;
+        Builder& toneMapper(std::shared_ptr<ToneMapper> toneMapper) noexcept;
 
         /**
          * Selects the tone mapping operator to apply to the HDR color buffer as the last
@@ -487,7 +490,118 @@ public:
         friend class FColorGrading;
     };
 
-protected:
+    /** Returns the quality level used to create this ColorGrading object. */
+    QualityLevel getQuality() const noexcept;
+
+    /** Returns the LUT format used to create this ColorGrading object. */
+    LutFormat getLutFormat() const noexcept;
+
+    /** Returns the LUT dimensions used to create this ColorGrading object. */
+    uint8_t getLutDimensions() const noexcept;
+
+    /** Returns the tone mapper used to create this ColorGrading object. */
+    const ToneMapper& getToneMapper() const noexcept;
+
+    /** Returns whether luminance scaling was enabled during creation. */
+    bool isLuminanceScalingEnabled() const noexcept;
+
+    /** Returns whether gamut mapping was enabled during creation. */
+    bool isGamutMappingEnabled() const noexcept;
+
+    /** Returns the exposure value used to create this ColorGrading object. */
+    float getExposure() const noexcept;
+
+    /** Returns the night adaptation value used to create this ColorGrading object. */
+    float getNightAdaptation() const noexcept;
+
+    /** Returns the white balance temperature used to create this ColorGrading object. */
+    float getWhiteBalanceTemperature() const noexcept;
+
+    /** Returns the white balance tint used to create this ColorGrading object. */
+    float getWhiteBalanceTint() const noexcept;
+
+    /** Returns the channel mixer output for the red channel. */
+    math::float3 getChannelMixerOutRed() const noexcept;
+
+    /** Returns the channel mixer output for the green channel. */
+    math::float3 getChannelMixerOutGreen() const noexcept;
+
+    /** Returns the channel mixer output for the blue channel. */
+    math::float3 getChannelMixerOutBlue() const noexcept;
+
+    /** Returns the shadows adjustment used to create this ColorGrading object. */
+    math::float3 getShadows() const noexcept;
+
+    /** Returns the midtones adjustment used to create this ColorGrading object. */
+    math::float3 getMidtones() const noexcept;
+
+    /** Returns the highlights adjustment used to create this ColorGrading object. */
+    math::float3 getHighlights() const noexcept;
+
+    /** Returns the shadow/midtones/highlights ranges used to create this ColorGrading object. */
+    math::float4 getShadowMidtonesHighlightsRanges() const noexcept;
+
+    /** Returns the slope adjustment used to create this ColorGrading object. */
+    math::float3 getSlope() const noexcept;
+
+    /** Returns the offset adjustment used to create this ColorGrading object. */
+    math::float3 getOffset() const noexcept;
+
+    /** Returns the power adjustment used to create this ColorGrading object. */
+    math::float3 getPower() const noexcept;
+
+    /** Returns the contrast value used to create this ColorGrading object. */
+    float getContrast() const noexcept;
+
+    /** Returns the vibrance value used to create this ColorGrading object. */
+    float getVibrance() const noexcept;
+
+    /** Returns the saturation value used to create this ColorGrading object. */
+    float getSaturation() const noexcept;
+
+    /** Returns the shadow gamma curve adjustment used to create this ColorGrading object. */
+    math::float3 getCurvesShadowGamma() const noexcept;
+
+    /** Returns the mid-point curve adjustment used to create this ColorGrading object. */
+    math::float3 getCurvesMidPoint() const noexcept;
+
+    /** Returns the highlight scale curve adjustment used to create this ColorGrading object. */
+    math::float3 getCurvesHighlightScale() const noexcept;
+
+    /** Returns the output color space used to create this ColorGrading object. */
+    const color::ColorSpace& getOutputColorSpace() const noexcept;
+
+protected :
+    struct Settings {
+        LutFormat lutFormat = LutFormat::INTEGER;
+        uint8_t lutDimensions = 32;
+        std::shared_ptr<ToneMapper> toneMapper = std::make_shared<ACESLegacyToneMapper>();
+        bool luminanceScaling = false;
+        bool gummapMapping = false;
+        float exposure = 0.0f;
+        float nightAdaptation = 0.0f;
+        float whiteBalanceTemperature = 0.0f;
+        float whiteBalanceTint = 0.0f;
+        math::float3 channelMixerOutRed{1.0f, 0.0f, 0.0f};
+        math::float3 channelMixerOutGreen{0.0f, 1.0f, 0.0f};
+        math::float3 channelMixerOutBlue{0.0f, 0.0f, 1.0f};
+        math::float3 shadows{1.0f, 1.0f, 1.0f};
+        math::float3 midtones{1.0f, 1.0f, 1.0f};
+        math::float3 highlights{1.0f, 1.0f, 1.0f};
+        math::float4 ShadowMidtonesHighlightsRanges{0.0f, 0.333f, 0.55f, 1.0f};
+        math::float3 slope{1.0f};
+        math::float3 offset{0.0f};
+        math::float3 power{1.0f};
+        float contrast = 1.0f;
+        float vibrance = 1.0f;
+        float saturation = 1.0f;
+        math::float3 curvesShadowGamma{1.0f, 1.0f, 1.0f};
+        math::float3 curvesMidPoint{1.0f, 1.0f, 1.0f};
+        math::float3 curvesHighlightScale{1.0f, 1.0f, 1.0f};
+        color::ColorSpace colorSpace = color::Rec709 - color::sRGB - color::D65;
+    };
+    Settings mSettings;
+
     // prevent heap allocation
     ~ColorGrading() = default;
 };

filament/include/filament/ToneMapper.h

@@ -54,6 +54,8 @@ namespace filament {
 struct UTILS_PUBLIC ToneMapper {
     ToneMapper() noexcept;
     virtual ~ToneMapper() noexcept;
+    ToneMapper(ToneMapper const&) noexcept;
+    ToneMapper& operator=(ToneMapper const&) noexcept = default;
 
     /**
      * Maps an open domain (or "scene referred" values) color value to display
@@ -69,6 +71,13 @@ struct UTILS_PUBLIC ToneMapper {
      */
     virtual math::float3 operator()(math::float3 c) const noexcept = 0;
 
+    /**
+     * Creates a copy of this tone mapper instance.
+     *
+     * @return A pointer to a new ToneMapper instance that is a copy of this instance.
+     */
+    virtual ToneMapper* clone() const noexcept = 0;
+
     /**
      * If true, then this function holds that f(x) = vec3(f(x.r), f(x.g), f(x.b))
      *
@@ -92,8 +101,10 @@ struct UTILS_PUBLIC ToneMapper {
 struct UTILS_PUBLIC LinearToneMapper final : public ToneMapper {
     LinearToneMapper() noexcept;
     ~LinearToneMapper() noexcept final;
+    LinearToneMapper(LinearToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 c) const noexcept override;
+    LinearToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return true; }
     bool isLDR() const noexcept override { return true; }
 };
@@ -106,8 +117,10 @@ struct UTILS_PUBLIC LinearToneMapper final : public ToneMapper {
 struct UTILS_PUBLIC ACESToneMapper final : public ToneMapper {
     ACESToneMapper() noexcept;
     ~ACESToneMapper() noexcept final;
+    ACESToneMapper(ACESToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 c) const noexcept override;
+    ACESToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return false; }
     bool isLDR() const noexcept override { return false; }
 };
@@ -121,8 +134,10 @@ struct UTILS_PUBLIC ACESToneMapper final : public ToneMapper {
 struct UTILS_PUBLIC ACESLegacyToneMapper final : public ToneMapper {
     ACESLegacyToneMapper() noexcept;
     ~ACESLegacyToneMapper() noexcept final;
+    ACESLegacyToneMapper(ACESLegacyToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 c) const noexcept override;
+    ACESLegacyToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return false; }
     bool isLDR() const noexcept override { return false; }
 };
@@ -136,8 +151,10 @@ struct UTILS_PUBLIC ACESLegacyToneMapper final : public ToneMapper {
 struct UTILS_PUBLIC FilmicToneMapper final : public ToneMapper {
     FilmicToneMapper() noexcept;
     ~FilmicToneMapper() noexcept final;
+    FilmicToneMapper(FilmicToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 x) const noexcept override;
+    FilmicToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return true; }
     bool isLDR() const noexcept override { return false; }
 };
@@ -150,8 +167,10 @@ struct UTILS_PUBLIC FilmicToneMapper final : public ToneMapper {
 struct UTILS_PUBLIC PBRNeutralToneMapper final : public ToneMapper {
     PBRNeutralToneMapper() noexcept;
     ~PBRNeutralToneMapper() noexcept final;
+    PBRNeutralToneMapper(PBRNeutralToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 x) const noexcept override;
+    virtual PBRNeutralToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return false; }
     bool isLDR() const noexcept override { return false; }
 };
@@ -173,8 +192,10 @@ struct UTILS_PUBLIC AgxToneMapper final : public ToneMapper {
      */
     explicit AgxToneMapper(AgxLook look = AgxLook::NONE) noexcept;
     ~AgxToneMapper() noexcept final;
+    AgxToneMapper(AgxToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 x) const noexcept override;
+    virtual AgxToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return false; }
     bool isLDR() const noexcept override { return false; }
 
@@ -215,12 +236,13 @@ struct UTILS_PUBLIC GenericToneMapper final : public ToneMapper {
     ) noexcept;
     ~GenericToneMapper() noexcept final;
 
-    GenericToneMapper(GenericToneMapper const&) = delete;
-    GenericToneMapper& operator=(GenericToneMapper const&) = delete;
+    GenericToneMapper(GenericToneMapper const& rhs) noexcept;
+    GenericToneMapper& operator=(GenericToneMapper const& rhs) noexcept;
     GenericToneMapper(GenericToneMapper&& rhs)  noexcept;
     GenericToneMapper& operator=(GenericToneMapper&& rhs) noexcept;
 
     math::float3 operator()(math::float3 x) const noexcept override;
+    GenericToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return true; }
     bool isLDR() const noexcept override { return false; }
 
@@ -283,8 +305,10 @@ private:
 struct UTILS_PUBLIC DisplayRangeToneMapper final : public ToneMapper {
     DisplayRangeToneMapper() noexcept;
     ~DisplayRangeToneMapper() noexcept override;
+    DisplayRangeToneMapper(DisplayRangeToneMapper const&) noexcept;
 
     math::float3 operator()(math::float3 c) const noexcept override;
+    DisplayRangeToneMapper* clone() const noexcept override;
     bool isOneDimensional() const noexcept override { return false; }
     bool isLDR() const noexcept override { return false; }
 };

filament/src/MaterialParser.cpp

@@ -648,44 +648,32 @@ bool ChunkAttributeInfo::unflatten(Unflattener& unflattener,
 bool ChunkDescriptorBindingsInfo::unflatten(Unflattener& unflattener,
         MaterialParser::DescriptorBindingsContainer* container) {
 
-    uint8_t setCount;
-    if (!unflattener.read(&setCount)) {
+    static_assert(sizeof(DescriptorSetBindingPoints) == sizeof(uint8_t));
+
+    uint8_t descriptorCount;
+    if (!unflattener.read(&descriptorCount)) {
         return false;
     }
 
-    for (size_t j = 0; j < setCount; j++) {
-        static_assert(sizeof(DescriptorSetBindingPoints) == sizeof(uint8_t));
-
-        DescriptorSetBindingPoints set;
-        if (!unflattener.read(reinterpret_cast<uint8_t*>(&set))) {
+    auto& descriptors = (*container)[+DescriptorSetBindingPoints::PER_MATERIAL];
+    descriptors.reserve(descriptorCount);
+    for (size_t i = 0; i < descriptorCount; i++) {
+        CString name;
+        if (!unflattener.read(&name)) {
             return false;
         }
-
-        uint8_t descriptorCount;
-        if (!unflattener.read(&descriptorCount)) {
+        uint8_t type;
+        if (!unflattener.read(&type)) {
             return false;
         }
-
-        auto& descriptors = (*container)[+set];
-        descriptors.reserve(descriptorCount);
-        for (size_t i = 0; i < descriptorCount; i++) {
-            CString name;
-            if (!unflattener.read(&name)) {
-                return false;
-            }
-            uint8_t type;
-            if (!unflattener.read(&type)) {
-                return false;
-            }
-            uint8_t binding;
-            if (!unflattener.read(&binding)) {
-                return false;
-            }
-            descriptors.push_back({
-                    std::move(name),
-                    DescriptorType(type),
-                    descriptor_binding_t(binding)});
+        uint8_t binding;
+        if (!unflattener.read(&binding)) {
+            return false;
         }
+        descriptors.push_back({
+                std::move(name),
+                DescriptorType(type),
+                descriptor_binding_t(binding)});
     }
 
     return true;
@@ -693,42 +681,40 @@ bool ChunkDescriptorBindingsInfo::unflatten(Unflattener& unflattener,
 
 bool ChunkDescriptorSetLayoutInfo::unflatten(Unflattener& unflattener,
         MaterialParser::DescriptorSetLayoutContainer* container) {
-    for (size_t j = 0; j < 2; j++) {
-        uint8_t descriptorCount;
-        if (!unflattener.read(&descriptorCount)) {
+    uint8_t descriptorCount;
+    if (!unflattener.read(&descriptorCount)) {
+        return false;
+    }
+    auto& descriptors = container->bindings;
+    descriptors.reserve(descriptorCount);
+    for (size_t i = 0; i < descriptorCount; i++) {
+        uint8_t type;
+        if (!unflattener.read(&type)) {
             return false;
         }
-        auto& descriptors = (*container)[j].bindings;
-        descriptors.reserve(descriptorCount);
-        for (size_t i = 0; i < descriptorCount; i++) {
-            uint8_t type;
-            if (!unflattener.read(&type)) {
-                return false;
-            }
-            uint8_t stageFlags;
-            if (!unflattener.read(&stageFlags)) {
-                return false;
-            }
-            uint8_t binding;
-            if (!unflattener.read(&binding)) {
-                return false;
-            }
-            uint8_t flags;
-            if (!unflattener.read(&flags)) {
-                return false;
-            }
-            uint16_t count;
-            if (!unflattener.read(&count)) {
-                return false;
-            }
-            descriptors.push_back({
-                    DescriptorType(type),
-                    ShaderStageFlags(stageFlags),
-                    descriptor_binding_t(binding),
-                    DescriptorFlags(flags),
-                    count,
-            });
+        uint8_t stageFlags;
+        if (!unflattener.read(&stageFlags)) {
+            return false;
         }
+        uint8_t binding;
+        if (!unflattener.read(&binding)) {
+            return false;
+        }
+        uint8_t flags;
+        if (!unflattener.read(&flags)) {
+            return false;
+        }
+        uint16_t count;
+        if (!unflattener.read(&count)) {
+            return false;
+        }
+        descriptors.push_back({
+            DescriptorType(type),
+            ShaderStageFlags(stageFlags),
+            descriptor_binding_t(binding),
+            DescriptorFlags(flags),
+            count,
+        });
     }
     return true;
 }

filament/src/MaterialParser.h

@@ -93,7 +93,7 @@ public:
     using DescriptorBindingsContainer = backend::Program::DescriptorSetInfo;
     bool getDescriptorBindings(DescriptorBindingsContainer* container) const noexcept;
 
-    using DescriptorSetLayoutContainer = std::array<backend::DescriptorSetLayout, 2>;
+    using DescriptorSetLayoutContainer = backend::DescriptorSetLayout;
     bool getDescriptorSetLayout(DescriptorSetLayoutContainer* container) const noexcept;
 
     bool getDepthWriteSet(bool* value) const noexcept;

filament/src/PostProcessManager.cpp

@@ -232,7 +232,7 @@ PostProcessManager::~PostProcessManager() noexcept = default;
 void PostProcessManager::setFrameUniforms(DriverApi& driver,
         TypedUniformBuffer<PerViewUib>& uniforms) noexcept {
     mPostProcessDescriptorSet.setFrameUniforms(driver, uniforms);
-    mSsrPassDescriptorSet.setFrameUniforms(uniforms);
+    mSsrPassDescriptorSet.setFrameUniforms(mEngine, uniforms);
 }
 
 void PostProcessManager::bindPostProcessDescriptorSet(DriverApi& driver) const noexcept {
@@ -504,6 +504,7 @@ PostProcessManager::StructurePassOutput PostProcessManager::structure(FrameGraph
                         FrameGraphTexture::Usage::DEPTH_ATTACHMENT);
 
                 if (config.picking) {
+                    // FIXME: the DescriptorSetLayout must specify SAMPLER_FLOAT
                     data.picking = builder.createTexture("Picking Buffer", {
                             .width = width, .height = height,
                             .format = isES2 ? TextureFormat::RGBA8 : TextureFormat::RG32F });
@@ -653,7 +654,7 @@ FrameGraphId<FrameGraphTexture> PostProcessManager::ssr(FrameGraph& fg,
                     options, passBuilder = passBuilder]
             (FrameGraphResources const& resources, auto const& data, DriverApi& driver) mutable {
                 // set structure sampler
-                mSsrPassDescriptorSet.prepareStructure(data.structure ?
+                mSsrPassDescriptorSet.prepareStructure(mEngine, data.structure ?
                         resources.getTexture(data.structure) : getOneTexture());
 
                 // set screen-space reflections and screen-space refractions
@@ -664,7 +665,7 @@ FrameGraphId<FrameGraphTexture> PostProcessManager::ssr(FrameGraph& fg,
                 // the history sampler is a regular texture2D
                 TextureHandle const history = data.history ?
                         resources.getTexture(data.history) : getZeroTexture();
-                mSsrPassDescriptorSet.prepareHistorySSR(history, reprojection, uvFromViewMatrix, options);
+                mSsrPassDescriptorSet.prepareHistorySSR(mEngine, history, reprojection, uvFromViewMatrix, options);
 
                 mSsrPassDescriptorSet.commit(mEngine);
 

filament/src/RenderPass.cpp

@@ -921,7 +921,6 @@ backend::Viewport RenderPass::Executor::applyScissorViewport(
 UTILS_NOINLINE // no need to be inlined
 void RenderPass::Executor::execute(FEngine const& engine, DriverApi& driver,
         Command const* first, Command const* last) const noexcept {
-
     SYSTRACE_CALL();
     SYSTRACE_CONTEXT();
 
@@ -942,6 +941,13 @@ void RenderPass::Executor::execute(FEngine const& engine, DriverApi& driver,
             driver.scissor(mScissor);
         }
 
+        // If we have a mColorPassDescriptorSet, we need to use its idea of "VSM" to select
+        // the descriptor set layout. Materials always offer both.
+        // If we don't have a mColorPassDescriptorSet, it doesn't matter because the layout
+        // are chosen via the variant only.
+        bool const useVsmDescriptorSetLayout =
+                mColorPassDescriptorSet ? mColorPassDescriptorSet->isVSM() : false;
+
         bool const polygonOffsetOverride = mPolygonOffsetOverride;
         PipelineState pipeline{
                 // initialize with polygon offset override
@@ -1051,8 +1057,13 @@ void RenderPass::Executor::execute(FEngine const& engine, DriverApi& driver,
 
                     // Each material has its own version of the per-view descriptor-set layout,
                     // because it depends on the material features (e.g. lit/unlit)
+                    // TODO: QUESTION: are
+                    //      Variant::isValidDepthVariant(info.materialVariant) and
+                    //      Variant::isSSRVariant(info.materialVariant)
+                    //      constant? If so we could precompute ma->getPerViewDescriptorSetLayout()
                     pipeline.pipelineLayout.setLayout[+DescriptorSetBindingPoints::PER_VIEW] =
-                            ma->getPerViewDescriptorSetLayout(info.materialVariant).getHandle();
+                            ma->getPerViewDescriptorSetLayout(info.materialVariant,
+                                    useVsmDescriptorSetLayout).getHandle();
 
                     // Each material has a per-material descriptor-set layout which encodes the
                     // material's parameters (ubo and samplers)

filament/src/RendererUtils.cpp

@@ -205,11 +205,13 @@ RendererUtils::ColorPassOutput RendererUtils::colorPass(
                 view.prepareSSAO(data.ssao ?
                         resources.getTexture(data.ssao) : engine.getOneTextureArray());
 
-                view.prepareShadowMapping(view.getVsmShadowOptions().highPrecision);
+                view.prepareShadowMapping(engine, view.getVsmShadowOptions().highPrecision);
 
                 // set shadow sampler
                 view.prepareShadow(data.shadows ?
-                        resources.getTexture(data.shadows) : engine.getOneTextureArray());
+                        resources.getTexture(data.shadows) :
+                            (view.getShadowType() != ShadowType::PCF ?
+                                engine.getOneTextureArray() : engine.getOneTextureArrayDepth()));
 
                 // set structure sampler
                 view.prepareStructure(data.structure ?

filament/src/ToneMapper.cpp

@@ -188,7 +188,8 @@ float3 ACES(float3 color, float brightness) noexcept {
 
 #define DEFAULT_CONSTRUCTORS(A) \
         A::A() noexcept = default; \
-        A::~A() noexcept = default;
+        A::~A() noexcept = default; \
+        A::A(A const&) noexcept = default;
 
 DEFAULT_CONSTRUCTORS(ToneMapper)
 
@@ -202,6 +203,10 @@ float3 LinearToneMapper::operator()(float3 const v) const noexcept {
     return saturate(v);
 }
 
+LinearToneMapper* LinearToneMapper::clone() const noexcept {
+    return new LinearToneMapper(*this);
+}
+
 //------------------------------------------------------------------------------
 // ACES tone mappers
 //------------------------------------------------------------------------------
@@ -212,12 +217,20 @@ float3 ACESToneMapper::operator()(float3 const c) const noexcept {
     return aces::ACES(c, 1.0f);
 }
 
+ACESToneMapper* ACESToneMapper::clone() const noexcept {
+    return new ACESToneMapper(*this);
+}
+
 DEFAULT_CONSTRUCTORS(ACESLegacyToneMapper)
 
 float3 ACESLegacyToneMapper::operator()(float3 const c) const noexcept {
     return aces::ACES(c, 1.0f / 0.6f);
 }
 
+ACESLegacyToneMapper* ACESLegacyToneMapper::clone() const noexcept {
+    return new ACESLegacyToneMapper(*this);
+}
+
 DEFAULT_CONSTRUCTORS(FilmicToneMapper)
 
 float3 FilmicToneMapper::operator()(float3 const x) const noexcept {
@@ -230,6 +243,10 @@ float3 FilmicToneMapper::operator()(float3 const x) const noexcept {
     return (x * (a * x + b)) / (x * (c * x + d) + e);
 }
 
+FilmicToneMapper* FilmicToneMapper::clone() const noexcept {
+    return new FilmicToneMapper(*this);
+}
+
 //------------------------------------------------------------------------------
 // PBR Neutral tone mapper
 //------------------------------------------------------------------------------
@@ -256,12 +273,17 @@ float3 PBRNeutralToneMapper::operator()(float3 color) const noexcept {
     return mix(color, float3(newPeak), g);
 }
 
+PBRNeutralToneMapper* PBRNeutralToneMapper::clone() const noexcept {
+    return new PBRNeutralToneMapper(*this);
+}
+
 //------------------------------------------------------------------------------
 // AgX tone mapper
 //------------------------------------------------------------------------------
 
 AgxToneMapper::AgxToneMapper(AgxLook const look) noexcept : look(look) {}
 AgxToneMapper::~AgxToneMapper() noexcept = default;
+AgxToneMapper::AgxToneMapper(AgxToneMapper const& rhs) noexcept = default;
 
 // These matrices taken from Blender's implementation of AgX, which works with Rec.2020 primaries.
 // https://github.com/EaryChow/AgX_LUT_Gen/blob/main/AgXBaseRec2020.py
@@ -356,6 +378,10 @@ float3 AgxToneMapper::operator()(float3 v) const noexcept {
     return v;
 }
 
+AgxToneMapper* AgxToneMapper::clone() const noexcept {
+    return new AgxToneMapper(*this);
+}
+
 //------------------------------------------------------------------------------
 // Display range tone mapper
 //------------------------------------------------------------------------------
@@ -394,6 +420,10 @@ float3 DisplayRangeToneMapper::operator()(float3 const c) const noexcept {
     return mix(debugColors[index], debugColors[index + 1], saturate(v - float(index)));
 }
 
+DisplayRangeToneMapper* DisplayRangeToneMapper::clone() const noexcept {
+    return new DisplayRangeToneMapper(*this);
+}
+
 //------------------------------------------------------------------------------
 // Generic tone mapper
 //------------------------------------------------------------------------------
@@ -454,7 +484,19 @@ GenericToneMapper::~GenericToneMapper() noexcept {
     delete mOptions;
 }
 
-GenericToneMapper::GenericToneMapper(GenericToneMapper&& rhs)  noexcept : mOptions(rhs.mOptions) {
+GenericToneMapper::GenericToneMapper(GenericToneMapper const& rhs) noexcept {
+    mOptions = new Options(*rhs.mOptions);
+}
+
+GenericToneMapper& GenericToneMapper::operator=(GenericToneMapper const& rhs) noexcept {
+    if (this != &rhs) {
+        delete mOptions;
+        mOptions = new Options(*rhs.mOptions);
+    }
+    return *this;
+}
+
+GenericToneMapper::GenericToneMapper(GenericToneMapper&& rhs) noexcept : mOptions(rhs.mOptions) {
     rhs.mOptions = nullptr;
 }
 
@@ -469,6 +511,10 @@ float3 GenericToneMapper::operator()(float3 x) const noexcept {
     return mOptions->outputScale * x / (x + mOptions->inputScale);
 }
 
+GenericToneMapper* GenericToneMapper::clone() const noexcept {
+    return new GenericToneMapper(*this);
+}
+
 float GenericToneMapper::getContrast() const noexcept { return  mOptions->contrast; }
 float GenericToneMapper::getMidGrayIn() const noexcept { return  mOptions->midGrayIn; }
 float GenericToneMapper::getMidGrayOut() const noexcept { return  mOptions->midGrayOut; }

filament/src/details/ColorGrading.cpp

@@ -49,7 +49,7 @@ using namespace backend;
 //------------------------------------------------------------------------------
 
 struct ColorGrading::BuilderDetails {
-    const ToneMapper* toneMapper = nullptr;
+    std::shared_ptr<ToneMapper> toneMapper = nullptr;
 
 #if defined(__clang__)
 #pragma clang diagnostic push
@@ -173,7 +173,7 @@ ColorGrading::Builder& ColorGrading::Builder::dimensions(uint8_t const dim) noex
     return *this;
 }
 
-ColorGrading::Builder& ColorGrading::Builder::toneMapper(const ToneMapper* toneMapper) noexcept {
+ColorGrading::Builder& ColorGrading::Builder::toneMapper(std::shared_ptr<ToneMapper> toneMapper) noexcept {
     mImpl->toneMapper = toneMapper;
     return *this;
 }
@@ -271,6 +271,110 @@ ColorGrading::Builder& ColorGrading::Builder::outputColorSpace(
     return *this;
 }
 
+ColorGrading::LutFormat ColorGrading::getLutFormat() const noexcept {
+    return mSettings.lutFormat;
+}
+
+uint8_t ColorGrading::getLutDimensions() const noexcept {
+    return mSettings.lutDimensions;
+}
+
+const ToneMapper& ColorGrading::getToneMapper() const noexcept {
+    return *mSettings.toneMapper;
+}
+
+bool ColorGrading::isLuminanceScalingEnabled() const noexcept {
+    return mSettings.luminanceScaling;
+}
+
+bool ColorGrading::isGamutMappingEnabled() const noexcept {
+    return mSettings.gummapMapping;
+}
+
+float ColorGrading::getExposure() const noexcept {
+    return mSettings.exposure;
+}
+
+float ColorGrading::getNightAdaptation() const noexcept {
+    return mSettings.nightAdaptation;
+}
+
+float ColorGrading::getWhiteBalanceTemperature() const noexcept {
+    return mSettings.whiteBalanceTemperature;
+}
+
+float ColorGrading::getWhiteBalanceTint() const noexcept {
+    return mSettings.whiteBalanceTint;
+}
+
+math::float3 ColorGrading::getChannelMixerOutRed() const noexcept {
+    return mSettings.channelMixerOutRed;
+}
+
+math::float3 ColorGrading::getChannelMixerOutGreen() const noexcept {
+    return mSettings.channelMixerOutGreen;
+}
+
+math::float3 ColorGrading::getChannelMixerOutBlue() const noexcept {
+    return mSettings.channelMixerOutBlue;
+}
+
+math::float3 ColorGrading::getShadows() const noexcept {
+    return mSettings.shadows;
+}
+
+math::float3 ColorGrading::getMidtones() const noexcept {
+    return mSettings.midtones;
+}
+
+math::float3 ColorGrading::getHighlights() const noexcept {
+    return mSettings.highlights;
+}
+
+math::float4 ColorGrading::getShadowMidtonesHighlightsRanges() const noexcept {
+    return mSettings.ShadowMidtonesHighlightsRanges;
+}
+
+math::float3 ColorGrading::getSlope() const noexcept {
+    return mSettings.slope;
+}
+
+math::float3 ColorGrading::getOffset() const noexcept {
+    return mSettings.offset;
+}
+
+math::float3 ColorGrading::getPower() const noexcept {
+    return mSettings.power;
+}
+
+float ColorGrading::getContrast() const noexcept {
+    return mSettings.contrast;
+}
+
+float ColorGrading::getVibrance() const noexcept {
+    return mSettings.vibrance;
+}
+
+float ColorGrading::getSaturation() const noexcept {
+    return mSettings.saturation;
+}
+
+math::float3 ColorGrading::getCurvesShadowGamma() const noexcept {
+    return mSettings.curvesShadowGamma;
+}
+
+math::float3 ColorGrading::getCurvesMidPoint() const noexcept {
+    return mSettings.curvesMidPoint;
+}
+
+math::float3 ColorGrading::getCurvesHighlightScale() const noexcept {
+    return mSettings.curvesHighlightScale;
+}
+
+const color::ColorSpace& ColorGrading::getOutputColorSpace() const noexcept {
+    return mSettings.colorSpace;
+}
+
 #if defined(__clang__)
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdeprecated-declarations"
@@ -287,30 +391,25 @@ ColorGrading* ColorGrading::Builder::build(Engine& engine) {
     if (needToneMapper) {
         switch (mImpl->toneMapping) {
             case ToneMapping::LINEAR:
-                mImpl->toneMapper = new LinearToneMapper();
+                mImpl->toneMapper = std::make_shared<LinearToneMapper>();
                 break;
             case ToneMapping::ACES_LEGACY:
-                mImpl->toneMapper = new ACESLegacyToneMapper();
+                mImpl->toneMapper = std::make_shared<ACESLegacyToneMapper>();
                 break;
             case ToneMapping::ACES:
-                mImpl->toneMapper = new ACESToneMapper();
+                mImpl->toneMapper = std::make_shared<ACESToneMapper>();
                 break;
             case ToneMapping::FILMIC:
-                mImpl->toneMapper = new FilmicToneMapper();
+                mImpl->toneMapper = std::make_shared<FilmicToneMapper>();
                 break;
             case ToneMapping::DISPLAY_RANGE:
-                mImpl->toneMapper = new DisplayRangeToneMapper();
+                mImpl->toneMapper = std::make_shared<DisplayRangeToneMapper>();
                 break;
         }
     }
 
     FColorGrading* colorGrading = downcast(engine).createColorGrading(*this);
 
-    if (needToneMapper) {
-        delete mImpl->toneMapper;
-        mImpl->toneMapper = nullptr;
-    }
-
     return colorGrading;
 }
 
@@ -886,6 +985,9 @@ FColorGrading::FColorGrading(FEngine& engine, const Builder& builder) {
                 data, lutElementCount * elementSize, format, type,
                         [](void* buffer, size_t, void*) { free(buffer); }
                         });
+
+    // Initialize settings from builder
+    initializeSettings(builder, mSettings);
 }
 
 FColorGrading::~FColorGrading() noexcept = default;
@@ -895,4 +997,33 @@ void FColorGrading::terminate(FEngine& engine) {
     driver.destroyTexture(mLutHandle);
 }
 
+void FColorGrading::initializeSettings(const Builder& builder, Settings& settings) noexcept {
+    settings.lutFormat = builder->format;
+    settings.lutDimensions = builder->dimension;
+    settings.toneMapper = builder->toneMapper;
+    settings.luminanceScaling = builder->luminanceScaling;
+    settings.gummapMapping = builder->gamutMapping;
+    settings.exposure = builder->exposure;
+    settings.nightAdaptation = builder->nightAdaptation;
+    settings.whiteBalanceTemperature = builder->whiteBalance.x;
+    settings.whiteBalanceTint = builder->whiteBalance.y;
+    settings.channelMixerOutRed = builder->outRed;
+    settings.channelMixerOutGreen = builder->outGreen;
+    settings.channelMixerOutBlue = builder->outBlue;
+    settings.shadows = builder->shadows;
+    settings.midtones = builder->midtones;
+    settings.highlights = builder->highlights;
+    settings.ShadowMidtonesHighlightsRanges = builder->tonalRanges;
+    settings.slope = builder->slope;
+    settings.offset = builder->offset;
+    settings.power = builder->power;
+    settings.contrast = builder->contrast;
+    settings.vibrance = builder->vibrance;
+    settings.saturation = builder->saturation;
+    settings.curvesShadowGamma = builder->shadowGamma;
+    settings.curvesMidPoint = builder->midPoint;
+    settings.curvesHighlightScale = builder->highlightScale;
+    settings.colorSpace = builder->outputColorSpace;
+}
+
 } //namespace filament

filament/src/details/ColorGrading.h

@@ -51,6 +51,8 @@ private:
     uint32_t mDimension;
     bool mIsOneDimensional;
     bool mIsLDR;
+
+    static void initializeSettings(const Builder& builder, Settings& settings) noexcept;
 };
 
 FILAMENT_DOWNCAST(ColorGrading)

filament/src/details/Engine.cpp

@@ -361,8 +361,6 @@ void FEngine::init() {
     }
 
     // initialize the dummy textures so that their contents are not undefined
-    static constexpr uint32_t zeroes[6] = {};
-    static constexpr uint32_t ones = 0xffffffff;
 
     mDefaultIblTexture = downcast(Texture::Builder()
             .width(1).height(1).levels(1)
@@ -371,7 +369,8 @@ void FEngine::init() {
             .build(*this));
 
     driverApi.update3DImage(mDefaultIblTexture->getHwHandle(), 0, 0, 0, 0, 1, 1, 6,
-            { zeroes, sizeof(zeroes), Texture::Format::RGBA, Texture::Type::UBYTE });
+            { std::array<uint8_t, 6>{}.data(), 6,
+                Texture::Format::RGBA, Texture::Type::UBYTE });
 
     // 3 bands = 9 float3
     constexpr float sh[9 * 3] = { 0.0f };
@@ -393,10 +392,12 @@ void FEngine::init() {
             TextureFormat::RGBA8, 1, 1, 1, 1, TextureUsage::DEFAULT);
 
     driverApi.update3DImage(mDummyOneTexture, 0, 0, 0, 0, 1, 1, 1,
-            { &ones, 4, Texture::Format::RGBA, Texture::Type::UBYTE });
+            { std::array<uint8_t, 4>{0xff, 0xff, 0xff, 0xff}.data(), 4,
+                Texture::Format::RGBA, Texture::Type::UBYTE });
 
     driverApi.update3DImage(mDummyZeroTexture, 0, 0, 0, 0, 1, 1, 1,
-            { zeroes, 4, Texture::Format::RGBA, Texture::Type::UBYTE });
+            { std::array<uint8_t, 4>{}.data(), 4,
+                Texture::Format::RGBA, Texture::Type::UBYTE });
 
 
     mPerViewDescriptorSetLayoutSsrVariant = {
@@ -423,25 +424,28 @@ void FEngine::init() {
     } else
 #endif
     {
-        mDefaultColorGrading = downcast(ColorGrading::Builder().build(*this));
-
         FMaterial::DefaultMaterialBuilder defaultMaterialBuilder;
         switch (mConfig.stereoscopicType) {
             case StereoscopicType::NONE:
             case StereoscopicType::INSTANCED:
                 defaultMaterialBuilder.package(
-                    MATERIALS_DEFAULTMATERIAL_DATA, MATERIALS_DEFAULTMATERIAL_SIZE);
+                        MATERIALS_DEFAULTMATERIAL_DATA, MATERIALS_DEFAULTMATERIAL_SIZE);
                 break;
             case StereoscopicType::MULTIVIEW:
 #ifdef FILAMENT_ENABLE_MULTIVIEW
                 defaultMaterialBuilder.package(
-                    MATERIALS_DEFAULTMATERIAL_MULTIVIEW_DATA, MATERIALS_DEFAULTMATERIAL_MULTIVIEW_SIZE);
+                        MATERIALS_DEFAULTMATERIAL_MULTIVIEW_DATA,
+                        MATERIALS_DEFAULTMATERIAL_MULTIVIEW_SIZE);
 #else
                 assert_invariant(false);
 #endif
                 break;
         }
         mDefaultMaterial = downcast(defaultMaterialBuilder.build(*this));
+    }
+
+    if (UTILS_UNLIKELY(getSupportedFeatureLevel() >= FeatureLevel::FEATURE_LEVEL_1)) {
+        mDefaultColorGrading = downcast(ColorGrading::Builder().build(*this));
 
         constexpr float3 dummyPositions[1] = {};
         constexpr short4 dummyTangents[1] = {};
@@ -451,14 +455,26 @@ void FEngine::init() {
         mDummyOneTextureArray = driverApi.createTexture(SamplerType::SAMPLER_2D_ARRAY, 1,
                 TextureFormat::RGBA8, 1, 1, 1, 1, TextureUsage::DEFAULT);
 
+        mDummyOneTextureArrayDepth = driverApi.createTexture(SamplerType::SAMPLER_2D_ARRAY, 1,
+                TextureFormat::DEPTH32F, 1, 1, 1, 1, TextureUsage::DEFAULT);
+
         mDummyZeroTextureArray = driverApi.createTexture(SamplerType::SAMPLER_2D_ARRAY, 1,
                 TextureFormat::RGBA8, 1, 1, 1, 1, TextureUsage::DEFAULT);
 
         driverApi.update3DImage(mDummyOneTextureArray, 0, 0, 0, 0, 1, 1, 1,
-                { &ones, 4, Texture::Format::RGBA, Texture::Type::UBYTE });
+                { std::array<uint8_t, 4>{0xff, 0xff, 0xff, 0xff}.data(), 4,
+                    Texture::Format::RGBA, Texture::Type::UBYTE });
+
+        driverApi.update3DImage(mDummyOneTextureArrayDepth, 0, 0, 0, 0, 1, 1, 1,
+                { std::array<float, 1>{1.0f}.data(), 4,
+                    Texture::Format::DEPTH_COMPONENT, Texture::Type::FLOAT });
 
         driverApi.update3DImage(mDummyZeroTextureArray, 0, 0, 0, 0, 1, 1, 1,
-                { zeroes, 4, Texture::Format::RGBA, Texture::Type::UBYTE });
+                { std::array<uint8_t, 4>{}.data(), 4,
+                    Texture::Format::RGBA, Texture::Type::UBYTE });
+
+        mDummyUniformBuffer = driverApi.createBufferObject(CONFIG_MINSPEC_UBO_SIZE,
+                BufferObjectBinding::UNIFORM, BufferUsage::STATIC);
 
         mLightManager.init(*this);
         mDFG.init(*this);
@@ -608,6 +624,8 @@ void FEngine::shutdown() {
     driver.destroyTexture(std::move(mDummyZeroTexture));
     driver.destroyTexture(std::move(mDummyZeroTextureArray));
 
+    driver.destroyBufferObject(std::move(mDummyUniformBuffer));
+
     driver.destroyRenderTarget(std::move(mDefaultRenderTarget));
 
     /*
@@ -712,8 +730,7 @@ int FEngine::loop() {
     if (mPlatform == nullptr) {
         mPlatform = PlatformFactory::create(&mBackend);
         mOwnPlatform = true;
-        const char* const backend = backendToString(mBackend);
-        slog.i << "FEngine resolved backend: " << backend << io::endl;
+        slog.i << "FEngine resolved backend: " << to_string(mBackend) << io::endl;
         if (mPlatform == nullptr) {
             slog.e << "Selected backend not supported in this build." << io::endl;
             mDriverBarrier.latch();

filament/src/details/Engine.h

@@ -486,10 +486,29 @@ public:
         return mPerRenderableDescriptorSetLayout;
     }
 
-    backend::Handle<backend::HwTexture> getOneTexture() const { return mDummyOneTexture; }
-    backend::Handle<backend::HwTexture> getZeroTexture() const { return mDummyZeroTexture; }
-    backend::Handle<backend::HwTexture> getOneTextureArray() const { return mDummyOneTextureArray; }
-    backend::Handle<backend::HwTexture> getZeroTextureArray() const { return mDummyZeroTextureArray; }
+    backend::Handle<backend::HwTexture> getOneTexture() const {
+        return mDummyOneTexture;
+    }
+
+    backend::Handle<backend::HwTexture> getOneTextureArray() const {
+        return mDummyOneTextureArray;
+    }
+
+    backend::Handle<backend::HwTexture> getOneTextureArrayDepth() const {
+        return mDummyOneTextureArrayDepth;
+    }
+
+    backend::Handle<backend::HwTexture> getZeroTexture() const {
+        return mDummyZeroTexture;
+    }
+
+    backend::Handle<backend::HwTexture> getZeroTextureArray() const {
+        return mDummyZeroTextureArray;
+    }
+
+    backend::Handle<backend::HwBufferObject> getDummyUniformBuffer() const {
+        return mDummyUniformBuffer;
+    }
 
     static constexpr size_t MiB = 1024u * 1024u;
     size_t getMinCommandBufferSize() const noexcept { return mConfig.minCommandBufferSizeMB * MiB; }
@@ -628,8 +647,10 @@ private:
 
     backend::Handle<backend::HwTexture> mDummyOneTexture;
     backend::Handle<backend::HwTexture> mDummyOneTextureArray;
+    backend::Handle<backend::HwTexture> mDummyOneTextureArrayDepth;
     backend::Handle<backend::HwTexture> mDummyZeroTextureArray;
     backend::Handle<backend::HwTexture> mDummyZeroTexture;
+    backend::Handle<backend::HwBufferObject> mDummyUniformBuffer;
 
     std::thread::id mMainThreadId{};
 

filament/src/details/Material.cpp

@@ -96,7 +96,7 @@ static std::unique_ptr<MaterialParser> createParser(Backend const backend,
 
         FILAMENT_CHECK_PRECONDITION(
                 materialResult != MaterialParser::ParseResult::ERROR_MISSING_BACKEND)
-                << "the material was not built for any of the " << backendToString(backend)
+                << "the material was not built for any of the " << to_string(backend)
                 << " backend's supported shader languages (" << languageNames.c_str() << ")\n";
     }
 
@@ -329,11 +329,12 @@ FMaterial::FMaterial(FEngine& engine, const Builder& builder,
 
     parser->hasCustomDepthShader(&mHasCustomDepthShader);
 
-    mPerViewLayoutIndex = ColorPassDescriptorSet::getIndex(
-            mIsVariantLit,
-            mReflectionMode == ReflectionMode::SCREEN_SPACE ||
-            mRefractionMode == RefractionMode::SCREEN_SPACE,
-            !(mVariantFilterMask & +UserVariantFilterBit::FOG));
+    bool const isLit = mIsVariantLit || mHasShadowMultiplier;
+    bool const isSSR = mReflectionMode == ReflectionMode::SCREEN_SPACE ||
+            mRefractionMode == RefractionMode::SCREEN_SPACE;
+    bool const hasFog = !(mVariantFilterMask & UserVariantFilterMask(UserVariantFilterBit::FOG));
+
+    mPerViewLayoutIndex = ColorPassDescriptorSet::getIndex(isLit, isSSR, hasFog);
 
     processBlendingMode(parser);
     processSpecializationConstants(engine, builder, parser);
@@ -407,6 +408,7 @@ void FMaterial::terminate(FEngine& engine) {
 
     DriverApi& driver = engine.getDriverApi();
     mPerViewDescriptorSetLayout.terminate(engine.getDescriptorSetLayoutFactory(), driver);
+    mPerViewDescriptorSetLayoutVsm.terminate(engine.getDescriptorSetLayoutFactory(), driver);
     mDescriptorSetLayout.terminate(engine.getDescriptorSetLayoutFactory(), driver);
 }
 
@@ -609,9 +611,12 @@ Program FMaterial::getProgramWithVariants(
         program.attributes(mAttributeInfo);
     }
 
-    program.descriptorBindings(0, mProgramDescriptorBindings[0]);
-    program.descriptorBindings(1, mProgramDescriptorBindings[1]);
-    program.descriptorBindings(2, mProgramDescriptorBindings[2]);
+    program.descriptorBindings(+DescriptorSetBindingPoints::PER_VIEW,
+            mProgramDescriptorBindings[+DescriptorSetBindingPoints::PER_VIEW]);
+    program.descriptorBindings(+DescriptorSetBindingPoints::PER_RENDERABLE,
+            mProgramDescriptorBindings[+DescriptorSetBindingPoints::PER_RENDERABLE]);
+    program.descriptorBindings(+DescriptorSetBindingPoints::PER_MATERIAL,
+            mProgramDescriptorBindings[+DescriptorSetBindingPoints::PER_MATERIAL]);
     program.specializationConstants(mSpecializationConstants);
 
     program.pushConstants(ShaderStage::VERTEX, mPushConstants[uint8_t(ShaderStage::VERTEX)]);
@@ -1098,12 +1103,16 @@ void FMaterial::processPushConstants(FEngine&, MaterialParser const* parser) {
             });
 }
 
-void FMaterial::precacheDepthVariants(FEngine const& engine) {
+void FMaterial::precacheDepthVariants(FEngine& engine) {
+
+    bool const disableDepthPrecacheForDefaultMaterial = engine.getDriverApi().isWorkaroundNeeded(
+                               Workaround::DISABLE_DEPTH_PRECACHE_FOR_DEFAULT_MATERIAL);
+
     // 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)) {
+    if (UTILS_UNLIKELY(mIsDefaultMaterial && !disableDepthPrecacheForDefaultMaterial)) {
         const bool stereoSupported = mEngine.getDriverApi().isStereoSupported();
         auto const allDepthVariants = VariantUtils::getDepthVariants();
         for (auto const variant: allDepthVariants) {
@@ -1139,17 +1148,52 @@ void FMaterial::processDescriptorSets(FEngine& engine, MaterialParser const* con
     success = parser->getDescriptorBindings(&mProgramDescriptorBindings);
     assert_invariant(success);
 
-    std::array<backend::DescriptorSetLayout, 2> descriptorSetLayout;
+    backend::DescriptorSetLayout descriptorSetLayout;
     success = parser->getDescriptorSetLayout(&descriptorSetLayout);
     assert_invariant(success);
 
+    // get the PER_VIEW descriptor binding info
+    bool const isLit = mIsVariantLit || mHasShadowMultiplier;
+    bool const isSSR = mReflectionMode == ReflectionMode::SCREEN_SPACE ||
+            mRefractionMode == RefractionMode::SCREEN_SPACE;
+    bool const hasFog = !(mVariantFilterMask & UserVariantFilterMask(UserVariantFilterBit::FOG));
+
+    auto perViewDescriptorSetLayout = descriptor_sets::getPerViewDescriptorSetLayout(
+            mMaterialDomain, isLit, isSSR, hasFog, false);
+
+    auto perViewDescriptorSetLayoutVsm = descriptor_sets::getPerViewDescriptorSetLayout(
+            mMaterialDomain, isLit, isSSR, hasFog, true);
+
+    // set the labels
+    descriptorSetLayout.label = CString{ mName }.append("_perMat");
+    perViewDescriptorSetLayout.label = CString{ mName }.append("_perView");
+    perViewDescriptorSetLayoutVsm.label = CString{ mName }.append("_perViewVsm");
+
+    // get the PER_RENDERABLE and PER_VIEW descriptor binding info
+    for (auto&& [bindingPoint, descriptorSetLayout] : {
+            std::pair{ DescriptorSetBindingPoints::PER_RENDERABLE,
+                    descriptor_sets::getPerRenderableLayout() },
+            std::pair{ DescriptorSetBindingPoints::PER_VIEW,
+                    perViewDescriptorSetLayout }}) {
+        Program::DescriptorBindingsInfo& descriptors = mProgramDescriptorBindings[+bindingPoint];
+        descriptors.reserve(descriptorSetLayout.bindings.size());
+        for (auto const& entry: descriptorSetLayout.bindings) {
+            auto const& name = descriptor_sets::getDescriptorName(bindingPoint, entry.binding);
+            descriptors.push_back({ name, entry.type, entry.binding });
+        }
+    }
+
     mDescriptorSetLayout = {
             engine.getDescriptorSetLayoutFactory(),
-            engine.getDriverApi(), std::move(descriptorSetLayout[0]) };
+            engine.getDriverApi(), std::move(descriptorSetLayout) };
 
     mPerViewDescriptorSetLayout = {
             engine.getDescriptorSetLayoutFactory(),
-            engine.getDriverApi(), std::move(descriptorSetLayout[1]) };
+            engine.getDriverApi(), std::move(perViewDescriptorSetLayout) };
+
+    mPerViewDescriptorSetLayoutVsm = {
+            engine.getDescriptorSetLayoutFactory(),
+            engine.getDriverApi(), std::move(perViewDescriptorSetLayoutVsm) };
 }
 
 descriptor_binding_t FMaterial::getSamplerBinding(

filament/src/details/Material.h

@@ -93,7 +93,8 @@ public:
         return mPerViewDescriptorSetLayout;
     }
 
-    DescriptorSetLayout const& getPerViewDescriptorSetLayout(Variant const variant) const noexcept {
+    DescriptorSetLayout const& getPerViewDescriptorSetLayout(
+            Variant const variant, bool const useVsmDescriptorSetLayout) const noexcept {
         if (Variant::isValidDepthVariant(variant)) {
             assert_invariant(mMaterialDomain == MaterialDomain::SURFACE);
             return mEngine.getPerViewDescriptorSetLayoutDepthVariant();
@@ -102,6 +103,10 @@ public:
             assert_invariant(mMaterialDomain == MaterialDomain::SURFACE);
             return mEngine.getPerViewDescriptorSetLayoutSsrVariant();
         }
+        if (useVsmDescriptorSetLayout) {
+            assert_invariant(mMaterialDomain == MaterialDomain::SURFACE);
+            return mPerViewDescriptorSetLayoutVsm;
+        }
         return mPerViewDescriptorSetLayout;
     }
 
@@ -298,7 +303,7 @@ private:
 
     void processPushConstants(FEngine& engine, MaterialParser const* parser);
 
-    void precacheDepthVariants(FEngine const& engine);
+    void precacheDepthVariants(FEngine& engine);
 
     void processDescriptorSets(FEngine& engine, MaterialParser const* parser);
 
@@ -312,6 +317,7 @@ private:
     // try to order by frequency of use
     mutable std::array<backend::Handle<backend::HwProgram>, VARIANT_COUNT> mCachedPrograms;
     DescriptorSetLayout mPerViewDescriptorSetLayout;
+    DescriptorSetLayout mPerViewDescriptorSetLayoutVsm;
     DescriptorSetLayout mDescriptorSetLayout;
     backend::Program::DescriptorSetInfo mProgramDescriptorBindings;