Sampler creation as part of the driver

.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

@@ -1,16 +0,0 @@
-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: |
-          test/check-headers/test.sh out/release/filament/include
+          build/common/check-headers.sh out/release/filament/include

.github/workflows/presubmit.yml

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

.github/workflows/release.yml

@@ -65,9 +65,13 @@ jobs:
 
   build-mac:
     name: build-mac
-    runs-on: macos-14-xlarge
+    runs-on: ${{ matrix.os }}
     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
@@ -114,7 +118,6 @@ 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 }}
@@ -163,9 +166,6 @@ 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', 'out/*.tgz'].join('\n'));
+            const globber = await glob.create(['out/*.aar', 'out/*.apk'].join('\n'));
             await upload({ github, context }, await globber.glob(), TAG);
 
   build-ios:

.github/workflows/web-continuous.yml

@@ -17,7 +17,6 @@ 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,8 +363,6 @@ 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

README.md

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

RELEASE_NOTES.md

@@ -7,25 +7,6 @@ A new header is inserted each time a *tag* is created.
 Instead, if you are authoring a PR for the main branch, add your release note to
 [NEW_RELEASE_NOTES.md](./NEW_RELEASE_NOTES.md).
 
-## v1.61.0
-
-- materials: sampler now export their type in the material binary [⚠️ **New Material Version**]
-- samples/texturedquad.cpp now has CLI to select backend api
-- samples/hellopbr.cpp CLI now allows for selecting webgpu
-
-## v1.60.1
-
-
-## v1.60.0
-
-- materials: remove dependence on per-view descset layout from filamat. [⚠️ **New Material Version**]
-- matc non-functional change: Update GLSL postprocessor to
-  isolate calls to SPVRemap from calls to SPIRV-Cross.
-
-
-## v1.59.5
-
-
 ## v1.59.4
 
 

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

@@ -1801,22 +1801,6 @@ public class View {
      * @see setAmbientOcclusionOptions()
      */
     public static class AmbientOcclusionOptions {
-        public enum AmbientOcclusionType {
-            /**
-             * use Scalable Ambient Occlusion
-             */
-            SAO,
-            /**
-             * use Ground Truth-Based Ambient Occlusion
-             */
-            GTAO,
-        }
-
-        /**
-         * Type of ambient occlusion algorithm.
-         */
-        @NonNull
-        public AmbientOcclusionOptions.AmbientOcclusionType aoType = AmbientOcclusionOptions.AmbientOcclusionType.SAO;
         /**
          * Ambient Occlusion radius in meters, between 0 and ~10.
          */
@@ -1826,8 +1810,7 @@ public class View {
          */
         public float power = 1.0f;
         /**
-         * Self-occlusion bias in meters. Use to avoid self-occlusion.
-         * Between 0 and a few mm. No effect when aoType set to GTAO
+         * Self-occlusion bias in meters. Use to avoid self-occlusion. Between 0 and a few mm.
          */
         public float bias = 0.0005f;
         /**
@@ -1843,12 +1826,12 @@ public class View {
          */
         public float bilateralThreshold = 0.05f;
         /**
-         * affects # of samples used for AO and params for filtering
+         * affects # of samples used for AO.
          */
         @NonNull
         public QualityLevel quality = QualityLevel.LOW;
         /**
-         * affects AO smoothness. Recommend setting to HIGH when aoType set to GTAO.
+         * affects AO smoothness
          */
         @NonNull
         public QualityLevel lowPassFilter = QualityLevel.MEDIUM;
@@ -1866,7 +1849,7 @@ public class View {
          */
         public boolean bentNormals = false;
         /**
-         * min angle in radian to consider. No effect when aoType set to GTAO.
+         * min angle in radian to consider
          */
         public float minHorizonAngleRad = 0.0f;
         /**
@@ -1921,19 +1904,6 @@ public class View {
          */
         public boolean ssctEnabled = false;
 
-        /**
-         * Ground Truth-base Ambient Occlusion (GTAO) options
-         */
-        public int gtaoSampleSliceCount = 4;
-        /**
-         * Ground Truth-base Ambient Occlusion (GTAO) options
-         */
-        public int gtaoSampleStepsPerSlice = 3;
-        /**
-         * Ground Truth-base Ambient Occlusion (GTAO) options
-         */
-        public float gtaoThicknessHeuristic = 0.004f;
-
     }
 
     /**
@@ -2010,7 +1980,7 @@ public class View {
         }
 
         /**
-         * reconstruction filter width typically between 1 (sharper) and 2 (smoother)
+         * reconstruction filter width typically between 0.2 (sharper, aliased) and 1.5 (smoother)
          */
         public float filterWidth = 1.0f;
         /**

android/gradle.properties

@@ -1,5 +1,5 @@
 GROUP=com.google.android.filament
-VERSION_NAME=1.60.1
+VERSION_NAME=1.59.3
 
 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/common/versions | grep GITHUB_NDK_VERSION | sed s/GITHUB_NDK_VERSION=//g | cut -f 1 -d ".")}
+FILAMENT_NDK_VERSION=${FILAMENT_NDK_VERSION:-$(cat `dirname $0`/build/android/ndk.version | cut -f 1 -d ".")}
 
 # Requirements
 CMAKE_MAJOR=3
@@ -463,6 +463,16 @@ function ensure_android_build {
         echo "Error: Android NDK side-by-side version ${FILAMENT_NDK_VERSION} or compatible must be installed, exiting"
         exit 1
     fi
+
+    local cmake_version=$(cmake --version)
+    if [[ "${cmake_version}" =~ ([0-9]+)\.([0-9]+)\.[0-9]+ ]]; then
+        if [[ "${BASH_REMATCH[1]}" -lt "${CMAKE_MAJOR}" ]] || \
+           [[ "${BASH_REMATCH[2]}" -lt "${CMAKE_MINOR}" ]]; then
+            echo "Error: cmake version ${CMAKE_MAJOR}.${CMAKE_MINOR}+ is required," \
+                 "${BASH_REMATCH[1]}.${BASH_REMATCH[2]} installed, exiting"
+            exit 1
+        fi
+    fi
 }
 
 function build_android {

build/android/build.sh

@@ -1,6 +1,28 @@
 #!/bin/bash
 
-source `dirname $0`/../common/ci-check.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
+
+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
 
 set -e
 set -x
@@ -8,6 +30,11 @@ 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,20 +1,5 @@
 #!/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

@@ -1,19 +0,0 @@
-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

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

build/common/get-emscripten.sh

@@ -1,22 +0,0 @@
-#!/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/versions

@@ -3,5 +3,4 @@ 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_EMSDK_VERSION=3.1.60
+GITHUB_NDK_VERSION=27.0.11718014

build/ios/build.sh

@@ -1,11 +1,35 @@
 #!/bin/bash
 
-source `dirname $0`/../common/ci-check.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
+
+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
 
 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,11 +1,38 @@
 #!/bin/bash
 
-source `dirname $0`/../common/ci-check.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
+
+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
 
 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
 
+pushd `dirname $0`/../.. > /dev/null
 ./build.sh -c $RUN_TESTS $GENERATE_ARCHIVES $BUILD_DEBUG $BUILD_RELEASE

build/mac/build.sh

@@ -1,11 +1,34 @@
 #!/bin/bash
 
-source `dirname $0`/../common/ci-check.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
+
+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
 
 set -e
 set -x
 
+source `dirname $0`/../common/ci-common.sh
 source `dirname $0`/../common/build-common.sh
-pushd `dirname $0`/../.. > /dev/null
 
+pushd `dirname $0`/../.. > /dev/null
 ./build.sh -c $RUN_TESTS $GENERATE_ARCHIVES $BUILD_DEBUG $BUILD_RELEASE

build/web/build.sh

@@ -1,10 +1,34 @@
 #!/bin/bash
 
-source `dirname $0`/../common/ci-check.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
+
+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
 
 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

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

docs/webgl/reference.html

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

docs/webgl/tutorial_redball.html

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

docs/webgl/tutorial_suzanne.html

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

docs/webgl/tutorial_triangle.html

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

docs_src/markdeep/Materials.md.html

@@ -1023,12 +1023,8 @@ samplerCubemap         | Cubemap texture
 [Table [materialParamsTypes]: Material parameter types]
 
 Samplers
-:     Sampler types can specify additional options:
-
-      - `format`: either `int` or `float` (defaults to `float`).
-      - `stages`: array of strings containing the list of shader stages this
-        sampler can be accessed from. Each entry must be either `vertex` or
-        `fragment` (defaults to both).
+:     Sampler types can also specify a `format` which can be either `int` or `float` (defaults to
+      `float`).
 
 Arrays
 :     A parameter can define an array of values by appending `[size]` after the type name, where

docs_src/src/SUMMARY.md

@@ -18,8 +18,6 @@
     - [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)
-    - [Using Instruments on macOS](./notes/instruments.md)
   - [Libraries](./notes/libs.md)
     - [bluegl](./dup/bluegl.md)
     - [bluevk](./dup/bluevk.md)

docs_src/src/notes/asan_ubsan.md

@@ -1,41 +0,0 @@
-# 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".

docs_src/src/notes/instruments.md

@@ -1,36 +0,0 @@
-# Using Instruments on macOS
-
-When running a binary under Instruments on macOS, you may run into the following issue when
-launching or attaching to an executable:
-
-```
-Failed to gain authorization
-Recovery Suggestion: Target binary needs to be debuggable and signed with 'get-task-allow'
-```
-
-This is a security precaution; the solution is to code sign the binary with the
-`com.apple.security.get-task-allow` entitlement.
-
-1. Create an `entitlements.plist` file with the following contents:
-
-```
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-    <key>com.apple.security.get-task-allow</key>
-    <true/>
-</dict>
-</plist>
-```
-
-2. Run the following command:
-
-```
-codesign -s - --entitlements entitlements.plist <binary>
-```
-
-Replace `<binary>` with the name of the binary, for example: `out/cmake-debug/samples/gltf_viewer`.
-
-Afterwards, you should be able to successfully launch and attach to the executable using
-Instruments.

filament/CMakeLists.txt

@@ -262,8 +262,6 @@ set(MATERIAL_SRCS
         src/materials/ssao/mipmapDepth.mat
         src/materials/ssao/sao.mat
         src/materials/ssao/saoBentNormals.mat
-        src/materials/ssao/gtao.mat
-        src/materials/ssao/gtaoBentNormals.mat
         src/materials/vsmMipmap.mat
 )
 
@@ -320,6 +318,8 @@ endif()
 # Definitions
 # ==================================================================================================
 
+# "2" corresponds to SYSTRACE_TAG_FILEMENT (See: utils/Systrace.h)
+add_definitions(-DSYSTRACE_TAG=2)
 add_definitions(-DFILAMENT_DFG_LUT_SIZE=${DFG_LUT_SIZE})
 add_definitions(
     -DFILAMENT_PER_RENDER_PASS_ARENA_SIZE_IN_MB=${FILAMENT_PER_RENDER_PASS_ARENA_SIZE_IN_MB}
@@ -463,28 +463,6 @@ add_custom_command(
         APPEND
 )
 
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/gtao.filamat"
-        DEPENDS src/materials/ssao/ssaoUtils.fs
-        DEPENDS src/materials/ssao/ssct.fs
-        DEPENDS src/materials/utils/depthUtils.fs
-        DEPENDS src/materials/utils/geometry.fs
-        DEPENDS src/materials/ssao/gtaoImpl.fs
-        DEPENDS src/materials/ssao/ssctImpl.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/gtaoBentNormals.filamat"
-        DEPENDS src/materials/ssao/ssaoUtils.fs
-        DEPENDS src/materials/ssao/ssct.fs
-        DEPENDS src/materials/utils/depthUtils.fs
-        DEPENDS src/materials/utils/geometry.fs
-        DEPENDS src/materials/ssao/gtaoImpl.fs
-        DEPENDS src/materials/ssao/ssctImpl.fs
-        APPEND
-)
-
 add_custom_command(
         OUTPUT "${MATERIAL_DIR}/bilateralBlur.filamat"
         DEPENDS src/materials/ssao/ssaoUtils.fs

filament/backend/CMakeLists.txt

@@ -290,6 +290,12 @@ if (ANDROID)
     list(APPEND SRCS src/BackendUtilsAndroid.cpp)
 endif()
 
+# ==================================================================================================
+# Definitions
+# ==================================================================================================
+# "2" corresponds to SYSTRACE_TAG_FILEMENT (See: utils/Systrace.h)
+add_definitions(-DSYSTRACE_TAG=2 )
+
 # ==================================================================================================
 # Includes & target definition
 # ==================================================================================================

filament/backend/include/backend/BufferDescriptor.h

@@ -20,15 +20,10 @@
 #define TNT_FILAMENT_BACKEND_BUFFERDESCRIPTOR_H
 
 #include <utils/compiler.h>
-
-#include <utility>
+#include <utils/ostream.h>
 
 #include <stddef.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 class CallbackHandler;
@@ -94,8 +89,8 @@ public:
      * @param callback  A callback used to release the CPU buffer from this BufferDescriptor
      * @param user      An opaque user pointer passed to the callback function when it's called
      */
-    BufferDescriptor(void const* buffer, size_t const size,
-            Callback const callback = nullptr, void* user = nullptr) noexcept
+    BufferDescriptor(void const* buffer, size_t size,
+            Callback callback = nullptr, void* user = nullptr) noexcept
                 : buffer(const_cast<void*>(buffer)), size(size), mCallback(callback), mUser(user) {
     }
 
@@ -103,12 +98,11 @@ public:
      * Creates a BufferDescriptor that references a CPU memory-buffer
      * @param buffer    Memory address of the CPU buffer to reference
      * @param size      Size of the CPU buffer in bytes
-     * @param handler   A custom handler for the callback
      * @param callback  A callback used to release the CPU buffer from this BufferDescriptor
      * @param user      An opaque user pointer passed to the callback function when it's called
      */
-    BufferDescriptor(void const* buffer, size_t const size,
-            CallbackHandler* handler, Callback const callback, void* user = nullptr) noexcept
+    BufferDescriptor(void const* buffer, size_t size,
+            CallbackHandler* handler, Callback callback, void* user = nullptr) noexcept
                 : buffer(const_cast<void*>(buffer)), size(size),
                 mCallback(callback), mUser(user), mHandler(handler) {
     }
@@ -122,9 +116,8 @@ public:
      *
      * @param buffer    Memory address of the CPU buffer to reference
      * @param size      Size of the CPU buffer in bytes
-     * @param data      A pointer to the data
      * @param handler   Handler to use to dispatch the callback, or nullptr for the default handler
-     * @return          A new BufferDescriptor
+     * @return          a new BufferDescriptor
      */
     template<typename T, void(T::*method)(void const*, size_t)>
     static BufferDescriptor make(void const* buffer, size_t size, T* data,
@@ -171,7 +164,7 @@ public:
      * @param callback  The new callback function
      * @param user      An opaque user pointer passed to the callbeck function when it's called
      */
-    void setCallback(Callback const callback, void* user = nullptr) noexcept {
+    void setCallback(Callback callback, void* user = nullptr) noexcept {
         this->mCallback = callback;
         this->mUser = user;
         this->mHandler = nullptr;
@@ -183,7 +176,7 @@ public:
      * @param callback  The new callback function
      * @param user      An opaque user pointer passed to the callbeck function when it's called
      */
-    void setCallback(CallbackHandler* handler, Callback const callback, void* user = nullptr) noexcept {
+    void setCallback(CallbackHandler* handler, Callback callback, void* user = nullptr) noexcept {
         mCallback = callback;
         mUser = user;
         mHandler = handler;

filament/backend/include/backend/DescriptorSetOffsetArray.h

@@ -19,6 +19,8 @@
 
 #include <backend/DriverApiForward.h>
 
+#include <utils/ostream.h>
+
 #include <initializer_list>
 #include <memory>
 
@@ -26,10 +28,6 @@
 #include <stdint.h>
 
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 void* allocateFromCommandStream(DriverApi& driver, size_t size, size_t alignment) noexcept;

filament/backend/include/backend/DriverEnums.h

@@ -25,26 +25,21 @@
 #include <backend/PresentCallable.h>
 
 #include <utils/BitmaskEnum.h>
-#include <utils/CString.h>
 #include <utils/FixedCapacityVector.h>
 #include <utils/Invocable.h>
-#include <utils/StaticString.h>
+#include <utils/compiler.h>
 #include <utils/debug.h>
+#include <utils/ostream.h>
 
 #include <math/vec4.h>
 
 #include <array>
 #include <type_traits>
 #include <variant>
-#include <string_view>
 
 #include <stddef.h>
 #include <stdint.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 /**
  * Types and enums used by filament's driver.
  *
@@ -163,7 +158,7 @@ enum class TimerQueryResult : int8_t {
     AVAILABLE = 1,  // result is available
 };
 
-constexpr std::string_view to_string(Backend const backend) noexcept {
+static constexpr const char* backendToString(Backend backend) {
     switch (backend) {
         case Backend::NOOP:
             return "Noop";
@@ -175,10 +170,9 @@ constexpr std::string_view to_string(Backend const backend) noexcept {
             return "Metal";
         case Backend::WEBGPU:
             return "WebGPU";
-        case Backend::DEFAULT:
-            return "Default";
+        default:
+            return "Unknown";
     }
-    return "Unknown";
 }
 
 /**
@@ -195,7 +189,7 @@ enum class ShaderLanguage {
     WGSL = 5,
 };
 
-constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguage) noexcept {
+static constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguage) {
     switch (shaderLanguage) {
         case ShaderLanguage::ESSL1:
             return "ESSL 1.0";
@@ -210,7 +204,6 @@ constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguage) noex
         case ShaderLanguage::WGSL:
             return "WGSL";
     }
-    return "UNKNOWN";
 }
 
 enum class ShaderStage : uint8_t {
@@ -228,7 +221,7 @@ enum class ShaderStageFlags : uint8_t {
     ALL_SHADER_STAGE_FLAGS = VERTEX | FRAGMENT | COMPUTE
 };
 
-constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage type) noexcept {
+static inline constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage type) noexcept {
     switch (type) {
         case ShaderStage::VERTEX:
             return bool(uint8_t(flags) & uint8_t(ShaderStageFlags::VERTEX));
@@ -239,239 +232,14 @@ constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage type) noexcept
     }
 }
 
-enum class TextureType : uint8_t {
-    FLOAT,
-    INT,
-    UINT,
-    DEPTH,
-    STENCIL,
-    DEPTH_STENCIL
+enum class DescriptorType : uint8_t {
+    UNIFORM_BUFFER,
+    SHADER_STORAGE_BUFFER,
+    SAMPLER,
+    INPUT_ATTACHMENT,
+    SAMPLER_EXTERNAL
 };
 
-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_2D_MS_FLOAT,
-     SAMPLER_2D_MS_INT,
-     SAMPLER_2D_MS_UINT,
-
-     SAMPLER_2D_MS_ARRAY_FLOAT,
-     SAMPLER_2D_MS_ARRAY_INT,
-     SAMPLER_2D_MS_ARRAY_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:
-        case DescriptorType::SAMPLER_2D_MS_FLOAT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool isIntDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        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:
-        case DescriptorType::SAMPLER_2D_MS_INT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool isUnsignedIntDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        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:
-        case DescriptorType::SAMPLER_2D_MS_UINT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool is3dTypeDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        case DescriptorType::SAMPLER_3D_FLOAT:
-        case DescriptorType::SAMPLER_3D_INT:
-        case DescriptorType::SAMPLER_3D_UINT:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool is2dTypeDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        case DescriptorType::SAMPLER_2D_FLOAT:
-        case DescriptorType::SAMPLER_2D_INT:
-        case DescriptorType::SAMPLER_2D_UINT:
-        case DescriptorType::SAMPLER_2D_DEPTH:
-        case DescriptorType::SAMPLER_2D_MS_FLOAT:
-        case DescriptorType::SAMPLER_2D_MS_INT:
-        case DescriptorType::SAMPLER_2D_MS_UINT:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool is2dArrayTypeDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        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_2D_MS_ARRAY_FLOAT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool isCubeTypeDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        case DescriptorType::SAMPLER_CUBE_FLOAT:
-        case DescriptorType::SAMPLER_CUBE_INT:
-        case DescriptorType::SAMPLER_CUBE_UINT:
-        case DescriptorType::SAMPLER_CUBE_DEPTH:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool isCubeArrayTypeDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        case DescriptorType::SAMPLER_CUBE_ARRAY_FLOAT:
-        case DescriptorType::SAMPLER_CUBE_ARRAY_INT:
-        case DescriptorType::SAMPLER_CUBE_ARRAY_UINT:
-        case DescriptorType::SAMPLER_CUBE_ARRAY_DEPTH:
-            return true;
-        default: ;
-    }
-    return false;
-}
-
-constexpr bool isMultiSampledTypeDescriptor(DescriptorType const type) noexcept {
-    switch (type) {
-        case DescriptorType::SAMPLER_2D_MS_FLOAT:
-        case DescriptorType::SAMPLER_2D_MS_INT:
-        case DescriptorType::SAMPLER_2D_MS_UINT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-        case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
-            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_2D_MS_FLOAT)
-        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_MS_INT)
-        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_MS_UINT)
-        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_MS_ARRAY_FLOAT)
-        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_MS_ARRAY_INT)
-        DESCRIPTOR_TYPE_CASE(SAMPLER_2D_MS_ARRAY_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
@@ -482,13 +250,6 @@ 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;
@@ -499,7 +260,7 @@ struct DescriptorSetLayoutBinding {
     //  no uninitialized padding bytes.
     //    uint8_t externalSamplerDataIndex = EXTERNAL_SAMPLER_DATA_INDEX_UNUSED;
 
-    friend bool operator==(DescriptorSetLayoutBinding const& lhs,
+    friend inline bool operator==(DescriptorSetLayoutBinding const& lhs,
             DescriptorSetLayoutBinding const& rhs) noexcept {
         return lhs.type == rhs.type &&
                lhs.flags == rhs.flags &&
@@ -532,7 +293,7 @@ enum class TargetBufferFlags : uint32_t {
     ALL = COLOR_ALL | DEPTH | STENCIL       //!< Color, depth and stencil buffer selected.
 };
 
-constexpr TargetBufferFlags getTargetBufferFlagsAt(size_t index) noexcept {
+inline 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;
@@ -689,24 +450,6 @@ 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
@@ -720,20 +463,6 @@ 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
  */
@@ -773,15 +502,6 @@ enum class BufferObjectBinding : uint8_t {
     SHADER_STORAGE
 };
 
-constexpr std::string_view to_string(BufferObjectBinding type) noexcept {
-    switch (type) {
-        case BufferObjectBinding::VERTEX:           return "VERTEX";
-        case BufferObjectBinding::UNIFORM:          return "UNIFORM";
-        case BufferObjectBinding::SHADER_STORAGE:   return "SHADER_STORAGE";
-    }
-    return "UNKNOWN";
-}
-
 //! Face culling Mode
 enum class CullingMode : uint8_t {
     NONE,               //!< No culling, front and back faces are visible
@@ -1043,8 +763,6 @@ 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,
@@ -1072,7 +790,7 @@ enum class TextureSwizzle : uint8_t {
 };
 
 //! returns whether this format a depth format
-constexpr bool isDepthFormat(TextureFormat format) noexcept {
+static constexpr bool isDepthFormat(TextureFormat format) noexcept {
     switch (format) {
         case TextureFormat::DEPTH32F:
         case TextureFormat::DEPTH24:
@@ -1085,7 +803,7 @@ constexpr bool isDepthFormat(TextureFormat format) noexcept {
     }
 }
 
-constexpr bool isStencilFormat(TextureFormat format) noexcept {
+static constexpr bool isStencilFormat(TextureFormat format) noexcept {
     switch (format) {
         case TextureFormat::STENCIL8:
         case TextureFormat::DEPTH24_STENCIL8:
@@ -1096,7 +814,7 @@ constexpr bool isStencilFormat(TextureFormat format) noexcept {
     }
 }
 
-constexpr bool isColorFormat(TextureFormat format) noexcept {
+inline constexpr bool isColorFormat(TextureFormat format) noexcept {
     switch (format) {
         // Standard color formats
         case TextureFormat::R8:
@@ -1123,7 +841,7 @@ constexpr bool isColorFormat(TextureFormat format) noexcept {
     return false;
 }
 
-constexpr bool isUnsignedIntFormat(TextureFormat format) {
+static constexpr bool isUnsignedIntFormat(TextureFormat format) {
     switch (format) {
         case TextureFormat::R8UI:
         case TextureFormat::R16UI:
@@ -1144,7 +862,7 @@ constexpr bool isUnsignedIntFormat(TextureFormat format) {
     }
 }
 
-constexpr bool isSignedIntFormat(TextureFormat format) {
+static constexpr bool isSignedIntFormat(TextureFormat format) {
     switch (format) {
         case TextureFormat::R8I:
         case TextureFormat::R16I:
@@ -1166,35 +884,35 @@ constexpr bool isSignedIntFormat(TextureFormat format) {
 }
 
 //! returns whether this format is a compressed format
-constexpr bool isCompressedFormat(TextureFormat format) noexcept {
+static constexpr bool isCompressedFormat(TextureFormat format) noexcept {
     return format >= TextureFormat::EAC_R11;
 }
 
 //! returns whether this format is an ETC2 compressed format
-constexpr bool isETC2Compression(TextureFormat format) noexcept {
+static 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
-constexpr bool isS3TCCompression(TextureFormat format) noexcept {
+static constexpr bool isS3TCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::DXT1_RGB && format <= TextureFormat::DXT5_SRGBA;
 }
 
-constexpr bool isS3TCSRGBCompression(TextureFormat format) noexcept {
+static constexpr bool isS3TCSRGBCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::DXT1_SRGB && format <= TextureFormat::DXT5_SRGBA;
 }
 
 //! returns whether this format is an RGTC compressed format
-constexpr bool isRGTCCompression(TextureFormat format) noexcept {
+static 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
-constexpr bool isBPTCCompression(TextureFormat format) noexcept {
+static constexpr bool isBPTCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::RGB_BPTC_SIGNED_FLOAT && format <= TextureFormat::SRGB_ALPHA_BPTC_UNORM;
 }
 
-constexpr bool isASTCCompression(TextureFormat format) noexcept {
+static constexpr bool isASTCCompression(TextureFormat format) noexcept {
     return format >= TextureFormat::RGBA_ASTC_4x4 && format <= TextureFormat::SRGB8_ALPHA8_ASTC_12x12;
 }
 
@@ -1315,23 +1033,19 @@ struct SamplerParams {             // NOLINT
             assert_invariant(lhs.padding2 == 0);
             auto* pLhs = reinterpret_cast<uint32_t const*>(reinterpret_cast<char const*>(&lhs));
             auto* pRhs = reinterpret_cast<uint32_t const*>(reinterpret_cast<char const*>(&rhs));
-            return *pLhs < *pRhs;
+            return *pLhs == *pRhs;
         }
     };
 
-    bool isFiltered() const noexcept {
-        return filterMag != SamplerMagFilter::NEAREST || filterMin != SamplerMinFilter::NEAREST;
-    }
-
 private:
-    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::EqualTo{}(lhs, rhs);
     }
-    friend bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return LessThan{}(lhs, rhs);
+    friend inline bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
+        return SamplerParams::LessThan{}(lhs, rhs);
     }
 };
 
@@ -1381,15 +1095,15 @@ struct SamplerYcbcrConversion {// NOLINT
     };
 
 private:
-    friend bool operator == (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+    friend inline bool operator == (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
             noexcept {
         return SamplerYcbcrConversion::EqualTo{}(lhs, rhs);
     }
-    friend bool operator != (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+    friend inline bool operator != (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
             noexcept {
         return  !SamplerYcbcrConversion::EqualTo{}(lhs, rhs);
     }
-    friend bool operator < (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+    friend inline bool operator < (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
             noexcept {
         return SamplerYcbcrConversion::LessThan{}(lhs, rhs);
     }
@@ -1425,7 +1139,6 @@ 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
@@ -1742,11 +1455,6 @@ enum class Workaround : uint16_t {
     DISABLE_BLIT_INTO_TEXTURE_ARRAY,
     // Multiple workarounds needed for PowerVR GPUs
     POWER_VR_SHADER_WORKAROUNDS,
-    // Some browsers, such as Firefox on Mac, struggle with slow shader compile/link times when
-    // creating programs for the default material, leading to startup stutters. This workaround
-    // prevents these stutters by not precaching depth variants of the default material for those
-    // particular browsers.
-    DISABLE_DEPTH_PRECACHE_FOR_DEFAULT_MATERIAL,
 };
 
 using StereoscopicType = backend::Platform::StereoscopicType;

filament/backend/include/backend/Handle.h

@@ -17,6 +17,9 @@
 #ifndef TNT_FILAMENT_BACKEND_HANDLE_H
 #define TNT_FILAMENT_BACKEND_HANDLE_H
 
+#if !defined(NDEBUG)
+#include <utils/ostream.h>
+#endif
 #include <utils/debug.h>
 
 #include <type_traits> // FIXME: STL headers are not allowed in public headers
@@ -24,10 +27,6 @@
 
 #include <stdint.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 struct HwBufferObject;

filament/backend/include/backend/PipelineState.h

@@ -20,14 +20,12 @@
 #include <backend/DriverEnums.h>
 #include <backend/Handle.h>
 
+#include <utils/ostream.h>
+
 #include <array>
 
 #include <stdint.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 //! \privatesection

filament/backend/include/backend/PixelBufferDescriptor.h

@@ -24,14 +24,11 @@
 
 #include <utils/compiler.h>
 #include <utils/debug.h>
+#include <utils/ostream.h>
 
 #include <stddef.h>
 #include <stdint.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 /**
@@ -204,15 +201,23 @@ public:
                 }, new T(std::forward<T>(functor))
         };
     }
+
+    // --------------------------------------------------------------------------------------------
+
     /**
-     * Computes the size in bytes for a pixel of given dimensions and format
+     * Computes the size in bytes needed to fit an image of given dimensions and format
      *
      * @param format    Format of the image pixels
      * @param type      Type of the image pixels
-     * @return The size of the specified pixel in bytes
+     * @param stride    Stride of a row in pixels
+     * @param height    Height of the image in rows
+     * @param alignment Alignment in bytes of pixel rows
+     * @return The buffer size needed to fit this image in bytes
      */
+    static constexpr size_t computeDataSize(PixelDataFormat format, PixelDataType type,
+            size_t stride, size_t height, size_t alignment) noexcept {
+        assert_invariant(alignment);
 
-    static constexpr size_t computePixelSize(PixelDataFormat format, PixelDataType type) noexcept {
         if (type == PixelDataType::COMPRESSED) {
             return 0;
         }
@@ -234,7 +239,7 @@ public:
             case PixelDataFormat::RGB_INTEGER:
                 n = 3;
                 break;
-            case PixelDataFormat::UNUSED:// shouldn't happen (used to be rgbm)
+            case PixelDataFormat::UNUSED: // shouldn't happen (used to be rgbm)
             case PixelDataFormat::RGBA:
             case PixelDataFormat::RGBA_INTEGER:
                 n = 4;
@@ -243,7 +248,7 @@ public:
 
         size_t bpp = n;
         switch (type) {
-            case PixelDataType::COMPRESSED:// Impossible -- to squash the IDE warnings
+            case PixelDataType::COMPRESSED: // Impossible -- to squash the IDE warnings
             case PixelDataType::UBYTE:
             case PixelDataType::BYTE:
                 // nothing to do
@@ -274,35 +279,16 @@ public:
                 bpp = 2;
                 break;
         }
-        return bpp;
-    }
 
-    // --------------------------------------------------------------------------------------------
-
-    /**
-     * Computes the size in bytes needed to fit an image of given dimensions and format
-     *
-     * @param format    Format of the image pixels
-     * @param type      Type of the image pixels
-     * @param stride    Stride of a row in pixels
-     * @param height    Height of the image in rows
-     * @param alignment Alignment in bytes of pixel rows
-     * @return The buffer size needed to fit this image in bytes
-     */
-    static constexpr size_t computeDataSize(PixelDataFormat format, PixelDataType type,
-            size_t stride, size_t height, size_t alignment) noexcept {
-        assert_invariant(alignment);
-
-        size_t bpp = computePixelSize(format, type);
         size_t const bpr = bpp * stride;
         size_t const bprAligned = (bpr + (alignment - 1)) & (~alignment + 1);
         return bprAligned * height;
     }
 
     //! left coordinate in pixels
-    uint32_t left = 0;
+    uint32_t left   = 0;
     //! top coordinate in pixels
-    uint32_t top = 0;
+    uint32_t top    = 0;
     union {
         struct {
             //! stride in pixels

filament/backend/include/backend/Program.h

@@ -20,10 +20,12 @@
 #include <utils/CString.h>
 #include <utils/FixedCapacityVector.h>
 #include <utils/Invocable.h>
+#include <utils/ostream.h>
 
 #include <backend/DriverEnums.h>
 
 #include <array>
+#include <unordered_map>
 #include <tuple>
 #include <utility>
 #include <variant>
@@ -31,10 +33,6 @@
 #include <stddef.h>
 #include <stdint.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 class Program {
@@ -46,8 +44,8 @@ public:
 
     struct Descriptor {
         utils::CString name;
-        DescriptorType type;
-        descriptor_binding_t binding;
+        backend::DescriptorType type;
+        backend::descriptor_binding_t binding;
     };
 
     struct SpecializationConstant {

filament/backend/include/backend/TargetBufferInfo.h

@@ -19,26 +19,22 @@
 
 #include <backend/Handle.h>
 
-#include <utility>
+#include <utils/ostream.h>
 
 #include <stddef.h>
 #include <stdint.h>
 
-namespace utils::io {
-class ostream;
-} // namespace utils::io
-
 namespace filament::backend {
 
 //! \privatesection
 
 struct TargetBufferInfo {
     // note: the parameters of this constructor are not in the order of this structure's fields
-    TargetBufferInfo(Handle<HwTexture> handle, uint8_t const level, uint16_t const layer) noexcept
-            : handle(std::move(handle)), level(level), layer(layer) {
+    TargetBufferInfo(Handle<HwTexture> handle, uint8_t level, uint16_t layer) noexcept
+            : handle(handle), level(level), layer(layer) {
     }
 
-    TargetBufferInfo(Handle<HwTexture> handle, uint8_t const level) noexcept
+    TargetBufferInfo(Handle<HwTexture> handle, uint8_t level) noexcept
             : handle(handle), level(level) {
     }
 
@@ -74,11 +70,11 @@ private:
     TargetBufferInfo mInfos[MAX_SUPPORTED_RENDER_TARGET_COUNT];
 
 public:
-    TargetBufferInfo const& operator[](size_t const i) const noexcept {
+    TargetBufferInfo const& operator[](size_t i) const noexcept {
         return mInfos[i];
     }
 
-    TargetBufferInfo& operator[](size_t const i) noexcept {
+    TargetBufferInfo& operator[](size_t i) noexcept {
         return mInfos[i];
     }
 

filament/backend/include/backend/platforms/PlatformMetal.h

@@ -39,40 +39,18 @@ public:
     Driver* createDriver(void* sharedContext, const Platform::DriverConfig& driverConfig) noexcept override;
     int getOSVersion() const noexcept override { return 0; }
 
-    /**
-     * Optionally initializes the Metal platform by acquiring resources necessary for rendering.
-     *
-     * This method attempts to acquire a Metal device and command queue, returning true if both are
-     * successfully obtained, or false otherwise. Typically, these objects are acquired when
-     * the Metal backend is initialized. This method allows clients to check for their availability
-     * earlier.
-     *
-     * Calling initialize() is optional and safe to do so multiple times. After initialize() returns
-     * true, subsequent calls will continue to return true but have no effect.
-     *
-     * initialize() must be called from the main thread.
-     *
-     * @returns true if the device and command queue have been successfully obtained; false
-     * otherwise.
-     */
-    bool initialize() noexcept;
-
     /**
      * Obtain the preferred Metal device object for the backend to use.
      *
      * On desktop platforms, there may be multiple GPUs suitable for rendering, and this method is
      * free to decide which one to use. On mobile systems with a single GPU, implementations should
      * simply return the result of MTLCreateSystemDefaultDevice();
-     *
-     * createDevice is called by the Metal backend from the backend thread.
      */
     virtual void createDevice(MetalDevice& outDevice) noexcept;
 
     /**
      * Create a command submission queue on the Metal device object.
      *
-     * createCommandQueue is called by the Metal backend from the backend thread.
-     *
      * @param device The device which was returned from createDevice()
      */
     virtual void createCommandQueue(
@@ -82,8 +60,6 @@ public:
      * Obtain a MTLCommandBuffer enqueued on this Platform's MTLCommandQueue. The command buffer is
      * guaranteed to execute before all subsequent command buffers created either by Filament, or
      * further calls to this method.
-     *
-     * createAndEnqueueCommandBuffer must be called from the main thread.
      */
     void createAndEnqueueCommandBuffer(MetalCommandBuffer& outCommandBuffer) noexcept;
 
@@ -92,8 +68,6 @@ public:
      *
      * Each frame rendered requires a CAMetalDrawable texture, which is presented on-screen at the
      * completion of each frame. These are limited and provided round-robin style by the system.
-     *
-     * setDrawableFailureBehavior must be called from the main thread.
      */
     enum class DrawableFailureBehavior : uint8_t {
         /**

filament/backend/include/backend/platforms/VulkanPlatform.h

@@ -27,11 +27,8 @@
 #include <utils/Hash.h>
 #include <utils/PrivateImplementation.h>
 
-#include <cstddef>
-#include <functional>
 #include <tuple>
 #include <unordered_set>
-#include <string>
 
 #include <stddef.h>
 #include <stdint.h>

filament/backend/src/BackendUtils.cpp

@@ -18,8 +18,6 @@
 
 #include "DataReshaper.h"
 
-#include <backend/DriverEnums.h>
-
 #include <utils/CString.h>
 
 #include <string_view>
@@ -225,143 +223,6 @@ 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/CommandBufferQueue.cpp

@@ -18,13 +18,12 @@
 #include "private/backend/CircularBuffer.h"
 #include "private/backend/CommandStream.h"
 
-#include <private/utils/Tracing.h>
-
 #include <utils/compiler.h>
 #include <utils/Log.h>
 #include <utils/Mutex.h>
 #include <utils/ostream.h>
 #include <utils/Panic.h>
+#include <utils/Systrace.h>
 #include <utils/debug.h>
 
 #include <algorithm>
@@ -80,7 +79,7 @@ bool CommandBufferQueue::isExitRequested() const {
 
 
 void CommandBufferQueue::flush() noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
 
     CircularBuffer& circularBuffer = mCircularBuffer;
     if (circularBuffer.empty()) {
@@ -130,7 +129,7 @@ void CommandBufferQueue::flush() noexcept {
         mHighWatermark = std::max(mHighWatermark, totalUsed);
 #endif
 
-        FILAMENT_TRACING_NAME(FILAMENT_TRACING_CATEGORY_FILAMENT, "waiting: CircularBuffer::flush()");
+        SYSTRACE_NAME("waiting: CircularBuffer::flush()");
 
         FILAMENT_CHECK_POSTCONDITION(!mPaused) <<
                 "CommandStream is full, but since the rendering thread is paused, "

filament/backend/src/CommandStream.cpp

@@ -16,8 +16,6 @@
 
 #include "private/backend/CommandStream.h"
 
-#include <private/utils/Tracing.h>
-
 #if DEBUG_COMMAND_STREAM
 #include <utils/CallStack.h>
 #endif
@@ -26,6 +24,7 @@
 #include <utils/Log.h>
 #include <utils/ostream.h>
 #include <utils/Profiler.h>
+#include <utils/Systrace.h>
 
 #include <cstddef>
 #include <functional>
@@ -80,13 +79,12 @@ CommandStream::CommandStream(Driver& driver, CircularBuffer& buffer) noexcept
 }
 
 void CommandStream::execute(void* buffer) {
-    // NOTE: we can't use FILAMENT_TRACING_CALL() or similar here because, execute() below, also
+    // NOTE: we can't use SYSTRACE_CALL() or similar here because, execute() below, also
     // uses systrace BEGIN/END and the END is not guaranteed to be happening in this scope.
 
     Profiler profiler;
 
-
-    if constexpr (FILAMENT_TRACING_ENABLED) {
+    if constexpr (SYSTRACE_TAG) {
         if (UTILS_UNLIKELY(mUsePerformanceCounter)) {
             // we want to remove all this when tracing is completely disabled
             profiler.resetEvents(Profiler::EV_CPU_CYCLES  | Profiler::EV_BPU_MISSES);
@@ -102,17 +100,17 @@ void CommandStream::execute(void* buffer) {
         }
     });
 
-    if constexpr (FILAMENT_TRACING_ENABLED) {
+    if constexpr (SYSTRACE_TAG) {
         if (UTILS_UNLIKELY(mUsePerformanceCounter)) {
             // we want to remove all this when tracing is completely disabled
             profiler.stop();
             UTILS_UNUSED Profiler::Counters const counters = profiler.readCounters();
-            FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-            FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "GLThread (I)", counters.getInstructions());
-            FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "GLThread (C)", counters.getCpuCycles());
-            FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "GLThread (CPI x10)", counters.getCPI() * 10);
-            FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "GLThread (BPU miss)", counters.getBranchMisses());
-            FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "GLThread (I / BPU miss)",
+            SYSTRACE_CONTEXT();
+            SYSTRACE_VALUE32("GLThread (I)", counters.getInstructions());
+            SYSTRACE_VALUE32("GLThread (C)", counters.getCpuCycles());
+            SYSTRACE_VALUE32("GLThread (CPI x10)", counters.getCPI() * 10);
+            SYSTRACE_VALUE32("GLThread (BPU miss)", counters.getBranchMisses());
+            SYSTRACE_VALUE32("GLThread (I / BPU miss)",
                     counters.getInstructions() / counters.getBranchMisses());
         }
     }

filament/backend/src/CommandStreamDispatcher.h

@@ -20,9 +20,8 @@
 #include "private/backend/Driver.h"
 #include "private/backend/CommandStream.h"
 
-#include <private/utils/Tracing.h>
-
 #include <utils/compiler.h>
+#include <utils/Systrace.h>
 
 #include <utility>
 
@@ -39,7 +38,7 @@
 #if DEBUG_LEVEL == DEBUG_LEVEL_NONE
 #   define SYSTRACE()
 #elif DEBUG_LEVEL == DEBUG_LEVEL_SYSTRACE
-#   define SYSTRACE() FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+#   define SYSTRACE() SYSTRACE_CALL();
 #else
 #   error "invalid debug level"
 #endif

filament/backend/src/CompilerThreadPool.cpp

@@ -16,7 +16,7 @@
 
 #include "CompilerThreadPool.h"
 
-#include <private/utils/Tracing.h>
+#include <utils/Systrace.h>
 
 #include <memory>
 
@@ -41,7 +41,7 @@ void CompilerThreadPool::init(uint32_t threadCount,
 
     for (size_t i = 0; i < threadCount; i++) {
         mCompilerThreads.emplace_back([this, setup, cleanup]() {
-            FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
+            SYSTRACE_CONTEXT();
 
             (*setup)();
 
@@ -54,7 +54,7 @@ void CompilerThreadPool::init(uint32_t threadCount,
                                     [](auto&& q) { return q.empty(); }));
                 });
 
-                FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "CompilerThreadPool Jobs",
+                SYSTRACE_VALUE32("CompilerThreadPool Jobs",
                         mQueues[0].size() + mQueues[1].size());
 
                 if (UTILS_LIKELY(!mExitRequested)) {

filament/backend/src/Driver.cpp

@@ -23,12 +23,11 @@
 #include <backend/BufferDescriptor.h>
 #include <backend/DriverEnums.h>
 
-#include <private/utils/Tracing.h>
-
 #include <utils/compiler.h>
 #include <utils/debug.h>
 #include <utils/Log.h>
 #include <utils/ostream.h>
+#include <utils/Systrace.h>
 
 #include <math/half.h>
 #include <math/vec2.h>
@@ -152,31 +151,30 @@ void DriverBase::debugCommandBegin(CommandStream* cmds, bool synchronous, const
             utils::slog.d << methodName << utils::io::endl;
         }
         if constexpr (bool(FILAMENT_DEBUG_COMMANDS & FILAMENT_DEBUG_COMMANDS_SYSTRACE)) {
-            FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-            FILAMENT_TRACING_NAME_BEGIN(FILAMENT_TRACING_CATEGORY_FILAMENT, methodName);
+            SYSTRACE_CONTEXT();
+            SYSTRACE_NAME_BEGIN(methodName);
 
             if (!synchronous) {
                 cmds->queueCommand([=]() {
-                    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-                    FILAMENT_TRACING_NAME_BEGIN(FILAMENT_TRACING_CATEGORY_FILAMENT, methodName);
+                    SYSTRACE_CONTEXT();
+                    SYSTRACE_NAME_BEGIN(methodName);
                 });
             }
         }
     }
 }
 
-void DriverBase::debugCommandEnd(CommandStream* cmds, bool synchronous,
-        const char* methodName) noexcept {
+void DriverBase::debugCommandEnd(CommandStream* cmds, bool synchronous, const char* methodName) noexcept {
     if constexpr (bool(FILAMENT_DEBUG_COMMANDS > FILAMENT_DEBUG_COMMANDS_NONE)) {
         if constexpr (bool(FILAMENT_DEBUG_COMMANDS & FILAMENT_DEBUG_COMMANDS_SYSTRACE)) {
             if (!synchronous) {
                 cmds->queueCommand([]() {
-                    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-                    FILAMENT_TRACING_NAME_END(FILAMENT_TRACING_CATEGORY_FILAMENT);
+                    SYSTRACE_CONTEXT();
+                    SYSTRACE_NAME_END();
                 });
             }
-            FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-            FILAMENT_TRACING_NAME_END(FILAMENT_TRACING_CATEGORY_FILAMENT);
+            SYSTRACE_CONTEXT();
+            SYSTRACE_NAME_END();
         }
     }
 }

filament/backend/src/Platform.cpp

@@ -17,7 +17,6 @@
 #include <backend/Platform.h>
 
 #include <utils/compiler.h>
-#include <utils/ostream.h>
 
 #include <atomic>
 #include <utility>

filament/backend/src/PlatformFactory.cpp

@@ -16,8 +16,7 @@
 
 #include <private/backend/PlatformFactory.h>
 
-#include <private/utils/Tracing.h>
-
+#include <utils/Systrace.h>
 #include <utils/debug.h>
 
 // We need to keep this up top for the linux (X11) name collisions.
@@ -86,7 +85,7 @@ namespace filament::backend {
 // responsible for destroying it. Initialization of the backend API is deferred until
 // createDriver(). The passed-in backend hint is replaced with the resolved backend.
 Platform* PlatformFactory::create(Backend* backend) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
     assert_invariant(backend);
 
 #if defined(__ANDROID__)

filament/backend/src/SystraceProfile.h

@@ -17,7 +17,7 @@
 #ifndef TNT_FILAMENT_BACKEND_SYSTRACEPROFILE_H
 #define TNT_FILAMENT_BACKEND_SYSTRACEPROFILE_H
 
-#include <private/utils/Tracing.h>
+#include <utils/Systrace.h>
 
 #define PROFILE_SCOPE(marker)       SYSTRACE_NAME(marker)
 

filament/backend/src/metal/MetalBuffer.mm

@@ -19,8 +19,6 @@
 
 #include "MetalContext.h"
 
-#include <utils/Panic.h>
-
 namespace filament {
 namespace backend {
 

filament/backend/src/metal/MetalDriver.mm

@@ -672,8 +672,22 @@ void MetalDriver::createTimerQueryR(Handle<HwTimerQuery> tqh, int) {
     // nothing to do, timer query was constructed in createTimerQueryS
 }
 
-UTILS_UNUSED
-static const char* toString(ShaderStageFlags flags) {
+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) {
     std::vector<const char*> stages;
     if (any(flags & ShaderStageFlags::VERTEX)) {
         stages.push_back("VERTEX");
@@ -707,25 +721,15 @@ const char* toString(DescriptorFlags flags) {
 
 void MetalDriver::createDescriptorSetLayoutR(
         Handle<HwDescriptorSetLayout> dslh, DescriptorSetLayout&& info) {
-#if FILAMENT_METAL_DEBUG_LOG == 1
-    const char* labelStr = "";
-    std::visit([&labelStr](auto&& arg) {
-        using T = std::decay_t<decltype(arg)>;
-        if constexpr (std::is_same_v<T, utils::CString> || std::is_same_v<T, utils::StaticString>) {
-            labelStr = arg.c_str();
-        }
-    }, info.label);
     std::sort(info.bindings.begin(), info.bindings.end(),
             [](const auto& a, const auto& b) { return a.binding < b.binding; });
-    DEBUG_LOG("createDescriptorSetLayoutR(dslh = %d, info = { label = %s,\n", dslh.getId(),
-            labelStr);
+    DEBUG_LOG("createDescriptorSetLayoutR(dslh = %d, info = {\n", dslh.getId());
     for (size_t i = 0; i < info.bindings.size(); i++) {
         DEBUG_LOG("    {binding = %d, type = %s, count = %d, stage = %s, flags = %s},\n",
                 info.bindings[i].binding, toString(info.bindings[i].type), info.bindings[i].count,
                 toString(info.bindings[i].stageFlags), toString(info.bindings[i].flags));
     }
     DEBUG_LOG("})\n");
-#endif
     construct_handle<MetalDescriptorSetLayout>(dslh, std::move(info));
 }
 

filament/backend/src/metal/MetalEnums.h

@@ -185,7 +185,6 @@ 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,31 +1356,7 @@ id<MTLArgumentEncoder> MetalDescriptorSetLayout::getArgumentEncoderSlow(id<MTLDe
                 [arguments addObject:bufferArgument];
                 break;
             }
-            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_2D_MS_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_INT:
-            case DescriptorType::SAMPLER_2D_MS_UINT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
+            case DescriptorType::SAMPLER:
             case DescriptorType::SAMPLER_EXTERNAL: {
                 MTLArgumentDescriptor* textureArgument = [MTLArgumentDescriptor argumentDescriptor];
                 textureArgument.index = binding.binding * 2;
@@ -1406,9 +1382,6 @@ id<MTLArgumentEncoder> MetalDescriptorSetLayout::getArgumentEncoderSlow(id<MTLDe
                 break;
         }
     }
-    if (arguments.count == 0) {
-        return nil;
-    }
     return [device newArgumentEncoderWithArguments:arguments];
 }
 
@@ -1469,9 +1442,6 @@ id<MTLBuffer> MetalDescriptorSet::finalizeAndGetBuffer(MetalDriver* driver, Shad
 
     id<MTLArgumentEncoder> encoder =
             layout->getArgumentEncoder(context.device, stage, textureTypes);
-    if (!encoder) {
-        return nil;
-    }
 
     {
         ScopedAllocationTimer timer("descriptor_set");
@@ -1502,31 +1472,7 @@ id<MTLBuffer> MetalDescriptorSet::finalizeAndGetBuffer(MetalDriver* driver, Shad
                            atIndex:binding.binding * 2];
                 break;
             }
-            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_2D_MS_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_INT:
-            case DescriptorType::SAMPLER_2D_MS_UINT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
+            case DescriptorType::SAMPLER:
             case DescriptorType::SAMPLER_EXTERNAL: {
                 auto found = textures.find(binding.binding);
                 if (found == textures.end()) {

filament/backend/src/metal/MetalState.h

@@ -20,18 +20,17 @@
 #include <Metal/Metal.h>
 
 #include "private/backend/Driver.h"
+#include "backend/Program.h"
 
 #include <backend/DriverEnums.h>
-#include <backend/Program.h>
 
-#include <utils/bitset.h>
 #include <utils/FixedCapacityVector.h>
-#include <utils/Hash.h>
-#include <utils/Invocable.h>
-
-#include <tsl/robin_map.h>
 
 #include <memory>
+#include <tsl/robin_map.h>
+
+#include <utils/Hash.h>
+#include <utils/Invocable.h>
 
 namespace filament {
 namespace backend {

filament/backend/src/metal/PlatformMetal.mm

@@ -24,22 +24,14 @@
 #import <Foundation/Foundation.h>
 
 #include <atomic>
-#include <mutex>
 
 namespace filament::backend {
 
 struct PlatformMetalImpl {
-    std::mutex mLock;   // locks mDevice and mCommandQueue
-    id<MTLDevice> mDevice = nil;
     id<MTLCommandQueue> mCommandQueue = nil;
-
     // read form driver thread, read/written to from client thread
     std::atomic<PlatformMetal::DrawableFailureBehavior> mDrawableFailureBehavior =
             PlatformMetal::DrawableFailureBehavior::PANIC;
-
-    // These methods must be called with mLock held
-    void createDeviceImpl(MetalDevice& outDevice);
-    void createCommandQueueImpl(MetalDevice& device, MetalCommandQueue& outCommandQueue);
 };
 
 Platform* createDefaultMetalPlatform() {
@@ -56,59 +48,7 @@ Driver* PlatformMetal::createDriver(void* /*sharedContext*/, const Platform::Dri
     return MetalDriverFactory::create(this, driverConfig);
 }
 
-
-bool PlatformMetal::initialize() noexcept {
-    std::lock_guard<std::mutex> lock(pImpl->mLock);
-
-    MetalDevice device{};
-    pImpl->createDeviceImpl(device);
-    if (device.device == nil) {
-        return false;
-    }
-
-    MetalCommandQueue commandQueue{};
-    pImpl->createCommandQueueImpl(device, commandQueue);
-    if (commandQueue.commandQueue == nil) {
-        return false;
-    }
-
-    return true;
-}
-
 void PlatformMetal::createDevice(MetalDevice& outDevice) noexcept {
-    std::lock_guard<std::mutex> lock(pImpl->mLock);
-    pImpl->createDeviceImpl(outDevice);
-}
-
-void PlatformMetal::createCommandQueue(
-        MetalDevice& device, MetalCommandQueue& outCommandQueue) noexcept {
-    std::lock_guard<std::mutex> lock(pImpl->mLock);
-    pImpl->createCommandQueueImpl(device, outCommandQueue);
-}
-
-void PlatformMetal::createAndEnqueueCommandBuffer(MetalCommandBuffer& outCommandBuffer) noexcept {
-    std::lock_guard<std::mutex> lock(pImpl->mLock);
-    id<MTLCommandBuffer> commandBuffer = [pImpl->mCommandQueue commandBuffer];
-    [commandBuffer enqueue];
-    outCommandBuffer.commandBuffer = commandBuffer;
-}
-
-void PlatformMetal::setDrawableFailureBehavior(DrawableFailureBehavior behavior) noexcept {
-    pImpl->mDrawableFailureBehavior = behavior;
-}
-
-PlatformMetal::DrawableFailureBehavior PlatformMetal::getDrawableFailureBehavior() const noexcept {
-    return pImpl->mDrawableFailureBehavior;
-}
-
-// -------------------------------------------------------------------------------------------------
-
-void PlatformMetalImpl::createDeviceImpl(MetalDevice& outDevice) {
-    if (mDevice) {
-        outDevice.device = mDevice;
-        return;
-    }
-
     id<MTLDevice> result;
 
 #if !defined(FILAMENT_IOS)
@@ -134,17 +74,27 @@ void PlatformMetalImpl::createDeviceImpl(MetalDevice& outDevice) {
                   << utils::io::endl;
 
     outDevice.device = result;
-    mDevice = result;
 }
 
-void PlatformMetalImpl::createCommandQueueImpl(MetalDevice& device, MetalCommandQueue& outCommandQueue) {
-    if (mCommandQueue) {
-        outCommandQueue.commandQueue = mCommandQueue;
-        return;
-    }
-    mCommandQueue = [device.device newCommandQueue];
-    mCommandQueue.label = @"Filament";
-    outCommandQueue.commandQueue = mCommandQueue;
+void PlatformMetal::createCommandQueue(
+        MetalDevice& device, MetalCommandQueue& outCommandQueue) noexcept {
+    pImpl->mCommandQueue = [device.device newCommandQueue];
+    pImpl->mCommandQueue.label = @"Filament";
+    outCommandQueue.commandQueue = pImpl->mCommandQueue;
+}
+
+void PlatformMetal::createAndEnqueueCommandBuffer(MetalCommandBuffer& outCommandBuffer) noexcept {
+    id<MTLCommandBuffer> commandBuffer = [pImpl->mCommandQueue commandBuffer];
+    [commandBuffer enqueue];
+    outCommandBuffer.commandBuffer = commandBuffer;
+}
+
+void PlatformMetal::setDrawableFailureBehavior(DrawableFailureBehavior behavior) noexcept {
+    pImpl->mDrawableFailureBehavior = behavior;
+}
+
+PlatformMetal::DrawableFailureBehavior PlatformMetal::getDrawableFailureBehavior() const noexcept {
+    return pImpl->mDrawableFailureBehavior;
 }
 
 } // namespace filament

filament/backend/src/opengl/BindingMap.h

@@ -69,8 +69,9 @@ 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),
-                                   DescriptorSetLayoutBinding::isSampler(entry.type) };
+        mStorage[set][binding] = { (uint8_t)entry.binding,
+                                   entry.type == DescriptorType::SAMPLER ||
+                                   entry.type == DescriptorType::SAMPLER_EXTERNAL };
         mActiveDescriptors[set].set(binding);
     }
 

filament/backend/src/opengl/GLDescriptorSet.cpp

@@ -95,32 +95,7 @@ GLDescriptorSet::GLDescriptorSet(OpenGLContext& gl, DescriptorSetLayoutHandle ds
                 }
                 break;
             }
-
-            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_2D_MS_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_INT:
-            case DescriptorType::SAMPLER_2D_MS_UINT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
+            case DescriptorType::SAMPLER:
             case DescriptorType::SAMPLER_EXTERNAL:
                 if (UTILS_UNLIKELY(gl.isES2())) {
                     desc.emplace<SamplerGLES2>();

filament/backend/src/opengl/OpenGLBlobCache.cpp

@@ -21,7 +21,7 @@
 #include <backend/Platform.h>
 #include <backend/Program.h>
 
-#include <private/utils/Tracing.h>
+#include <utils/Systrace.h>
 
 namespace filament::backend {
 
@@ -36,7 +36,7 @@ OpenGLBlobCache::OpenGLBlobCache(OpenGLContext& gl) noexcept
 
 GLuint OpenGLBlobCache::retrieve(BlobCacheKey* outKey, Platform& platform,
         Program const& program) const noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
     if (!mCachingSupported || !platform.hasRetrieveBlobFunc()) {
         // the key is never updated in that case
         return 0;
@@ -68,7 +68,7 @@ GLuint OpenGLBlobCache::retrieve(BlobCacheKey* outKey, Platform& platform,
         programId = glCreateProgram();
 
         { // scope for systrace
-            FILAMENT_TRACING_NAME(FILAMENT_TRACING_CATEGORY_FILAMENT, "glProgramBinary");
+            SYSTRACE_NAME("glProgramBinary");
             glProgramBinary(programId, blob->format, blob->data, programBinarySize);
         }
 
@@ -90,7 +90,7 @@ GLuint OpenGLBlobCache::retrieve(BlobCacheKey* outKey, Platform& platform,
 
 void OpenGLBlobCache::insert(Platform& platform,
         BlobCacheKey const& key, GLuint program) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
     if (!mCachingSupported || !platform.hasInsertBlobFunc()) {
         // the key is never updated in that case
         return;
@@ -100,7 +100,7 @@ void OpenGLBlobCache::insert(Platform& platform,
     GLenum format;
     GLint programBinarySize = 0;
     { // scope for systrace
-        FILAMENT_TRACING_NAME(FILAMENT_TRACING_CATEGORY_FILAMENT, "glGetProgramiv");
+        SYSTRACE_NAME("glGetProgramiv");
         glGetProgramiv(program, GL_PROGRAM_BINARY_LENGTH, &programBinarySize);
     }
     if (programBinarySize) {
@@ -108,7 +108,7 @@ void OpenGLBlobCache::insert(Platform& platform,
         std::unique_ptr<Blob, decltype(&::free)> blob{ (Blob*)malloc(size), &::free };
         if (UTILS_LIKELY(blob)) {
             { // scope for systrace
-                FILAMENT_TRACING_NAME(FILAMENT_TRACING_CATEGORY_FILAMENT, "glGetProgramBinary");
+                SYSTRACE_NAME("glGetProgramBinary");
                 glGetProgramBinary(program, programBinarySize,
                         &programBinarySize, &format, blob->data);
             }

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
@@ -542,13 +542,6 @@ void OpenGLContext::initBugs(Bugs* bugs, Extensions const& exts,
         } else if (strstr(renderer, "Intel")) {
             // Intel GPU
             bugs->vao_doesnt_store_element_array_buffer_binding = true;
-
-            if (strstr(renderer, "Mesa")) {
-                // Mesa Intel driver on Linux/Android
-                // Renderer of the form [Mesa Intel(R) HD Graphics 505 (APL 3)]
-                // b/405252622
-                bugs->disable_invalidate_framebuffer = true;
-            }
         } else if (strstr(renderer, "PowerVR")) {
             // PowerVR GPU
             // On PowerVR (Rogue GE8320) glFlush doesn't seem to do anything, in particular,
@@ -607,12 +600,6 @@ void OpenGLContext::initBugs(Bugs* bugs, Extensions const& exts,
         // For Mozilla, the issue appears to be observed regardless of whether the renderer is
         // ANGLE or not. (b/376125497)
         bugs->rebind_buffer_after_deletion = true;
-
-        // We disable depth precache for the default material on Mozilla FireFox. It struggles with
-        // slow shader compile/link times if the shader contains large arrays of uniform. Some depth
-        // program variants have skinning-related data, which incurs this slowness and end up
-        // causing an initial startup stalls. (b/392917621)
-        bugs->disable_depth_precache_for_default_material = true;
     }
 
 #ifdef BACKEND_OPENGL_VERSION_GLES
@@ -1082,41 +1069,41 @@ void OpenGLContext::resetState() noexcept {
     glCullFace(state.raster.cullFace);
     glBlendEquationSeparate(state.raster.blendEquationRGB, state.raster.blendEquationA);
     glBlendFuncSeparate(
-        state.raster.blendFunctionSrcRGB,
+        state.raster.blendFunctionSrcRGB, 
         state.raster.blendFunctionDstRGB,
         state.raster.blendFunctionSrcA,
         state.raster.blendFunctionDstA
     );
     glColorMask(
-        state.raster.colorMask,
-        state.raster.colorMask,
-        state.raster.colorMask,
+        state.raster.colorMask, 
+        state.raster.colorMask, 
+        state.raster.colorMask, 
         state.raster.colorMask
     );
     glDepthMask(state.raster.depthMask);
     glDepthFunc(state.raster.depthFunc);
-
+    
     // state.stencil
     glStencilFuncSeparate(
-        GL_FRONT,
-        state.stencil.front.func.func,
-        state.stencil.front.func.ref,
+        GL_FRONT, 
+        state.stencil.front.func.func, 
+        state.stencil.front.func.ref, 
         state.stencil.front.func.mask
     );
     glStencilFuncSeparate(
-        GL_BACK,
-        state.stencil.back.func.func,
-        state.stencil.back.func.ref,
+        GL_BACK, 
+        state.stencil.back.func.func, 
+        state.stencil.back.func.ref, 
         state.stencil.back.func.mask
     );
     glStencilOpSeparate(
-        GL_FRONT,
+        GL_FRONT, 
         state.stencil.front.op.sfail,
         state.stencil.front.op.dpfail,
         state.stencil.front.op.dppass
     );
     glStencilOpSeparate(
-        GL_BACK,
+        GL_BACK, 
         state.stencil.back.op.sfail,
         state.stencil.back.op.dpfail,
         state.stencil.back.op.dppass
@@ -1219,9 +1206,9 @@ void OpenGLContext::resetState() noexcept {
 
     // state.window
     glScissor(
-        state.window.scissor.x,
-        state.window.scissor.y,
-        state.window.scissor.z,
+        state.window.scissor.x, 
+        state.window.scissor.y, 
+        state.window.scissor.z, 
         state.window.scissor.w
     );
     glViewport(

filament/backend/src/opengl/OpenGLContext.h

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

filament/backend/src/opengl/OpenGLDriver.cpp

@@ -44,8 +44,6 @@
 #include "private/backend/Dispatcher.h"
 #include "private/backend/DriverApi.h"
 
-#include <private/utils/Tracing.h>
-
 #include <type_traits>
 #include <utils/BitmaskEnum.h>
 #include <utils/FixedCapacityVector.h>
@@ -53,6 +51,7 @@
 #include <utils/Invocable.h>
 #include <utils/Log.h>
 #include <utils/Panic.h>
+#include <utils/Systrace.h>
 #include <utils/Slice.h>
 #include <utils/compiler.h>
 #include <utils/debug.h>
@@ -99,13 +98,13 @@
 
 #define DEBUG_GROUP_MARKER_NONE       0x00    // no debug marker
 #define DEBUG_GROUP_MARKER_OPENGL     0x01    // markers in the gl command queue (req. driver support)
-#define DEBUG_GROUP_MARKER_BACKEND    0x02    // markers on the backend side (perfetto)
+#define DEBUG_GROUP_MARKER_BACKEND    0x02    // markers on the backend side (systrace)
 #define DEBUG_GROUP_MARKER_ALL        0xFF    // all markers
 
 #define DEBUG_MARKER_NONE             0x00    // no debug marker
 #define DEBUG_MARKER_OPENGL           0x01    // markers in the gl command queue (req. driver support)
-#define DEBUG_MARKER_BACKEND          0x02    // markers on the backend side (perfetto)
-#define DEBUG_MARKER_PROFILE          0x04    // profiling on the backend side (perfetto)
+#define DEBUG_MARKER_BACKEND          0x02    // markers on the backend side (systrace)
+#define DEBUG_MARKER_PROFILE          0x04    // profiling on the backend side (systrace)
 #define DEBUG_MARKER_ALL              (0xFF & ~DEBUG_MARKER_PROFILE) // all markers
 
 // set to the desired debug marker level (for user markers [default: All])
@@ -249,8 +248,8 @@ OpenGLDriver::DebugMarker::DebugMarker(OpenGLDriver& driver, const char* string)
 #endif
 
 #if DEBUG_MARKER_LEVEL & DEBUG_MARKER_BACKEND
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_NAME_BEGIN(FILAMENT_TRACING_CATEGORY_FILAMENT, string);
+    SYSTRACE_CONTEXT();
+    SYSTRACE_NAME_BEGIN(string);
 #endif
 #endif
 }
@@ -266,8 +265,8 @@ OpenGLDriver::DebugMarker::~DebugMarker() noexcept {
 #endif
 
 #if DEBUG_MARKER_LEVEL & DEBUG_MARKER_BACKEND
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_NAME_END(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CONTEXT();
+    SYSTRACE_NAME_END();
 #endif
 #endif
 }
@@ -2436,8 +2435,6 @@ bool OpenGLDriver::isWorkaroundNeeded(Workaround workaround) {
             return mContext.bugs.disable_blit_into_texture_array;
         case Workaround::POWER_VR_SHADER_WORKAROUNDS:
             return mContext.bugs.powervr_shader_workarounds;
-        case Workaround::DISABLE_DEPTH_PRECACHE_FOR_DEFAULT_MATERIAL:
-            return mContext.bugs.disable_depth_precache_for_default_material;
         default:
             return false;
     }
@@ -3349,8 +3346,8 @@ void OpenGLDriver::pushGroupMarker(char const* string) {
 #endif
 
 #if DEBUG_GROUP_MARKER_LEVEL & DEBUG_GROUP_MARKER_BACKEND
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_NAME_BEGIN(FILAMENT_TRACING_CATEGORY_FILAMENT, string);
+    SYSTRACE_CONTEXT();
+    SYSTRACE_NAME_BEGIN(string);
 #endif
 #endif
 }
@@ -3366,8 +3363,8 @@ void OpenGLDriver::popGroupMarker(int) {
 #endif
 
 #if DEBUG_GROUP_MARKER_LEVEL & DEBUG_GROUP_MARKER_BACKEND
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_NAME_END(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CONTEXT();
+    SYSTRACE_NAME_END();
 #endif
 #endif
 }
@@ -3686,7 +3683,7 @@ void OpenGLDriver::endFrame(UTILS_UNUSED uint32_t frameId) {
     gl.depthFunc(GL_LESS);
     gl.disable(GL_SCISSOR_TEST);
 #endif
-    //FILAMENT_TRACING_NAME(FILAMENT_TRACING_CATEGORY_FILAMENT, "glFinish");
+    //SYSTRACE_NAME("glFinish");
     //glFinish();
     mPlatform.endFrame(frameId);
     insertEventMarker("endFrame");

filament/backend/src/opengl/OpenGLProgram.cpp

@@ -25,13 +25,12 @@
 #include <backend/Program.h>
 #include <backend/Handle.h>
 
-#include <private/utils/Tracing.h>
-
 #include <utils/BitmaskEnum.h>
 #include <utils/compiler.h>
 #include <utils/debug.h>
 #include <utils/FixedCapacityVector.h>
 #include <utils/Log.h>
+#include <utils/Systrace.h>
 
 #include <algorithm>
 #include <array>
@@ -97,7 +96,8 @@ OpenGLProgram::~OpenGLProgram() noexcept {
 }
 
 void OpenGLProgram::initialize(OpenGLDriver& gld) {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+
+    SYSTRACE_CALL();
 
     assert_invariant(gl.program == 0);
     assert_invariant(mToken);
@@ -122,7 +122,8 @@ void OpenGLProgram::initialize(OpenGLDriver& gld) {
  */
 void OpenGLProgram::initializeProgramState(OpenGLContext& context, GLuint program,
         LazyInitializationData& lazyInitializationData) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+
+    SYSTRACE_CALL();
 
     // from the pipeline layout we compute a mapping from {set, binding} to {binding}
     // for both buffers and textures
@@ -174,31 +175,7 @@ void OpenGLProgram::initializeProgramState(OpenGLContext& context, GLuint progra
                     }
                     break;
                 }
-                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_2D_MS_FLOAT:
-                case DescriptorType::SAMPLER_2D_MS_INT:
-                case DescriptorType::SAMPLER_2D_MS_UINT:
-                case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-                case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-                case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT:
+                case DescriptorType::SAMPLER:
                 case DescriptorType::SAMPLER_EXTERNAL: {
                     if (!entry.name.empty()) {
                         GLint const loc = glGetUniformLocation(program, entry.name.c_str());

filament/backend/src/opengl/OpenGLTimerQuery.cpp

@@ -23,13 +23,12 @@
 #include <backend/platforms/OpenGLPlatform.h>
 #include <backend/DriverEnums.h>
 
-#include <private/utils/Tracing.h>
-
 #include <utils/compiler.h>
 #include <utils/debug.h>
 #include <utils/JobSystem.h>
 #include <utils/Log.h>
 #include <utils/Mutex.h>
+#include <utils/Systrace.h>
 
 #include <atomic>
 #include <memory>
@@ -241,8 +240,8 @@ void TimerQueryFenceFactory::beginTimeElapsedQuery(GLTimerQuery* tq) {
         if (state) {
             platform.waitFence(fence, FENCE_WAIT_FOR_EVER);
             state->then = clock::now().time_since_epoch().count();
-            FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-            FILAMENT_TRACING_ASYNC_BEGIN(FILAMENT_TRACING_CATEGORY_FILAMENT, "OpenGLTimerQueryFence", intptr_t(state.get()));
+            SYSTRACE_CONTEXT();
+            SYSTRACE_ASYNC_BEGIN("OpenGLTimerQueryFence", intptr_t(state.get()));
         }
         platform.destroyFence(fence);
     });
@@ -258,8 +257,8 @@ void TimerQueryFenceFactory::endTimeElapsedQuery(OpenGLDriver&, GLTimerQuery* tq
             platform.waitFence(fence, FENCE_WAIT_FOR_EVER);
             int64_t const now = clock::now().time_since_epoch().count();
             state->elapsed.store(now - state->then, std::memory_order_relaxed);
-            FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-            FILAMENT_TRACING_ASYNC_END(FILAMENT_TRACING_CATEGORY_FILAMENT, "OpenGLTimerQueryFence", intptr_t(state.get()));
+            SYSTRACE_CONTEXT();
+            SYSTRACE_ASYNC_END("OpenGLTimerQueryFence", intptr_t(state.get()));
         }
         platform.destroyFence(fence);
     });

filament/backend/src/opengl/ShaderCompilerService.cpp

@@ -28,8 +28,6 @@
 #include <backend/DriverEnums.h>
 #include <backend/Program.h>
 
-#include <private/utils/Tracing.h>
-
 #include <utils/compiler.h>
 #include <utils/CString.h>
 #include <utils/debug.h>
@@ -38,6 +36,7 @@
 #include <utils/Log.h>
 #include <utils/ostream.h>
 #include <utils/Panic.h>
+#include <utils/Systrace.h>
 
 #include <algorithm>
 #include <array>
@@ -368,7 +367,7 @@ void ShaderCompilerService::notifyWhenAllProgramsAreReady(
 
 GLuint ShaderCompilerService::initialize(program_token_t& token) {
 
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
 
     assert_invariant(token);// This function should be called when the token is still alive.
 
@@ -455,8 +454,8 @@ void ShaderCompilerService::runAtNextTick(CompilerPriorityQueue priority,
             });
     ops.emplace(pos, priority, token, std::move(job));
 
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "ShaderCompilerService Jobs", mRunAtNextTickOps.size());
+    SYSTRACE_CONTEXT();
+    SYSTRACE_VALUE32("ShaderCompilerService Jobs", mRunAtNextTickOps.size());
 }
 
 bool ShaderCompilerService::cancelTickOp(program_token_t const& token) noexcept {
@@ -469,8 +468,8 @@ bool ShaderCompilerService::cancelTickOp(program_token_t const& token) noexcept
         ops.erase(pos);
         return true;
     }
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "ShaderCompilerService Jobs", ops.size());
+    SYSTRACE_CONTEXT();
+    SYSTRACE_VALUE32("ShaderCompilerService Jobs", ops.size());
     return false;
 }
 
@@ -486,15 +485,15 @@ void ShaderCompilerService::executeTickOps() noexcept {
             ++it;
         }
     }
-    FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT);
-    FILAMENT_TRACING_VALUE(FILAMENT_TRACING_CATEGORY_FILAMENT, "ShaderCompilerService Jobs", ops.size());
+    SYSTRACE_CONTEXT();
+    SYSTRACE_VALUE32("ShaderCompilerService Jobs", ops.size());
 }
 
 /* static */ void ShaderCompilerService::compileShaders(OpenGLContext& context,
         Program::ShaderSource shadersSource,
         FixedCapacityVector<Program::SpecializationConstant> const& specializationConstants,
         bool multiview, program_token_t const& token) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
 
     auto const appendSpecConstantString = +[](std::string& s, Program::SpecializationConstant const& sc) {
         s += "#define SPIRV_CROSS_CONSTANT_ID_" + std::to_string(sc.id) + ' ';
@@ -617,7 +616,7 @@ void ShaderCompilerService::executeTickOps() noexcept {
 }
 
 /* static */ void ShaderCompilerService::checkCompileStatus(program_token_t const& token) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
 
     UTILS_NOUNROLL
     for (size_t i = 0; i < Program::SHADER_TYPE_COUNT; i++) {
@@ -640,7 +639,7 @@ void ShaderCompilerService::executeTickOps() noexcept {
 
 /* static */ void ShaderCompilerService::linkProgram(OpenGLContext const& context,
         program_token_t const& token) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
 
     // Shader compilation should be completed by now. Check the status and log errors on failure.
     checkCompileStatus(token);
@@ -676,7 +675,7 @@ void ShaderCompilerService::executeTickOps() noexcept {
 
 /* static */ bool ShaderCompilerService::checkLinkStatusAndCleanupShaders(
         program_token_t const& token) noexcept {
-    FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT);
+    SYSTRACE_CALL();
     assert_invariant(token->gl.program);
 
     bool linked = true;

filament/backend/src/opengl/platforms/PlatformCocoaGL.mm

@@ -54,7 +54,7 @@ struct PlatformCocoaGLImpl {
     CVOpenGLTextureCacheRef mTextureCache = nullptr;
     std::unique_ptr<CocoaExternalImage::SharedGl> mExternalImageSharedGl;
     void updateOpenGLContext(NSView *nsView, bool resetView, bool clearView);
-    struct ExternalImageCocoaGL final : public Platform::ExternalImage {
+    struct ExternalImageCocoaGL : public Platform::ExternalImage {
         CVPixelBufferRef cvBuffer;
     protected:
         ~ExternalImageCocoaGL() noexcept final;

filament/backend/src/opengl/platforms/PlatformEGLAndroid.cpp

@@ -255,7 +255,6 @@ Platform::ExternalImageHandle PlatformEGLAndroid::createExternalImage(AHardwareB
         p->height = hardwareBufferDescription.height;
         p->width = hardwareBufferDescription.width;
         auto textureFormat = mapToFilamentFormat(hardwareBufferDescription.format, sRGB);
-        p->format = textureFormat;
         p->usage = mapToFilamentUsage(hardwareBufferDescription.usage, textureFormat);
         return ExternalImageHandle{ p };
     }

filament/backend/src/vulkan/VulkanBuffer.cpp

@@ -28,7 +28,7 @@ VulkanBuffer::VulkanBuffer(VmaAllocator allocator, VulkanStagePool& stagePool,
     : mAllocator(allocator),
       mStagePool(stagePool),
       mUsage(usage),
-      mUpdatedOffset(0),
+	  mUpdatedOffset(0),
       mUpdatedBytes(0) {
     // for now make sure that only 1 bit is set in usage
     // (because loadFromCpu() assumes that somewhat)
@@ -56,12 +56,11 @@ void VulkanBuffer::loadFromCpu(VkCommandBuffer cmdbuf, const void* cpuData, uint
     vmaMapMemory(mAllocator, stage->memory, &mapped);
     memcpy(mapped, cpuData, numBytes);
     vmaUnmapMemory(mAllocator, stage->memory);
-    vmaFlushAllocation(mAllocator, stage->memory, 0, numBytes);
+    vmaFlushAllocation(mAllocator, stage->memory, byteOffset, numBytes);
 
     // If there was a previous update, then we need to make sure the following write is properly
     // synced with the previous read.
-    if (mUpdatedBytes > 0 &&
-            (byteOffset >= mUpdatedOffset && byteOffset <= (mUpdatedOffset + mUpdatedBytes))) {
+    if (mUpdatedBytes > 0) {
         VkAccessFlags srcAccess = 0;
         VkPipelineStageFlags srcStage = 0;
         if (mUsage & VK_BUFFER_USAGE_UNIFORM_BUFFER_BIT) {
@@ -75,28 +74,28 @@ void VulkanBuffer::loadFromCpu(VkCommandBuffer cmdbuf, const void* cpuData, uint
             srcStage = VK_PIPELINE_STAGE_VERTEX_INPUT_BIT;
         }
 
-        VkBufferMemoryBarrier barrier = {
+        VkBufferMemoryBarrier barrier{
             .sType = VK_STRUCTURE_TYPE_BUFFER_MEMORY_BARRIER,
             .srcAccessMask = srcAccess,
             .dstAccessMask = VK_ACCESS_TRANSFER_WRITE_BIT,
             .srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
             .dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
             .buffer = mGpuBuffer,
-            .offset = byteOffset,
-            .size = numBytes,
+			.offset = mUpdatedOffset,
+            .size = mUpdatedBytes,
         };
         vkCmdPipelineBarrier(cmdbuf, srcStage, VK_PIPELINE_STAGE_TRANSFER_BIT, 0, 0, nullptr, 1,
                 &barrier, 0, nullptr);
     }
 
-    VkBufferCopy region = {
-        .srcOffset = 0,
-        .dstOffset = byteOffset,
-        .size = numBytes,
+    VkBufferCopy region {
+            .srcOffset = 0,
+            .dstOffset = byteOffset,
+            .size = numBytes,
     };
     vkCmdCopyBuffer(cmdbuf, stage->buffer, mGpuBuffer, 1, &region);
 
-    mUpdatedOffset = byteOffset;
+	mUpdatedOffset = byteOffset;
     mUpdatedBytes = numBytes;
 
     // Firstly, ensure that the copy finishes before the next draw call.
@@ -113,21 +112,21 @@ void VulkanBuffer::loadFromCpu(VkCommandBuffer cmdbuf, const void* cpuData, uint
         dstAccessMask |= VK_ACCESS_INDEX_READ_BIT;
         dstStageMask |= VK_PIPELINE_STAGE_VERTEX_INPUT_BIT;
     } else if (mUsage & VK_BUFFER_USAGE_UNIFORM_BUFFER_BIT) {
-        dstAccessMask |= VK_ACCESS_SHADER_READ_BIT;
-        dstStageMask |= VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT | VK_PIPELINE_STAGE_VERTEX_SHADER_BIT;
+        dstAccessMask |= VK_ACCESS_UNIFORM_READ_BIT;
+        dstStageMask |=
+                (VK_PIPELINE_STAGE_VERTEX_SHADER_BIT | VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT);
     } else if (mUsage & VK_BUFFER_USAGE_STORAGE_BUFFER_BIT) {
         // TODO: implement me
     }
 
-    VkBufferMemoryBarrier barrier = {
+    VkBufferMemoryBarrier barrier{
         .sType = VK_STRUCTURE_TYPE_BUFFER_MEMORY_BARRIER,
         .srcAccessMask = VK_ACCESS_TRANSFER_WRITE_BIT,
         .dstAccessMask = dstAccessMask,
         .srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
         .dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
         .buffer = mGpuBuffer,
-        .offset = byteOffset,
-        .size = numBytes,
+        .size = VK_WHOLE_SIZE,
     };
 
     vkCmdPipelineBarrier(cmdbuf, VK_PIPELINE_STAGE_TRANSFER_BIT, dstStageMask, 0, 0, nullptr, 1,

filament/backend/src/vulkan/VulkanConstants.h

@@ -151,13 +151,13 @@ static_assert(FVK_ENABLED(FVK_DEBUG_VALIDATION));
 
 #elif FVK_ENABLED(FVK_DEBUG_SYSTRACE)
 
-    #include <private/utils/Tracing.h>
+    #include <utils/Systrace.h>
 
-    #define FVK_SYSTRACE_CONTEXT()      FILAMENT_TRACING_CONTEXT(FILAMENT_TRACING_CATEGORY_FILAMENT)
-    #define FVK_SYSTRACE_START(marker)  FILAMENT_TRACING_NAME_BEGIN(FILAMENT_TRACING_CATEGORY_FILAMENT, marker)
-    #define FVK_SYSTRACE_END()          FILAMENT_TRACING_NAME_END(FILAMENT_TRACING_CATEGORY_FILAMENT)
-    #define FVK_SYSTRACE_SCOPE()        FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT)
-    #define FVK_PROFILE_MARKER(marker)  FILAMENT_TRACING_CALL(FILAMENT_TRACING_CATEGORY_FILAMENT)
+    #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()
 
 #else
     #define FVK_SYSTRACE_CONTEXT()

filament/backend/src/vulkan/VulkanContext.h

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

filament/backend/src/vulkan/VulkanDescriptorSetCache.cpp

@@ -358,11 +358,12 @@ void VulkanDescriptorSetCache::updateSamplerImpl(VkDescriptorSet vkset, uint8_t
         range.levelCount = 1;
         range.layerCount = 1;
     }
-    VkDescriptorImageInfo info = {
+    VkDescriptorImageInfo info{
         .sampler = sampler,
         .imageView = texture->getView(range),
-        .imageLayout = fvkutils::getVkLayout(texture->getSamplerLayout()),
+        .imageLayout = fvkutils::getVkLayout(texture->getDefaultLayout()),
     };
+
     VkWriteDescriptorSet descriptorWrite = {
         .sType = VK_STRUCTURE_TYPE_WRITE_DESCRIPTOR_SET,
         .pNext = nullptr,

filament/backend/src/vulkan/VulkanDriver.cpp

@@ -622,7 +622,7 @@ void VulkanDriver::createTextureExternalImage2R(Handle<HwTexture> th, backend::S
     auto& commands = mCommands.get();
     // Unlike uploaded textures or swapchains, we need to explicit transition this
     // texture into the read layout.
-    texture->transitionLayout(&commands, texture->getPrimaryViewRange(), VulkanLayout::FRAG_READ);
+    texture->transitionLayout(&commands, texture->getPrimaryViewRange(), VulkanLayout::READ_ONLY);
 
     if (imgData.external.valid()) {
         mExternalImageManager.addExternallySampledTexture(texture, externalImage);

filament/backend/src/vulkan/VulkanHandles.cpp

@@ -93,32 +93,7 @@ BitmaskGroup fromBackendLayout(DescriptorSetLayout const& layout) {
             case DescriptorType::SAMPLER_EXTERNAL:
                 fromStageFlags(binding.stageFlags, binding.binding, mask.externalSampler);
                 UTILS_FALLTHROUGH;
-
-            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_2D_MS_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_INT:
-            case DescriptorType::SAMPLER_2D_MS_UINT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT: {
+            case DescriptorType::SAMPLER: {
                 fromStageFlags(binding.stageFlags, binding.binding, mask.sampler);
                 break;
             }
@@ -520,8 +495,7 @@ void VulkanRenderTarget::emitBarriersEndRenderPass(VulkanCommandBuffer& commands
             }
         } else {
             texture->setLayout(range, VulkanFboCache::FINAL_COLOR_ATTACHMENT_LAYOUT);
-            if (texture->isSampleable() &&
-                    !texture->transitionLayout(&commands, range, VulkanLayout::FRAG_READ)) {
+            if (!texture->transitionLayout(&commands, range, VulkanLayout::READ_WRITE)) {
                 texture->attachmentToSamplerBarrier(&commands, range);
             }
         }

filament/backend/src/vulkan/VulkanReadPixels.cpp

@@ -234,7 +234,6 @@ void VulkanReadPixels::run(fvkmemory::resource_ptr<VulkanRenderTarget> srcTarget
 
     VulkanAttachment const srcAttachment = srcTarget->getColor0();
     VkImageSubresourceRange const srcRange = srcAttachment.getSubresourceRange();
-    VulkanLayout const srcLayout = srcAttachment.getLayout();
     srcTexture->transitionLayout(cmdbuffer, srcRange, VulkanLayout::TRANSFER_SRC);
 
     VkImageCopy const imageCopyRegion = {
@@ -271,7 +270,7 @@ void VulkanReadPixels::run(fvkmemory::resource_ptr<VulkanRenderTarget> srcTarget
             fvkutils::getVkLayout(VulkanLayout::TRANSFER_DST), 1, &imageCopyRegion);
 
     // Restore the source image layout.
-    srcTexture->transitionLayout(cmdbuffer, srcRange, srcLayout);
+    srcTexture->transitionLayout(cmdbuffer, srcRange, srcTexture->getDefaultLayout());
 
     vkEndCommandBuffer(cmdbuffer);
 

filament/backend/src/vulkan/VulkanStagePool.cpp

@@ -125,7 +125,7 @@ VulkanStageImage const* VulkanStagePool::acquireImage(PixelDataFormat format, Pi
     fvkutils::transitionLayout(cmdbuffer, {
             .image = image->image,
             .oldLayout = VulkanLayout::UNDEFINED,
-            .newLayout = VulkanLayout::STAGING, // (= VK_IMAGE_LAYOUT_GENERAL)
+            .newLayout = VulkanLayout::READ_WRITE, // (= VK_IMAGE_LAYOUT_GENERAL)
             .subresources = { aspectFlags, 0, 1, 0, 1 },
         });
     return image;

filament/backend/src/vulkan/VulkanTexture.cpp

@@ -125,7 +125,7 @@ inline VulkanLayout getDefaultLayoutImpl(TextureUsage usage) {
         return VulkanLayout::COLOR_ATTACHMENT;
     }
     // Finally, the layout for an immutable texture is optimal read-only.
-    return VulkanLayout::FRAG_READ;
+    return VulkanLayout::READ_ONLY;
 }
 
 inline VulkanLayout getDefaultLayoutImpl(VkImageUsageFlags vkusage) {
@@ -187,7 +187,7 @@ VkImageUsageFlags getUsage(VulkanContext const& context, uint8_t samples,
             VkFormatProperties props;
             vkGetPhysicalDeviceFormatProperties(physicalDevice, vkFormat, &props);
             if (!(props.optimalTilingFeatures & VK_FORMAT_FEATURE_SAMPLED_IMAGE_BIT)) {
-                FVK_LOGW << "Texture usage is SAMPLEABLE but format " << vkFormat << " is not "
+                FVK_LOGW << "Texture usage is SAMPLEABLE but format " << mState->mVkFormat << " is not "
                         "sampleable with optimal tiling." << utils::io::endl;
             }
         }
@@ -691,7 +691,6 @@ bool VulkanTexture::transitionLayout(VkCommandBuffer cmdbuf, VkImageSubresourceR
                  << " is skipped because of no change in layout" << utils::io::endl;
 #endif
     }
-
     return hasTransitions;
 }
 
@@ -701,15 +700,16 @@ void VulkanTexture::samplerToAttachmentBarrier(VulkanCommandBuffer* commands,
     VkImageLayout const layout =
             fvkutils::getVkLayout(getLayout(range.baseArrayLayer, range.baseMipLevel));
     VkImageMemoryBarrier barrier = {
-        .sType = VK_STRUCTURE_TYPE_IMAGE_MEMORY_BARRIER,
-        .srcAccessMask = VK_ACCESS_SHADER_READ_BIT,
-        .dstAccessMask = VK_ACCESS_COLOR_ATTACHMENT_READ_BIT | VK_ACCESS_COLOR_ATTACHMENT_WRITE_BIT,
-        .oldLayout = layout,
-        .newLayout = layout,
-        .srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
-        .dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
-        .image = mState->mTextureImage,
-        .subresourceRange = range,
+            .sType = VK_STRUCTURE_TYPE_IMAGE_MEMORY_BARRIER,
+            .srcAccessMask = VK_ACCESS_SHADER_READ_BIT,
+            .dstAccessMask =
+                    VK_ACCESS_COLOR_ATTACHMENT_READ_BIT | VK_ACCESS_COLOR_ATTACHMENT_WRITE_BIT,
+            .oldLayout = layout,
+            .newLayout = layout,
+            .srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
+            .dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
+            .image = mState->mTextureImage,
+            .subresourceRange = range,
     };
     vkCmdPipelineBarrier(cmdbuf, VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT,
             VK_PIPELINE_STAGE_EARLY_FRAGMENT_TESTS_BIT |
@@ -723,15 +723,15 @@ void VulkanTexture::attachmentToSamplerBarrier(VulkanCommandBuffer* commands,
     VkImageLayout const layout
             = fvkutils::getVkLayout(getLayout(range.baseArrayLayer, range.baseMipLevel));
     VkImageMemoryBarrier barrier = {
-        .sType = VK_STRUCTURE_TYPE_IMAGE_MEMORY_BARRIER,
-        .srcAccessMask = VK_ACCESS_COLOR_ATTACHMENT_WRITE_BIT,
-        .dstAccessMask = VK_ACCESS_SHADER_READ_BIT,
-        .oldLayout = layout,
-        .newLayout = layout,
-        .srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
-        .dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
-        .image = mState->mTextureImage,
-        .subresourceRange = range,
+            .sType = VK_STRUCTURE_TYPE_IMAGE_MEMORY_BARRIER,
+            .srcAccessMask = VK_ACCESS_COLOR_ATTACHMENT_WRITE_BIT,
+            .dstAccessMask = VK_ACCESS_SHADER_READ_BIT,
+            .oldLayout = layout,
+            .newLayout = layout,
+            .srcQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
+            .dstQueueFamilyIndex = VK_QUEUE_FAMILY_IGNORED,
+            .image = mState->mTextureImage,
+            .subresourceRange = range,
     };
     vkCmdPipelineBarrier(cmdbuf, VK_PIPELINE_STAGE_COLOR_ATTACHMENT_OUTPUT_BIT,
             VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT, 0, 0, nullptr, 0, nullptr, 1, &barrier);

filament/backend/src/vulkan/VulkanTexture.h

@@ -145,14 +145,8 @@ struct VulkanTexture : public HwTexture, fvkmemory::Resource {
 
     VkImageSubresourceRange const& getPrimaryViewRange() const { return mPrimaryViewRange; }
 
-    VulkanLayout getSamplerLayout() const {
-        if (!isSampleable()) {
-            return VulkanLayout::UNDEFINED;
-        }
-        if (mState->mUsage & VK_IMAGE_USAGE_DEPTH_STENCIL_ATTACHMENT_BIT) {
-            return VulkanLayout::DEPTH_SAMPLER;
-        }
-        return VulkanLayout::FRAG_READ;
+    VulkanLayout getPrimaryImageLayout() const {
+        return getLayout(mPrimaryViewRange.baseArrayLayer, mPrimaryViewRange.baseMipLevel);
     }
 
     // Returns the layout for the intended use of this texture (and not the expected layout at the
@@ -186,10 +180,6 @@ struct VulkanTexture : public HwTexture, fvkmemory::Resource {
         return mState->mUsage & VK_IMAGE_USAGE_TRANSIENT_ATTACHMENT_BIT;
     }
 
-    bool isSampleable() const {
-        return mState->mUsage & VK_IMAGE_USAGE_SAMPLED_BIT;
-    }
-
     bool getIsProtected() const {
         return mState->mIsProtected;
     }

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

@@ -631,21 +631,6 @@ 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;
@@ -879,8 +864,6 @@ 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/vulkan/utils/Image.cpp

@@ -42,22 +42,20 @@ getVkTransition(const VulkanLayoutTransition& transition) {
             srcStage = VK_PIPELINE_STAGE_ALL_GRAPHICS_BIT;
             break;
         case VulkanLayout::COLOR_ATTACHMENT:
-            srcAccessMask = VK_ACCESS_COLOR_ATTACHMENT_READ_BIT |
+            srcAccessMask = VK_ACCESS_SHADER_READ_BIT | VK_ACCESS_SHADER_WRITE_BIT |
+                            VK_ACCESS_COLOR_ATTACHMENT_READ_BIT |
                             VK_ACCESS_COLOR_ATTACHMENT_WRITE_BIT;
-            srcStage = VK_PIPELINE_STAGE_COLOR_ATTACHMENT_OUTPUT_BIT;
+            srcStage = VK_PIPELINE_STAGE_VERTEX_SHADER_BIT | VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT |
+                       VK_PIPELINE_STAGE_COLOR_ATTACHMENT_OUTPUT_BIT;
             break;
-        case VulkanLayout::STAGING:
+        case VulkanLayout::READ_WRITE:
             srcAccessMask = VK_ACCESS_SHADER_READ_BIT | VK_ACCESS_SHADER_WRITE_BIT;
             srcStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
             break;
-        case VulkanLayout::FRAG_READ:
+        case VulkanLayout::READ_ONLY:
             srcAccessMask = VK_ACCESS_SHADER_READ_BIT;
             srcStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
             break;
-        case VulkanLayout::VERT_READ:
-            srcAccessMask = VK_ACCESS_SHADER_READ_BIT;
-            srcStage = VK_PIPELINE_STAGE_VERTEX_SHADER_BIT;
-            break;
         case VulkanLayout::TRANSFER_SRC:
             srcAccessMask = VK_ACCESS_TRANSFER_READ_BIT;
             srcStage = VK_PIPELINE_STAGE_TRANSFER_BIT;
@@ -71,7 +69,7 @@ getVkTransition(const VulkanLayoutTransition& transition) {
             srcStage = VK_PIPELINE_STAGE_LATE_FRAGMENT_TESTS_BIT;
             break;
         case VulkanLayout::DEPTH_SAMPLER:
-            srcAccessMask = VK_ACCESS_SHADER_READ_BIT;
+            srcAccessMask = VK_ACCESS_MEMORY_READ_BIT;
             srcStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
             break;
         case VulkanLayout::COLOR_ATTACHMENT_RESOLVE:
@@ -86,21 +84,19 @@ getVkTransition(const VulkanLayoutTransition& transition) {
 
     switch (transition.newLayout) {
         case VulkanLayout::COLOR_ATTACHMENT:
-            dstAccessMask = VK_ACCESS_COLOR_ATTACHMENT_READ_BIT
+            dstAccessMask = VK_ACCESS_SHADER_READ_BIT | VK_ACCESS_SHADER_WRITE_BIT
+                            | VK_ACCESS_COLOR_ATTACHMENT_READ_BIT
                             | VK_ACCESS_COLOR_ATTACHMENT_WRITE_BIT;
-            dstStage = VK_PIPELINE_STAGE_COLOR_ATTACHMENT_OUTPUT_BIT | VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
+            dstStage = VK_PIPELINE_STAGE_VERTEX_SHADER_BIT | VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT
+                       | VK_PIPELINE_STAGE_COLOR_ATTACHMENT_OUTPUT_BIT;
             break;
-        case VulkanLayout::STAGING:
+        case VulkanLayout::READ_WRITE:
             dstAccessMask = VK_ACCESS_SHADER_READ_BIT | VK_ACCESS_SHADER_WRITE_BIT;
             dstStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
             break;
-        case VulkanLayout::FRAG_READ:
+        case VulkanLayout::READ_ONLY:
             dstAccessMask = VK_ACCESS_SHADER_READ_BIT;
-            dstStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
-            break;
-        case VulkanLayout::VERT_READ:
-            dstAccessMask = VK_ACCESS_SHADER_READ_BIT;
-            dstStage = VK_PIPELINE_STAGE_VERTEX_SHADER_BIT;
+            dstStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT | VK_PIPELINE_STAGE_VERTEX_SHADER_BIT;
             break;
         case VulkanLayout::TRANSFER_SRC:
             dstAccessMask = VK_ACCESS_TRANSFER_READ_BIT;
@@ -116,8 +112,10 @@ getVkTransition(const VulkanLayoutTransition& transition) {
             dstStage = VK_PIPELINE_STAGE_EARLY_FRAGMENT_TESTS_BIT;
             break;
         case VulkanLayout::DEPTH_SAMPLER:
-            dstAccessMask = VK_ACCESS_SHADER_READ_BIT;
-            dstStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT;
+            dstAccessMask =
+                    VK_ACCESS_SHADER_READ_BIT | VK_ACCESS_DEPTH_STENCIL_ATTACHMENT_WRITE_BIT;
+            dstStage = VK_PIPELINE_STAGE_FRAGMENT_SHADER_BIT |
+                       VK_PIPELINE_STAGE_EARLY_FRAGMENT_TESTS_BIT;
             break;
         case VulkanLayout::PRESENT:
         case VulkanLayout::COLOR_ATTACHMENT_RESOLVE:
@@ -140,6 +138,7 @@ bool transitionLayout(VkCommandBuffer cmdbuffer,
     }
     auto [srcAccessMask, dstAccessMask, srcStage, dstStage, oldLayout, newLayout]
             = getVkTransition(transition);
+
     if (oldLayout == newLayout) {
         return false;
     }
@@ -156,7 +155,7 @@ bool transitionLayout(VkCommandBuffer cmdbuffer,
             .image = transition.image,
             .subresourceRange = transition.subresources,
     };
-   vkCmdPipelineBarrier(cmdbuffer, srcStage, dstStage, 0, 0, nullptr, 0, nullptr, 1, &barrier);
+    vkCmdPipelineBarrier(cmdbuffer, srcStage, dstStage, 0, 0, nullptr, 0, nullptr, 1, &barrier);
     return true;
 }
 
@@ -265,9 +264,8 @@ utils::io::ostream& operator<<(utils::io::ostream& out,
         const filament::backend::VulkanLayout& layout) {
     switch (layout) {
         CASE(UNDEFINED)
-        CASE(FRAG_READ)
-        CASE(VERT_READ)
-        CASE(STAGING)
+        CASE(READ_ONLY)
+        CASE(READ_WRITE)
         CASE(TRANSFER_SRC)
         CASE(TRANSFER_DST)
         CASE(DEPTH_ATTACHMENT)

filament/backend/src/vulkan/utils/Image.h

@@ -32,11 +32,9 @@ enum class VulkanLayout : uint8_t {
     // any transition.
     UNDEFINED,
     // Fragment/vertex shader accessible layout for reading and writing.
-    STAGING,
-    // Fragment shader accessible layout for reading only.
-    FRAG_READ,
-    // Vertex shader accessible layout for reading only.
-    VERT_READ,
+    READ_WRITE,
+    // Fragment/vertex shader accessible layout for reading only.
+    READ_ONLY,
     // For the source of a copy operation.
     TRANSFER_SRC,
     // For the destination of a copy operation.
@@ -67,10 +65,9 @@ constexpr inline VkImageLayout getVkLayout(VulkanLayout layout) {
     switch (layout) {
         case VulkanLayout::UNDEFINED:
             return VK_IMAGE_LAYOUT_UNDEFINED;
-        case VulkanLayout::STAGING:
+        case VulkanLayout::READ_WRITE:
             return VK_IMAGE_LAYOUT_GENERAL;
-        case VulkanLayout::FRAG_READ:
-        case VulkanLayout::VERT_READ:
+        case VulkanLayout::READ_ONLY:
             return VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL;
         case VulkanLayout::TRANSFER_SRC:
             return VK_IMAGE_LAYOUT_TRANSFER_SRC_OPTIMAL;
@@ -83,8 +80,9 @@ constexpr inline VkImageLayout getVkLayout(VulkanLayout layout) {
         case VulkanLayout::PRESENT:
             return VK_IMAGE_LAYOUT_PRESENT_SRC_KHR;
         // Filament sometimes samples from one miplevel while writing to another level in the
-        // same texture (e.g. bloom does this). So, keep it simple and use GENERAL for all
-        // color-attachable textures.
+        // same texture (e.g. bloom does this). Moreover we'd like to avoid lots of expensive
+        // layout transitions. So, keep it simple and use GENERAL for all color-attachable
+        // textures.
         case VulkanLayout::COLOR_ATTACHMENT:
             return VK_IMAGE_LAYOUT_GENERAL;
         case VulkanLayout::COLOR_ATTACHMENT_RESOLVE:

filament/backend/src/webgpu/WGPUProgram.cpp

@@ -27,7 +27,6 @@
 
 #include <webgpu/webgpu_cpp.h>
 
-#include <algorithm>
 #include <sstream>
 #include <string_view>
 #include <vector>
@@ -126,64 +125,21 @@ 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;
-    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;
+    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;
         }
-        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"
@@ -26,7 +26,7 @@
 #include <backend/DriverEnums.h>
 #include <backend/Handle.h>
 #include <backend/TargetBufferInfo.h>
-#include <private/backend/BackendUtils.h>
+
 #include <math/mat3.h>
 #include <utils/CString.h>
 #include <utils/Panic.h>
@@ -39,7 +39,6 @@
 #include <array>
 #include <cstddef>
 #include <cstdint>
-#include <memory>
 #include <sstream>
 #include <string_view>
 #include <utility>
@@ -235,9 +234,6 @@ WebGPUDriver::WebGPUDriver(WebGPUPlatform& platform, const Platform::DriverConfi
     printAdapterDetails(mAdapter);
 #endif
     mDevice = mPlatform.requestDevice(mAdapter);
-    wgpu::Limits supportedLimits{};
-    mDevice.GetLimits(&supportedLimits);
-    mMinUniformBufferOffsetAlignment = supportedLimits.minUniformBufferOffsetAlignment;
 #if FWGPU_ENABLED(FWGPU_PRINT_SYSTEM)
     printDeviceDetails(mDevice);
 #endif
@@ -296,22 +292,7 @@ void WebGPUDriver::endFrame(uint32_t frameId) {
 void WebGPUDriver::flush(int) {
 }
 
-void WebGPUDriver::finish(int /* dummy */) {
-    if (mCommandEncoder != nullptr) {
-        // submit the command buffer thus far...
-        assert_invariant(mRenderPassEncoder == nullptr);
-        wgpu::CommandBufferDescriptor commandBufferDescriptor{
-            .label = "command_buffer",
-        };
-        mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
-        assert_invariant(mCommandBuffer);
-        mQueue.Submit(1, &mCommandBuffer);
-        mCommandBuffer = nullptr;
-        // create a new command buffer encoder to continue recording the next command for frame...
-        wgpu::CommandEncoderDescriptor commandEncoderDescriptor = { .label = "command_encoder" };
-        mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
-        assert_invariant(mCommandEncoder);
-    }
+void WebGPUDriver::finish(int) {
 }
 
 void WebGPUDriver::destroyRenderPrimitive(Handle<HwRenderPrimitive> rph) {
@@ -354,17 +335,6 @@ void WebGPUDriver::destroyProgram(Handle<HwProgram> ph) {
 }
 
 void WebGPUDriver::destroyRenderTarget(Handle<HwRenderTarget> rth) {
-    if (rth) {
-        WGPURenderTarget* rt = handleCast<WGPURenderTarget>(rth);
-        if (rt == mDefaultRenderTarget) {
-            mDefaultRenderTarget = nullptr;
-        }
-        // WGPURenderTarget destructor is trivial.
-        // The HwTexture handles stored within WGPURenderTarget (via MRT, TargetBufferInfo)
-        // are not owned by WGPURenderTarget, so they are not destroyed here.
-        // They are destroyed via WebGPUDriver::destroyTexture.
-        destructHandle<WGPURenderTarget>(rth);
-    }
 }
 
 void WebGPUDriver::destroySwapChain(Handle<HwSwapChain> sch) {
@@ -483,10 +453,9 @@ void WebGPUDriver::createSwapChainR(Handle<HwSwapChain> sch, void* nativeWindow,
     mSwapChain = constructHandle<WebGPUSwapChain>(sch, std::move(surface), surfaceSize, mAdapter,
             mDevice, flags);
     assert_invariant(mSwapChain);
-
-    FWGPU_LOGW << "WebGPU support is highly experimental, in development, and tested for only a "
-                  "small set of simple samples (e.g. hellotriangle and texturedquad), thus issues "
-                  "are likely to be encountered at this stage."
+    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."
                << utils::io::endl;
 #if !FWGPU_ENABLED(FWGPU_PRINT_SYSTEM) && !defined(NDEBUG)
     FWGPU_LOGI << "If the FILAMENT_BACKEND_DEBUG_FLAG variable were set with the " << utils::io::hex
@@ -582,6 +551,7 @@ void WebGPUDriver::createRenderPrimitiveR(Handle<HwRenderPrimitive> rph, Handle<
 void WebGPUDriver::createProgramR(Handle<HwProgram> ph, Program&& program) {
     constructHandle<WGPUProgram>(ph, mDevice, program);
 }
+
 void WebGPUDriver::createDefaultRenderTargetR(Handle<HwRenderTarget> rth, int) {
     assert_invariant(!mDefaultRenderTarget);
     mDefaultRenderTarget = constructHandle<WGPURenderTarget>(rth);
@@ -590,21 +560,7 @@ void WebGPUDriver::createDefaultRenderTargetR(Handle<HwRenderTarget> rth, int) {
 
 void WebGPUDriver::createRenderTargetR(Handle<HwRenderTarget> rth, TargetBufferFlags targets,
         uint32_t width, uint32_t height, uint8_t samples, uint8_t layerCount, MRT color,
-        TargetBufferInfo depth, TargetBufferInfo stencil) {
-    // The `targets` flags indicate which of the `color`, `depth`, `stencil` TargetBufferInfo
-    // are actually active for this render target.
-    // We'll pass all TargetBufferInfo to WGPURenderTarget; it will use them if their handles are valid.
-
-    // Ensure that textures intended for use as attachments were created with
-    // wgpu::TextureUsage::RenderAttachment. This check should ideally be in createTextureR
-    // or validated here if possible.
-
-    // The `layerCount` parameter might be for creating array textures that this RT targets.
-    // Individual attachments (color[i].layer, depth.layer, stencil.layer) specify which layer
-    // of an array texture to bind. For now, we assume textures are pre-configured.
-
-    constructHandle<WGPURenderTarget>(rth, width, height, samples, color, depth, stencil);
-}
+        TargetBufferInfo depth, TargetBufferInfo stencil) {}
 
 void WebGPUDriver::createFenceR(Handle<HwFence> fh, int) {}
 
@@ -618,7 +574,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->getBindGroupEntries());
+    constructHandle<WebGPUDescriptorSet>(dsh, layout->getLayout(), layout->getLayoutSize());
 }
 
 Handle<HwStream> WebGPUDriver::createStreamNative(void* nativeStream) {
@@ -748,20 +704,17 @@ size_t WebGPUDriver::getMaxArrayTextureLayers() {
 
 void WebGPUDriver::updateIndexBuffer(Handle<HwIndexBuffer> ibh, BufferDescriptor&& p,
         uint32_t byteOffset) {
-    handleCast<WGPUIndexBuffer>(ibh)->updateGPUBuffer(p, byteOffset, mQueue);
-    scheduleDestroy(std::move(p));
+    updateGPUBuffer(handleCast<WGPUIndexBuffer>(ibh), std::move(p), byteOffset);
 }
 
 void WebGPUDriver::updateBufferObject(Handle<HwBufferObject> ibh, BufferDescriptor&& p,
         uint32_t byteOffset) {
-    handleCast<WGPUBufferObject>(ibh)->updateGPUBuffer(p, byteOffset, mQueue);
-    scheduleDestroy(std::move(p));
+    updateGPUBuffer(handleCast<WGPUBufferObject>(ibh), std::move(p), byteOffset);
 }
 
 void WebGPUDriver::updateBufferObjectUnsynchronized(Handle<HwBufferObject> ibh,
         BufferDescriptor&& p, uint32_t byteOffset) {
-    handleCast<WGPUBufferObject>(ibh)->updateGPUBuffer(p, byteOffset, mQueue);
-    scheduleDestroy(std::move(p));
+    updateGPUBuffer(handleCast<WGPUBufferObject>(ibh), std::move(p), byteOffset);
 }
 
 void WebGPUDriver::resetBufferObject(Handle<HwBufferObject> boh) {
@@ -773,76 +726,15 @@ void WebGPUDriver::setVertexBufferObject(Handle<HwVertexBuffer> vbh, uint32_t in
     auto* vertexBuffer = handleCast<WGPUVertexBuffer>(vbh);
     auto* bufferObject = handleCast<WGPUBufferObject>(boh);
     assert_invariant(index < vertexBuffer->buffers.size());
-    assert_invariant(bufferObject->getBuffer().GetUsage() & wgpu::BufferUsage::Vertex);
-    vertexBuffer->buffers[index] = bufferObject->getBuffer();
+    assert_invariant(bufferObject->buffer.GetUsage() & wgpu::BufferUsage::Vertex);
+    vertexBuffer->buffers[index] = bufferObject->buffer;
 }
 
-void WebGPUDriver::update3DImage(Handle<HwTexture> th, uint32_t level, uint32_t xoffset,
-        uint32_t yoffset, uint32_t zoffset, uint32_t width, uint32_t height, uint32_t depth,
-        PixelBufferDescriptor&& p) {
-    PixelBufferDescriptor* data = &p;
-    PixelBufferDescriptor reshapedData;
-    if (reshape(p, reshapedData)) {
-        data = &reshapedData;
-    }
-    auto texture = handleCast<WGPUTexture>(th);
-
-    // TODO: Writing to a depth texture is illegal and errors. I'm not sure why Filament is trying
-    // to do so, but early returning is working?
-    if(texture->getAspect() == wgpu::TextureAspect::DepthOnly){
-        scheduleDestroy(std::move(p));
-        return;
-    }
-    size_t blockWidth = texture->getBlockWidth();
-    size_t blockHeight = texture->getBlockHeight();
-    // WebGPU specification requires that for compressed textures, the x and y offsets
-    // must be a multiple of the compressed texture format's block width and height.
-    // See: https://www.w3.org/TR/webgpu/#abstract-opdef-validating-gputexelcopytextureinfo
-    if (blockWidth > 1 || blockHeight > 1) {
-        FILAMENT_CHECK_PRECONDITION(xoffset % blockWidth == 0)
-                << "xoffset must be aligned to blockwidth, but offset is " << blockWidth
-                << "and offset is " << xoffset;
-        FILAMENT_CHECK_PRECONDITION(yoffset % blockHeight == 0)
-                << "yoffset must be aligned to blockHeight, but offset is " << blockHeight
-                << "and offset is " << yoffset;
-    }
-
-    auto copyInfo = wgpu::TexelCopyTextureInfo{ .texture = texture->getTexture(),
-        .mipLevel = level,
-        .origin = { .x = xoffset, .y = yoffset, .z = zoffset },
-        .aspect = texture->getAspect() };
-    uint32_t bytesPerRow = static_cast<uint32_t>(
-            PixelBufferDescriptor::computePixelSize(data->format, data->type) * width);
-    auto extent = wgpu::Extent3D{ .width = width, .height = height, .depthOrArrayLayers = depth };
-
-    const uint8_t* dataBuff = static_cast<const uint8_t*>(data->buffer);
-    size_t dataSize = data->size;
-    std::unique_ptr<uint8_t[]> paddedBuffer;
-
-    if (bytesPerRow % 256 != 0) {
-        uint32_t padding = 256 - (bytesPerRow % 256);
-        uint32_t paddedBytesPerRow = bytesPerRow + padding;
-
-        size_t paddedBufferSize = static_cast<size_t>(paddedBytesPerRow) * height * depth;
-        paddedBuffer = std::make_unique<uint8_t[]>(paddedBufferSize);
-        uint8_t* dest = paddedBuffer.get();
-
-        for (uint32_t z = 0; z < depth; ++z) {
-            for (uint32_t y = 0; y < height; ++y) {
-                std::memcpy(dest, dataBuff, bytesPerRow);
-                dest += paddedBytesPerRow;
-                dataBuff += bytesPerRow;
-            }
-        }
-        dataBuff = paddedBuffer.get();
-        dataSize = paddedBufferSize;
-        bytesPerRow = paddedBytesPerRow;
-    }
-
-    auto layout = wgpu::TexelCopyBufferLayout{ .bytesPerRow = bytesPerRow, .rowsPerImage = height };
-
-    mQueue.WriteTexture(&copyInfo, dataBuff, dataSize, &layout, &extent);
-    scheduleDestroy(std::move(p));
+void WebGPUDriver::update3DImage(Handle<HwTexture> th,
+        uint32_t level, uint32_t xoffset, uint32_t yoffset, uint32_t zoffset,
+        uint32_t width, uint32_t height, uint32_t depth,
+        PixelBufferDescriptor&& data) {
+    scheduleDestroy(std::move(data));
 }
 
 void WebGPUDriver::setupExternalImage(void* image) {
@@ -867,81 +759,50 @@ void WebGPUDriver::compilePrograms(CompilerPriorityQueue priority,
     }
 }
 
-void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, RenderPassParams const& params) {
+void WebGPUDriver::beginRenderPass(Handle<HwRenderTarget> rth, const RenderPassParams& params) {
+    wgpu::CommandEncoderDescriptor commandEncoderDescriptor = {
+        .label = "command_encoder"
+    };
+    mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
     assert_invariant(mCommandEncoder);
-    auto* renderTarget = handleCast<WGPURenderTarget>(rth);
 
-    wgpu::RenderPassDescriptor renderPassDescriptor{};
-    wgpu::TextureView defaultColorView = nullptr;
-    wgpu::TextureView defaultDepthStencilView = nullptr;
-
-    std::array<wgpu::TextureView, MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT> customColorViews{};
-    uint32_t customColorViewCount = 0;
-    wgpu::TextureView customDepthView = nullptr;
-    wgpu::TextureView customStencilView = nullptr;
-
-    if (renderTarget->isDefaultRenderTarget()) {
-        assert_invariant(mSwapChain && mTextureView);
-        defaultColorView = mTextureView;
-        defaultDepthStencilView = mSwapChain->getDepthTextureView();
+    // TODO: Remove this code once WebGPU pipeline is implemented
+    static float red = 1.0f;
+    if (red - 0.01 > 0) {
+        red -= 0.01;
     } else {
-        // Resolve views for custom render target
-        const auto& colorInfos = renderTarget->getColorAttachmentInfos();
-        for (int i = 0; i < MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT; ++i) {
-            if (colorInfos[i].handle) {
-                auto* hwTexture = handleCast<WGPUTexture>(colorInfos[i].handle);
-                if (hwTexture) {
-                    // TODO: Consider colorInfos[i].level and colorInfos[i].layer for view creation
-                    // if WGPUTexture::getTexView() isn't sufficient or needs parameters.
-                    customColorViews[customColorViewCount++] = hwTexture->getTexView();
-                }
-            }
-        }
-
-        const auto& depthInfo = renderTarget->getDepthAttachmentInfo();
-        if (depthInfo.handle) {
-            auto* hwTexture = handleCast<WGPUTexture>(depthInfo.handle);
-            if (hwTexture) {
-                customDepthView = hwTexture->getTexView();
-            }
-        }
-
-        const auto& stencilInfo = renderTarget->getStencilAttachmentInfo();
-        if (stencilInfo.handle) {
-            // If depth and stencil use the same texture handle, this will re-cast but that's fine.
-            auto* hwTexture = handleCast<WGPUTexture>(stencilInfo.handle);
-            if (hwTexture) {
-                customStencilView = hwTexture->getTexView();
-            }
-        }
+        red = 1.0f;
     }
+    assert_invariant(mTextureView);
+    wgpu::RenderPassColorAttachment renderPassColorAttachment = {
+        .view = mTextureView,
+        // TODO: remove this code once WebGPU Pipeline is implemented with render targets, pipeline and buffers.
+        .depthSlice = wgpu::kDepthSliceUndefined,
+        .loadOp = wgpu::LoadOp::Clear,
+        .storeOp = wgpu::StoreOp::Store,
+        .clearValue = wgpu::Color{red, 0 , 0 , 1},
+    };
 
-    renderTarget->setUpRenderPassAttachments(renderPassDescriptor,
-            params,
-            defaultColorView,
-            defaultDepthStencilView,
-            customColorViews.data(),
-            customColorViewCount,
-            customDepthView,
-            customStencilView);
+    wgpu::RenderPassDescriptor renderPassDescriptor = {
+        .colorAttachmentCount = 1,
+        .colorAttachments = &renderPassColorAttachment,
+        .depthStencilAttachment = nullptr,
+        .timestampWrites = nullptr,
+    };
 
     mRenderPassEncoder = mCommandEncoder.BeginRenderPass(&renderPassDescriptor);
-    // Ensure viewport dimensions are positive
-    uint32_t viewportWidth = params.viewport.width > 0 ? params.viewport.width : 1;
-    uint32_t viewportHeight = params.viewport.height > 0 ? params.viewport.height : 1;
-
-    mRenderPassEncoder.SetViewport(
-            static_cast<float>(params.viewport.left),
-            static_cast<float>(params.viewport.bottom),
-            static_cast<float>(viewportWidth),
-            static_cast<float>(viewportHeight),
-            params.depthRange.near,
-            params.depthRange.far);
+    mRenderPassEncoder.SetViewport(params.viewport.left, params.viewport.bottom,
+            params.viewport.width, params.viewport.height, params.depthRange.near, params.depthRange.far);
 }
 
-void WebGPUDriver::endRenderPass(int /* dummy */) {
+void WebGPUDriver::endRenderPass(int) {
     mRenderPassEncoder.End();
     mRenderPassEncoder = nullptr;
+    wgpu::CommandBufferDescriptor commandBufferDescriptor {
+        .label = "command_buffer",
+    };
+    mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
+    assert_invariant(mCommandBuffer);
 }
 
 void WebGPUDriver::nextSubpass(int) {
@@ -956,19 +817,9 @@ void WebGPUDriver::makeCurrent(Handle<HwSwapChain> drawSch, Handle<HwSwapChain>
     wgpu::Extent2D surfaceSize = mPlatform.getSurfaceExtent(mNativeWindow);
     mTextureView = mSwapChain->getCurrentSurfaceTextureView(surfaceSize);
     assert_invariant(mTextureView);
-    wgpu::CommandEncoderDescriptor commandEncoderDescriptor = {
-        .label = "command_encoder"
-    };
-    mCommandEncoder = mDevice.CreateCommandEncoder(&commandEncoderDescriptor);
-    assert_invariant(mCommandEncoder);
 }
 
 void WebGPUDriver::commit(Handle<HwSwapChain> sch) {
-    wgpu::CommandBufferDescriptor commandBufferDescriptor{
-        .label = "command_buffer",
-    };
-    mCommandBuffer = mCommandEncoder.Finish(&commandBufferDescriptor);
-    assert_invariant(mCommandBuffer);
     mCommandEncoder = nullptr;
     mQueue.Submit(1, &mCommandBuffer);
     mCommandBuffer = nullptr;
@@ -1025,24 +876,6 @@ 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;
-    }
-    for (size_t index = 0; index < MAX_DESCRIPTOR_SET_COUNT; ++index) {
-        auto& entry = currentDescriptorSets[index];
-        if (entry.bg != nullptr) {
-            mRenderPassEncoder.SetBindGroup(index, entry.bg, entry.dynamicOffsetCount,
-                    entry.offsets.data());
-            entry.bg = nullptr;
-            entry.dynamicOffsetCount = 0;
-            entry.offsets.clear();
-        }
-    }
     const auto* program = handleCast<WGPUProgram>(pipelineState.program);
     assert_invariant(program);
     assert_invariant(program->computeShaderModule == nullptr &&
@@ -1079,39 +912,31 @@ void WebGPUDriver::bindPipeline(PipelineState const& pipelineState) {
             *vertexBufferInfo, layout, pipelineState.rasterState, pipelineState.stencilState,
             pipelineState.polygonOffset, pipelineState.primitiveType, mSwapChain->getColorFormat(),
             mSwapChain->getDepthFormat());
-    mPipelineMap[hash] = pipeline;
-    mRenderPassEncoder.SetPipeline(pipeline);
+    // TODO: uncomment once we have a valid pipeline to set
+    // mRenderPassEncoder.SetPipeline(pipeline);
 }
 
 void WebGPUDriver::bindRenderPrimitive(Handle<HwRenderPrimitive> rph) {
     auto* renderPrimitive = handleCast<WGPURenderPrimitive>(rph);
-    auto* vbi = handleCast<WGPUVertexBufferInfo>(renderPrimitive->vertexBuffer->vbih);
 
-    // Loop over the WebGPU vertex buffer slots defined by the VertexBufferInfo.
-    // For each WebGPU slot, find the corresponding Filament buffer that supplies the data.
-    for (uint32_t webGPUSlot = 0; webGPUSlot < vbi->getWebGPULayoutCount(); ++webGPUSlot) {
-        uint8_t filamentBufferIndex = vbi->getFilamentBufferIndexForSlot(webGPUSlot);
-
-        // Ensure the Filament buffer index is valid for the vertexBuffer's internal storage.
-        // This check assumes renderPrimitive->vertexBuffer->buffers is sized by the
-        // original Filament buffer count.
-        assert_invariant(filamentBufferIndex < renderPrimitive->vertexBuffer->buffers.size());
-
-        mRenderPassEncoder.SetVertexBuffer(webGPUSlot,
-                renderPrimitive->vertexBuffer->buffers[filamentBufferIndex]);
+    // This *must* match the WGPUVertexBufferInfo that was bound in bindPipeline(). But we want
+    // to allow to call this before bindPipeline(), so the validation can only happen in draw()
+    auto vbi = handleCast<WGPUVertexBufferInfo>(renderPrimitive->vertexBuffer->vbih);
+    assert_invariant(
+            vbi->getVertexBufferLayoutSize() == renderPrimitive->vertexBuffer->buffers.size());
+    for (uint32_t i = 0; i < vbi->getVertexBufferLayoutSize(); i++) {
+        mRenderPassEncoder.SetVertexBuffer(i, renderPrimitive->vertexBuffer->buffers[i]);
     }
 
-    mRenderPassEncoder.SetIndexBuffer(renderPrimitive->indexBuffer->getBuffer(),
+    mRenderPassEncoder.SetIndexBuffer(renderPrimitive->indexBuffer->buffer,
             renderPrimitive->indexBuffer->indexFormat);
 }
 
 void WebGPUDriver::draw2(uint32_t indexOffset, uint32_t indexCount, uint32_t instanceCount) {
-    mRenderPassEncoder.DrawIndexed(indexCount, instanceCount, indexOffset, 0, 0);
 }
 
-void WebGPUDriver::draw(PipelineState, Handle<HwRenderPrimitive>, uint32_t indexOffset,
-        uint32_t indexCount, uint32_t instanceCount) {
-    draw2(indexOffset, indexCount, instanceCount);
+void WebGPUDriver::draw(PipelineState pipelineState, Handle<HwRenderPrimitive> rph,
+        uint32_t indexOffset, uint32_t indexCount, uint32_t instanceCount) {
 }
 
 void WebGPUDriver::dispatchCompute(Handle<HwProgram> program, math::uint3 workGroupCount) {
@@ -1137,11 +962,8 @@ void WebGPUDriver::updateDescriptorSetBuffer(Handle<HwDescriptorSet> dsh,
     auto buffer = handleCast<WGPUBufferObject>(boh);
     if (!bindGroup->getIsLocked()) {
         // TODO making assumptions that size and offset mean the same thing here.
-        FILAMENT_CHECK_PRECONDITION(offset % mMinUniformBufferOffsetAlignment == 0)
-                << "Binding offset must be multiple of " << mMinUniformBufferOffsetAlignment
-                << "But requested offset is " << offset;
         wgpu::BindGroupEntry entry{ .binding = static_cast<uint32_t>(binding * 2),
-            .buffer = buffer->getBuffer(),
+            .buffer = buffer->buffer,
             .offset = offset,
             .size = size };
         bindGroup->addEntry(entry.binding, std::move(entry));
@@ -1168,113 +990,112 @@ void WebGPUDriver::updateDescriptorSetTexture(Handle<HwDescriptorSet> dsh,
     }
 }
 
-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);
-    const size_t dynamicOffsetCount = bindGroup->countEntitiesWithDynamicOffsets();
-
-    if(mRenderPassEncoder){
-        mRenderPassEncoder.SetBindGroup(setIndex, wbg, dynamicOffsetCount, offsets.data());
-    }
-    currentDescriptorSets[setIndex] = {wbg, dynamicOffsetCount, std::move(offsets)};
+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::setDebugTag(HandleBase::HandleId handleId, utils::CString tag) {
 }
 wgpu::Sampler WebGPUDriver::makeSampler(SamplerParams const& params) {
-    wgpu::SamplerDescriptor desc{};
+    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.filterMag) {
+        case SamplerMagFilter::NEAREST: {
+            desc.magFilter = wgpu::FilterMode::Nearest;
+            break;
         }
-        switch (params.filterMin) {
-            case SamplerMinFilter::NEAREST: {
-                desc.minFilter = wgpu::FilterMode::Nearest;
-                desc.mipmapFilter = wgpu::MipmapFilterMode::Undefined;
-                break;
-            }
-            case SamplerMinFilter::LINEAR: {
-                desc.minFilter = wgpu::FilterMode::Linear;
-                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;
-            }
+        case SamplerMagFilter::LINEAR: {
+            desc.magFilter = wgpu::FilterMode::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;
-            }
+    }
+    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::Nearest;
+            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::Nearest;
+            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 unnecessary
 
-    return mDevice.CreateSampler(&desc);
+    // Unused: Filament's compareMode, WGPU lodMinClamp/lodMaxClamp
+
+    return mDevice.CreateSampler();
 }
 wgpu::AddressMode WebGPUDriver::fWrapModeToWAddressMode(const SamplerWrapMode& fWrapMode) {
     switch (fWrapMode) {
@@ -1294,4 +1115,5 @@ wgpu::AddressMode WebGPUDriver::fWrapModeToWAddressMode(const SamplerWrapMode& f
     return wgpu::AddressMode::Undefined;
 }
 
+
 } // namespace filament

filament/backend/src/webgpu/WebGPUDriver.h

@@ -58,13 +58,32 @@ private:
     [[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) {
+        FILAMENT_CHECK_PRECONDITION(bufferDescriptor.buffer)
+                << "copyIntoBuffer called with a null buffer";
+        FILAMENT_CHECK_PRECONDITION(
+                bufferDescriptor.size + byteOffset <= gpuBufferObject->buffer.GetSize())
+                << "Attempting to copy " << bufferDescriptor.size << " bytes into a buffer of size "
+                << gpuBufferObject->buffer.GetSize() << " at offset " << byteOffset;
+
+        // TODO: All buffer objects are created with CopyDst usage.
+        // This may have some performance implications. That should be investigated later.
+        assert_invariant(gpuBufferObject->buffer.GetUsage() & wgpu::BufferUsage::CopyDst);
+
+        // WriteBuffer is an async call. But cpu buffer data is already written to the staging
+        // buffer on return from the WriteBuffer.
+        mQueue.WriteBuffer(gpuBufferObject->buffer, byteOffset, bufferDescriptor.buffer,
+                bufferDescriptor.size);
+        scheduleDestroy(std::move(bufferDescriptor));
+    }
 
     // the platform (e.g. OS) specific aspects of the WebGPU backend are strictly only
     // handled in the WebGPUPlatform
     WebGPUPlatform& mPlatform;
     wgpu::Adapter mAdapter = nullptr;
     wgpu::Device mDevice = nullptr;
-    uint32_t mMinUniformBufferOffsetAlignment;
     wgpu::Queue mQueue = nullptr;
     void* mNativeWindow = nullptr;
     WebGPUSwapChain* mSwapChain = nullptr;
@@ -72,16 +91,8 @@ private:
     wgpu::CommandEncoder mCommandEncoder = nullptr;
     wgpu::TextureView mTextureView = nullptr;
     wgpu::RenderPassEncoder mRenderPassEncoder = nullptr;
-    struct bgInfo{
-        wgpu::BindGroup bg;
-        size_t dynamicOffsetCount;
-        backend::DescriptorSetOffsetArray offsets;
-    };
-    std::array<bgInfo, MAX_DESCRIPTOR_SET_COUNT> currentDescriptorSets = {};
     wgpu::CommandBuffer mCommandBuffer = nullptr;
     WGPURenderTarget* mDefaultRenderTarget = nullptr;
-
-    tsl::robin_map<uint32_t, wgpu::RenderPipeline> mPipelineMap;
     /*
      * Driver interface
      */

filament/backend/src/webgpu/WebGPUHandles.cpp

@@ -16,18 +16,7 @@
 
 #include "WebGPUHandles.h"
 
-#include <backend/DriverEnums.h>
-
-#include <utils/BitmaskEnum.h>
-#include <utils/Panic.h>
-#include <private/backend/BackendUtils.h>
-#include <webgpu/webgpu_cpp.h>
-
-#include <algorithm>
-#include <cstdint>
-#include <map>
 #include <utility>
-#include <vector>
 
 namespace {
 constexpr wgpu::BufferUsage getBufferObjectUsage(
@@ -42,6 +31,15 @@ constexpr wgpu::BufferUsage getBufferObjectUsage(
     }
 }
 
+wgpu::Buffer createBuffer(wgpu::Device const& device, wgpu::BufferUsage usage, uint32_t size,
+        char const* label) {
+    wgpu::BufferDescriptor descriptor{ .label = label,
+        .usage = usage,
+        .size = size,
+        .mappedAtCreation = false };
+    return device.CreateBuffer(&descriptor);
+}
+
 wgpu::VertexFormat getVertexFormat(filament::backend::ElementType type, bool normalized, bool integer) {
     using ElementType = filament::backend::ElementType;
     using VertexFormat = wgpu::VertexFormat;
@@ -69,7 +67,7 @@ wgpu::VertexFormat getVertexFormat(filament::backend::ElementType type, bool nor
             case ElementType::BYTE4: return VertexFormat::Snorm8x4;
             case ElementType::UBYTE4: return VertexFormat::Unorm8x4;
             case ElementType::SHORT4: return VertexFormat::Snorm16x4;
-            case ElementType::USHORT4: return VertexFormat::Unorm16x4;
+            case ElementType::USHORT4: return VertexFormat::Unorm8x4;
             default:
                 FILAMENT_CHECK_POSTCONDITION(false) << "Normalized format does not exist.";
                 return VertexFormat::Float32x3;
@@ -112,171 +110,55 @@ 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_map_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_map_array_user_texture_view";
-    }
-}
-
 }// namespace
 
 namespace filament::backend {
 
-void WGPUBufferBase::createBuffer(const wgpu::Device& device, wgpu::BufferUsage usage,
-        uint32_t size, const char* label) {
-    // Write size must be divisible by 4. If the whole buffer is written to as is common, so must
-    // the buffer size.
-    size += (4 - (size % 4)) % 4;
-    wgpu::BufferDescriptor descriptor{ .label = label,
-        .usage = usage,
-        .size = size,
-        .mappedAtCreation = false };
-    buffer = device.CreateBuffer(&descriptor);
-}
-
-void WGPUBufferBase::updateGPUBuffer(BufferDescriptor& bufferDescriptor, uint32_t byteOffset,
-        wgpu::Queue queue) {
-    FILAMENT_CHECK_PRECONDITION(bufferDescriptor.buffer)
-            << "copyIntoBuffer called with a null buffer";
-    FILAMENT_CHECK_PRECONDITION(bufferDescriptor.size + byteOffset <= buffer.GetSize())
-            << "Attempting to copy " << bufferDescriptor.size << " bytes into a buffer of size "
-            << buffer.GetSize() << " at offset " << byteOffset;
-    FILAMENT_CHECK_PRECONDITION(byteOffset % 4 == 0)
-            << "Byte offset must be a multiple of 4 but is " << byteOffset;
-
-    // TODO: All buffer objects are created with CopyDst usage.
-    // This may have some performance implications. That should be investigated later.
-    assert_invariant(buffer.GetUsage() & wgpu::BufferUsage::CopyDst);
-
-    size_t remainder = bufferDescriptor.size % 4;
-
-    // WriteBuffer is an async call. But cpu buffer data is already written to the staging
-    // buffer on return from the WriteBuffer.
-    auto legalSize = bufferDescriptor.size - remainder;
-    queue.WriteBuffer(buffer, byteOffset, bufferDescriptor.buffer, legalSize);
-    if (remainder != 0) {
-        const uint8_t* remainderStart =
-                static_cast<const uint8_t*>(bufferDescriptor.buffer) + legalSize;
-        memcpy(mRemainderChunk.data(), remainderStart, remainder);
-        // Pad the remainder with zeros to ensure deterministic behavior, though GPU shouldn't
-        // access this
-        std::memset(mRemainderChunk.data() + remainder, 0, 4 - remainder);
-
-        queue.WriteBuffer(buffer, byteOffset + legalSize, &mRemainderChunk, 4);
-    }
-}
-
 WGPUVertexBufferInfo::WGPUVertexBufferInfo(uint8_t bufferCount, uint8_t attributeCount,
         AttributeArray const& attributes)
-    : HwVertexBufferInfo(bufferCount, attributeCount) { // Base class constructor
-
+    : HwVertexBufferInfo(bufferCount, attributeCount),
+      mVertexBufferLayout(bufferCount),
+      mAttributes(bufferCount) {
     assert_invariant(attributeCount > 0);
-    // bufferCount is Filament's buffer count. The number of WebGPU slots might differ.
-
-    struct LayoutKey {
-        uint8_t filamentBufferIndex;
-        uint16_t stride;
-        bool operator<(const LayoutKey& other) const {
-            if (filamentBufferIndex != other.filamentBufferIndex) {
-                return filamentBufferIndex < other.filamentBufferIndex;
-            }
-            return stride < other.stride;
-        }
-    };
-    std::map<LayoutKey, uint32_t> layoutKeyToWebGPUSlot;
-    uint32_t nextWebGPUSlot = 0;
-
+    assert_invariant(bufferCount > 0);
     for (uint32_t attribIndex = 0; attribIndex < attributes.size(); attribIndex++) {
         Attribute const& attrib = attributes[attribIndex];
-        // Ignore attributes not bound to any vertex buffer.
+        // Ignore the attributes which are not bind to vertex buffers.
         if (attrib.buffer == Attribute::BUFFER_UNUSED) {
             continue;
         }
 
-        assert_invariant(attrib.buffer < bufferCount); // Ensure Filament buffer index is valid
-
-        LayoutKey key = {attrib.buffer, attrib.stride};
-        uint32_t currentWebGPUSlot;
-
-        auto it = layoutKeyToWebGPUSlot.find(key);
-        if (it == layoutKeyToWebGPUSlot.end()) {
-            currentWebGPUSlot = nextWebGPUSlot++;
-            layoutKeyToWebGPUSlot[key] = currentWebGPUSlot;
-
-            mActualWebGPULayouts.emplace_back();
-            mActualWebGPULayouts.back().arrayStride = attrib.stride;
-            mActualWebGPULayouts.back().stepMode = wgpu::VertexStepMode::Vertex;
-            // .attributes and .attributeCount will be set later
-
-            mSlotMappings.emplace_back(SlotMapping{attrib.buffer});
-            mActualWebGPUAttributes.emplace_back(); // Add a new vector for this slot's attributes
-        } else {
-            currentWebGPUSlot = it->second;
-            // Sanity check: if we found an existing slot for this key, its stride should match.
-            assert_invariant(mActualWebGPULayouts[currentWebGPUSlot].arrayStride == attrib.stride);
-        }
-
+        assert_invariant(attrib.buffer < bufferCount);
         bool const isInteger = attrib.flags & Attribute::FLAG_INTEGER_TARGET;
         bool const isNormalized = attrib.flags & Attribute::FLAG_NORMALIZED;
         wgpu::VertexFormat vertexFormat = getVertexFormat(attrib.type, isNormalized, isInteger);
 
-        mActualWebGPUAttributes[currentWebGPUSlot].push_back({
+        // Attributes are sequential per buffer
+        mAttributes[attrib.buffer].push_back({
             .format = vertexFormat,
             .offset = attrib.offset,
-            .shaderLocation = attribIndex, // Use original attribIndex as shaderLocation
+            .shaderLocation = static_cast<uint32_t>(mAttributes[attrib.buffer].size()),
         });
+
+        mVertexBufferLayout[attrib.buffer].stepMode = wgpu::VertexStepMode::Vertex;
+        if (mVertexBufferLayout[attrib.buffer].arrayStride == 0) {
+            mVertexBufferLayout[attrib.buffer].arrayStride = attrib.stride;
+        } else {
+            assert_invariant(mVertexBufferLayout[attrib.buffer].arrayStride == attrib.stride);
+        }
     }
 
-    // Finalize attribute pointers and counts in mActualWebGPULayouts
-    for (uint32_t slot = 0; slot < mActualWebGPULayouts.size(); ++slot) {
-        if (!mActualWebGPUAttributes[slot].empty()) {
-            mActualWebGPULayouts[slot].attributeCount = mActualWebGPUAttributes[slot].size();
-            mActualWebGPULayouts[slot].attributes = mActualWebGPUAttributes[slot].data();
-        } else {
-            mActualWebGPULayouts[slot].attributeCount = 0;
-            mActualWebGPULayouts[slot].attributes = nullptr;
-        }
+    for (uint32_t bufferIndex = 0; bufferIndex < bufferCount; bufferIndex++) {
+        mVertexBufferLayout[bufferIndex].attributeCount = mAttributes[bufferIndex].size();
+        mVertexBufferLayout[bufferIndex].attributes = mAttributes[bufferIndex].data();
     }
 }
 
 WGPUIndexBuffer::WGPUIndexBuffer(wgpu::Device const& device, uint8_t elementSize,
         uint32_t indexCount)
-    : indexFormat(elementSize == 2 ? wgpu::IndexFormat::Uint16 : wgpu::IndexFormat::Uint32) {
-    createBuffer(device, wgpu::BufferUsage::CopyDst | wgpu::BufferUsage::Index,
-            elementSize * indexCount, "index_buffer");
-}
+    : buffer(createBuffer(device, wgpu::BufferUsage::CopyDst | wgpu::BufferUsage::Index,
+              elementSize * indexCount, "index_buffer")),
+      indexFormat(elementSize == 2 ? wgpu::IndexFormat::Uint16 : wgpu::IndexFormat::Uint32) {}
 
 
 WGPUVertexBuffer::WGPUVertexBuffer(wgpu::Device const& device, uint32_t vertexCount,
@@ -287,10 +169,10 @@ WGPUVertexBuffer::WGPUVertexBuffer(wgpu::Device const& device, uint32_t vertexCo
 
 WGPUBufferObject::WGPUBufferObject(wgpu::Device const& device, BufferObjectBinding bindingType,
         uint32_t byteCount)
-    : HwBufferObject(byteCount) {
-    createBuffer(device, wgpu::BufferUsage::CopyDst | getBufferObjectUsage(bindingType), byteCount,
-            "buffer_object");
-}
+    : HwBufferObject(byteCount),
+      buffer(createBuffer(device, wgpu::BufferUsage::CopyDst | getBufferObjectUsage(bindingType),
+              byteCount, "buffer_object")),
+      bufferObjectBinding(bindingType) {}
 
 wgpu::ShaderStage WebGPUDescriptorSetLayout::filamentStageToWGPUStage(ShaderStageFlags fFlags) {
     wgpu::ShaderStage retStages = wgpu::ShaderStage::None;
@@ -310,174 +192,88 @@ 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();
-    }
-
     // 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;
 
-    unsigned int samplerCount =
+    uint samplerCount =
             std::count_if(layout.bindings.begin(), layout.bindings.end(), [](auto& fEntry) {
-                return DescriptorSetLayoutBinding::isSampler(fEntry.type);
+                return fEntry.type == DescriptorType::SAMPLER ||
+                       fEntry.type == DescriptorType::SAMPLER_EXTERNAL;
             });
 
 
     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;
 
         switch (fEntry.type) {
-            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_2D_MS_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_INT:
-            case DescriptorType::SAMPLER_2D_MS_UINT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_FLOAT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_INT:
-            case DescriptorType::SAMPLER_2D_MS_ARRAY_UINT: {
+            // TODO Metal treats these the same. Is this fine?
+            case DescriptorType::SAMPLER_EXTERNAL:
+            case DescriptorType::SAMPLER: {
+                // Sampler binding is 2n+1 due to split.
                 auto& samplerEntry = wEntries.emplace_back();
-                auto& samplerEntryInfo = mBindGroupEntries.emplace_back();
                 samplerEntry.binding = fEntry.binding * 2 + 1;
-                samplerEntryInfo.binding = samplerEntry.binding;
                 samplerEntry.visibility = wEntry.visibility;
-                wEntry.texture.multisampled = isMultiSampledTypeDescriptor(fEntry.type);
-                // TODO: Set once we have the filtering values
-                if (isDepthDescriptor(fEntry.type)) {
-                    samplerEntry.sampler.type = wgpu::SamplerBindingType::Comparison;
-                } else {
-                    samplerEntry.sampler.type =
-                            wgpu::SamplerBindingType::NonFiltering;
-                }
+                // We are simply hoping that undefined and defaults suffices here.
+                samplerEntry.sampler.type = wgpu::SamplerBindingType::Undefined;
+                wEntry.texture.sampleType = wgpu::TextureSampleType::Undefined;
                 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;
-            }
-        }
-        if (isDepthDescriptor(fEntry.type))
-        {
-            wEntry.texture.sampleType = wgpu::TextureSampleType::Depth;
-        }
-        else if (isFloatDescriptor(fEntry.type))
-        {
-            // TODO: Set once we have the filtering values
-            wEntry.texture.sampleType = wgpu::TextureSampleType::UnfilterableFloat;
-        }
-        else if (isIntDescriptor(fEntry.type))
-        {
-            wEntry.texture.sampleType = wgpu::TextureSampleType::Sint;
-        }
-        else if (isUnsignedIntDescriptor(fEntry.type))
-        {
-            wEntry.texture.sampleType = wgpu::TextureSampleType::Uint;
         }
 
-        if (is3dTypeDescriptor(fEntry.type))
-        {
-            wEntry.texture.viewDimension = wgpu::TextureViewDimension::e3D;
-        }
-        else if (is2dTypeDescriptor(fEntry.type))
-        {
-            wEntry.texture.viewDimension = wgpu::TextureViewDimension::e2D;
-        }
-        else if (is2dArrayTypeDescriptor(fEntry.type))
-        {
-            wEntry.texture.viewDimension = wgpu::TextureViewDimension::e2DArray;
-        }
-        else if (isCubeTypeDescriptor(fEntry.type))
-        {
-            wEntry.texture.viewDimension = wgpu::TextureViewDimension::Cube;
-        }
-        else if (isCubeArrayTypeDescriptor(fEntry.type))
-        {
-            wEntry.texture.viewDimension = wgpu::TextureViewDimension::CubeArray;
-        }
-        // fEntry.count is unused currently
+        // Currently flags are only used to specify dynamic offset.
+
+        // UNUSED
+        // fEntry.count
     }
-    std::string label =  "layout_" + baseLabel + std::to_string(++layoutNum) ;
+
     wgpu::BindGroupLayoutDescriptor layoutDescriptor{
-        .label{label.c_str()}, // Use .c_str() if label needs to be const char*
+        // 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) },
         .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(wgpu::BindGroupLayout const& layout,
-        std::vector<WebGPUDescriptorSetLayout::BindGroupEntryInfo> const& bindGroupEntries)
+WebGPUDescriptorSet::WebGPUDescriptorSet(const wgpu::BindGroupLayout& layout, uint layoutSize)
     : mLayout(layout),
-      mEntriesWithDynamicOffsetsCount(std::count_if(bindGroupEntries.begin(),
-              bindGroupEntries.end(), [](auto const& entry) { return entry.hasDynamicOffset; })) {
-
-    mEntries.resize(bindGroupEntries.size());
-    for (size_t i = 0; i < bindGroupEntries.size(); ++i) {
-        mEntries[i].binding = bindGroupEntries[i].binding;
-    }
+      entries(layoutSize, wgpu::BindGroupEntry{.buffer = nullptr, .sampler = nullptr, .textureView = nullptr}) {
     // 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 < mEntries.size(); index++) {
-        wgpu::BindGroupEntry const& entry = mEntries[index];
-        assert_invariant(entry.binding < mEntryIndexByBinding.size());
-        mEntryIndexByBinding[entry.binding] = static_cast<uint8_t>(index);
-    }
 }
-
 WebGPUDescriptorSet::~WebGPUDescriptorSet() {
     mBindGroup = nullptr;
     mLayout = nullptr;
+    entries.clear();
 }
 
 wgpu::BindGroup WebGPUDescriptorSet::lockAndReturn(const wgpu::Device& device) {
@@ -485,21 +281,14 @@ wgpu::BindGroup WebGPUDescriptorSet::lockAndReturn(const wgpu::Device& device) {
         return mBindGroup;
     }
     // TODO label? Should we just copy layout label?
-    wgpu::BindGroupDescriptor desc{
-        .layout = mLayout,
-        .entryCount = mEntries.size(),
-        .entries = mEntries.data()
-    };
+    wgpu::BindGroupDescriptor desc{ .layout = mLayout,
+        .entryCount = entries.size(),
+        .entries = entries.data() };
     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;
-    mEntries.clear();
-    mEntries.shrink_to_fit();
     return mBindGroup;
 }
 
-void WebGPUDescriptorSet::addEntry(unsigned int index, wgpu::BindGroupEntry&& entry) {
+void WebGPUDescriptorSet::addEntry(uint 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.
@@ -507,92 +296,57 @@ void WebGPUDescriptorSet::addEntry(unsigned int index, wgpu::BindGroupEntry&& en
     }
     // 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.
-    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 < mEntries.size())
-            << "Invalid binding " << index;
-    entry.binding = index;
-    mEntries[entryIndex] = std::move(entry);
+    entries.emplace_back(std::move(entry));
 }
-
-size_t WebGPUDescriptorSet::countEntitiesWithDynamicOffsets() const {
-    return mEntriesWithDynamicOffsetsCount;
-}
-
+// 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 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);
-    mAspect = fToWGPUTextureViewAspect(usage, format);
-    mBlockWidth = filament::backend::getBlockWidth(format);
-    mBlockHeight = filament::backend::getBlockHeight(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
+        wgpu::Device device) noexcept {
+
+    // First the texture aspect
+    wgpu::TextureDescriptor desc;
+
     switch (target) {
-        case SamplerType::SAMPLER_2D:
-            mArrayLayerCount = 1;
-            break;
-        case SamplerType::SAMPLER_2D_ARRAY:
-            mArrayLayerCount = textureDescriptor.size.depthOrArrayLayers;
-            break;
         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;
+        case SamplerType::SAMPLER_2D:
+        case SamplerType::SAMPLER_2D_ARRAY:
+        // Should be safe to assume external is 2d
+        case SamplerType::SAMPLER_EXTERNAL: {
+            desc.dimension = wgpu::TextureDimension::e2D;
             break;
+        }
+        case SamplerType::SAMPLER_3D: {
+            desc.dimension = wgpu::TextureDimension::e3D;
+            break;
+        }
     }
-    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);
-}
+    desc.size = { .width = width, .height = height, .depthOrArrayLayers = depth };
+    desc.format = fToWGPUTextureFormat(format);
+    assert_invariant(desc.format != wgpu::TextureFormat::Undefined);
 
+    // WGPU requires this to be true. Filament should comply
+    assert(samples == 1 || samples || 4);
+
+    desc.sampleCount = samples;
+    desc.usage = fToWGPUTextureUsage(usage);
+    desc.mipLevelCount = levels;
+
+    // TODO Is this fine? Could do all-the-things, a naive mapping or get something from Filament
+    desc.viewFormats = nullptr;
+
+    texture = device.CreateTexture(&desc);
+
+    // TODO should a default levelCount be something other than 0? Sample count?
+    texView = makeTextureView(0, 1);
+}
+// From createTextureViewR
 WGPUTexture::WGPUTexture(WGPUTexture* src, uint8_t baseLevel, uint8_t levelCount) noexcept {
-    mTexture = src->mTexture;
-    mAspect = src->mAspect;
-    mBlockWidth = src->mBlockWidth;
-    mBlockHeight = src->mBlockHeight;
-
-    mTexView = makeTextureView(baseLevel, levelCount, target);
+    texture = src->texture;
+    texView = makeTextureView(baseLevel, levelCount);
 }
 
-wgpu::TextureUsage WGPUTexture::fToWGPUTextureUsage(TextureUsage const& fUsage) {
+wgpu::TextureUsage WGPUTexture::fToWGPUTextureUsage(const TextureUsage& fUsage) {
     wgpu::TextureUsage retUsage = wgpu::TextureUsage::None;
 
     // Basing this mapping off of VulkanTexture.cpp's getUsage func and suggestions from Gemini
@@ -640,9 +394,8 @@ wgpu::TextureUsage WGPUTexture::fToWGPUTextureUsage(TextureUsage const& fUsage)
     //  PROTECTED
     return retUsage;
 }
-
-wgpu::TextureFormat WGPUTexture::fToWGPUTextureFormat(TextureFormat const& fFormat) {
-    switch (fFormat) {
+wgpu::TextureFormat WGPUTexture::fToWGPUTextureFormat(const TextureFormat& fUsage) {
+    switch (fUsage) {
         case filament::backend::TextureFormat::R8:
             return wgpu::TextureFormat::R8Unorm;
         case filament::backend::TextureFormat::R8_SNORM:
@@ -881,224 +634,26 @@ wgpu::TextureFormat WGPUTexture::fToWGPUTextureFormat(TextureFormat const& fForm
     }
 }
 
-wgpu::TextureAspect WGPUTexture::fToWGPUTextureViewAspect(TextureUsage const& fUsage,
-        TextureFormat const& fFormat) {
+wgpu::TextureView WGPUTexture::makeTextureView(const uint8_t& baseLevel,
+        const uint8_t& levelCount) {
+    wgpu::TextureViewDescriptor desc;
+    desc.baseMipLevel = baseLevel;
+    desc.mipLevelCount = levelCount;
 
-    const bool isDepth = any(fUsage & TextureUsage::DEPTH_ATTACHMENT);
-    const bool isStencil = any(fUsage & TextureUsage::STENCIL_ATTACHMENT);
-    const bool isColor = any(fUsage & TextureUsage::COLOR_ATTACHMENT);
-    const bool isSample = (fUsage == TextureUsage::SAMPLEABLE);
+    // 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;
 
-    if (isDepth && !isColor && !isStencil) {
-        return wgpu::TextureAspect::DepthOnly;
-    }
+    // The rest of the properties should be fine to leave as default, using the texture params.
+    desc.label = "TODO";
 
-    if (isStencil && !isColor && !isDepth) {
-        return wgpu::TextureAspect::StencilOnly;
-    }
+    desc.format = wgpu::TextureFormat::Undefined;
+    desc.dimension = wgpu::TextureViewDimension::Undefined;
+    desc.usage = wgpu::TextureUsage::None;
 
-    if (fFormat == filament::backend::TextureFormat::DEPTH32F ||
-            fFormat == filament::backend::TextureFormat::DEPTH24 ||
-            fFormat == filament::backend::TextureFormat::DEPTH16) {
-        return wgpu::TextureAspect::DepthOnly;
-    }
-
-    if (fFormat == filament::backend::TextureFormat::STENCIL8) {
-        return wgpu::TextureAspect::StencilOnly;
-    }
-
-    if (fFormat == filament::backend::TextureFormat::DEPTH24_STENCIL8 ||
-            fFormat == filament::backend::TextureFormat::DEPTH32F_STENCIL8) {
-        if (isSample) {
-            return wgpu::TextureAspect::DepthOnly;
-        }
-    }
-
-    return wgpu::TextureAspect::All;
-}
-
-wgpu::TextureView WGPUTexture::makeTextureView(const uint8_t& baseLevel, const uint8_t& levelCount,
-        SamplerType target) {
-
-    wgpu::TextureViewDescriptor textureViewDescriptor{
-        .label = getUserTextureViewLabel(target),
-        .format = mFormat,
-        .baseMipLevel = baseLevel,
-        .mipLevelCount = levelCount,
-        // TODO: check if this baseArrayLayer assumption is correct
-        .baseArrayLayer = 0,
-        .arrayLayerCount = mArrayLayerCount,
-        .aspect = mAspect,
-        .usage = mUsage
-    };
-
-    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::WGPURenderTarget(uint32_t width, uint32_t height, uint8_t samples,
-        const MRT& colorAttachmentsMRT,
-        const Attachment& depthAttachmentInfo,
-        const Attachment& stencilAttachmentInfo)
-    : HwRenderTarget(width, height),
-      defaultRenderTarget(false),
-      samples(samples),
-      mColorAttachments(colorAttachmentsMRT),
-      mDepthAttachment(depthAttachmentInfo),
-      mStencilAttachment(stencilAttachmentInfo) {
-    mColorAttachmentDescriptors.reserve(MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT);
-}
-
-// Static helper to map MRT index to TargetBufferFlags
-TargetBufferFlags WGPURenderTarget::getTargetBufferFlagsAt(int mrtIndex) {
-    if (mrtIndex < 0 || mrtIndex >= MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT) {
-        return TargetBufferFlags::NONE;
-    }
-    // This mapping assumes TargetBufferFlags::COLOR_0, COLOR_1 etc. are contiguous
-    return static_cast<TargetBufferFlags>(
-            static_cast<uint32_t>(TargetBufferFlags::COLOR0) << mrtIndex);
-}
-
-// Corrected getLoadOperation
-wgpu::LoadOp WGPURenderTarget::getLoadOperation(RenderPassParams const& params,
-                                                TargetBufferFlags bufferToOperateOn) {
-    if (any(params.flags.clear & bufferToOperateOn)) {
-        return wgpu::LoadOp::Clear;
-    }
-    if (any(params.flags.discardStart & bufferToOperateOn)) {
-        return wgpu::LoadOp::Clear; // Or wgpu::LoadOp::Undefined if clear is not desired on discard
-    }
-    return wgpu::LoadOp::Load;
-}
-
-// Corrected getStoreOperation
-wgpu::StoreOp WGPURenderTarget::getStoreOperation(RenderPassParams const& params,
-                                                  TargetBufferFlags bufferToOperateOn) {
-    if (any(params.flags.discardEnd & bufferToOperateOn)) {
-        return wgpu::StoreOp::Discard;
-    }
-    return wgpu::StoreOp::Store;
-}
-
-void WGPURenderTarget::setUpRenderPassAttachments(
-        wgpu::RenderPassDescriptor& descriptor,
-        RenderPassParams const& params,
-        wgpu::TextureView const& defaultColorTextureView,
-        wgpu::TextureView const& defaultDepthStencilTextureView,
-        wgpu::TextureView const* customColorTextureViews,
-        uint32_t customColorTextureViewCount,
-        wgpu::TextureView const& customDepthTextureView,
-        wgpu::TextureView const& customStencilTextureView) {
-    mColorAttachmentDescriptors.clear();
-    mHasDepthStencilAttachment = false;
-
-    if (defaultRenderTarget) {
-        assert_invariant(defaultColorTextureView);
-        wgpu::RenderPassColorAttachment colorAttDesc{};
-        colorAttDesc.view = defaultColorTextureView;
-        colorAttDesc.resolveTarget = nullptr;
-        colorAttDesc.loadOp = WGPURenderTarget::getLoadOperation(params, TargetBufferFlags::COLOR0);
-        colorAttDesc.storeOp = WGPURenderTarget::getStoreOperation(params, TargetBufferFlags::COLOR0);
-        colorAttDesc.clearValue = {params.clearColor.r, params.clearColor.g,
-                                   params.clearColor.b, params.clearColor.a};
-        mColorAttachmentDescriptors.push_back(colorAttDesc);
-
-        if (defaultDepthStencilTextureView) {
-            mDepthStencilAttachmentDescriptor = {
-                .view = defaultDepthStencilTextureView,
-                .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,
-            };
-            mHasDepthStencilAttachment = true;
-        }
-    } else { // Custom Render Target
-        for (uint32_t i = 0; i < customColorTextureViewCount; ++i) {
-            if (customColorTextureViews[i]) {
-                wgpu::RenderPassColorAttachment colorAttDesc{};
-                colorAttDesc.view = customColorTextureViews[i];
-                colorAttDesc.resolveTarget = nullptr; // TODO: MSAA resolve for custom RT
-                colorAttDesc.loadOp = WGPURenderTarget::getLoadOperation(params, getTargetBufferFlagsAt(i));
-                colorAttDesc.storeOp = WGPURenderTarget::getStoreOperation(params, getTargetBufferFlagsAt(i));
-                colorAttDesc.clearValue = {params.clearColor.r, params.clearColor.g,
-                                           params.clearColor.b, params.clearColor.a};
-                mColorAttachmentDescriptors.push_back(colorAttDesc);
-            }
-        }
-
-        wgpu::TextureView combinedDsView = customDepthTextureView ? customDepthTextureView : customStencilTextureView;
-
-        if (combinedDsView) {
-            mDepthStencilAttachmentDescriptor = {};
-            mDepthStencilAttachmentDescriptor.view = combinedDsView;
-
-            if (customDepthTextureView) {
-                mDepthStencilAttachmentDescriptor.depthLoadOp = WGPURenderTarget::getLoadOperation(params, TargetBufferFlags::DEPTH);
-                mDepthStencilAttachmentDescriptor.depthStoreOp = WGPURenderTarget::getStoreOperation(params, TargetBufferFlags::DEPTH);
-                mDepthStencilAttachmentDescriptor.depthClearValue = static_cast<float>(params.clearDepth);
-                mDepthStencilAttachmentDescriptor.depthReadOnly = (params.readOnlyDepthStencil & RenderPassParams::READONLY_DEPTH) > 0;
-            } else {
-                mDepthStencilAttachmentDescriptor.depthLoadOp = wgpu::LoadOp::Undefined;
-                mDepthStencilAttachmentDescriptor.depthStoreOp = wgpu::StoreOp::Undefined;
-                mDepthStencilAttachmentDescriptor.depthReadOnly = true;
-            }
-
-            if (customStencilTextureView) {
-                mDepthStencilAttachmentDescriptor.stencilLoadOp = WGPURenderTarget::getLoadOperation(params, TargetBufferFlags::STENCIL);
-                mDepthStencilAttachmentDescriptor.stencilStoreOp = WGPURenderTarget::getStoreOperation(params, TargetBufferFlags::STENCIL);
-                mDepthStencilAttachmentDescriptor.stencilClearValue = params.clearStencil;
-                mDepthStencilAttachmentDescriptor.stencilReadOnly = (params.readOnlyDepthStencil & RenderPassParams::READONLY_STENCIL) > 0;
-            } else {
-                mDepthStencilAttachmentDescriptor.stencilLoadOp = wgpu::LoadOp::Undefined;
-                mDepthStencilAttachmentDescriptor.stencilStoreOp = wgpu::StoreOp::Undefined;
-                mDepthStencilAttachmentDescriptor.stencilReadOnly = true;
-            }
-            mHasDepthStencilAttachment = true;
-        }
-    }
-
-    descriptor.colorAttachmentCount = mColorAttachmentDescriptors.size();
-    descriptor.colorAttachments = mColorAttachmentDescriptors.data();
-    descriptor.depthStencilAttachment = mHasDepthStencilAttachment ? &mDepthStencilAttachmentDescriptor : nullptr;
-    // descriptor.sampleCount was removed from the core spec. If your webgpu.h still has it,
-    // and your Dawn version expects it, you might need to set it here based on this->samples.
-    // e.g., descriptor.sampleCount = this->samples;
-}
-
-math::uint2 WGPURenderTarget::getAttachmentSize() const noexcept {
-    if (!defaultRenderTarget) {
-        return {width, height};
-    }
-    // For default RT, size is dynamic and usually obtained from the swapchain.
-    // The caller (WebGPUDriver::beginRenderPass) should know the current swapchain size.
-    return {0,0};
+    return texture.CreateView(&desc);
 }
 
 }// namespace filament::backend

filament/backend/src/webgpu/WebGPUHandles.h

@@ -27,7 +27,6 @@
 
 #include <webgpu/webgpu_cpp.h>
 
-#include <array>
 #include <cstdint>
 #include <vector>
 
@@ -43,6 +42,7 @@ public:
     std::vector<wgpu::ConstantEntry> constants;
 };
 
+struct WGPUBufferObject;
 
 // VertexBufferInfo contains layout info for Vertex Buffer based on WebGPU structs. In WebGPU each
 // VertexBufferLayout is associated with a single vertex buffer. So number of mVertexBufferLayout
@@ -52,40 +52,30 @@ class WGPUVertexBufferInfo : public HwVertexBufferInfo {
 public:
     WGPUVertexBufferInfo(uint8_t bufferCount, uint8_t attributeCount,
             AttributeArray const& attributes);
-
-    // Returns the WebGPU native vertex buffer layouts
-    inline wgpu::VertexBufferLayout const* getWebGPULayouts() const {
-        return mActualWebGPULayouts.data();
+    inline  wgpu::VertexBufferLayout const* getVertexBufferLayout() const {
+        return mVertexBufferLayout.data();
     }
 
-    // Returns the count of WebGPU native vertex buffer layouts
-    inline uint32_t getWebGPULayoutCount() const {
-        return mActualWebGPULayouts.size();
+    inline uint32_t getVertexBufferLayoutSize() const {
+        return mVertexBufferLayout.size();
     }
 
-    // Returns the Filament buffer index for a given WebGPU layout slot
-    inline uint8_t getFilamentBufferIndexForSlot(uint32_t webgpuSlotIndex) const {
-        assert_invariant(webgpuSlotIndex < mSlotMappings.size());
-        return mSlotMappings[webgpuSlotIndex].filamentBufferIndex;
+    inline wgpu::VertexAttribute const* getVertexAttributeForIndex(uint32_t index) const {
+        assert_invariant(index < mAttributes.size());
+        return mAttributes[index].data();
+    }
+
+    inline uint32_t getVertexAttributeSize(uint32_t index) const {
+        assert_invariant(index < mAttributes.size());
+        return mAttributes[index].size();
     }
 
 private:
-    // Stores the final WebGPU vertex buffer layouts
-    std::vector<wgpu::VertexBufferLayout> mActualWebGPULayouts;
-    // Stores attributes per WebGPU layout, parallel to mActualWebGPULayouts.
-    // Each wgpu::VertexBufferLayout in mActualWebGPULayouts will point to its attributes here.
-    std::vector<std::vector<wgpu::VertexAttribute>> mActualWebGPUAttributes;
-
-    struct SlotMapping {
-        uint8_t filamentBufferIndex; // Original Filament buffer index for this WebGPU slot
-    };
-    // Maps a WebGPU slot index to its original Filament buffer index
-    std::vector<SlotMapping> mSlotMappings;
-
-    // Remove or comment out old members if they were similarly named:
-    // std::vector<wgpu::VertexBufferLayout> mVertexBufferLayout {}; // OLD
-    // std::vector<std::vector<wgpu::VertexAttribute>> mAttributes {}; // OLD
+    // TODO: can we do better in terms on heap management.
+    std::vector<wgpu::VertexBufferLayout> mVertexBufferLayout {};
+    std::vector<std::vector<wgpu::VertexAttribute>> mAttributes {};
 };
+
 struct WGPUVertexBuffer : public HwVertexBuffer {
     WGPUVertexBuffer(wgpu::Device const &device, uint32_t vertexCount, uint32_t bufferCount,
                      Handle<HwVertexBufferInfo> vbih);
@@ -94,179 +84,137 @@ struct WGPUVertexBuffer : public HwVertexBuffer {
     utils::FixedCapacityVector<wgpu::Buffer> buffers;
 };
 
-class WGPUBufferBase {
-public:
-    void createBuffer(wgpu::Device const& device, wgpu::BufferUsage usage, uint32_t size,
-            char const* label);
-    void updateGPUBuffer(BufferDescriptor& bufferDescriptor, uint32_t byteOffset,
-            wgpu::Queue queue);
-    const wgpu::Buffer& getBuffer() const { return buffer; }
-protected:
-    wgpu::Buffer buffer;
-private:
-    // 4 bytes to hold any extra chunk we need.
-    std::array<uint8_t,4> mRemainderChunk;
-};
-
-class WGPUIndexBuffer : public HwIndexBuffer, public WGPUBufferBase {
-public:
+struct WGPUIndexBuffer : public HwIndexBuffer {
     WGPUIndexBuffer(wgpu::Device const &device, uint8_t elementSize,
                     uint32_t indexCount);
+
+    wgpu::Buffer buffer;
     wgpu::IndexFormat indexFormat;
 };
 
-class WGPUBufferObject : public HwBufferObject, public WGPUBufferBase {
-public:
+struct WGPUBufferObject : HwBufferObject {
     WGPUBufferObject(wgpu::Device const &device, BufferObjectBinding bindingType, uint32_t byteCount);
-};
 
+    wgpu::Buffer buffer = nullptr;
+    const BufferObjectBinding bufferObjectBinding;
+};
 class WebGPUDescriptorSetLayout final : public HwDescriptorSetLayout {
 public:
-
-    struct BindGroupEntryInfo final {
-        uint8_t binding = 0;
-        bool hasDynamicOffset = false;
-    };
-
     WebGPUDescriptorSetLayout(DescriptorSetLayout const& layout, wgpu::Device const& device);
     ~WebGPUDescriptorSetLayout();
     [[nodiscard]] const wgpu::BindGroupLayout& getLayout() const { return mLayout; }
-    [[nodiscard]] std::vector<BindGroupEntryInfo> const& getBindGroupEntries() const {
-        return mBindGroupEntries;
-    }
+    [[nodiscard]] uint getLayoutSize() const { return mLayoutSize; }
 
 private:
     // TODO: If this is useful elsewhere, remove it from this class
-    // Convert Filament Shader Stage Flags bitmask to webgpu equivalent
+    // Convert Filament Shader Stage Flags bitmask to webgpu equivilant
     static wgpu::ShaderStage filamentStageToWGPUStage(ShaderStageFlags fFlags);
-    std::vector<BindGroupEntryInfo> mBindGroupEntries;
+    uint mLayoutSize;
     wgpu::BindGroupLayout mLayout;
 };
 
 class WebGPUDescriptorSet final : public HwDescriptorSet {
 public:
-
-    WebGPUDescriptorSet(wgpu::BindGroupLayout const& layout,
-            std::vector<WebGPUDescriptorSetLayout::BindGroupEntryInfo> const& bindGroupEntries);
+    WebGPUDescriptorSet(const wgpu::BindGroupLayout& layout, uint layoutSize);
     ~WebGPUDescriptorSet();
 
-    wgpu::BindGroup lockAndReturn(wgpu::Device const&);
-    void addEntry(unsigned int index, wgpu::BindGroupEntry&& entry);
+    wgpu::BindGroup lockAndReturn(wgpu::Device const& device);
+    void addEntry(uint index, wgpu::BindGroupEntry&& entry);
     [[nodiscard]] bool getIsLocked() const { return mBindGroup != nullptr; }
-    [[nodiscard]] size_t countEntitiesWithDynamicOffsets() const;
 
 private:
-    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> mEntries;
-    const size_t mEntriesWithDynamicOffsetsCount;
-    wgpu::BindGroup mBindGroup = nullptr;
+    // 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;
 };
 
 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 const& device) noexcept;
+            wgpu::Device device) noexcept;
 
     WGPUTexture(WGPUTexture* src, uint8_t baseLevel, uint8_t levelCount) noexcept;
-    wgpu::TextureAspect getAspect() const { return mAspect; }
-    size_t getBlockWidth() const { return mBlockWidth; }
-    size_t getBlockHeight() const { return mBlockHeight; }
 
-    [[nodiscard]] const wgpu::Texture& getTexture() const { return mTexture; }
-    [[nodiscard]] const wgpu::TextureView& getTexView() const { return mTexView; }
+    const wgpu::Texture& getTexture() const { return texture; }
+    const wgpu::TextureView& getTexView() const { return texView; }
 
-    static wgpu::TextureFormat fToWGPUTextureFormat(
-            filament::backend::TextureFormat const& fFormat);
-    static wgpu::TextureAspect fToWGPUTextureViewAspect(
-            filament::backend::TextureUsage const& fUsage,
-            filament::backend::TextureFormat const& fFormat);
+    // 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,
-            SamplerType target);
+    wgpu::TextureView makeTextureView(const uint8_t& baseLevel, const uint8_t& levelCount);
     // CreateTextureR has info for a texture and sampler. Texture Views are needed for binding,
     // along with a sampler Current plan: Inherit the sampler and Texture to always exist (It is a
     // ref counted pointer) when making views. View is optional
-    wgpu::Texture mTexture = nullptr;
-    wgpu::TextureUsage mUsage = wgpu::TextureUsage::None;
-    wgpu::TextureFormat mFormat = wgpu::TextureFormat::Undefined;
-    wgpu::TextureAspect mAspect = wgpu::TextureAspect::Undefined;
-    uint32_t mArrayLayerCount = 1;
-    wgpu::TextureView mTexView = nullptr;
-    wgpu::TextureUsage fToWGPUTextureUsage(filament::backend::TextureUsage const& fUsage);
-    size_t mBlockWidth;
-    size_t mBlockHeight;
+    wgpu::Texture texture = nullptr;
+    wgpu::TextureView texView = 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 Attachment {
+    public:
+        friend struct WGPURenderTarget;
 
+        Attachment() = default;
+        Attachment(WGPUTexture* gpuTexture, uint8_t level = 0, uint16_t layer = 0)
+            : level(level),
+              layer(layer),
+              texture(gpuTexture->getTexture()),
+              mWGPUTexture(gpuTexture) {}
 
-class WGPURenderTarget : public HwRenderTarget {
-public:
-    using Attachment = TargetBufferInfo; // Using TargetBufferInfo directly for attachments
+        uint8_t level = 0;
+        uint16_t layer = 0;
+
+    private:
+        wgpu::Texture texture = nullptr;
+        WGPUTexture* mWGPUTexture = nullptr;
+    };
 
     WGPURenderTarget(uint32_t width, uint32_t height, uint8_t samples,
-            const MRT& colorAttachments,
-            const Attachment& depthAttachment,
-            const Attachment& stencilAttachment);
-
-    // Default constructor for the default render target
+            Attachment colorAttachments[MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT]);
     WGPURenderTarget()
         : HwRenderTarget(0, 0),
-          defaultRenderTarget(true),
-          samples(1) {}
+          defaultRenderTarget(true) {}
 
-    // Updated signature: takes resolved views for custom RTs, and default views for default RT
-    void setUpRenderPassAttachments(
-            wgpu::RenderPassDescriptor& descriptor,
-            RenderPassParams const& params,
-            // For default render target:
-            wgpu::TextureView const& defaultColorTextureView,
-            wgpu::TextureView const& defaultDepthStencilTextureView,
-            // For custom render targets:
-            wgpu::TextureView const* customColorTextureViews, // Array of views
-            uint32_t customColorTextureViewCount,
-            wgpu::TextureView const& customDepthTextureView,
-            wgpu::TextureView const& customStencilTextureView);
+    void setUpRenderPassAttachments(wgpu::RenderPassDescriptor* descriptor,
+            const RenderPassParams& params);
 
-
-    math::uint2 getAttachmentSize() const noexcept;
+    math::uint2 getAttachmentSize() noexcept;
 
     bool isDefaultRenderTarget() const { return defaultRenderTarget; }
     uint8_t getSamples() const { return samples; }
 
-    // Accessors for the driver to get stored attachment info
-    const MRT& getColorAttachmentInfos() const { return mColorAttachments; }
-    const Attachment& getDepthAttachmentInfo() const { return mDepthAttachment; }
-    const Attachment& getStencilAttachmentInfo() const { return mStencilAttachment; }
-
-    // Static helpers for load/store operations
-    static wgpu::LoadOp getLoadOperation(const RenderPassParams& params, TargetBufferFlags buffer);
-    static wgpu::StoreOp getStoreOperation(const RenderPassParams& params, TargetBufferFlags buffer);
+    Attachment getDrawColorAttachment(size_t index);
+    Attachment getReadColorAttachment(size_t index);
 
 private:
-    // Helper to map MRT index to TargetBufferFlags
-    static TargetBufferFlags getTargetBufferFlagsAt(int mrtIndex);
+    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;
 
-    MRT mColorAttachments{};
-    Attachment mDepthAttachment{};
-    Attachment mStencilAttachment{};
-
-    // Cached descriptors for the render pass
-    std::vector<wgpu::RenderPassColorAttachment> mColorAttachmentDescriptors;
-    wgpu::RenderPassDepthStencilAttachment mDepthStencilAttachmentDescriptor{};
-    bool mHasDepthStencilAttachment = false;
+    Attachment color[MRT::MAX_SUPPORTED_RENDER_TARGET_COUNT] = {};
+    math::uint2 attachmentSize = {};
 };
+
 }// namespace filament::backend
 #endif// TNT_FILAMENT_BACKEND_WEBGPUHANDLES_H

filament/backend/src/webgpu/WebGPUPipelineCreation.cpp

@@ -191,8 +191,8 @@ wgpu::RenderPipeline createWebGPURenderPipeline(wgpu::Device const& device,
             .entryPoint = "main",
             .constantCount = program.constants.size(),
             .constants = program.constants.data(),
-            .bufferCount = vertexBufferInfo.getWebGPULayoutCount(),
-            .buffers = vertexBufferInfo.getWebGPULayouts()
+            .bufferCount = vertexBufferInfo.getVertexBufferLayoutSize(),
+            .buffers = vertexBufferInfo.getVertexBufferLayout()
         },
         .primitive = {
             .topology = toWebGPU(primitiveType),
@@ -235,7 +235,6 @@ 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];