Update Gitignore to ignore generated files.

.clang-format

@@ -57,7 +57,7 @@ SpaceBeforeInheritanceColon: true
 SpaceBeforeParens: ControlStatements
 SpaceBeforeRangeBasedForLoopColon: false
 SpaceInEmptyParentheses: false
-SpacesBeforeTrailingComments: 1
+SpacesBeforeTrailingComments: 0
 SpacesInAngles: false
 SpacesInCStyleCastParentheses: false
 SpacesInContainerLiterals: false

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

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

.github/actions/get-commit-msg/action.yml

@@ -1,45 +0,0 @@
-name: 'Get commit message'
-outputs:
-  msg:
-    value: ${{ steps.action_output.outputs.msg }}
-runs:
-  using: "composite"
-  steps:
-    - name: Find commit message (on push)
-      if: github.event_name == 'push'
-      shell: bash
-      run: |
-        AUTHOR_NAME="${{ github.event.head_commit.author.name }}"
-        AUTHOR_EMAIL="${{ github.event.head_commit.author.email }}"
-        TSTAMP="${{ github.event.head_commit.timestamp }}"
-        echo "commit ${{ github.event.head_commit.id }}" >> /tmp/commit_msg.txt
-        echo "Author: ${AUTHOR_NAME}<${AUTHOR_EMAIL}>" >> /tmp/commit_msg.txt
-        echo "Date: ${TSTAMP}" >> /tmp/commit_msg.txt
-        echo "" >> /tmp/commit_msg.txt
-        echo "${{ github.event.head_commit.message }}" >> /tmp/commit_msg.txt
-    - name: Find commit message (PR)
-      shell: bash
-      id: checkout_code
-      if: github.event_name == 'pull_request'
-      run: |
-        echo "+++++ head commit message +++++"
-        echo "$(git log -1 --no-merges)"
-        echo "+++++++++++++++++++++++++++++++"
-        echo "hash=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
-        git checkout ${{ github.event.pull_request.head.sha }}
-        echo "$(git log -1 --no-merges)" >> /tmp/commit_msg.txt
-    - shell: bash
-      id: action_output
-      run: |
-        DELIMITER="EOF_FILE_CONTENT_$(date +%s)" # Using timestamp to make it more unique
-        echo "msg<<$DELIMITER" >> "$GITHUB_OUTPUT"
-        cat /tmp/commit_msg.txt >> "$GITHUB_OUTPUT"
-        echo "$DELIMITER" >> "$GITHUB_OUTPUT"
-        echo "----- got commit message ---"
-        cat /tmp/commit_msg.txt
-        echo "----------------------------"
-    - name: Cleanup Find commit message (PR)
-      shell: bash
-      if: github.event_name == 'pull_request'
-      run: |
-        git checkout ${{ steps.checkout_code.outputs.hash }}

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

@@ -1,38 +0,0 @@
-name: 'Linux Preqrequisites'
-runs:
-  using: "composite"
-  steps:
-    - uses: ./.github/actions/dep-versions
-    - name: Install Linux Prerequisites
-      shell: bash
-      run: |
-        set -xe
-        # See https://askubuntu.com/questions/272248/processing-triggers-for-man-db/1476024#1476024
-        echo "set man-db/auto-update false" | sudo debconf-communicate
-        sudo dpkg-reconfigure man-db
-
-        # Install ninja
-        source ./build/common/get-ninja.sh
-
-        # Install CMake
-        mkdir -p cmake
-        cd cmake
-
-        sudo wget https://github.com/Kitware/CMake/releases/download/v$GITHUB_CMAKE_VERSION/cmake-$GITHUB_CMAKE_VERSION-Linux-x86_64.sh
-        sudo chmod +x ./cmake-$GITHUB_CMAKE_VERSION-Linux-x86_64.sh
-        sudo ./cmake-$GITHUB_CMAKE_VERSION-Linux-x86_64.sh --skip-license > /dev/null
-        sudo update-alternatives --install /usr/bin/cmake cmake $(pwd)/bin/cmake 1000 --force
-
-        cd ..
-
-        sudo wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add -
-        sudo apt-get update
-        sudo apt-get install clang-$GITHUB_CLANG_VERSION libc++-$GITHUB_CLANG_VERSION-dev libc++abi-$GITHUB_CLANG_VERSION-dev
-        sudo apt-get install mesa-common-dev libxi-dev libxxf86vm-dev
-
-        # For dawn
-        sudo apt-get install libxrandr-dev libxinerama-dev libxcursor-dev libxi-dev libx11-xcb-dev
-
-        sudo update-alternatives --install /usr/bin/cc cc /usr/bin/clang-${GITHUB_CLANG_VERSION} 100
-        sudo update-alternatives --install /usr/bin/c++ c++ /usr/bin/clang++-${GITHUB_CLANG_VERSION} 100
-        set +xe

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

@@ -1,23 +0,0 @@
-name: 'Mac Preqrequisites'
-runs:
-  using: "composite"
-  steps:
-    - uses: ./.github/actions/dep-versions
-    - name: Set up Homebrew
-      id: set-up-homebrew
-      uses: Homebrew/actions/setup-homebrew@master
-    - name: Set up Python
-      uses: actions/setup-python@v5
-      with:
-        python-version: '3.x'
-    - name: Cache Brew
-      id: brew-cache
-      uses: actions/cache@v4 # Use a specific version
-      with:
-        path: $HOME/Library/Caches/Homebrew
-        key: ${{ runner.os }}-brew-20250424
-    - name: Install Mac Prerequisites
-      shell: bash
-      run: |
-        # Install ninja
-        source ./build/common/get-ninja.sh

.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/android-continuous.yml

@@ -16,9 +16,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/linux-prereq
       - name: Run Android Continuous
         uses: ./.github/actions/android-continuous
         with:

.github/workflows/ios-continuous.yml

@@ -14,9 +14,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/mac-prereq
       - name: Run build script
         run: |
           cd build/ios && printf "y" | ./build.sh continuous

.github/workflows/linux-continuous.yml

@@ -14,9 +14,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/linux-prereq
       - name: Run build script
         run: |
           cd build/linux && printf "y" | ./build.sh continuous

.github/workflows/mac-continuous.yml

@@ -14,9 +14,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/mac-prereq
       - name: Run build script
         run: |
           cd build/mac && printf "y" | ./build.sh continuous
@@ -26,4 +23,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/postsubmit.yml

@@ -1,35 +0,0 @@
-name: 'Post-submit tasks'
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  update-renderdiff-goldens:
-    name: update-renderdiff-goldens
-    runs-on: 'ubuntu-24.04-4core'
-    steps:
-      - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/linux-prereq
-      - id: get_commit_msg
-        uses: ./.github/actions/get-commit-msg
-      - name: Prerequisites
-        run: pip install tifffile numpy
-      - name: Run update script
-        env:
-          GH_TOKEN: ${{ secrets.FILAMENTBOT_TOKEN }}
-        run: |
-          GOLDEN_BRANCH=$(echo "${{ steps.get_commit_msg.outputs.msg }}" | python3 test/renderdiff/src/commit_msg.py)
-          COMMIT_HASH=$(echo "${{ steps.get_commit_msg.outputs.msg }}" | head -n 1 | tr -d 'commit ')
-          if [[ "${GOLDEN_BRANCH}" != "main" ]]; then
-              git config --global user.email "filament.bot@gmail.com"
-              git config --global user.name "Filament Bot"
-              git config --global credential.helper cache
-              echo "branch==${GOLDEN_BRANCH}"
-              echo "hash==${COMMIT_HASH}"
-              python3 test/renderdiff/src/update_golden.py --branch=${GOLDEN_BRANCH} \
-                  --merge-to-main --filament-tag=${COMMIT_HASH} --golden-repo-token=${GH_TOKEN}
-          fi

.github/workflows/presubmit.yml

@@ -3,49 +3,38 @@ name: Presubmit
 on:
   push:
     branches:
-      - main
+    - main
   pull_request:
     branches:
-      - main
+    - main
 
 jobs:
-  build-desktop-mac:
+  build-desktop:
-    name: build-mac
+    name: build-desktop
-    runs-on: macos-14-xlarge
+    runs-on: ${{ matrix.os }}
-    steps:
+
-      - uses: actions/checkout@v4.1.6
+    strategy:
-        with:
+      matrix:
-          fetch-depth: 0
+        os: [macos-14-xlarge, ubuntu-22.04-16core]
-      - uses: ./.github/actions/mac-prereq
-      - name: Run build script
-        run: |
-          cd build/mac && printf "y" | ./build.sh presubmit
-      - name: Test material parser
-        run: |
-          out/cmake-release/filament/test/test_material_parser
 
-  build-desktop-linux:
-    name: build-linux
-    runs-on: ubuntu-22.04-16core
     steps:
       - uses: actions/checkout@v4.1.6
         with:
           fetch-depth: 0
-      - uses: ./.github/actions/linux-prereq
       - name: Run build script
         run: |
-          cd build/linux && printf "y" | ./build.sh presubmit
+          WORKFLOW_OS=`echo \`uname\` | sed "s/Darwin/mac/" | tr [:upper:] [:lower:]`
+          cd build/$WORKFLOW_OS && printf "y" | ./build.sh presubmit
       - name: Test material parser
         run: |
           out/cmake-release/filament/test/test_material_parser
 
   build-windows:
     name: build-windows
-    runs-on: windows-2022-32core
+    runs-on: win-2019-16core
+
     steps:
       - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
       - name: Run build script
         run: |
           build\windows\build-github.bat presubmit
@@ -54,11 +43,11 @@ jobs:
   build-android:
     name: build-android
     runs-on: 'ubuntu-24.04-16core'
+
     steps:
       - uses: actions/checkout@v4.1.6
         with:
           fetch-depth: 0
-      - uses: ./.github/actions/linux-prereq
       - uses: actions/setup-java@v3
         with:
           distribution: 'temurin'
@@ -72,11 +61,11 @@ jobs:
   build-ios:
     name: build-iOS
     runs-on: macos-14-xlarge
+
     steps:
       - uses: actions/checkout@v4.1.6
         with:
           fetch-depth: 0
-      - uses: ./.github/actions/mac-prereq
       - name: Run build script
         run: |
           cd build/ios && printf "y" | ./build.sh presubmit
@@ -87,12 +76,9 @@ jobs:
   build-web:
     name: build-web
     runs-on: 'ubuntu-24.04-16core'
+
     steps:
       - uses: actions/checkout@v4.1.6
-        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
@@ -104,70 +90,81 @@ jobs:
       - uses: actions/checkout@v4.1.6
         with:
           fetch-depth: 0
-      - id: get_commit_msg
-        uses: ./.github/actions/get-commit-msg
       - name: Check for manual edits to /docs
         run: |
-          COMMIT_ID=$(echo "${{ steps.get_commit_msg.outputs.msg }}" | head -n 1 | sed "s/commit //g")
+           echo "${{ github.event.pull_request.head.sha }} -- ${{ github.event.pull_request.head.sha }}"
-          bash docs_src/build/presubmit_check.sh ${COMMIT_ID}
+           # disable for now
+           # bash docs_src/build/presubmit_check.sh ${{ github.event.pull_request.head.sha }}
 
   test-renderdiff:
     name: test-renderdiff
     runs-on: macos-14-xlarge
     steps:
       - uses: actions/checkout@v4.1.6
+      - name: Set up Homebrew
+        id: set-up-homebrew
+        uses: Homebrew/actions/setup-homebrew@master
+      - name: Set up Python
+        uses: actions/setup-python@v5
         with:
-          fetch-depth: 0
+          python-version: '3.x'
-      - id: get_commit_msg
-        uses: ./.github/actions/get-commit-msg
-      - uses: ./.github/actions/mac-prereq
       - name: Cache Mesa and deps
-        uses: actions/cache@v4
+        id: mesa-cache
+        uses: actions/cache@v4 # Use a specific version
         with:
-          path: mesa
+          path: |
-          key: ${{ runner.os }}-mesa-deps-2-${{ vars.MESA_VERSION }}
+            $HOME/Library/Caches/Homebrew
-      - name: Prerequisites
+            mesa
+          key: ${{ runner.os }}-mesa-deps-${{ vars.MESA_VERSION }}
+      - name: Get Mesa
+        id: mesa-prereq
+        env:
+          MESA_VERSION: ${{ vars.MESA_VERSION }}
         run: |
-          bash build/common/get-mesa.sh
+          bash test/utils/get_mesa.sh
-          pip install tifffile numpy
       - name: Run Test
         run: |
-          echo "${{ steps.get_commit_msg.outputs.msg }}" | bash test/renderdiff/test.sh
+          bash test/renderdiff/test.sh
       - uses: actions/upload-artifact@v4
         with:
           name: presubmit-renderdiff-result
-          path: ./out/renderdiff
+          path: ./out/renderdiff_tests
 
   validate-wgsl-webgpu:
     name: validate-wgsl-webgpu
     runs-on: 'ubuntu-24.04-8core'
+
     steps:
       - uses: actions/checkout@v4.1.6
-        with:
-          fetch-depth: 0
-      - uses: ./.github/actions/linux-prereq
       - name: Run build script
-        run: ./build.sh -W debug test_filamat filament
+        run: source ./build/linux/ci-common.sh && ./build.sh -W debug test_filamat filament
       - name: Run test
         run: ./out/cmake-debug/libs/filamat/test_filamat --gtest_filter=MaterialCompiler.Wgsl*
 
-  test-code-correctness:
+  code-correcteness:
-    name: test-code-correctness
+    name: code-correctness
     runs-on: 'macos-14-xlarge'
     steps:
       - uses: actions/checkout@v4.1.6
         with:
           fetch-depth: 0
-      - uses: ./.github/actions/mac-prereq
+      - name: Set up Homebrew
-      - name: Install clang-tidy and deps
+        id: set-up-homebrew
+        uses: Homebrew/actions/setup-homebrew@master
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x'
+      - name: Install prerequisites
         run: |
           pip install pyyaml
-          brew install llvm@${GITHUB_LLVM_VERSION}
+          brew install llvm
-          sudo ln -s "$(brew --prefix llvm)@${GITHUB_LLVM_VERSION}/bin/clang-tidy" "/usr/local/bin/clang-tidy"
+          sudo ln -s "$(brew --prefix llvm)/bin/clang-tidy" "/usr/local/bin/clang-tidy"
       - name: Run build script
         # We need to build before clang-tidy can run analysis
         run: |
           # This will build for all three desktop backends on mac
           ./build.sh -p desktop debug gltf_viewer
       - name: Run test
-        run: bash test/code-correctness/test.sh
+        run: |
+          bash test/code-correctness/test.sh

.github/workflows/release.yml

@@ -29,11 +29,15 @@ on:
     types: [created]
 
 jobs:
-  build-linux:
+  build-desktop:
-    name: build-linux
+    name: build-desktop
-    runs-on: ubuntu-22.04-32core
+    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
@@ -45,48 +49,15 @@ jobs:
       - uses: actions/checkout@v4.1.6
         with:
           ref: ${{ steps.git_ref.outputs.ref }}
-      - uses: ./.github/actions/linux-prereq
       - name: Run build script
         env:
           TAG: ${{ steps.git_ref.outputs.tag }}
         run: |
-          cd build/linux && printf "y" | ./build.sh release
+          WORKFLOW_OS=`echo \`uname\` | sed "s/Darwin/mac/" | tr [:upper:] [:lower:]`
+          cd build/$WORKFLOW_OS && printf "y" | ./build.sh release
           cd ../..
-          mv out/filament-release-linux.tgz out/filament-${TAG}-linux.tgz
+          if [ -f out/filament-release-darwin.tgz ]; then mv out/filament-release-darwin.tgz out/filament-${TAG}-mac.tgz; fi;
-      - uses: actions/github-script@v6
+          if [ -f out/filament-release-linux.tgz ]; then mv out/filament-release-linux.tgz out/filament-${TAG}-linux.tgz; fi;
-        env:
-          TAG: ${{ steps.git_ref.outputs.tag }}
-        with:
-          script: |
-            const upload = require('./build/common/upload-release-assets');
-            const { TAG } = process.env;
-            const globber = await glob.create('out/*.tgz');
-            await upload({ github, context }, await globber.glob(), TAG);
-
-  build-mac:
-    name: build-mac
-    runs-on: macos-14-xlarge
-    if: github.event_name == 'release' || github.event.inputs.platform == 'desktop'
-
-    steps:
-      - name: Decide Git ref
-        id: git_ref
-        run: |
-          REF=${RELEASE_TAG:-${GITHUB_REF}}
-          TAG=${REF##*/}
-          echo "ref=${REF}" >> $GITHUB_OUTPUT
-          echo "tag=${TAG}" >> $GITHUB_OUTPUT
-      - uses: actions/checkout@v4.1.6
-        with:
-          ref: ${{ steps.git_ref.outputs.ref }}
-      - uses: ./.github/actions/mac-prereq
-      - name: Run build script
-        env:
-          TAG: ${{ steps.git_ref.outputs.tag }}
-        run: |
-          cd build/mac && printf "y" | ./build.sh release
-          cd ../..
-          mv out/filament-release-darwin.tgz out/filament-${TAG}-mac.tgz
       - uses: actions/github-script@v6
         env:
           TAG: ${{ steps.git_ref.outputs.tag }}
@@ -113,8 +84,6 @@ jobs:
       - uses: actions/checkout@v4.1.6
         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 }}
@@ -152,7 +121,6 @@ jobs:
         with:
           distribution: 'temurin'
           java-version: '17'
-      - uses: ./.github/actions/linux-prereq
       - name: Run build script
         env:
           TAG: ${{ steps.git_ref.outputs.tag }}
@@ -163,9 +131,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 +152,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:
@@ -206,7 +171,6 @@ jobs:
       - uses: actions/checkout@v4.1.6
         with:
           ref: ${{ steps.git_ref.outputs.ref }}
-      - uses: ./.github/actions/mac-prereq
       - name: Run build script
         env:
           TAG: ${{ steps.git_ref.outputs.tag }}
@@ -226,7 +190,7 @@ jobs:
 
   build-windows:
     name: build-windows
-    runs-on: windows-2022-32core
+    runs-on: windows-2019-32core
     if: github.event_name == 'release' || github.event.inputs.platform == 'windows'
 
     steps:

.github/workflows/web-continuous.yml

@@ -14,10 +14,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4.1.6
-        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

.github/workflows/windows-continuous.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   build-windows:
     name: build-windows
-    runs-on: windows-2022-32core
+    runs-on: windows-2019-32core
 
     steps:
       - uses: actions/checkout@v4.1.6

.gitignore

@@ -18,3 +18,18 @@ test*.json
 results
 /compile_commands.json
 /.cache
+build/.cmake/
+build/CMakeCache.txt
+build/CMakeFiles/
+build/Makefile
+build/SPIRV-Tools*
+build/cmake_install.cmake
+build/compile_commands.json
+build/filament/
+build/include/
+build/libs/
+build/mac/ninja
+build/samples/
+build/shaders/
+build/third_party/
+build/tools/

BUILDING.md

@@ -97,10 +97,6 @@ Make sure you've installed the following dependencies:
 - `libxcomposite-dev` (`libXcomposite-devel` on Fedora)
 - `libxxf86vm-dev` (`libXxf86vm-devel` on Fedora)
 
-```shell
-sudo apt install clang-14 libglu1-mesa-dev libc++-14-dev libc++abi-14-dev ninja-build libxi-dev libxcomposite-dev libxxf86vm-dev -y
-```
-
 After dependencies have been installed, we highly recommend using the [easy build](#easy-build)
 script.
 
@@ -367,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

CMakeLists.txt

@@ -49,12 +49,6 @@ option(FILAMENT_SUPPORTS_OSMESA "Enable OSMesa (headless GL context) for Filamen
 
 option(FILAMENT_ENABLE_FGVIEWER "Enable the frame graph viewer" OFF)
 
-option(FILAMENT_USE_ABSEIL_LOGGING "Use Abseil to log, may increase binary size" OFF)
-
-# This is to disable GTAO for the short-term while we investigate a way to better manage size increases.
-# On the regular filament build (where size is of less concern), we enable GTAO by default.
-option(FILAMENT_DISABLE_GTAO "Disable GTAO" OFF)
-
 set(FILAMENT_NDK_VERSION "" CACHE STRING
     "Android NDK version or version prefix to be used when building for Android."
 )
@@ -593,10 +587,6 @@ if (CMAKE_BUILD_TYPE STREQUAL "Debug" AND NOT FILAMENT_BACKEND_DEBUG_FLAG STREQU
     unset(FILAMENT_BACKEND_DEBUG_FLAG)
 endif()
 
-if (FILAMENT_USE_ABSEIL_LOGGING)
-    add_definitions(-DFILAMENT_USE_ABSEIL_LOGGING)
-endif()
-
 # ==================================================================================================
 # Material compilation flags
 # ==================================================================================================

NEW_RELEASE_NOTES.md

@@ -1,7 +1,7 @@
 # Filament Release Notes log
 
 **If you are merging a PR into main**: please add the release note below, under the *Release notes
-We are chaning the way Vulkan buffers are handled. We need to switch over to a managed (or view-based) model where the data stored inside the object is a proxy to a Vulkan object that can dynamically be swapped around.
+for next branch cut* header.
 
 **If you are cherry-picking a commit into an rc/ branch**: add the release note under the
 appropriate header in [RELEASE_NOTES.md](./RELEASE_NOTES.md).

README.md

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

RELEASE_NOTES.md

@@ -7,41 +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.62.1
-
-- Add new shader define `VARIANT_DEPTH`, defined when a material is compiled for depth variants
-  (e.g., shadows) [**Requires recompiling materials**]
-
-## v1.62.0
-
-- Add new `unfilterable` field to Filament Material's `sampler` [⚠️ **New Material Version**]
-
-## v1.61.2
-
-- samples: samples now have a CLI to select backend api
-
-## v1.61.1
-
-
-## 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/CMakeLists.txt

@@ -59,10 +59,6 @@ add_library(smol-v STATIC IMPORTED)
 set_target_properties(smol-v PROPERTIES IMPORTED_LOCATION
         ${FILAMENT_DIR}/lib/${ANDROID_ABI}/libsmol-v.a)
 
-add_library(abseil STATIC IMPORTED)
-set_target_properties(abseil PROPERTIES IMPORTED_LOCATION
-        ${FILAMENT_DIR}/lib/${ANDROID_ABI}/libabseil.a)
-
 if (FILAMENT_ENABLE_FGVIEWER)
     add_library(fgviewer STATIC IMPORTED)
     set_target_properties(fgviewer PROPERTIES IMPORTED_LOCATION
@@ -132,7 +128,6 @@ target_link_libraries(filament-jni
     PRIVATE jnigraphics
     PRIVATE utils
     PRIVATE perfetto
-    PRIVATE abseil
 
     # libgeometry is PUBLIC because gltfio uses it.
     PUBLIC geometry

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

@@ -556,8 +556,7 @@ extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nSetBu
         jlong resourceAllocatorCacheSizeMB, jlong resourceAllocatorCacheMaxAge,
         jboolean disableHandleUseAfterFreeCheck,
         jint preferredShaderLanguage,
-        jboolean forceGLES2Context, jboolean assertNativeWindowIsValid,
+        jboolean forceGLES2Context, jboolean assertNativeWindowIsValid) {
-        jint gpuContextPriority) {
     Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
     Engine::Config config = {
             .commandBufferSizeMB = (uint32_t) commandBufferSizeMB,
@@ -575,7 +574,6 @@ extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nSetBu
             .preferredShaderLanguage = (Engine::Config::ShaderLanguage) preferredShaderLanguage,
             .forceGLES2Context = (bool) forceGLES2Context,
             .assertNativeWindowIsValid = (bool) assertNativeWindowIsValid,
-            .gpuContextPriority = (Engine::GpuContextPriority) gpuContextPriority,
     };
     builder->config(&config);
 }

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

@@ -175,36 +175,6 @@ public class Engine {
         MULTIVIEW,
     };
 
-    /**
-     * This controls the priority level for GPU work scheduling, which helps prioritize the
-     * submitted GPU work and enables preemption.
-     */
-    public enum GpuContextPriority {
-        /**
-         * Backend default GPU context priority (typically MEDIUM)
-         */
-        DEFAULT,
-        /**
-         * For non-interactive, deferrable workloads. This should not interfere with standard
-         * applications.
-         */
-        LOW,
-        /**
-         * The default priority level for standard applications.
-         */
-        MEDIUM,
-        /**
-         * For high-priority, latency-sensitive workloads that are more important than standard
-         * applications.
-         */
-        HIGH,
-        /**
-         * The highest priority, intended for system-critical, real-time applications where missing
-         * deadlines is unacceptable (e.g., VR/AR compositors or other system-critical tasks).
-         */
-        REALTIME,
-    };
-
     /**
      * Constructs <code>Engine</code> objects using a builder pattern.
      */
@@ -263,8 +233,7 @@ public class Engine {
                     config.resourceAllocatorCacheSizeMB, config.resourceAllocatorCacheMaxAge,
                     config.disableHandleUseAfterFreeCheck,
                     config.preferredShaderLanguage.ordinal(),
-                    config.forceGLES2Context, config.assertNativeWindowIsValid,
+                    config.forceGLES2Context, config.assertNativeWindowIsValid);
-                    config.gpuContextPriority.ordinal());
             return this;
         }
 
@@ -520,11 +489,6 @@ public class Engine {
          * @Deprecated use "backend.opengl.assert_native_window_is_valid" feature flag instead
          */
         public boolean assertNativeWindowIsValid = false;
-
-        /**
-         * GPU context priority level. Controls GPU work scheduling and preemption.
-         */
-        public GpuContextPriority gpuContextPriority = GpuContextPriority.DEFAULT;
     }
 
     private Engine(long nativeEngine, Config config) {
@@ -1528,8 +1492,7 @@ public class Engine {
             long resourceAllocatorCacheSizeMB, long resourceAllocatorCacheMaxAge,
             boolean disableHandleUseAfterFreeCheck,
             int preferredShaderLanguage,
-            boolean forceGLES2Context, boolean assertNativeWindowIsValid,
+            boolean forceGLES2Context, boolean assertNativeWindowIsValid);
-            int gpuContextPriority);
     private static native void nSetBuilderFeatureLevel(long nativeBuilder, int ordinal);
     private static native void nSetBuilderSharedContext(long nativeBuilder, long sharedContext);
     private static native void nSetBuilderPaused(long nativeBuilder, boolean paused);

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.
+         * Self-occlusion bias in meters. Use to avoid self-occlusion. Between 0 and a few mm.
-         * Between 0 and a few mm. No effect when aoType set to GTAO
          */
         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.62.0
+VERSION_NAME=1.59.3
 
 POM_DESCRIPTION=Real-time physically based rendering engine for Android.
 

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,7 +1,6 @@
+#Wed Nov 17 10:40:18 PST 2021
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-bin.zip
-networkTimeout=10000
-validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/gradlew

@@ -1,7 +1,7 @@
-#!/bin/sh
+#!/usr/bin/env sh
 
 #
-# Copyright © 2015-2021 the original authors.
+# Copyright 2015 the original author or authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,99 +17,67 @@
 #
 
 ##############################################################################
-#
+##
-#   Gradle start up script for POSIX generated by Gradle.
+##  Gradle start up script for UN*X
-#
+##
-#   Important for running:
-#
-#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
-#       noncompliant, but you have some other compliant shell such as ksh or
-#       bash, then to run this script, type that shell name before the whole
-#       command line, like:
-#
-#           ksh Gradle
-#
-#       Busybox and similar reduced shells will NOT work, because this script
-#       requires all of these POSIX shell features:
-#         * functions;
-#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
-#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
-#         * compound commands having a testable exit status, especially «case»;
-#         * various built-in commands including «command», «set», and «ulimit».
-#
-#   Important for patching:
-#
-#   (2) This script targets any POSIX shell, so it avoids extensions provided
-#       by Bash, Ksh, etc; in particular arrays are avoided.
-#
-#       The "traditional" practice of packing multiple parameters into a
-#       space-separated string is a well documented source of bugs and security
-#       problems, so this is (mostly) avoided, by progressively accumulating
-#       options in "$@", and eventually passing that to Java.
-#
-#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
-#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
-#       see the in-line comments for details.
-#
-#       There are tweaks for specific operating systems such as AIX, CygWin,
-#       Darwin, MinGW, and NonStop.
-#
-#   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
-#       within the Gradle project.
-#
-#       You can find Gradle at https://github.com/gradle/gradle/.
-#
 ##############################################################################
 
 # Attempt to set APP_HOME
-
 # Resolve links: $0 may be a link
-app_path=$0
+PRG="$0"
-
+# Need this for relative symlinks.
-# Need this for daisy-chained symlinks.
+while [ -h "$PRG" ] ; do
-while
+    ls=`ls -ld "$PRG"`
-    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    link=`expr "$ls" : '.*-> \(.*\)$'`
-    [ -h "$app_path" ]
+    if expr "$link" : '/.*' > /dev/null; then
-do
+        PRG="$link"
-    ls=$( ls -ld "$app_path" )
+    else
-    link=${ls#*' -> '}
+        PRG=`dirname "$PRG"`"/$link"
-    case $link in             #(
+    fi
-      /*)   app_path=$link ;; #(
-      *)    app_path=$APP_HOME$link ;;
-    esac
 done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
 
-# This is normally unused
+APP_NAME="Gradle"
-# shellcheck disable=SC2034
+APP_BASE_NAME=`basename "$0"`
-APP_BASE_NAME=${0##*/}
+
-# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD=maximum
+MAX_FD="maximum"
 
 warn () {
     echo "$*"
-} >&2
+}
 
 die () {
     echo
     echo "$*"
     echo
     exit 1
-} >&2
+}
 
 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
-case "$( uname )" in                #(
+case "`uname`" in
-  CYGWIN* )         cygwin=true  ;; #(
+  CYGWIN* )
-  Darwin* )         darwin=true  ;; #(
+    cygwin=true
-  MSYS* | MINGW* )  msys=true    ;; #(
+    ;;
-  NONSTOP* )        nonstop=true ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
 esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
@@ -119,9 +87,9 @@ CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
         # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD=$JAVA_HOME/jre/sh/java
+        JAVACMD="$JAVA_HOME/jre/sh/java"
     else
-        JAVACMD=$JAVA_HOME/bin/java
+        JAVACMD="$JAVA_HOME/bin/java"
     fi
     if [ ! -x "$JAVACMD" ] ; then
         die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -130,120 +98,88 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
     fi
 else
-    JAVACMD=java
+    JAVACMD="java"
-    if ! command -v java >/dev/null 2>&1
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-    then
-        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
-    fi
 fi
 
 # Increase the maximum file descriptors if we can.
-if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    case $MAX_FD in #(
+    MAX_FD_LIMIT=`ulimit -H -n`
-      max*)
+    if [ $? -eq 0 ] ; then
-        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-        # shellcheck disable=SC2039,SC3045
+            MAX_FD="$MAX_FD_LIMIT"
-        MAX_FD=$( ulimit -H -n ) ||
+        fi
-            warn "Could not query maximum file descriptor limit"
+        ulimit -n $MAX_FD
-    esac
+        if [ $? -ne 0 ] ; then
-    case $MAX_FD in  #(
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
-      '' | soft) :;; #(
+        fi
-      *)
+    else
-        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-        # shellcheck disable=SC2039,SC3045
+    fi
-        ulimit -n "$MAX_FD" ||
-            warn "Could not set maximum file descriptor limit to $MAX_FD"
-    esac
 fi
 
-# Collect all arguments for the java command, stacking in reverse order:
+# For Darwin, add options to specify how the application appears in the dock
-#   * args from the command line
+if $darwin; then
-#   * the main class name
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-#   * -classpath
+fi
-#   * -D...appname settings
-#   * --module-path (only if needed)
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
 
 # For Cygwin or MSYS, switch paths to Windows format before running java
-if "$cygwin" || "$msys" ; then
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
 
-    JAVACMD=$( cygpath --unix "$JAVACMD" )
+    JAVACMD=`cygpath --unix "$JAVACMD"`
 
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    # We build the pattern for arguments to be converted via cygpath
-    for arg do
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-        if
+    SEP=""
-            case $arg in                                #(
+    for dir in $ROOTDIRSRAW ; do
-              -*)   false ;;                            # don't mess with options #(
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
-              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+        SEP="|"
-                    [ -e "$t" ] ;;                      #(
-              *)    false ;;
-            esac
-        then
-            arg=$( cygpath --path --ignore --mixed "$arg" )
-        fi
-        # Roll the args list around exactly as many times as the number of
-        # args, so each arg winds up back in the position where it started, but
-        # possibly modified.
-        #
-        # NB: a `for` loop captures its iteration list before it begins, so
-        # changing the positional parameters here affects neither the number of
-        # iterations, nor the values presented in `arg`.
-        shift                   # remove old arg
-        set -- "$@" "$arg"      # push replacement arg
     done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
 fi
 
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
 
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+# Collect all arguments for the java command, following the shell quoting and substitution rules
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-
-# Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
-#     and any embedded shellness will be escaped.
-#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
-#     treated as '${Hostname}' itself on the command line.
-
-set -- \
-        "-Dorg.gradle.appname=$APP_BASE_NAME" \
-        -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
-        "$@"
-
-# Stop when "xargs" is not available.
-if ! command -v xargs >/dev/null 2>&1
-then
-    die "xargs is not available"
-fi
-
-# Use "xargs" to parse quoted args.
-#
-# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
-#
-# In Bash we could simply go:
-#
-#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
-#   set -- "${ARGS[@]}" "$@"
-#
-# but POSIX shell has neither arrays nor command substitution, so instead we
-# post-process each arg (as a line of input to sed) to backslash-escape any
-# character that might be a shell metacharacter, then use eval to reverse
-# that process (while maintaining the separation between arguments), and wrap
-# the whole thing up as a single "set" statement.
-#
-# This will of course break if any of these variables contains a newline or
-# an unmatched quote.
-#
-
-eval "set -- $(
-        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
-        xargs -n1 |
-        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
-        tr '\n' ' '
-    )" '"$@"'
 
 exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -14,7 +14,7 @@
 @rem limitations under the License.
 @rem
 
-@if "%DEBUG%"=="" @echo off
+@if "%DEBUG%" == "" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,8 +25,7 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%"=="" set DIRNAME=.
+if "%DIRNAME%" == "" set DIRNAME=.
-@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -41,13 +40,13 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if %ERRORLEVEL% equ 0 goto execute
+if "%ERRORLEVEL%" == "0" goto execute
 
-echo. 1>&2
+echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo. 1>&2
+echo.
-echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation. 1>&2
+echo location of your Java installation.
 
 goto fail
 
@@ -57,11 +56,11 @@ set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
 if exist "%JAVA_EXE%" goto execute
 
-echo. 1>&2
+echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo. 1>&2
+echo.
-echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation. 1>&2
+echo location of your Java installation.
 
 goto fail
 
@@ -76,15 +75,13 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if %ERRORLEVEL% equ 0 goto mainEnd
+if "%ERRORLEVEL%"=="0" goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-set EXIT_CODE=%ERRORLEVEL%
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-if %EXIT_CODE% equ 0 set EXIT_CODE=1
+exit /b 1
-if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
-exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal

android/samples/sample-gltf-viewer/src/main/java/com/google/android/filament/gltf/MainActivity.kt

@@ -18,7 +18,6 @@ package com.google.android.filament.gltf
 
 import android.annotation.SuppressLint
 import android.app.Activity
-import android.content.Intent
 import android.os.Bundle
 import android.util.Log
 import android.view.*
@@ -51,7 +50,6 @@ class MainActivity : Activity() {
         // Load the library for the utility layer, which in turn loads gltfio and the Filament core.
         init { Utils.init() }
         private const val TAG = "gltf-viewer"
-        private const val STATIC_MODEL_TAG = "use-static-model"
     }
 
     private lateinit var surfaceView: SurfaceView
@@ -71,7 +69,6 @@ class MainActivity : Activity() {
     private var loadStartTime = 0L
     private var loadStartFence: Fence? = null
     private val viewerContent = AutomationEngine.ViewerContent()
-    private var useStaticModel = false
 
     @SuppressLint("ClickableViewAccessibility")
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -86,12 +83,6 @@ class MainActivity : Activity() {
         doubleTapDetector = GestureDetector(applicationContext, doubleTapListener)
         singleTapDetector = GestureDetector(applicationContext, singleTapListener)
 
-        val intent: Intent = intent
-        val bundle: Bundle? = intent.extras
-        bundle?.let {
-            useStaticModel = it.getBoolean(STATIC_MODEL_TAG, false)
-        }
-
         modelViewer = ModelViewer(surfaceView)
         viewerContent.view = modelViewer.view
         viewerContent.sunlight = modelViewer.light
@@ -150,16 +141,7 @@ class MainActivity : Activity() {
     }
 
     private fun createDefaultRenderables() {
-        // Sometimes it's useful to set to the default model to something static. You can enable
+        val buffer = assets.open("models/scene.gltf").use { input ->
-        // the static model by launching the app from adb, as in
-        // `adb shell am start -n com.google.android.filament.gltf/.MainActivity --ez "use-static-model" true`
-        val modelPath = if (useStaticModel) {
-            "models/helmet.glb"
-        } else {
-            "models/scene.gltf"
-        }
-
-        val buffer = assets.open(modelPath).use { input ->
             val bytes = ByteArray(input.available())
             input.read(bytes)
             ByteBuffer.wrap(bytes)

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,22 +30,30 @@ set -x
 UNAME=`echo $(uname)`
 LC_UNAME=`echo $UNAME | tr '[:upper:]' '[:lower:]'`
 
+FILAMENT_ANDROID_CI_BUILD=true
+
+# build-common.sh will generate the following variables:
+#     $GENERATE_ARCHIVES
+#     $BUILD_DEBUG
+#     $BUILD_RELEASE
+source `dirname $0`/../common/ci-common.sh
+if [[  "$LC_UNAME" == "linux" ]]; then
+    source `dirname $0`/../linux/ci-common.sh
+elif [[ "$LC_UNAME" == "darwin" ]]; then
+    source `dirname $0`/../mac/ci-common.sh
+fi
 source `dirname $0`/../common/build-common.sh
 
 if [[ "$GITHUB_WORKFLOW" ]]; then
     java_version=$(java -version 2>&1 | head -1 | cut -d'"' -f2 | sed '/^1\./s///' | cut -d'.' -f1)
     if [[ "$java_version" < 17 ]]; then
         echo "Android builds require Java 17, found version ${java_version} instead"
-        exit 1
+        exit 0
     fi
 fi
 
 # Unless explicitly specified, NDK version will be set to match exactly the required one
-FILAMENT_NDK_VERSION=${GITHUB_NDK_VERSION:-27.0.11718014}
+FILAMENT_NDK_VERSION=${FILAMENT_NDK_VERSION:-$(cat `dirname $0`/ndk.version)}
-
-(! grep "${FILAMENT_NDK_VERSION}" `dirname $0`/../../android/build.gradle > /dev/null) &&
-    echo "Mismatch of NDK versions: want ${FILAMENT_NDK_VERSION} and not found in android/build.gradle" &&
-    exit 1
 
 # Install the required NDK version specifically (if not present)
 if [[ ! -d "${ANDROID_HOME}/ndk/$FILAMENT_NDK_VERSION" ]]; then

build/android/ndk.version

@@ -0,0 +1 @@
+27.0.11718014

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/check-headers.sh

@@ -56,16 +56,10 @@ popd >/dev/null
 rm -rf out/check-headers
 mkdir -p out/check-headers
 
-TMP_FILE=out/check-headers/temp.cpp
 echo "Checking that public headers compile independently..."
 for include in "${includes[@]}"; do
-    rm -f ${TMP_FILE}
     echo "Checking ${include}"
-    if [[ "${include}" == "utils/Systrace.h" ]]; then
+    echo "#include <${include}>" >> out/check-headers/temp.cpp
-        # A necessary define before we can include utils/Systrace.h
+    clang -std=c++17 -I "${FILAMENT_HEADERS}" out/check-headers/temp.cpp -c -o /dev/null
-        echo "#define SYSTRACE_TAG SYSTRACE_TAG_DISABLED" >> ${TMP_FILE}
-    fi
-    echo "#include <${include}>" >> ${TMP_FILE}
-    clang -std=c++17 -I "${FILAMENT_HEADERS}" ${TMP_FILE} -c -o /dev/null
 done
 echo "Done!"

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,6 @@
+#!/bin/bash
+
+if [[ "$GITHUB_WORKFLOW" ]]; then
+    echo "Running workflow $GITHUB_WORKFLOW (event: $GITHUB_EVENT_NAME, action: $GITHUB_ACTION)"
+    CONTINUOUS_INTEGRATION=true
+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/get-ninja.sh

@@ -1,18 +0,0 @@
-#!/bin/bash
-
-if [[ "$GITHUB_WORKFLOW" ]]; then
-    OS_NAME=$(uname -s)
-    NINJA_DL_DIR=/tmp/ninja-dl
-    NINJA_PLATFORM=
-    if [[ "$OS_NAME" == "Linux" ]]; then
-        NINJA_PLATFORM=linux
-    elif [[ "$OS_NAME" == "Darwin" ]]; then
-        NINJA_PLATFORM=mac
-    fi
-    curl -L -o /tmp/ninja-dl.zip https://github.com/ninja-build/ninja/releases/download/v${GITHUB_NINJA_VERSION}/ninja-${NINJA_PLATFORM}.zip
-    mkdir -p $NINJA_DL_DIR
-    unzip -q /tmp/ninja-dl.zip -d $NINJA_DL_DIR
-    chmod +x ${NINJA_DL_DIR}/ninja
-    # Install ninja globally for AGP
-    sudo cp ${NINJA_DL_DIR}/ninja /usr/local/bin/
-fi

build/common/upload-release-assets/package-lock.json

@@ -204,10 +204,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
+      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -410,9 +409,9 @@
       "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A=="
     },
     "brace-expansion": {
-      "version": "1.1.12",
+      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"

build/common/versions

@@ -1,7 +0,0 @@
-GITHUB_CLANG_VERSION=14
-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

build/ios/build.sh

@@ -1,11 +1,36 @@
 #!/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
 
 # If we're generating an archive for release or continuous builds, then we'll also build for the
@@ -16,3 +41,4 @@ if [[ "${GENERATE_ARCHIVES}" ]]; then
 fi
 
 ./build.sh -i -p ios -c $BUILD_SIMULATOR $GENERATE_ARCHIVES $BUILD_DEBUG $BUILD_RELEASE
+

build/ios/ci-common.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+curl -OL https://github.com/ninja-build/ninja/releases/download/v1.10.2/ninja-mac.zip
+unzip -q ninja-mac.zip
+chmod +x ninja
+export PATH="$PWD:$PATH"

build/linux/build.sh

@@ -1,11 +1,39 @@
 #!/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`/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/linux/ci-common.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# version of clang we want to use
+export GITHUB_CLANG_VERSION=14
+# version of CMake to use instead of the default one
+export GITHUB_CMAKE_VERSION=3.19.5
+# version of ninja to use
+export GITHUB_NINJA_VERSION=1.10.2
+
+# Steps for GitHub Workflows
+if [[ "$GITHUB_WORKFLOW" ]]; then
+    # Install ninja
+    wget -q https://github.com/ninja-build/ninja/releases/download/v$GITHUB_NINJA_VERSION/ninja-linux.zip
+    unzip -q ninja-linux.zip
+    export PATH="$PWD:$PATH"
+
+    # Install CMake
+    mkdir -p cmake
+    cd cmake
+
+    sudo wget https://github.com/Kitware/CMake/releases/download/v$GITHUB_CMAKE_VERSION/cmake-$GITHUB_CMAKE_VERSION-Linux-x86_64.sh
+    sudo chmod +x ./cmake-$GITHUB_CMAKE_VERSION-Linux-x86_64.sh
+    sudo ./cmake-$GITHUB_CMAKE_VERSION-Linux-x86_64.sh --skip-license > /dev/null
+    sudo update-alternatives --install /usr/bin/cmake cmake $(pwd)/bin/cmake 1000 --force
+
+    cd ..
+
+    sudo wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add -
+    sudo apt-get update
+    sudo apt-get install clang-$GITHUB_CLANG_VERSION libc++-$GITHUB_CLANG_VERSION-dev libc++abi-$GITHUB_CLANG_VERSION-dev
+    sudo apt-get install mesa-common-dev libxi-dev libxxf86vm-dev
+
+    # For dawn
+    sudo apt-get install libxrandr-dev libxinerama-dev libxcursor-dev libxi-dev libx11-xcb-dev
+
+    sudo update-alternatives --install /usr/bin/cc cc /usr/bin/clang-${GITHUB_CLANG_VERSION} 100
+    sudo update-alternatives --install /usr/bin/c++ c++ /usr/bin/clang++-${GITHUB_CLANG_VERSION} 100
+fi

build/mac/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`/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/ci-common.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+curl -OL https://github.com/ninja-build/ninja/releases/download/v1.10.2/ninja-mac.zip
+unzip -q ninja-mac.zip
+chmod +x ninja
+# Install ninja globally for AGP
+cp ninja /usr/local/bin
+export PATH="$PWD:$PATH"

build/toolchain-aarch64-linux-android.cmake

@@ -31,16 +31,10 @@ set(DIST_ARCH arm64-v8a)
 string(TOLOWER ${CMAKE_HOST_SYSTEM_NAME} HOST_NAME_L)
 file(TO_CMAKE_PATH $ENV{ANDROID_HOME} ANDROID_HOME_UNIX)
 
-message(STATUS "Try using NDK \'${FILAMENT_NDK_VERSION}\'")
 if (NOT FILAMENT_NDK_VERSION)
-    file(READ "${CMAKE_CURRENT_LIST_DIR}/common/versions" VERSIONS_STR)
+    file(READ "${CMAKE_CURRENT_LIST_DIR}/android/ndk.version" FILAMENT_NDK_VERSION)
-    string(REGEX MATCH "GITHUB_NDK_VERSION=(\\d+)" _UNUSED ${VERSIONS_STR})
+    string(REGEX MATCH "^\\d+" FILAMENT_NDK_VERSION ${FILAMENT_NDK_VERSION})
-    if(CMAKE_MATCH_1)
-        set(FILAMENT_NDK_VERSION "${CMAKE_MATCH_1}")
-    endif()
 endif()
-message(STATUS "Using NDK \'${FILAMENT_NDK_VERSION}\'")
-
 file(GLOB NDK_VERSIONS LIST_DIRECTORIES true ${ANDROID_HOME_UNIX}/ndk/${FILAMENT_NDK_VERSION}*)
 list(SORT NDK_VERSIONS)
 list(GET NDK_VERSIONS -1 NDK_VERSION)

build/toolchain-arm7-linux-android.cmake

@@ -32,16 +32,10 @@ set(DIST_ARCH armeabi-v7a)
 string(TOLOWER ${CMAKE_HOST_SYSTEM_NAME} HOST_NAME_L)
 file(TO_CMAKE_PATH $ENV{ANDROID_HOME} ANDROID_HOME_UNIX)
 
-message(STATUS "Try using NDK \'${FILAMENT_NDK_VERSION}\'")
 if (NOT FILAMENT_NDK_VERSION)
-    file(READ "${CMAKE_CURRENT_LIST_DIR}/common/versions" VERSIONS_STR)
+    file(READ "${CMAKE_CURRENT_LIST_DIR}/android/ndk.version" FILAMENT_NDK_VERSION)
-    string(REGEX MATCH "GITHUB_NDK_VERSION=(\\d+)" _UNUSED ${VERSIONS_STR})
+    string(REGEX MATCH "^\\d+" FILAMENT_NDK_VERSION ${FILAMENT_NDK_VERSION})
-    if(CMAKE_MATCH_1)
-        set(FILAMENT_NDK_VERSION "${CMAKE_MATCH_1}")
-    endif()
 endif()
-message(STATUS "Using NDK \'${FILAMENT_NDK_VERSION}\'")
-
 file(GLOB NDK_VERSIONS LIST_DIRECTORIES true ${ANDROID_HOME_UNIX}/ndk/${FILAMENT_NDK_VERSION}*)
 list(SORT NDK_VERSIONS)
 list(GET NDK_VERSIONS -1 NDK_VERSION)

build/toolchain-x86-linux-android.cmake

@@ -31,16 +31,10 @@ set(DIST_ARCH x86)
 string(TOLOWER ${CMAKE_HOST_SYSTEM_NAME} HOST_NAME_L)
 file(TO_CMAKE_PATH $ENV{ANDROID_HOME} ANDROID_HOME_UNIX)
 
-message(STATUS "Try using NDK \'${FILAMENT_NDK_VERSION}\'")
 if (NOT FILAMENT_NDK_VERSION)
-    file(READ "${CMAKE_CURRENT_LIST_DIR}/common/versions" VERSIONS_STR)
+    file(READ "${CMAKE_CURRENT_LIST_DIR}/android/ndk.version" FILAMENT_NDK_VERSION)
-    string(REGEX MATCH "GITHUB_NDK_VERSION=(\\d+)" _UNUSED ${VERSIONS_STR})
+    string(REGEX MATCH "^\\d+" FILAMENT_NDK_VERSION ${FILAMENT_NDK_VERSION})
-    if(CMAKE_MATCH_1)
-        set(FILAMENT_NDK_VERSION "${CMAKE_MATCH_1}")
-    endif()
 endif()
-message(STATUS "Using NDK \'${FILAMENT_NDK_VERSION}\'")
-
 file(GLOB NDK_VERSIONS LIST_DIRECTORIES true ${ANDROID_HOME_UNIX}/ndk/${FILAMENT_NDK_VERSION}*)
 list(SORT NDK_VERSIONS)
 list(GET NDK_VERSIONS -1 NDK_VERSION)

build/toolchain-x86_64-linux-android.cmake

@@ -31,16 +31,10 @@ set(DIST_ARCH x86_64)
 string(TOLOWER ${CMAKE_HOST_SYSTEM_NAME} HOST_NAME_L)
 file(TO_CMAKE_PATH $ENV{ANDROID_HOME} ANDROID_HOME_UNIX)
 
-message(STATUS "Try using NDK \'${FILAMENT_NDK_VERSION}\'")
 if (NOT FILAMENT_NDK_VERSION)
-    file(READ "${CMAKE_CURRENT_LIST_DIR}/common/versions" VERSIONS_STR)
+    file(READ "${CMAKE_CURRENT_LIST_DIR}/android/ndk.version" FILAMENT_NDK_VERSION)
-    string(REGEX MATCH "GITHUB_NDK_VERSION=(\\d+)" _UNUSED ${VERSIONS_STR})
+    string(REGEX MATCH "^\\d+" FILAMENT_NDK_VERSION ${FILAMENT_NDK_VERSION})
-    if(CMAKE_MATCH_1)
-        set(FILAMENT_NDK_VERSION "${CMAKE_MATCH_1}")
-    endif()
 endif()
-message(STATUS "Using NDK \'${FILAMENT_NDK_VERSION}\'")
-
 file(GLOB NDK_VERSIONS LIST_DIRECTORIES true ${ANDROID_HOME_UNIX}/ndk/${FILAMENT_NDK_VERSION}*)
 list(SORT NDK_VERSIONS)
 list(GET NDK_VERSIONS -1 NDK_VERSION)

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,23 @@
+#!/bin/bash
+if [ `uname` == "Linux" ];then
+    source `dirname $0`/../linux/ci-common.sh
+elif [ `uname` == "Darwin" ];then
+    curl -OL https://github.com/ninja-build/ninja/releases/download/v1.10.2/ninja-mac.zip
+    unzip -q ninja-mac.zip
+else
+    echo "Unsupported OS"
+    exit 1
+fi
+
+chmod +x ninja
+export PATH="$PWD:$PATH"
+
+# 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 ..

build/windows/build-github.bat

@@ -47,11 +47,7 @@ if "%RUNNING_LOCALLY%" == "1" (
     set "PATH=%PATH%;C:\Program Files\7-Zip"
 )
 
-:: Outdated windows-2019 pattern
+call "C:\Program Files (x86)\Microsoft Visual Studio\2019\%VISUAL_STUDIO_VERSION%\VC\Auxiliary\Build\vcvars64.bat"
-:: call "C:\Program Files (x86)\Microsoft Visual Studio\2019\%VISUAL_STUDIO_VERSION%\VC\Auxiliary\Build\vcvars64.bat"
-
-call "C:\Program Files\Microsoft Visual Studio\2022\%VISUAL_STUDIO_VERSION%\VC\Auxiliary\Build\vcvars64.bat"
-echo Passed vcvars64.bat
 if errorlevel 1 exit /b %errorlevel%
 
 msbuild /version
@@ -111,7 +107,7 @@ cd out\cmake-%variant%
 if errorlevel 1 exit /b %errorlevel%
 
 cmake ..\.. ^
-    -G "Visual Studio 17 2022" ^
+    -G "Visual Studio 16 2019" ^
     -A x64 ^
     %flag% ^
     -DCMAKE_INSTALL_PREFIX=..\%variant% ^

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 
+      <a href="#table_materialparamstypes">table&nbsp;14</a>.
-      transformName parameter to specify the name of the material parameter that will be 
-      used to expose the transform matrix associated with the external sampler. In iOS and Vulkan,
-      this will always be identity. 
 
 </p></dd></dl><div class="table">
 <table class="table"><tbody><tr><th style="text-align:left"> Type </th><th style="text-align:left"> Description </th></tr>
@@ -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></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
-
-<p></p><p>
-
-    When the <code>color</code> attribute is specified, only four custom variables are available instead of five.</p></div>
-
-<p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    parameters : [</span>
 <span class="line">        {</span>
 <span class="line">           type : sampler2d,</span>
@@ -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></dd></dl><p></p><pre class="listing tilde"><code><span class="line">material {</span>
-
-<p></p><p>
-
-    If the <code>color</code> attribute is specified in the <code>required</code> list, then only four variables can be used
-    instead of five.</p></div>
-
-<p></p><pre class="listing tilde"><code><span class="line">material {</span>
 <span class="line">    name : Skybox,</span>
 <span class="line">    parameters : [</span>
 <span class="line">        {</span>

docs/Materials.md.html

@@ -1027,11 +1027,8 @@ samplerCubemap         | Cubemap texture
 [Table [materialParamsTypes]: Material parameter types]
 
 Samplers
-:     Sampler types can have the following fields:
+:     Sampler types can also specify a `format` which can be either `int` or `float` (defaults to
-       - `format` : which can be either `int` or `float` (defaults to `float`).
+      `float`).
-       - `multisample` : a boolean to indicate whether the sampler is meant for multisampling (defaults to `false`)
-       - `unfilterable` : a boolean to indicate whether the sampling is not filtered (defaults to `false`)
-
 
 Arrays
 :     A parameter can define an array of values by appending `[size]` after the type name, where

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>;
+<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: #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: #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: #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: #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: #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>
+<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>{
+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: #BBB">  </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: #3D7B7B; font-style: italic">// Create some global aliases to enums for convenience.</span><span style="color: #bbbbbb"></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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #BBB">  </span><span style="color: #008000">window</span>.LightType<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.LightManager$Type;
+<span style="color: #bbbbbb">  </span><span style="color: #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: #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: #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: #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: #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: #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: #BBB"> </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: #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: #BBB">  </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #BBB"> </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: #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: #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: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>scene<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createScene();
+<span style="color: #bbbbbb">    </span><span style="color: #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: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create material</span><span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sphere</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: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create lights</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: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create IBL</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: #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 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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(scene);
+<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: #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>.resize();<span style="color: #bbbbbb"></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: #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: #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: #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: #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">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">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
+<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: #BBB">  </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: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>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: #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: #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: #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: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #BBB"> </span>center,<span style="color: #BBB"> </span>up);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.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>.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: #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: #BBB">    </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: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </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: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>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: #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: #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: #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: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>width,<span style="color: #BBB"> </span>height]);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">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">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: #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: #BBB">  </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);
+<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: #BBB"> </span>matinstance<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>material.createInstance();
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>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>];
+<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: #BBB"> </span>Filament.RgbType.sRGB,<span style="color: #BBB"> </span>red);
+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: #BBB"> </span><span style="color: #666">0.5</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: #BBB"> </span><span style="color: #666">1.0</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: #BBB"> </span><span style="color: #666">0.3</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();
+<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);
+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: #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: #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: #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: #BBB">  </span>.bufferCount(<span style="color: #666">2</span>)
+<span style="color: #bbbbbb">  </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></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: #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: #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: #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: #BBB">  </span>.normalized(VertexAttribute.TANGENTS)
+<span style="color: #bbbbbb">  </span>.normalized(VertexAttribute.TANGENTS)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.build(engine);
+<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: #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: #BBB">  </span>.indexCount(icosphere.triangles.length)
+<span style="color: #bbbbbb">  </span>.indexCount(icosphere.triangles.length)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.bufferType(IndexType.USHORT)
+<span style="color: #bbbbbb">  </span>.bufferType(IndexType.USHORT)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.build(engine);
+<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: #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: #BBB"> </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span>icosphere.tangents);
+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: #BBB"> </span>icosphere.triangles);
+ib.setBuffer(engine,<span style="color: #bbbbbb"> </span>icosphere.triangles);<span style="color: #bbbbbb"></span>
 
-Filament.RenderableManager.Builder(<span style="color: #666">1</span>)
+Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></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: #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: #BBB">  </span>.material(<span style="color: #666">0</span>,<span style="color: #BBB"> </span>matinstance)
+<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: #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: #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: #BBB">  </span>.build(engine,<span style="color: #BBB"> </span>renderable);
+<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();
+<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);
+scene.addEntity(sunlight);<span style="color: #bbbbbb"></span>
-Filament.LightManager.Builder(LightType.SUN)
+Filament.LightManager.Builder(LightType.SUN)<span style="color: #bbbbbb"></span>
-<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: #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: #BBB">  </span>.intensity(<span style="color: #666">110000.0</span>)
+<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">110000.0</span>)<span style="color: #bbbbbb"></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: #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: #BBB">  </span>.sunAngularRadius(<span style="color: #666">1.9</span>)
+<span style="color: #bbbbbb">  </span>.sunAngularRadius(<span style="color: #666666">1.9</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.sunHaloSize(<span style="color: #666">10.0</span>)
+<span style="color: #bbbbbb">  </span>.sunHaloSize(<span style="color: #666666">10.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.sunHaloFalloff(<span style="color: #666">80.0</span>)
+<span style="color: #bbbbbb">  </span>.sunHaloFalloff(<span style="color: #666666">80.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.build(engine,<span style="color: #BBB"> </span>sunlight);
+<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();
+<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);
+scene.addEntity(backlight);<span style="color: #bbbbbb"></span>
-Filament.LightManager.Builder(LightType.DIRECTIONAL)
+Filament.LightManager.Builder(LightType.DIRECTIONAL)<span style="color: #bbbbbb"></span>
-<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: #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: #BBB">        </span>.intensity(<span style="color: #666">50000.0</span>)
+<span style="color: #bbbbbb">        </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">        </span>.build(engine,<span style="color: #BBB"> </span>backlight);
+<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>
+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: #BBB"> </span>format<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.PixelDataFormat.RGB;
+<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: #BBB"> </span>datatype<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.PixelDataType.UINT_10F_11F_11F_REV;
+<span style="color: #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: #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: #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: #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: #BBB"> </span>iblktx<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>Filament.Ktx1Bundle(ibl_package);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>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: #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: #BBB">  </span>.width(iblktx.info().pixelWidth)
+<span style="color: #bbbbbb">  </span>.width(iblktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.height(iblktx.info().pixelHeight)
+<span style="color: #bbbbbb">  </span>.height(iblktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.levels(iblktx.getNumMipLevels())
+<span style="color: #bbbbbb">  </span>.levels(iblktx.getNumMipLevels())<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)
+<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.format(Filament.Texture$InternalFormat.RGBA8)
+<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.build(engine);
+<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: #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: #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: #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: #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: #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: #BBB">  </span>ibltex.setImageCube(engine,<span style="color: #BBB"> </span>level,<span style="color: #BBB"> </span>pixelbuffer);
+<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: #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: #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: #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: #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: #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: #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: #BBB"> </span>indirectLight<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.IndirectLight.Builder()
+<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: #BBB">  </span>.reflections(ibltex)
+<span style="color: #bbbbbb">  </span>.reflections(ibltex)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.irradianceSh(<span style="color: #666">3</span>,<span style="color: #BBB"> </span>shfloats)
+<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: #BBB">  </span>.intensity(<span style="color: #666">50000.0</span>)
+<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.build(engine);
+<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);
+<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: #666">50000</span>);
+indirectLight.setIntensity(<span style="color: #666666">50000</span>);<span style="color: #bbbbbb"></span>
-scene.setIndirectLight(indirectLight);
+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>
+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: #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]);
+<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: #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: #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: #BBB"> </span>skytex<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.Texture.Builder()
+<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: #BBB">  </span>.width(skyktx.info().pixelWidth)
+<span style="color: #bbbbbb">  </span>.width(skyktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.height(skyktx.info().pixelHeight)
+<span style="color: #bbbbbb">  </span>.height(skyktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.levels(<span style="color: #666">1</span>)
+<span style="color: #bbbbbb">  </span>.levels(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)
+<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.format(Filament.Texture$InternalFormat.RGBA8)
+<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </span>.build(engine);
+<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: #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: #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: #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: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>pixelbuffer);
+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);
+<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);
+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 albedo.png 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 --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 --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear normal.png 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>
+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>
-<span style="color: #BBB">    </span>normal.png<span style="color: #BBB"> </span>normal.ktx2
+    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 --grayscale roughness.png 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 --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 --grayscale metallic.png 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 --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 --grayscale ao.png 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 --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>For more information on mipgen&#x27;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>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
+<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><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>-
+<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 -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
-cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>.<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=256</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
-cmgen<span style="color: #BBB"> </span>-x<span style="color: #BBB"> </span>.<span style="color: #BBB"> </span>--format<span style="color: #666">=</span>ktx<span style="color: #BBB"> </span>--size<span style="color: #666">=256</span><span style="color: #BBB"> </span>--extract-blur<span style="color: #666">=0</span>.1<span style="color: #BBB"> </span>venetian_crossroads_2k.hdr
+cmgen -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>{
+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: #BBB">    </span><span style="color: #008000">window</span>.app<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #A2F; font-weight: bold">new</span><span style="color: #BBB"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666">0</span>]);
+<span style="color: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #BBB"> </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: #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: #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: #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: #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: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">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: #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: #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">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: #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: #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">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: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sky box and IBL</span><span style="color: #bbbbbb"></span>
-<span style="color: #BBB">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: initialize gltumble</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: #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: 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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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">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: #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: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #BBB"> </span>center,<span style="color: #BBB"> </span>up);
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.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: #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">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
+<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: #BBB">    </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: #bbbbbb">    </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</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: #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: #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: #BBB">        </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: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </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: #bbbbbb">    </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>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: #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: #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: #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: #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: #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: #BBB">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>width,<span style="color: #BBB"> </span>height]);
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">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: #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: #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: #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: #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: #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: #BBB">    </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>);
+<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: #BBB"> </span>texture_suffix<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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>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>
+<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: #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);
+<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: #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: #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<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: #666">100000</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: #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>{
+<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: #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: #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: #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: #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: #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: #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: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #BBB"> </span>ao<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(ao_url);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>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: #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: #BBB">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
+<span style="color: #bbbbbb">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">        </span>Filament.MagFilter.LINEAR,
+<span style="color: #bbbbbb">        </span>Filament.MagFilter.LINEAR,<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">        </span>Filament.WrapMode.CLAMP_TO_EDGE);
+<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: #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: #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: #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: #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: #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: #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: #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: #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;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: #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: #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: #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: #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: #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: #BBB">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.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();
+<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: #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);
+<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: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());
+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: #A2F; font-weight: bold">delete</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">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: #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">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;
+    &lt;<span style="color: #008000; font-weight: bold">style</span>&gt;<span style="color: #bbbbbb"></span>
-<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: #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: #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: #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: #BBB">    </span>&lt;/<span style="color: #008000; font-weight: bold">style</span>&gt;
+<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: #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: #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: #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: #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;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>{
+<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: #BBB">  </span><span style="color: #008000; font-weight: bold">constructor</span>()<span style="color: #BBB"> </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: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create entities</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: #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: #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: #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: #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: #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">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">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
+<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: #BBB">  </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: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</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: #BBB">    </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: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">  </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: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: adjust viewport and canvas</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: #BBB">  </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>
+<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<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>
+python -m SimpleHTTPServer <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>
+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>];
+<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: #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);
+<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();
+<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: #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>.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: #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>([
+<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: #BBB">    </span><span style="color: #666">1</span>,<span style="color: #BBB"> </span><span style="color: #666">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: #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: #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: #BBB">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">4</span><span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>),<span style="color: #BBB"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #BBB"> </span><span style="color: #666">*</span><span style="color: #BBB"> </span><span style="color: #666">4</span><span style="color: #BBB"> </span><span style="color: #666">/</span><span style="color: #BBB"> </span><span style="color: #666">3</span>),
+<span style="color: #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>
+<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: #BBB"> </span>VertexAttribute<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexAttribute;
+<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: #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">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: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>Filament.VertexBuffer.Builder()
+<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: #BBB">    </span>.vertexCount(<span style="color: #666">3</span>)
+<span style="color: #bbbbbb">    </span>.vertexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span>.bufferCount(<span style="color: #666">2</span>)
+<span style="color: #bbbbbb">    </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></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: #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: #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: #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: #BBB">    </span>.normalized(VertexAttribute.COLOR)
+<span style="color: #bbbbbb">    </span>.normalized(VertexAttribute.COLOR)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span>.build(engine);
+<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: #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: #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">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()
+<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: #BBB">    </span>.indexCount(<span style="color: #666">3</span>)
+<span style="color: #bbbbbb">    </span>.indexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)
+<span style="color: #bbbbbb">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)<span style="color: #bbbbbb"></span>
-<span style="color: #BBB">    </span>.build(engine);
+<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>);
+<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: #BBB"> </span>matinst<span style="color: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>mat.getDefaultInstance();
+<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: #666">1</span>)
+Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></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: #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: #BBB">    </span>.material(<span style="color: #666">0</span>,<span style="color: #BBB"> </span>matinst)
+<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: #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: #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: #BBB">    </span>.build(engine,<span style="color: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.triangle);
+<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();
+<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: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createRenderer();
+<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: #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>.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: #BBB"> </span><span style="color: #666">=</span><span style="color: #BBB"> </span>engine.createView();
+<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: #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: #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: #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: #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: #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: #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: #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>{
+<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: #BBB">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</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: #BBB">    </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: #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>
+<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: #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: #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: #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: #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: #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: #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: #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);
+<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: #BBB"> </span>transform);
+tcm.setTransform(inst,<span style="color: #bbbbbb"> </span>transform);<span style="color: #bbbbbb"></span>
-inst.<span style="color: #A2F; font-weight: bold">delete</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: #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: #BBB"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
+<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;
+<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: #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: #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: #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">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: #666">0</span>,<span style="color: #BBB"> </span><span style="color: #666">0</span>,<span style="color: #BBB"> </span>width,<span style="color: #BBB"> </span>height]);
+<span style="color: #008000; font-weight: bold">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: #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: #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">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: #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">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/build/checks.py

@@ -30,6 +30,11 @@ from utils import execute, ArgParseImpl
 CUR_DIR = os.path.dirname(os.path.abspath(__file__))
 ROOT_DIR = os.path.join(CUR_DIR, '../../')
 
+def get_last_commit_hash():
+  res, ret = execute('git rev-parse HEAD', cwd=ROOT_DIR)
+  assert res == 0, 'Failed to get the last commit hash'
+  return ret.strip()
+
 def get_edited_files(commit_hash):
   INSERT = '#####?????'
   res, ret = execute(f'git show --name-only --pretty=%b{INSERT} {commit_hash}')

docs_src/build/install_mdbook.sh

@@ -39,13 +39,13 @@ function download_mdbook() {
     fi
 
     local CHECK_UNAME="
-import sys
+import sys;
-parts=[a.lower() for a in sys.stdin.read().strip().split(' ')]
+parts=[a.lower() for a in sys.stdin.read().strip().split(' ')];
 def get_type():
   if 'darwin' in parts:
     if 'x86_64' in parts:
       return ${DARWIN_X86}
-    elif 'aarch' in parts or 'arm64' in parts:
+    elif 'aarch' in parts:
       return ${DARWIN_ARM}
   elif 'linux' in parts:
     if 'x86_64' in parts:
@@ -63,12 +63,11 @@ print(get_type())
             echo "*** Need to install Rust ***"
             curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
         fi
-        source "${HOME}/.cargo/env"
         if ! (command -v cargo >/dev/null 2>&1); then
-            echo "*** Still cannot find cargo ***"
+            echo "*** Still cannot find `cargo` ***"
             exit 1
         fi
-        cargo install --force mdbook
+        cargo install mdbook
     else
         # Download prebuilts from github
         mkdir -p ${HOME}/.cargo/bin

docs_src/markdeep/Materials.md.html

@@ -13,7 +13,7 @@ This document is part of the [Filament project](https://github.com/google/filame
 ## Authors
 
 - [Romain Guy](https://github.com/romainguy), [@romainguy](https://twitter.com/romainguy)
-- [Mathias Agopian](https://github.com/pixelflinger), [@pixelflinger](https://bsky.app/profile/pixelflinger.bsky.social)
+- [Mathias Agopian](https://github.com/pixelflinger), [@darthmoosious](https://twitter.com/darthmoosious)
 
 # Overview
 
@@ -78,27 +78,26 @@ in table [standardProperties].
         Property        |      Definition
 -----------------------:|:---------------------
 **baseColor**           | Diffuse albedo for non-metallic surfaces, and specular color for metallic surfaces
-**roughness**           | Perceived smoothness (1.0) or roughness (0.0) of a surface. Smooth surfaces exhibit sharp reflections
 **metallic**            | Whether a surface appears to be dielectric (0.0) or conductor (1.0). Often used as a binary value (0 or 1)
+**roughness**           | Perceived smoothness (1.0) or roughness (0.0) of a surface. Smooth surfaces exhibit sharp reflections
 **reflectance**         | Fresnel reflectance at normal incidence for dielectric surfaces. This directly controls the strength of the reflections
-**ambientOcclusion**    | 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
-**clearCoat**           | Strength of the clear coat layer
-**clearCoatRoughness**  | Perceived smoothness or roughness of the clear coat layer
-**clearCoatNormal**     | A detail normal used to perturb the clear coat layer using _bump mapping_ (_normal mapping_)
-**anisotropy**          | Amount of anisotropy in either the tangent or bitangent direction
-**anisotropyDirection** | Local surface direction in tangent space
-**thickness**           | Thickness of the solid volume of refractive objects
 **sheenColor**          | Strength of the sheen layer
 **sheenRoughness**      | Perceived smoothness or roughness of the sheen layer
-**emissive**            | Additional diffuse albedo to simulate emissive surfaces (such as neons, etc.) This property is mostly useful in an HDR pipeline with a bloom pass
+**clearCoat**           | Strength of the clear coat layer
+**clearCoatRoughness**  | Perceived smoothness or roughness of the clear coat layer
+**anisotropy**          | Amount of anisotropy in either the tangent or bitangent direction
+**anisotropyDirection** | Local surface direction in tangent space
+**ambientOcclusion**    | 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
 **normal**              | A detail normal used to perturb the surface using _bump mapping_ (_normal mapping_)
-**postLightingColor**   | Additional color that can be blended with the result of the lighting computations. See `postLightingBlending`
-**absorption**          | Absorption factor for refractive objects
-**transmission**        | 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
-**ior**                 | Index of refraction, either for refractive objects or as an alternative to reflectance
-**microThickness**      | Thickness of the thin layer of refractive objects
 **bentNormal**          | A normal pointing in the average unoccluded direction. Can be used to improve indirect lighting quality
-**shadowStrength**      | Strength factor between 0 and 1 for all shadows received by this material
+**clearCoatNormal**     | A detail normal used to perturb the clear coat layer using _bump mapping_ (_normal mapping_)
+**emissive**            | Additional diffuse albedo to simulate emissive surfaces (such as neons, etc.) This property is mostly useful in an HDR pipeline with a bloom pass
+**postLightingColor**   | Additional color that can be blended with the result of the lighting computations. See `postLightingBlending`
+**ior**                 | Index of refraction, either for refractive objects or as an alternative to reflectance
+**transmission**        | 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
+**absorption**          | Absorption factor for refractive objects
+**microThickness**      | Thickness of the thin layer of refractive objects
+**thickness**           | Thickness of the solid volume of refractive objects
 [Table [standardProperties]: Properties of the standard model]
 
 The type and range of each property is described in table [standardPropertiesTypes].
@@ -992,13 +991,10 @@ Type
 
 Value
 :     Each entry is an object with the properties `name` and `type`, both of `string` type. The
-      name must be a valid GLSL identifier. Entries have an optional `precision`, which can be
+      name must be a valid GLSL identifier. Entries also have an optional `precision`, which can be
       one of `default` (best precision for the platform, typically `high` on desktop, `medium` on
       mobile), `low`, `medium`, `high`. The type must be one of the types described in
-      table [materialParamsTypes]. For Android external textures, entries also have an optional 
+      table [materialParamsTypes].
-      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. 
 
          Type          |            Description
 :----------------------|:---------------------------------
@@ -1273,9 +1269,6 @@ Description
       when selecting any shading model that is not `unlit`. See the shader sections of this document
       for more information on how to access these attributes from the shaders.
 
-!!! Note: Interaction with custom variables
-    When the `color` attribute is specified, only four custom variables are available instead of five.
-
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ JSON
 material {
     parameters : [
@@ -1306,7 +1299,7 @@ Type
 :    array of `string`
 
 Value
-:     Up to 5 strings, each must be a valid GLSL identifier.
+:     Up to 4 strings, each must be a valid GLSL identifier.
 
 Description
 :     Defines custom interpolants (or variables) that are output by the material's vertex shader.
@@ -1322,10 +1315,6 @@ Description
       particular if `default` is specified the default precision is used is the fragment shader
       (`mediump`) and in the vertex shader (`highp`).
 
-!!! Warning: Interaction with required attributes
-    If the `color` attribute is specified in the `required` list, then only four variables can be used
-    instead of five.
-
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ JSON
 material {
     name : Skybox,

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/main/materials.md

@@ -146,7 +146,7 @@ This document is part of the <a href="https://github.com/google/filament">Filame
 <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>
 <a class="target" name="overview">&nbsp;</a><a class="target" name="overview">&nbsp;</a><a class="target" name="toc2">&nbsp;</a><h1>Overview</h1>
 <p>
@@ -217,27 +217,26 @@ in <a href="#table_standardproperties" target="_self">table&nbsp;1</a>.
 <div class='table'>
 <a class="target" name="table_standardproperties">&nbsp;</a><table class="table longtable"><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>
 </table><center><div class="tablecaption"><b style="font-style:normal;">Table&nbsp;1:</b> Properties of the standard model</div></center></div>
 </p><p>
 The type and range of each property is described in <a href="#table_standardpropertiestypes" target="_self">table&nbsp;2</a>.
@@ -1098,13 +1097,10 @@ non-shader data.
 
 <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" target="_self">table&nbsp;14</a>. For Android external textures, entries also have an optional 
+      <a href="#table_materialparamstypes" target="_self">table&nbsp;14</a>.
-      transformName parameter to specify the name of the material parameter that will be 
-      used to expose the transform matrix associated with the external sampler. In iOS and Vulkan,
-      this will always be identity. 
 </p></dd></dl><div class='table'>
 <a class="target" name="table_materialparamstypes">&nbsp;</a><table class="table longtable"><tr><th  style="text-align:left"> Type </th><th  style="text-align:left"> Description </th></tr>
 <tr><td  style="text-align:left"> bool </td><td  style="text-align:left"> Single boolean </td></tr>
@@ -1326,10 +1322,7 @@ non-shader data.
       required and does not need to be specified. The <code>tangents</code> attribute is automatically required
       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></dd></dl></p><pre class="listing tilde"><code><span class="line"></span>material <span class="hljs-punctuation">{</span>
-</p><p>
-    When the <code>color</code> attribute is specified, only four custom variables are available instead of five.</div>
-</p><pre class="listing tilde"><code><span class="line"></span>material <span class="hljs-punctuation">{</span>
 <span class="line"></span>    parameters <span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
 <span class="line"></span>        <span class="hljs-punctuation">{</span>
 <span class="line"></span>           type <span class="hljs-punctuation">:</span> sampler2d<span class="hljs-punctuation">,</span>
@@ -1354,7 +1347,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
       shader is the name of the interpolant with the <code>variable_</code> prefix. For instance, if you
@@ -1367,11 +1360,7 @@ non-shader data.
       In this case the specified precision is used as-is in both fragment and vertex stages, in
       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></dd></dl></p><pre class="listing tilde"><code><span class="line"></span>material <span class="hljs-punctuation">{</span>
-</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.</div>
-</p><pre class="listing tilde"><code><span class="line"></span>material <span class="hljs-punctuation">{</span>
 <span class="line"></span>    name <span class="hljs-punctuation">:</span> Skybox<span class="hljs-punctuation">,</span>
 <span class="line"></span>    parameters <span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
 <span class="line"></span>        <span class="hljs-punctuation">{</span>

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

@@ -265,13 +265,6 @@ set(MATERIAL_SRCS
         src/materials/vsmMipmap.mat
 )
 
-if (NOT FILAMENT_DISABLE_GTAO)
-    list(APPEND MATERIAL_SRCS
-        src/materials/ssao/gtao.mat
-        src/materials/ssao/gtaoBentNormals.mat
-    )
-endif()
-
 set(MATERIAL_FL0_SRCS
         src/materials/defaultMaterial.mat
         src/materials/skybox.mat
@@ -321,14 +314,12 @@ if (FILAMENT_FORCE_PROFILING_MODE)
     add_definitions(-DFILAMENT_FORCE_PROFILING_MODE)
 endif()
 
-if (FILAMENT_DISABLE_GTAO)
-    add_definitions(-DFILAMENT_DISABLE_GTAO)
-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}
@@ -472,30 +463,6 @@ add_custom_command(
         APPEND
 )
 
-if (NOT FILAMENT_DISABLE_GTAO)
-    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
-    )
-endif()
-
 add_custom_command(
         OUTPUT "${MATERIAL_DIR}/bilateralBlur.filamat"
         DEPENDS src/materials/ssao/ssaoUtils.fs
@@ -601,10 +568,6 @@ target_link_libraries(${TARGET} PUBLIC filaflat)
 target_link_libraries(${TARGET} PUBLIC filabridge)
 target_link_libraries(${TARGET} PUBLIC ibl-lite)
 
-if (FILAMENT_USE_ABSEIL_LOGGING)
-    target_link_libraries(${TARGET} PUBLIC absl::log)
-endif()
-
 if (FILAMENT_ENABLE_FGVIEWER)
     target_link_libraries(${TARGET} PUBLIC fgviewer)
     add_definitions(-DFILAMENT_ENABLE_FGVIEWER=1)

filament/README.md

@@ -92,7 +92,7 @@ Copy your platform's Makefile below into a `Makefile` inside the same directory.
 ### Linux
 
 ```make
-FILAMENT_LIBS=-lfilament -lbackend -lbluegl -lbluevk -lfilabridge -lfilaflat -lutils -lgeometry -lsmol-v -lvkshaders -libl -labseil
+FILAMENT_LIBS=-lfilament -lbackend -lbluegl -lbluevk -lfilabridge -lfilaflat -lutils -lgeometry -lsmol-v -lvkshaders -libl
 CC=clang++
 
 main: main.o
@@ -110,13 +110,12 @@ clean:
 ### macOS
 
 ```make
-FILAMENT_LIBS=-lfilament -lbackend -lbluegl -lbluevk -lfilabridge -lfilaflat -lutils -lgeometry -lsmol-v -lvkshaders -libl -labseil
+FILAMENT_LIBS=-lfilament -lbackend -lbluegl -lbluevk -lfilabridge -lfilaflat -lutils -lgeometry -lsmol-v -lvkshaders -libl
 FRAMEWORKS=-framework Cocoa -framework Metal -framework CoreVideo
 CC=clang++
-ARCH ?= $(shell uname -m)
 
 main: main.o
-	$(CC) -Llib/$(ARCH)/ main.o $(FILAMENT_LIBS) $(FRAMEWORKS) -o main
+	$(CC) -Llib/x86_64/ main.o $(FILAMENT_LIBS) $(FRAMEWORKS) -o main
 
 main.o: main.cpp
 	$(CC) -Iinclude/ -std=c++17 -c main.cpp
@@ -140,7 +139,7 @@ used to change the run-time library version.
 
 ```make
 FILAMENT_LIBS=filament.lib backend.lib bluegl.lib bluevk.lib filabridge.lib filaflat.lib \
-              utils.lib geometry.lib smol-v.lib ibl.lib vkshaders.lib abseil.lib
+              utils.lib geometry.lib smol-v.lib ibl.lib vkshaders.lib
 CC=cl.exe
 
 main.exe: main.obj

filament/backend/CMakeLists.txt

@@ -180,11 +180,8 @@ if (FILAMENT_SUPPORTS_VULKAN)
             src/vulkan/VulkanAsyncHandles.h
             src/vulkan/VulkanBlitter.cpp
             src/vulkan/VulkanBlitter.h
+            src/vulkan/VulkanBuffer.cpp
             src/vulkan/VulkanBuffer.h
-            src/vulkan/VulkanBufferCache.h
-            src/vulkan/VulkanBufferCache.cpp
-            src/vulkan/VulkanBufferProxy.h
-            src/vulkan/VulkanBufferProxy.cpp
             src/vulkan/VulkanCommands.cpp
             src/vulkan/VulkanCommands.h
             src/vulkan/VulkanConstants.h
@@ -197,8 +194,6 @@ if (FILAMENT_SUPPORTS_VULKAN)
             src/vulkan/VulkanDriver.cpp
             src/vulkan/VulkanDriver.h
             src/vulkan/VulkanDriverFactory.h
-            src/vulkan/VulkanExternalImageManager.cpp
-            src/vulkan/VulkanExternalImageManager.h
             src/vulkan/VulkanFboCache.cpp
             src/vulkan/VulkanFboCache.h
             src/vulkan/VulkanHandles.cpp
@@ -257,44 +252,14 @@ if (FILAMENT_SUPPORTS_WEBGPU)
     list(APPEND SRCS
             include/backend/platforms/WebGPUPlatform.h
             src/webgpu/platform/WebGPUPlatform.cpp
-            src/webgpu/SpdMipmapGenerator/SpdMipmapGenerator.cpp
-            src/webgpu/WebGPUBufferBase.cpp
-            src/webgpu/WebGPUBufferBase.h
-            src/webgpu/WebGPUBufferObject.cpp
-            src/webgpu/WebGPUBufferObject.h
             src/webgpu/WebGPUConstants.h
-            src/webgpu/WebGPUDescriptorSet.cpp
-            src/webgpu/WebGPUDescriptorSet.h
-            src/webgpu/WebGPUDescriptorSetLayout.cpp
-            src/webgpu/WebGPUDescriptorSetLayout.h
             src/webgpu/WebGPUDriver.cpp
             src/webgpu/WebGPUDriver.h
-            src/webgpu/WebGPUFence.cpp
+            src/webgpu/WebGPUHandles.cpp
-            src/webgpu/WebGPUFence.h
+            src/webgpu/WebGPUHandles.h
-            src/webgpu/WebGPUIndexBuffer.cpp
-            src/webgpu/WebGPUIndexBuffer.h
-            src/webgpu/WebGPUMsaaTextureResolver.cpp
-            src/webgpu/WebGPUMsaaTextureResolver.h
-            src/webgpu/WebGPUPipelineCache.cpp
-            src/webgpu/WebGPUPipelineCache.h
-            src/webgpu/WebGPUPipelineLayoutCache.cpp
-            src/webgpu/WebGPUPipelineLayoutCache.h
-            src/webgpu/WebGPUProgram.cpp
-            src/webgpu/WebGPUProgram.h
-            src/webgpu/WebGPURenderPassMipmapGenerator.cpp
-            src/webgpu/WebGPURenderPassMipmapGenerator.h
-            src/webgpu/WebGPURenderPrimitive.h
-            src/webgpu/WebGPURenderTarget.cpp
-            src/webgpu/WebGPURenderTarget.h
-            src/webgpu/WebGPUStrings.h
             src/webgpu/WebGPUSwapChain.cpp
             src/webgpu/WebGPUSwapChain.h
-            src/webgpu/WebGPUTexture.cpp
+            src/webgpu/WGPUProgram.cpp
-            src/webgpu/WebGPUTexture.h
-            src/webgpu/WebGPUVertexBuffer.cpp
-            src/webgpu/WebGPUVertexBuffer.h
-            src/webgpu/WebGPUVertexBufferInfo.cpp
-            src/webgpu/WebGPUVertexBufferInfo.h
     )
     if (WIN32)
         list(APPEND SRCS src/webgpu/platform/WebGPUPlatformWindows.cpp)
@@ -321,6 +286,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
 # ==================================================================================================
@@ -412,10 +383,6 @@ endif()
 target_link_libraries(${TARGET} PUBLIC math)
 target_link_libraries(${TARGET} PUBLIC utils)
 
-if (FILAMENT_USE_ABSEIL_LOGGING)
-    target_link_libraries(${TARGET} PRIVATE absl::log)
-endif()
-
 # Android, iOS, and WebGL do not use bluegl.
 if(FILAMENT_SUPPORTS_OPENGL AND NOT IOS AND NOT ANDROID AND NOT WEBGL)
     target_link_libraries(${TARGET} PRIVATE bluegl)
@@ -511,20 +478,11 @@ if (FILAMENT_SUPPORTS_WEBGPU)
     target_compile_definitions(${TARGET} PRIVATE $<$<BOOL:${FILAMENT_WEBGPU_IMMEDIATE_ERROR_HANDLING}>:FILAMENT_WEBGPU_IMMEDIATE_ERROR_HANDLING>)
 endif()
 
-# ==================================================================================================
-# Linker flags
-# ==================================================================================================
-
 target_link_libraries(${TARGET} PRIVATE
+        ${OSMESA_LINKER_FLAGS}
         $<$<AND:$<PLATFORM_ID:Linux>,$<CONFIG:Release>>:${LINUX_LINKER_OPTIMIZATION_FLAGS}>
 )
 
-if (LINUX AND FILAMENT_SUPPORTS_WEBGPU)
-    # Unclear why this needs to be explicit while other linux libs do not, but it is necessary for
-    # WebGPU to build on linux.
-    target_link_libraries(${TARGET} PRIVATE -lxcb)
-endif()
-
 # ==================================================================================================
 # Installation
 # ==================================================================================================

filament/backend/include/backend/BufferDescriptor.h

@@ -20,15 +20,10 @@
 #define TNT_FILAMENT_BACKEND_BUFFERDESCRIPTOR_H
 
 #include <utils/compiler.h>
-
+#include <utils/ostream.h>
-#include <utility>
 
 #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,
+    BufferDescriptor(void const* buffer, size_t size,
-            Callback const callback = nullptr, void* user = nullptr) noexcept
+            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,
+    BufferDescriptor(void const* buffer, size_t size,
-            CallbackHandler* handler, Callback const callback, void* user = nullptr) noexcept
+            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:
+        default:
-            return "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,247 +232,17 @@ constexpr bool hasShaderType(ShaderStageFlags flags, ShaderStage type) noexcept
     }
 }
 
-enum class TextureType : uint8_t {
+enum class DescriptorType : uint8_t {
-    FLOAT,
+    UNIFORM_BUFFER,
-    INT,
+    SHADER_STORAGE_BUFFER,
-    UINT,
+    SAMPLER,
-    DEPTH,
+    INPUT_ATTACHMENT,
-    STENCIL,
+    SAMPLER_EXTERNAL
-    DEPTH_STENCIL
 };
 
-constexpr std::string_view to_string(TextureType type) noexcept {
-    switch (type) {
-        case TextureType::FLOAT:            return "FLOAT";
-        case TextureType::INT:              return "INT";
-        case TextureType::UINT:             return "UINT";
-        case TextureType::DEPTH:            return "DEPTH";
-        case TextureType::STENCIL:          return "STENCIL";
-        case TextureType::DEPTH_STENCIL:    return "DEPTH_STENCIL";
-    }
-    return "UNKNOWN";
-}
-
- enum class DescriptorType : uint8_t {
-     SAMPLER_2D_FLOAT,
-     SAMPLER_2D_INT,
-     SAMPLER_2D_UINT,
-     SAMPLER_2D_DEPTH,
-
-     SAMPLER_2D_ARRAY_FLOAT,
-     SAMPLER_2D_ARRAY_INT,
-     SAMPLER_2D_ARRAY_UINT,
-     SAMPLER_2D_ARRAY_DEPTH,
-
-     SAMPLER_CUBE_FLOAT,
-     SAMPLER_CUBE_INT,
-     SAMPLER_CUBE_UINT,
-     SAMPLER_CUBE_DEPTH,
-
-     SAMPLER_CUBE_ARRAY_FLOAT,
-     SAMPLER_CUBE_ARRAY_INT,
-     SAMPLER_CUBE_ARRAY_UINT,
-     SAMPLER_CUBE_ARRAY_DEPTH,
-
-     SAMPLER_3D_FLOAT,
-     SAMPLER_3D_INT,
-     SAMPLER_3D_UINT,
-
-     SAMPLER_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
-    // Indicate a UNIFORM_BUFFER will have dynamic offsets.
-    DYNAMIC_OFFSET = 0x01,
-
-    // To indicate a texture/sampler type should be unfiltered.
-    UNFILTERABLE = 0x02,
 };
 
 using descriptor_set_t = uint8_t;
@@ -487,25 +250,24 @@ 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;
     DescriptorFlags flags = DescriptorFlags::NONE;
     uint16_t count = 0;
 
-    friend bool operator==(DescriptorSetLayoutBinding const& lhs,
+    //  TODO: uncomment when needed.  Note that this class is used as hash key.  We need to ensure
+    //  no uninitialized padding bytes.
+    //    uint8_t externalSamplerDataIndex = EXTERNAL_SAMPLER_DATA_INDEX_UNUSED;
+
+    friend inline bool operator==(DescriptorSetLayoutBinding const& lhs,
             DescriptorSetLayoutBinding const& rhs) noexcept {
         return lhs.type == rhs.type &&
                lhs.flags == rhs.flags &&
                lhs.count == rhs.count &&
                lhs.stageFlags == rhs.stageFlags;
+//               lhs.stageFlags == rhs.stageFlags &&
+//               lhs.externalSamplerDataIndex == rhs.externalSamplerDataIndex;
     }
 };
 
@@ -531,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;
@@ -688,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
@@ -719,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
  */
@@ -772,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
@@ -1042,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,
@@ -1071,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:
@@ -1084,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:
@@ -1095,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:
@@ -1122,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:
@@ -1143,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:
@@ -1165,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;
 }
 
@@ -1253,6 +972,26 @@ enum class SamplerCompareFunc : uint8_t {
     N           //!< Never. The depth / stencil test always fails.
 };
 
+//! this API is copied from (and only applies to) the Vulkan spec.
+//! These specify YUV to RGB conversions.
+enum class SamplerYcbcrModelConversion : uint8_t {
+    RGB_IDENTITY = 0,
+    YCBCR_IDENTITY = 1,
+    YCBCR_709 = 2,
+    YCBCR_601 = 3,
+    YCBCR_2020 = 4,
+};
+
+enum class SamplerYcbcrRange : uint8_t {
+    ITU_FULL = 0,
+    ITU_NARROW = 1,
+};
+
+enum class ChromaLocation : uint8_t {
+    COSITED_EVEN = 0,
+    MIDPOINT = 1,
+};
+
 //! Sampler parameters
 struct SamplerParams {             // NOLINT
     SamplerMagFilter filterMag      : 1;    //!< magnification filter (NEAREST)
@@ -1294,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 {
+    friend inline bool operator == (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return EqualTo{}(lhs, rhs);
+        return SamplerParams::EqualTo{}(lhs, rhs);
     }
-    friend bool operator != (SamplerParams lhs, SamplerParams rhs) noexcept {
+    friend inline bool operator != (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return  !EqualTo{}(lhs, rhs);
+        return  !SamplerParams::EqualTo{}(lhs, rhs);
     }
-    friend bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
+    friend inline bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
-        return LessThan{}(lhs, rhs);
+        return SamplerParams::LessThan{}(lhs, rhs);
     }
 };
 
@@ -1321,9 +1056,93 @@ static_assert(sizeof(SamplerParams) == 4);
 static_assert(sizeof(SamplerParams) <= sizeof(uint64_t),
         "SamplerParams must be no more than 64 bits");
 
+//! Sampler parameters
+struct SamplerYcbcrConversion {// NOLINT
+    SamplerYcbcrModelConversion ycbcrModel : 4;
+    TextureSwizzle r : 4;
+    TextureSwizzle g : 4;
+    TextureSwizzle b : 4;
+    TextureSwizzle a : 4;
+    SamplerYcbcrRange ycbcrRange : 1;
+    ChromaLocation xChromaOffset : 1;
+    ChromaLocation yChromaOffset : 1;
+    SamplerMagFilter chromaFilter : 1;
+    uint8_t padding;
+
+    struct Hasher {
+        size_t operator()(const SamplerYcbcrConversion p) const noexcept {
+            // we don't use std::hash<> here, so we don't have to include <functional>
+            return *reinterpret_cast<uint32_t const*>(reinterpret_cast<char const*>(&p));
+        }
+    };
+
+    struct EqualTo {
+        bool operator()(SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs) const noexcept {
+            assert_invariant(lhs.padding == 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;
+        }
+    };
+
+    struct LessThan {
+        bool operator()(SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs) const noexcept {
+            assert_invariant(lhs.padding == 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;
+        }
+    };
+
+private:
+    friend inline bool operator == (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+            noexcept {
+        return SamplerYcbcrConversion::EqualTo{}(lhs, rhs);
+    }
+    friend inline bool operator != (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+            noexcept {
+        return  !SamplerYcbcrConversion::EqualTo{}(lhs, rhs);
+    }
+    friend inline bool operator < (SamplerYcbcrConversion lhs, SamplerYcbcrConversion rhs)
+            noexcept {
+        return SamplerYcbcrConversion::LessThan{}(lhs, rhs);
+    }
+};
+
+static_assert(sizeof(SamplerYcbcrConversion) == 4);
+
+static_assert(sizeof(SamplerYcbcrConversion) <= sizeof(uint64_t),
+        "SamplerYcbcrConversion must be no more than 64 bits");
+
+struct ExternalSamplerDatum {
+    ExternalSamplerDatum(SamplerYcbcrConversion ycbcr, SamplerParams spm, uint32_t extFmt)
+        : YcbcrConversion(ycbcr),
+          samplerParams(spm),
+          externalFormat(extFmt) {}
+    bool operator==(ExternalSamplerDatum const& rhs) const {
+        return (YcbcrConversion == rhs.YcbcrConversion && samplerParams == rhs.samplerParams &&
+                externalFormat == rhs.externalFormat);
+    }
+    struct EqualTo {
+        bool operator()(const ExternalSamplerDatum& lhs,
+                const ExternalSamplerDatum& rhs) const noexcept {
+            return (lhs.YcbcrConversion == rhs.YcbcrConversion &&
+                lhs.samplerParams == rhs.samplerParams &&
+                lhs.externalFormat == rhs.externalFormat);
+        }
+    };
+    SamplerYcbcrConversion YcbcrConversion;
+    SamplerParams samplerParams;
+    uint32_t externalFormat;
+};
+// No implicit padding allowed due to it being a hash key.
+static_assert(sizeof(ExternalSamplerDatum) == 12);
+
 struct DescriptorSetLayout {
-    std::variant<utils::StaticString, utils::CString, std::monostate> label;
     utils::FixedCapacityVector<DescriptorSetLayoutBinding> bindings;
+
+//  TODO: uncomment when needed
+//    utils::FixedCapacityVector<ExternalSamplerDatum> externalSamplerData;
 };
 
 //! blending equation function
@@ -1636,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/Platform.h

@@ -107,36 +107,6 @@ public:
         MULTIVIEW,
     };
 
-    /**
-     * This controls the priority level for GPU work scheduling, which helps prioritize the
-     * submitted GPU work and enables preemption.
-     */
-    enum class GpuContextPriority : uint8_t {
-        /**
-         * Backend default GPU context priority (typically MEDIUM)
-         */
-        DEFAULT,
-        /**
-         * For non-interactive, deferrable workloads. This should not interfere with standard
-         * applications.
-         */
-        LOW,
-        /**
-         * The default priority level for standard applications.
-         */
-        MEDIUM,
-        /**
-         * For high-priority, latency-sensitive workloads that are more important than standard
-         * applications.
-         */
-        HIGH,
-        /**
-         * The highest priority, intended for system-critical, real-time applications where missing
-         * deadlines is unacceptable (e.g., VR/AR compositors or other system-critical tasks).
-         */
-        REALTIME,
-    };
-
     struct DriverConfig {
         /**
          * Size of handle arena in bytes. Setting to 0 indicates default value is to be used.
@@ -179,20 +149,6 @@ public:
          *      - PlatformEGLAndroid
          */
         bool assertNativeWindowIsValid = false;
-
-        /**
-         * The action to take if a Drawable cannot be acquired. If true, the
-         * frame is aborted instead of panic. This is only supported for:
-         *      - PlatformMetal
-         */
-        bool metalDisablePanicOnDrawableFailure = false;
-
-        /**
-         * GPU context priority level. Controls GPU work scheduling and preemption.
-         * This is only supported for:
-         *      - PlatformEGL
-         */
-        GpuContextPriority gpuContextPriority = GpuContextPriority::DEFAULT;
     };
 
     Platform() noexcept;

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;
+        backend::DescriptorType type;
-        descriptor_binding_t binding;
+        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
+    TargetBufferInfo(Handle<HwTexture> handle, uint8_t level, uint16_t layer) noexcept
-            : handle(std::move(handle)), level(level), layer(layer) {
+            : 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/OpenGLPlatform.h

@@ -199,7 +199,7 @@ public:
      */
     virtual bool makeCurrent(ContextType type,
             SwapChain* UTILS_NONNULL drawSwapChain,
-            SwapChain* UTILS_NONNULL readSwapChain) = 0;
+            SwapChain* UTILS_NONNULL readSwapChain) noexcept = 0;
 
     /**
      * Called by the driver to make the OpenGL context active on the calling thread and bind
@@ -219,7 +219,7 @@ public:
             SwapChain* UTILS_NONNULL drawSwapChain,
             SwapChain* UTILS_NONNULL readSwapChain,
             utils::Invocable<void()> preContextChange,
-            utils::Invocable<void(size_t index)> postContextChange);
+            utils::Invocable<void(size_t index)> postContextChange) noexcept;
 
     /**
      * Called by the backend just before calling commit()

filament/backend/include/backend/platforms/PlatformCocoaGL.h

@@ -58,7 +58,7 @@ protected:
     SwapChain* createSwapChain(void* nativewindow, uint64_t flags) noexcept override;
     SwapChain* createSwapChain(uint32_t width, uint32_t height, uint64_t flags) noexcept override;
     void destroySwapChain(SwapChain* swapChain) noexcept override;
-    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) override;
+    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) noexcept override;
     void commit(SwapChain* swapChain) noexcept override;
     ExternalTexture* createExternalImageTexture() noexcept override;
     void destroyExternalImageTexture(ExternalTexture* texture) noexcept override;

filament/backend/include/backend/platforms/PlatformCocoaTouchGL.h

@@ -55,7 +55,7 @@ public:
     SwapChain* createSwapChain(void* nativewindow, uint64_t flags) noexcept override;
     SwapChain* createSwapChain(uint32_t width, uint32_t height, uint64_t flags) noexcept override;
     void destroySwapChain(SwapChain* swapChain) noexcept override;
-    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) override;
+    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) noexcept override;
     void commit(SwapChain* swapChain) noexcept override;
 
     ExternalTexture* createExternalImageTexture() noexcept override;

filament/backend/include/backend/platforms/PlatformEGL.h

@@ -109,11 +109,11 @@ protected:
 
     bool makeCurrent(ContextType type,
             SwapChain* drawSwapChain,
-            SwapChain* readSwapChain) override;
+            SwapChain* readSwapChain) noexcept override;
 
     void makeCurrent(SwapChain* drawSwapChain, SwapChain* readSwapChain,
             utils::Invocable<void()> preContextChange,
-            utils::Invocable<void(size_t index)> postContextChange) override;
+            utils::Invocable<void(size_t index)> postContextChange) noexcept override;
 
     void commit(SwapChain* swapChain) noexcept override;
 
@@ -128,7 +128,7 @@ protected:
     bool setExternalImage(ExternalImageHandleRef externalImage, ExternalTexture* texture) noexcept override;
 
     /**
-     * Logs glGetError() to LOG(ERROR)
+     * Logs glGetError() to slog.e
      * @param name a string giving some context on the error. Typically __func__.
      */
     static void logEglError(const char* name) noexcept;
@@ -148,12 +148,12 @@ protected:
     EGLContext getContextForType(ContextType type) const noexcept;
 
     // makes the draw and read surface current without changing the current context
-    EGLBoolean makeCurrent(EGLSurface drawSurface, EGLSurface readSurface) {
+    EGLBoolean makeCurrent(EGLSurface drawSurface, EGLSurface readSurface) noexcept {
         return egl.makeCurrent(drawSurface, readSurface);
     }
 
     // makes context current and set draw and read surfaces to EGL_NO_SURFACE
-    EGLBoolean makeCurrent(EGLContext context) {
+    EGLBoolean makeCurrent(EGLContext context) noexcept {
         return egl.makeCurrent(context, mEGLDummySurface, mEGLDummySurface);
     }
 
@@ -211,9 +211,9 @@ private:
     public:
         explicit EGL(EGLDisplay& dpy) : mEGLDisplay(dpy) {}
         EGLBoolean makeCurrent(EGLContext context,
-                EGLSurface drawSurface, EGLSurface readSurface);
+                EGLSurface drawSurface, EGLSurface readSurface) noexcept;
 
-        EGLBoolean makeCurrent(EGLSurface drawSurface, EGLSurface readSurface) {
+        EGLBoolean makeCurrent(EGLSurface drawSurface, EGLSurface readSurface) noexcept {
             return makeCurrent(mCurrentContext, drawSurface, readSurface);
         }
     } egl{ mEGLDisplay };

filament/backend/include/backend/platforms/PlatformEGLAndroid.h

@@ -127,7 +127,7 @@ protected:
 protected:
     bool makeCurrent(ContextType type,
             SwapChain* drawSwapChain,
-            SwapChain* readSwapChain) override;
+            SwapChain* readSwapChain) noexcept override;
 
 private:
     struct InitializeJvmForPerformanceManagerIfNeeded {

filament/backend/include/backend/platforms/PlatformGLX.h

@@ -51,7 +51,7 @@ protected:
     SwapChain* createSwapChain(void* nativewindow, uint64_t flags) noexcept override;
     SwapChain* createSwapChain(uint32_t width, uint32_t height, uint64_t flags) noexcept override;
     void destroySwapChain(SwapChain* swapChain) noexcept override;
-    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) override;
+    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) noexcept override;
     void commit(SwapChain* swapChain) noexcept override;
 
 private:

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/PlatformOSMesa.h

@@ -56,7 +56,7 @@ protected:
     SwapChain* createSwapChain(uint32_t width, uint32_t height, uint64_t flags) noexcept override;
     void destroySwapChain(SwapChain* swapChain) noexcept override;
     bool makeCurrent(ContextType type, SwapChain* drawSwapChain,
-            SwapChain* readSwapChain) override;
+            SwapChain* readSwapChain) noexcept override;
     void commit(SwapChain* swapChain) noexcept override;
 
 private:

filament/backend/include/backend/platforms/PlatformWGL.h

@@ -53,7 +53,7 @@ protected:
     SwapChain* createSwapChain(void* nativewindow, uint64_t flags) noexcept override;
     SwapChain* createSwapChain(uint32_t width, uint32_t height, uint64_t flags) noexcept override;
     void destroySwapChain(SwapChain* swapChain) noexcept override;
-    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) override;
+    bool makeCurrent(ContextType type, SwapChain* drawSwapChain, SwapChain* readSwapChain) noexcept override;
     void commit(SwapChain* swapChain) noexcept override;
 
 protected: