wip: color space stuff

First, this commit introduces some very simple bugfixes regarding ES2
compatibility related to postprocessing.

Second, this commit adds support for creating textures specified as R8, SRGB8,
and SRGB8_A8 in ES2. R8 is trivial: just use GL_LUMINANCE instead. The sRGB
formats, however, are maybe a bit more controversial. As implemented, they
instead just use the equivalent non-sRGB formats. This is of course technically
incorrect. There are a few approaches to how to add sRGB compatibility for ES2
that I can think of.

1. Do a bunch of complex shader nonsense in matc. Maybe even traversing the AST
and ensuring any texture lookup of a texture flagged as sRGB uses some
compatibility function. This would require static analysis to track if samplers
are reassigned to another variable, for example. This of course also breaks down
if you don't know at compile time if the shader will receive an RGB or an sRGB
sampler, or if the shader should be able to support both RGB or sRGB samplers.
Really only worth mentioning here for the sake of completion.

2. You could also generate simple compatibility functions to look up each
sampler, which would only apply to FL0 materials.

First, we would have to extend the material format to be able to explicitly
"color" a sampler as sRGB or not, like:

```
parameters : [
    {
        type : sampler2d,
        name : albedo,
        precision : medium,
        colorSpace : srgb,
    },
    {
        type : sampler2d,
        name : normal,
        precision : medium,
        colorSpace : linear,
    }
],
```

Then, the following GLSL code would be generated.

```glsl
\#if __VERSION__ == 100
vec4 texture_albedo(vec2 position) {
  return sRGBtoLinear(texture2D(materialParams_albedo, position));
}
vec4 texture_normal(vec2 position) {
  return texture2D(materialParams_albedo, position);
}
\#else
vec4 texture_albedo(vec2 position) {
  return texture(materialParams_albedo, position);
}
vec4 texture_normal(vec2 normal) {
  return texture(materialParams_normal, position);
}
\#endif
```

Finally, at runtime, if a sampler is "colored" one way or the other, we would
verify that only the appropriate kinds of samplers are bound.

I'm actually very partial to this solution. Since sRGB compatibility is only a
concern on ES2, we can generate this code only for FL0 shaders, which already
require GLSL shader authors to care about ESSL 1.0 compatibility by calling the
appropriate `textureXX` functions. Additionally, it provides a layer of
high-level validation that texture lookups are correct, even if a real ES2
context is not available on the device being tested.

3. Leave it entirely up to the client. (What this commit does.) This leaves
client code ripe for making mistakes, but luckily, we can go back and do
solution 2 whenever. If specifying a color space for a sampler remains optional,
then if this feature is retrofitted in the future, client code will continue to
compile.

.dir-locals.el

@@ -0,0 +1,7 @@
+;;; Directory Local Variables            -*- no-byte-compile: t -*-
+;;; For more information see (info "(emacs) Directory Variables")
+
+((c++-mode . ((c-file-style . "filament")
+              (apheleia-inhibit . t)))
+ (c-mode . ((c-file-style . "filament")
+            (apheleia-inhibit . t))))

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+
+[*.{c,cpp,h,inc,kt,java,js,md}]
+indent_style = space
+indent_size = 4
+max_line_length = 100

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,6 +4,8 @@ about: Create a report to help us improve
 
 ---
 
+⚠️ **Issues not using this template will be systematically closed.**
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
@@ -18,8 +20,8 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Logs**
-If applicable, copy logs from your console here. Please *do not*
-use screenshots of logs, copy them as text.
+If applicable, copy **full** logs from your console here. Please *do not*
+use screenshots of logs, copy them as text, use gist or attach an *uncompressed* file.
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]

.github/workflows/android-continuous.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   build-android:
     name: build-android
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0
@@ -29,10 +29,6 @@ jobs:
         with:
           name: filamat-android-full
           path: out/filamat-android-release.aar
-      - uses: actions/upload-artifact@v1.0.0
-        with:
-          name: filamat-android-lite
-          path: out/filamat-android-lite-release.aar
       - uses: actions/upload-artifact@v1.0.0
         with:
           name: gltfio-android-release

.github/workflows/cocopods-deploy.yml

@@ -0,0 +1,30 @@
+name: CocoaPods Deploy
+
+# This must be run after the iOS release job has finished, and the iOS release
+# asset has been uploaded to Github.
+on:
+  workflow_dispatch:
+    inputs:
+      release_tag:
+        description: 'Release tag to deploy (e.g., v1.42.2)'
+        required: true
+        default: 'v1.42.2'
+
+jobs:
+  cocoapods-deploy:
+    name: cocoapods-deploy
+    runs-on: macos-latest
+    steps:
+      - name: Check out iOS/CocoaPods directory
+        uses: Bhacaz/checkout-files@49fc3050859046bf4f4873678d46099985640e89
+        with:
+          files: ios/CocoaPods
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.event.inputs.release_tag }}
+      - name: Move podspec to root
+        run: mv ios/CocoaPods/*.podspec .
+      - name: Install CocoaPods
+        run: gem install cocoapods
+      - uses: michaelhenry/deploy-to-cocoapods-github-action@745686ab065f90596e0d5cfcf97bb2416d94262e
+        env:
+          COCOAPODS_TRUNK_TOKEN: ${{ secrets.COCOAPODS_TRUNK_TOKEN }}

.github/workflows/ios-continuous.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   build-ios:
     name: build-ios
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0

.github/workflows/mac-continuous.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   build-mac:
     name: build-mac
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0

.github/workflows/npm-deploy.yml

@@ -0,0 +1,33 @@
+name: Npm Deploy
+
+on:
+  workflow_dispatch:
+    inputs:
+      release_tag:
+        description: 'Release tag to deploy (e.g., v1.42.2)'
+        required: true
+        default: 'v1.42.2'
+
+jobs:
+  npm-deploy:
+    name: npm-deploy
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3.3.0
+        with:
+          ref: ${{ github.event.inputs.release_tag }}
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Run build script
+        run: |
+          cd build/web && printf "y" | ./build.sh release
+      - name: Deploy to npm
+        run: |
+          cd out/cmake-webgl-release/web/filament-js
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+

.github/workflows/presubmit.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-latest-xl, ubuntu-22.04-16core]
+        os: [macos-latest, ubuntu-22.04]
 
     steps:
       - uses: actions/checkout@v3.3.0
@@ -40,7 +40,7 @@ jobs:
 
   build-android:
     name: build-android
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0
@@ -54,7 +54,7 @@ jobs:
 
   build-ios:
     name: build-iOS
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0
@@ -67,7 +67,7 @@ jobs:
 
   build-web:
     name: build-web
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0

.github/workflows/release.yml

@@ -31,7 +31,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-latest-xl, ubuntu-22.04-16core]
+        os: [macos-latest, ubuntu-22.04]
 
     steps:
       - name: Decide Git ref
@@ -65,7 +65,7 @@ jobs:
 
   build-web:
     name: build-web
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
     if: github.event_name == 'release' || github.event.inputs.platform == 'web'
 
     steps:
@@ -98,7 +98,7 @@ jobs:
 
   build-android:
     name: build-android
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
     if: github.event_name == 'release' || github.event.inputs.platform == 'android'
 
     steps:
@@ -124,7 +124,6 @@ jobs:
           cd ../..
           mv out/filament-android-release.aar out/filament-${TAG}-android.aar
           mv out/filamat-android-release.aar out/filamat-${TAG}-android.aar
-          mv out/filamat-android-lite-release.aar out/filamat-${TAG}-lite-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
       - name: Sign sample-gltf-viewer
@@ -153,7 +152,7 @@ jobs:
 
   build-ios:
     name: build-ios
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
     if: github.event_name == 'release' || github.event.inputs.platform == 'ios'
 
     steps:
@@ -206,8 +205,7 @@ jobs:
           TAG: ${{ steps.git_ref.outputs.tag }}
         run: |
           build\windows\build-github.bat release
-          cd ..\..
-          move out\filament-windows.tgz out\filament-%TAG%-windows.tgz
+          move out\filament-windows.tgz out\filament-$Env:TAG-windows.tgz
         shell: cmd
       - uses: actions/github-script@v6
         env:

.github/workflows/web-continuous.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   build-web:
     name: build-web
-    runs-on: macos-latest-xl
+    runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v3.3.0

.gitignore

@@ -16,3 +16,5 @@ settings.json
 test*.png
 test*.json
 results
+/compile_commands.json
+/.cache

BUILDING.md

@@ -5,7 +5,7 @@
 To build Filament, you must first install the following tools:
 
 - CMake 3.19 (or more recent)
-- clang 7.0 (or more recent)
+- clang 14.0 (or more recent)
 - [ninja 1.10](https://github.com/ninja-build/ninja/wiki/Pre-built-Ninja-packages) (or more recent)
 
 Additional dependencies may be required for your operating system. Please refer to the appropriate
@@ -40,25 +40,27 @@ inside the Filament source tree.
 
 To trigger an incremental debug build:
 
-```
-$ ./build.sh debug
+```shell
+./build.sh debug
 ```
 
 To trigger an incremental release build:
 
-```
-$ ./build.sh release
+```shell
+./build.sh release
 ```
 
 To trigger both incremental debug and release builds:
 
-```
-$ ./build.sh debug release
+```shell
+./build.sh debug release
 ```
 
+If build fails for some reasons, it may leave the `out/` directory in a broken state. You can
+force a clean build by adding the `-c` flag in that case.
+
 To install the libraries and executables in `out/debug/` and `out/release/`, add the `-i` flag.
-You can force a clean build by adding the `-c` flag. The script offers more features described
-by executing `build.sh -h`.
+The script offers more features described by executing `build.sh -h`.
 
 ### Filament-specific CMake Options
 
@@ -76,9 +78,9 @@ The following CMake options are boolean options specific to Filament:
 
 To turn an option on or off:
 
-```
-$ cd <cmake-build-directory>
-$ cmake . -DOPTION=ON       # Relace OPTION with the option name, set to ON / OFF
+```shell
+cd <cmake-build-directory>
+cmake . -DOPTION=ON       # Replace OPTION with the option name, set to ON / OFF
 ```
 
 Options can also be set with the CMake GUI.
@@ -87,10 +89,10 @@ Options can also be set with the CMake GUI.
 
 Make sure you've installed the following dependencies:
 
-- `clang-7` or higher
+- `clang-14` or higher
 - `libglu1-mesa-dev`
-- `libc++-7-dev` (`libcxx-devel` and `libcxx-static` on Fedora) or higher
-- `libc++abi-7-dev` (`libcxxabi-static` on Fedora) or higher
+- `libc++-14-dev` (`libcxx-devel` and `libcxx-static` on Fedora) or higher
+- `libc++abi-14-dev` (`libcxxabi-static` on Fedora) or higher
 - `ninja-build`
 - `libxi-dev`
 - `libxcomposite-dev` (`libXcomposite-devel` on Fedora)
@@ -102,38 +104,38 @@ script.
 If you'd like to run `cmake` directly rather than using the build script, it can be invoked as
 follows, with some caveats that are explained further down.
 
-```
-$ mkdir out/cmake-release
-$ cd out/cmake-release
-$ cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../release/filament ../..
+```shell
+mkdir out/cmake-release
+cd out/cmake-release
+cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../release/filament ../..
 ```
 
 Your Linux distribution might default to `gcc` instead of `clang`, if that's the case invoke
 `cmake` with the following command:
 
-```
-$ mkdir out/cmake-release
-$ cd out/cmake-release
-# Or use a specific version of clang, for instance /usr/bin/clang-7
-$ CC=/usr/bin/clang CXX=/usr/bin/clang++ CXXFLAGS=-stdlib=libc++ \
-    cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../release/filament ../..
+```shell
+mkdir out/cmake-release
+cd out/cmake-release
+# Or use a specific version of clang, for instance /usr/bin/clang-14
+CC=/usr/bin/clang CXX=/usr/bin/clang++ CXXFLAGS=-stdlib=libc++ \
+  cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../release/filament ../..
 ```
 
 You can also export the `CC` and `CXX` environment variables to always point to `clang`. Another
 solution is to use `update-alternatives` to both change the default compiler, and point to a
 specific version of clang:
 
-```
-$ update-alternatives --install /usr/bin/clang clang /usr/bin/clang-7 100
-$ update-alternatives --install /usr/bin/clang++ clang++ /usr/bin/clang++-7 100
-$ update-alternatives --install /usr/bin/cc cc /usr/bin/clang 100
-$ update-alternatives --install /usr/bin/c++ c++ /usr/bin/clang++ 100
+```shell
+update-alternatives --install /usr/bin/clang clang /usr/bin/clang-14 100
+update-alternatives --install /usr/bin/clang++ clang++ /usr/bin/clang++-14 100
+update-alternatives --install /usr/bin/cc cc /usr/bin/clang 100
+update-alternatives --install /usr/bin/c++ c++ /usr/bin/clang++ 100
 ```
 
 Finally, invoke `ninja`:
 
-```
-$ ninja
+```shell
+ninja
 ```
 
 This will build Filament, its tests and samples, and various host tools.
@@ -143,8 +145,8 @@ This will build Filament, its tests and samples, and various host tools.
 To compile Filament you must have the most recent version of Xcode installed and you need to
 make sure the command line tools are setup by running:
 
-```
-$ xcode-select --install
+```shell
+xcode-select --install
 ```
 
 If you wish to run the Vulkan backend instead of the default Metal backend, you must install
@@ -152,11 +154,11 @@ the LunarG SDK, enable "System Global Components", and reboot your machine.
 
 Then run `cmake` and `ninja` to trigger a build:
 
-```
-$ mkdir out/cmake-release
-$ cd out/cmake-release
-$ cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../release/filament ../..
-$ ninja
+```shell
+mkdir out/cmake-release
+cd out/cmake-release
+cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../release/filament ../..
+ninja
 ```
 
 ### iOS
@@ -164,24 +166,24 @@ $ ninja
 The easiest way to build Filament for iOS is to use `build.sh` and the
 `-p ios` flag. For instance to build the debug target:
 
-```
-$ ./build.sh -p ios debug
+```shell
+./build.sh -p ios debug
 ```
 
 See [ios/samples/README.md](./ios/samples/README.md) for more information.
 
 ### Windows
 
-#### Building on Windows with Visual Studio 2019
+#### Building on Windows with Visual Studio 2019 or later
 
 Install the following components:
 
-- [Visual Studio 2019](https://www.visualstudio.com/downloads)
-- [Windows 10 SDK](https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk)
+- [Visual Studio 2019 or later](https://www.visualstudio.com/downloads)
+- [Windows SDK](https://developer.microsoft.com/en-us/windows/downloads/windows-sdk/)
 - [Python 3.7](https://www.python.org/ftp/python/3.7.0/python-3.7.0.exe)
 - [CMake 3.14 or later](https://github.com/Kitware/CMake/releases/download/v3.14.7/cmake-3.14.7-win64-x64.msi)
 
-The latest Windows SDK can also by installed by opening Visual Studio and selecting _Get Tools and
+The latest Windows SDK can also be installed by opening Visual Studio and selecting _Get Tools and
 Features..._ under the _Tools_ menu.
 
 By default, Windows treats the file system as case insensitive. Please do not enable case
@@ -191,10 +193,10 @@ using `fsutil.exe file queryCaseSensitiveInfo`.
 Next, open `x64 Native Tools Command Prompt for VS 2019`, create a working directory, and run
 CMake in it:
 
-```
-> mkdir out
-> cd out
-> cmake ..
+```bat
+mkdir out
+cd out
+cmake ..
 ```
 
 Open the generated solution file `TNT.sln` in Visual Studio.
@@ -204,15 +206,15 @@ target in the _Solution Explorer_ and choose _Build_ to build a specific target.
 
 For example, build the `material_sandbox` sample and run it from the `out` directory with:
 
-```
-> samples\Debug\material_sandbox.exe ..\assets\models\monkey\monkey.obj
+```bat
+samples\Debug\material_sandbox.exe ..\assets\models\monkey\monkey.obj
 ```
 
 You can also use CMake to invoke the build without opening Visual Studio. For example, from the
 `out` folder run the following command.
 
-```
-> cmake --build . --target gltf_viewer --config Release
+```bat
+cmake --build . --target gltf_viewer --config Release
 ```
 
 ### Android
@@ -237,8 +239,8 @@ To build Android on Windows machines, see [android/Windows.md](android/Windows.m
 The easiest way to build Filament for Android is to use `build.sh` and the
 `-p android` flag. For instance to build the release target:
 
-```
-$ ./build.sh -p android release
+```shell
+./build.sh -p android release
 ```
 
 Run `build.sh -h` for more information.
@@ -248,23 +250,23 @@ Run `build.sh -h` for more information.
 Invoke CMake in a build directory of your choice, inside of filament's directory. The commands
 below show how to build Filament for ARM 64-bit (`aarch64`).
 
-```
-$ mkdir out/android-build-release-aarch64
-$ cd out/android-build-release-aarch64
-$ cmake -G Ninja -DCMAKE_TOOLCHAIN_FILE=../../build/toolchain-aarch64-linux-android.cmake \
-        -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../android-release/filament ../..
+```shell
+mkdir out/android-build-release-aarch64
+cd out/android-build-release-aarch64
+cmake -G Ninja -DCMAKE_TOOLCHAIN_FILE=../../build/toolchain-aarch64-linux-android.cmake \
+      -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=../android-release/filament ../..
 ```
 
 And then invoke `ninja`:
 
-```
-$ ninja install
+```shell
+ninja install
 ```
 
 or
 
-```
-$ ninja install/strip
+```shell
+ninja install/strip
 ```
 
 This will generate Filament's Android binaries in `out/android-release`. This location is important
@@ -296,8 +298,8 @@ AAR.
 Alternatively you can build the AAR from the command line by executing the following in the
 `android/` directory:
 
-```
-$ ./gradlew -Pcom.google.android.filament.dist-dir=../../out/android-release/filament assembleRelease
+```shell
+./gradlew -Pcom.google.android.filament.dist-dir=../../out/android-release/filament assembleRelease
 ```
 
 The `-Pcom.google.android.filament.dist-dir` can be used to specify a different installation
@@ -311,7 +313,7 @@ sure to add the newly created module as a dependency to your application.
 If you do not wish to include all supported ABIs, make sure to create the appropriate flavors in
 your Gradle build file. For example:
 
-```
+```gradle
 flavorDimensions 'cpuArch'
 productFlavors {
     arm8 {
@@ -353,7 +355,7 @@ started, follow the instructions for building Filament on your platform ([macOS]
 Next, you need to install the Emscripten SDK. The following instructions show how to install the
 same version that our continuous builds use.
 
-```
+```shell
 cd <your chosen parent folder for the emscripten SDK>
 curl -L https://github.com/emscripten-core/emsdk/archive/refs/tags/3.1.15.zip > emsdk.zip
 unzip emsdk.zip ; mv emsdk-* emsdk ; cd emsdk
@@ -364,7 +366,7 @@ source ./emsdk_env.sh
 
 After this you can invoke the [easy build](#easy-build) script as follows:
 
-```
+```shell
 export EMSDK=<your chosen home for the emscripten SDK>
 ./build.sh -p webgl release
 ```
@@ -374,7 +376,7 @@ creates a `samples` folder that can be used as the root of a simple static web s
 cannot open the HTML directly from the filesystem due to CORS. We recommend using the emrun tool
 to create a quick localhost server:
 
-```
+```shell
 emrun out/cmake-webgl-release/web/samples --no_browser --port 8000
 ```
 
@@ -395,7 +397,7 @@ Some of the samples accept FBX/OBJ meshes while others rely on the `filamesh` fi
 generate a `filamesh ` file from an FBX/OBJ asset, run the `filamesh` tool
 (`./tools/filamesh/filamesh` in your build directory):
 
-```
+```shell
 filamesh ./assets/models/monkey/monkey.obj monkey.filamesh
 ```
 
@@ -405,7 +407,7 @@ files for the IBL (which are PNGs containing `R11F_G11F_B10F` data) or a path to
 containing two `.ktx` files (one for the IBL itself, one for the skybox). To generate an IBL
 simply use this command:
 
-```
+```shell
 cmgen -f ktx -x ./ibls/ my_ibl.exr
 ```
 
@@ -427,9 +429,9 @@ value is the desired roughness between 0 and 1.
 To generate the documentation you must first install `doxygen` and `graphviz`, then run the 
 following commands:
 
-```
-$ cd filament/filament
-$ doxygen docs/doxygen/filament.doxygen
+```shell
+cd filament/filament
+doxygen docs/doxygen/filament.doxygen
 ```
 
 Finally simply open `docs/html/index.html` in your web browser.
@@ -439,7 +441,7 @@ Finally simply open `docs/html/index.html` in your web browser.
 To try out Filament's Vulkan support with SwiftShader, first build SwiftShader and set the
 `SWIFTSHADER_LD_LIBRARY_PATH` variable to the folder that contains `libvk_swiftshader.dylib`:
 
-```
+```shell
 git clone https://github.com/google/swiftshader.git
 cd swiftshader/build
 cmake .. &&  make -j
@@ -454,7 +456,7 @@ Continuous testing turnaround can be quite slow if you need to build SwiftShader
 provide an Ubuntu-based Docker image that has it already built. The Docker image also includes
 everything necessary for building Filament. You can fetch and run the image as follows:
 
-```
+```shell
 docker pull ghcr.io/filament-assets/swiftshader
 docker run -it ghcr.io/filament-assets/swiftshader
 ```

CMakeLists.txt

@@ -3,6 +3,14 @@
 # ==================================================================================================
 cmake_minimum_required(VERSION 3.19)
 
+# ==================================================================================================
+# Toolchain configuration
+# ==================================================================================================
+if (APPLE AND NOT IOS)
+    # This must be set before project() is called
+    set(CMAKE_OSX_DEPLOYMENT_TARGET 10.15 CACHE STRING "")
+endif()
+
 # ==================================================================================================
 # Project declaration
 # ==================================================================================================
@@ -372,6 +380,12 @@ if (ANDROID OR IOS OR WEBGL)
     endif()
 endif()
 
+# Turn off exceptions on iOS debug as well. This fixes an availability error we see when using
+# std::visit, which is not supported on iOS 11.0 when exceptions are enabled.
+if (IOS)
+    set(CMAKE_CXX_FLAGS_DEBUG "${CMAKE_CXX_FLAGS_DEBUG} -fno-exceptions")
+endif()
+
 # With WebGL, we disable RTTI even for debug builds because we pass emscripten::val back and forth
 # between C++ and JavaScript in order to efficiently access typed arrays, which are unbound.
 # NOTE: This is not documented in emscripten so we should consider a different approach.

CONTRIBUTING.md

@@ -27,7 +27,7 @@ again.
 
 ## Code Style
 
-See [CodeStyle.md](/CODE_STYLE.md)
+See [CODE_STYLE.md](/CODE_STYLE.md)
 
 ## Code reviews
 

NEW_RELEASE_NOTES.md

@@ -7,3 +7,12 @@ for next branch cut* header.
 appropriate header in [RELEASE_NOTES.md](./RELEASE_NOTES.md).
 
 ## Release notes for next branch cut
+
+- engine: Allow instantiating Engine at a given feature level via `Engine::Builder::featureLevel`
+- matc: Enable `GL_OES_standard_derivatives` extension in ESSL 1.0 shaders
+- matc: Fix code generation of double sided and masked materials in ESSL 1.0 shaders
+- filagui: Add support for feature level 0
+- matc: Add support for post-process materials in feature level 0
+- engine: Add `Material::getFeatureLevel()`
+- engine: Add missing `Material::getReflectionMode()` method in Java
+- engine: Support basic usage of post-processing materials on feature level 0

README.md

@@ -31,7 +31,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.google.android.filament:filament-android:1.36.0'
+    implementation 'com.google.android.filament:filament-android:1.45.0'
 }
 ```
 
@@ -40,6 +40,7 @@ Here are all the libraries available in the group `com.google.android.filament`:
 | Artifact      | Description   |
 | ------------- | ------------- |
 | [![filament-android](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filament-android/badge.svg?subject=filament-android)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filament-android)  | The Filament rendering engine itself. |
+| [![filament-android-debug](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filament-android-debug/badge.svg?subject=filament-android-debug)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filament-android-debug)  | Debug version of `filament-android`. |
 | [![gltfio-android](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/gltfio-android/badge.svg?subject=gltfio-android)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/gltfio-android) | A glTF 2.0 loader for Filament, depends on `filament-android`. |
 | [![filament-utils-android](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filament-utils-android/badge.svg?subject=filament-utils-android)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filament-utils-android) | KTX loading, Kotlin math, and camera utilities, depends on `gltfio-android`. |
 | [![filamat-android](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filamat-android/badge.svg?subject=filamat-android)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filamat-android) | A runtime material builder/compiler. This library is large but contains a full shader compiler/validator/optimizer and supports both OpenGL and Vulkan. |
@@ -49,8 +50,8 @@ Here are all the libraries available in the group `com.google.android.filament`:
 
 iOS projects can use CocoaPods to install the latest release:
 
-```
-pod 'Filament', '~> 1.36.0'
+```shell
+pod 'Filament', '~> 1.45.0'
 ```
 
 ### Snapshots

RELEASE_GUIDE.md

@@ -9,11 +9,15 @@ Before starting, ensure that each of these branches is up-to-date with origin:
 - rc/$RELEASE
 - main
 
-## 0. Make sure the rc/$RELEASE branch has the correct version.
+## 0. Check versions.
 
-It should have the version corresponding to its name, $RELEASE.
+Make sure the rc/$RELEASE branch has the correct Filament version. It should have the version
+corresponding to its name, $RELEASE.
 
-## 1. Bump versions on main to $RELEASE.
+Make sure `MATERIAL_VERSION` has been bumped to a new version if this is a MAJOR or MINOR release
+(first two version numbers).
+
+## 1. Bump Filament versions on main to $RELEASE.
 
 Checkout main and run the following command to bump Filament's version to $RELEASE:
 
@@ -124,3 +128,15 @@ Navigate to [Filament's release
 workflow](https://github.com/google/filament/actions/workflows/release.yml). Hit the _Run workflow_
 dropdown. Modify _Platform to build_ and _Release tag to build_, then hit _Run workflow_. This will
 initiate a new release run.
+
+## 11. Kick off the npm and CocoaPods release jobs
+
+Navigate to [Filament's npm deploy
+workflow](https://github.com/google/filament/actions/workflows/npm-deploy.yml).
+Hit the _Run workflow_ dropdown. Modify _Release tag to deploy_ to the tag corresponding to this
+release (for example, v1.42.2).
+
+Navigate to [Filament's CocoaPods deploy
+workflow](https://github.com/google/filament/actions/workflows/cocopods-deploy.yml).
+Hit the _Run workflow_ dropdown. Modify _Release tag to deploy_ to the tag corresponding to this
+release (for example, v1.42.2).

RELEASE_NOTES.md

@@ -7,6 +7,119 @@ 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.45.1
+
+- engine: Added parameter for configuring JobSystem thread count
+- engine: In Java, introduce Engine.Builder
+- gltfio: fix ubershader index for transmission&volume material
+- engine: New tone mapper: `AgXTonemapper`.
+- matinfo: Add support for viewing ESSL 1.0 shaders
+- engine: Add `Renderer::getClearOptions()` [b/243846268]
+- engine: Fix stable shadows (again) when an IBL rotation is used
+
+## v1.45.0
+
+- materials: fix alpha masked materials when MSAA is turned on [⚠️ **Recompile materials**]
+- materials: better support materials with custom depth [**Recompile Materials**]
+- engine: fade shadows at shadowFar distance instead of hard cutoff [⚠️ **New Material Version**]
+
+## v1.44.0
+
+- engine: add support for skinning with more than four bones per vertex.
+- engine: remove `BloomOptions::anamorphism` which wasn't working well in most cases [**API CHANGE**]
+- engine: new API to return a Material's supported variants, C++ only (b/297456590)
+- build: fix emscripten-1.3.46 build
+- engine: materials built for feature level 0 can now also be loaded in higher feature levels [⚠️
+  **New Material Version**]
+
+## v1.43.1
+
+## v1.43.0
+
+- gltfio: Fix possible change of scale sign when decomposing transform matrix for animation
+- engine: Fixes "stable" shadows (see b/299310624)
+
+## v1.42.2
+
+- Fix possible NPE when updating fog options from Java/Kotlin
+- The `emissive` property was not applied properly to `MASKED` materials, and could cause
+  dark fringes to appear (recompile materials)
+- Allow glTF materials with transmission/volume extensions to choose their alpha mode
+  instead of forcing `MASKED`
+- Fix a crash in gltfio when not using ubershaders
+- Use flatmat for mat parameter in jsbinding
+- Fix TextureFlags for sheenRoughnessMap when textures of sheenRoughnessMap and sheenColorMap is same
+- Directional shadows can now be transformed (b/297095805)
+
+## v1.42.1
+
+- Fix potential `EXC_BAD_ACCESS` with Metal backend: b/297059776
+- `setFrameCompletedCallback` now takes a `backend::CallbackHandler`.
+
+## v1.42.0
+
+- engine: add preliminary support for instanced stereoscopic rendering [⚠️ **Recompile materials**]
+
+## v1.41.0
+
+- backend: fix #6997 : picking can fail on Adreno [⚠️ **New Material Version**]
+- backend: A partial workaround for PowerVR devices (#5118, b/190221124) [⚠️ **Recompile Materials**]
+
+## v1.40.5
+
+- backend: Disable timer queries on all Mali GPUs (fixes b/233754398)
+- engine: Add a way to query the validity of most filament objects (see `Engine::isValid`)
+- opengl: fix b/290388359 : possible crash when shutting down the engine
+- engine: Improve precision of frame time measurement when using emulated TimerQueries
+- backend: Improve frame pacing on Android and Vulkan.
+- backend: workaround b/291140208 (gltf_viewer crashes on Nexus 6P)
+- engine: support `setDepthFunc` for `MaterialInstance`
+- web: Added setDepthFunc()/getDepthFunc() to MaterialInstance
+- android: Added setDepthFunc()/getDepthFunc() to MaterialInstance
+
+## v1.40.4
+
+- gltfio: fix crash when compute morph target without material
+- matc: fix buggy `variant-filter` flag
+- web: Added missing setMat3Parameter()/setMat4Parameter() to MaterialInstance
+- opengl: fix b/290670707 : crash when using the blob cache
+- engine: fix a crash with `Material::compile()` when a callback is specified
+
+## v1.40.3
+
+## v1.40.2
+
+- rendering: dynamic resolution would not work with a translucent render target and quality > low
+- Java/Kotlin: user callbacks were not invoked on successful texture upload
+
+## v1.40.1
+
+## v1.40.0
+
+- matc: fix VSM high precision option on mobile [⚠️ **Recompile materials**]
+- vulkan: support sRGB swap chain
+- Add new `getMaxAutomaticInstances()` API on `Engine` to get max supported automatic instances.
+- UiHelper: fix jank when a `TextureView` is resized (fixes b\282220665)
+- backend: parallel shader compilation support. This breaks and improves the recent `Material::compile` API.
+
+## v1.39.0
+
+- matc: workaround a bug in spirv-tools causing vsm to fail [⚠️ **Recompile materials**]
+
+## v1.38.0
+
+- engine: a new feature to set a transform on the global-scale fog  [⚠️ **Recompile materials**]
+- engine: large-scale fog can now be opted-out on a per-renderable basis
+- engine: improve froxelizer resource efficiency [⚠️ **Recompile materials**]
+- matc: better accounting and validation of used samplers in user materials
+- engine: add support for sampling fog color from a custom texture [⚠️ **Recompile materials**]
+- vulkan: introduce new custom swapchain API
+- vulkan: new context sharing API
+
+## v1.37.0
+
+- backend: added `Platform` blob cache APIs, typically used to cache programs [⚠️ **Recompile materials**]
+
 ## v1.36.0
 
 - engine: a local transform can now be supplied for each GPU instance [⚠️ **Recompile materials**]

android/Windows.md

@@ -135,7 +135,7 @@ gradlew -Pcom.google.android.filament.dist-dir=..\out\android-release\filament a
 If you're only interested in building SDK, you may skip samples build by passing a `com.google.android.filament.skip-samples` flag:
 
 ```
-gradlew -Pcom.google.android.filament.dist-dir=..\out\android-release\filament assembleRelease -Pfilament_skip_samples
+gradlew -Pcom.google.android.filament.dist-dir=..\out\android-release\filament assembleRelease -Pcom.google.android.filament.skip-samples
 ```
 
 

android/build.gradle

@@ -83,12 +83,12 @@ buildscript {
         'minSdk': 19,
         'targetSdk': 33,
         'compileSdk': 33,
-        'kotlin': '1.8.20',
-        'kotlin_coroutines': '1.6.4',
-        'buildTools': '33.0.2',
+        'kotlin': '1.9.0',
+        'kotlin_coroutines': '1.7.2',
+        'buildTools': '34.0.0',
         'ndk': '25.1.8937393',
-        'androidx_core': '1.10.0',
-        'androidx_annotations': '1.3.0'
+        'androidx_core': '1.10.1',
+        'androidx_annotations': '1.6.0'
     ]
 
     ext.deps = [
@@ -104,7 +104,7 @@ buildscript {
     ]
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
+        classpath 'com.android.tools.build:gradle:8.1.0'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${versions.kotlin}"
     }
 
@@ -152,7 +152,7 @@ buildscript {
 }
 
 plugins {
-    id "io.github.gradle-nexus.publish-plugin" version "1.1.0"
+    id "io.github.gradle-nexus.publish-plugin" version "1.3.0"
 }
 
 // See https://github.com/gradle-nexus/publish-plugin

android/filamat-android/CMakeLists.txt

@@ -6,9 +6,6 @@ option(FILAMENT_ENABLE_MATDBG "Enables Material debugger" OFF)
 set(FILAMENT_DIR ${FILAMENT_DIST_DIR})
 
 set(FILAMAT_FLAVOR "filamat")
-if(FILAMAT_LITE)
-    set(FILAMAT_FLAVOR "filamat_lite")
-endif()
 
 if (FILAMENT_SUPPORTS_VULKAN)
     message("Library filamat ignores Vulkan settings")

android/filamat-android/build.gradle

@@ -1,29 +1,8 @@
 android {
     namespace 'com.google.android.filament.filamat'
 
-    flavorDimensions "functionality"
-    productFlavors {
-        full {
-            dimension "functionality"
-        }
-
-        lite {
-            dimension "functionality"
-
-            externalNativeBuild {
-                cmake {
-                    arguments.add("-DFILAMAT_LITE=ON")
-                }
-            }
-        }
-    }
-
     publishing {
-        singleVariant("fullRelease") {
-            withSourcesJar()
-            withJavadocJar()
-        }
-        singleVariant("liteRelease") {
+        singleVariant("release") {
             withSourcesJar()
             withJavadocJar()
         }
@@ -39,14 +18,9 @@ apply from: rootProject.file('gradle/gradle-mvn-push.gradle')
 afterEvaluate { project ->
     publishing {
         publications {
-            fullRelease(MavenPublication) {
+            release(MavenPublication) {
                 artifactId = POM_ARTIFACT_ID_FULL
-                from components.fullRelease
-            }
-
-            liteRelease(MavenPublication) {
-                artifactId = POM_ARTIFACT_ID_LITE
-                from components.liteRelease
+                from components.release
             }
         }
     }

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

@@ -25,15 +25,8 @@
 using namespace filament;
 using namespace utils;
 
-extern "C" JNIEXPORT jlong JNICALL
-Java_com_google_android_filament_Engine_nCreateEngine(JNIEnv*, jclass, jlong backend,
-        jlong sharedContext) {
-    return (jlong) Engine::create((Engine::Backend) backend, nullptr, (void*) sharedContext);
-}
-
 extern "C" JNIEXPORT void JNICALL
-Java_com_google_android_filament_Engine_nDestroyEngine(JNIEnv*, jclass,
-        jlong nativeEngine) {
+Java_com_google_android_filament_Engine_nDestroyEngine(JNIEnv*, jclass, jlong nativeEngine) {
     Engine* engine = (Engine*) nativeEngine;
     Engine::destroy(&engine);
 }
@@ -278,6 +271,112 @@ Java_com_google_android_filament_Engine_nDestroyEntity(JNIEnv*, jclass,
     engine->destroy(entity);
 }
 
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidRenderer(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeRenderer) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Renderer*)nativeRenderer);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidView(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeView) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((View*)nativeView);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidScene(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeScene) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Scene*)nativeScene);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidFence(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeFence) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Fence*)nativeFence);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidStream(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeStream) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Stream*)nativeStream);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidIndexBuffer(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeIndexBuffer) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((IndexBuffer*)nativeIndexBuffer);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidVertexBuffer(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeVertexBuffer) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((VertexBuffer*)nativeVertexBuffer);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidSkinningBuffer(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeSkinningBuffer) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((SkinningBuffer*)nativeSkinningBuffer);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidIndirectLight(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeIndirectLight) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((IndirectLight*)nativeIndirectLight);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidMaterial(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeMaterial) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Material*)nativeMaterial);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidSkybox(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeSkybox) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Skybox*)nativeSkybox);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidColorGrading(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeColorGrading) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((ColorGrading*)nativeColorGrading);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidTexture(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeTexture) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((Texture*)nativeTexture);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidRenderTarget(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeTarget) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((RenderTarget*)nativeTarget);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_Engine_nIsValidSwapChain(JNIEnv*, jclass,
+        jlong nativeEngine, jlong nativeSwapChain) {
+    Engine* engine = (Engine *)nativeEngine;
+    return (jboolean)engine->isValid((SwapChain*)nativeSwapChain);
+}
+
 extern "C" JNIEXPORT void JNICALL
 Java_com_google_android_filament_Engine_nFlushAndWait(JNIEnv*, jclass,
         jlong nativeEngine) {
@@ -348,4 +447,56 @@ Java_com_google_android_filament_Engine_nGetActiveFeatureLevel(JNIEnv *, jclass,
         jlong nativeEngine) {
     Engine* engine = (Engine*) nativeEngine;
     return (jint)engine->getActiveFeatureLevel();
-}
+}
+
+extern "C" JNIEXPORT jlong JNICALL Java_com_google_android_filament_Engine_nCreateBuilder(JNIEnv*,
+        jclass) {
+    Engine::Builder* builder = new Engine::Builder{};
+    return (jlong) builder;
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nDestroyBuilder(JNIEnv*,
+        jclass, jlong nativeBuilder) {
+    Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
+    delete builder;
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nSetBuilderBackend(
+        JNIEnv*, jclass, jlong nativeBuilder, jlong backend) {
+    Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
+    builder->backend((Engine::Backend) backend);
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nSetBuilderConfig(JNIEnv*,
+        jclass, jlong nativeBuilder, jlong commandBufferSizeMB, jlong perRenderPassArenaSizeMB,
+        jlong driverHandleArenaSizeMB, jlong minCommandBufferSizeMB, jlong perFrameCommandsSizeMB,
+        jlong jobSystemThreadCount) {
+    Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
+    Engine::Config config = {
+            .commandBufferSizeMB = (uint32_t) commandBufferSizeMB,
+            .perRenderPassArenaSizeMB = (uint32_t) perRenderPassArenaSizeMB,
+            .driverHandleArenaSizeMB = (uint32_t) driverHandleArenaSizeMB,
+            .minCommandBufferSizeMB = (uint32_t) minCommandBufferSizeMB,
+            .perFrameCommandsSizeMB = (uint32_t) perFrameCommandsSizeMB,
+            .jobSystemThreadCount = (uint32_t) jobSystemThreadCount,
+    };
+    builder->config(&config);
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nSetBuilderFeatureLevel(
+        JNIEnv*, jclass, jlong nativeBuilder, jint ordinal) {
+    Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
+    builder->featureLevel((Engine::FeatureLevel)ordinal);
+}
+
+extern "C" JNIEXPORT void JNICALL Java_com_google_android_filament_Engine_nSetBuilderSharedContext(
+        JNIEnv*, jclass, jlong nativeBuilder, jlong sharedContext) {
+    Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
+    builder->sharedContext((void*) sharedContext);
+}
+
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_Engine_nBuilderBuild(JNIEnv*, jclass, jlong nativeBuilder) {
+    Engine::Builder* builder = (Engine::Builder*) nativeBuilder;
+    return (jlong) builder->build();
+}

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

@@ -79,7 +79,8 @@ Java_com_google_android_filament_LightManager_nBuilderShadowOptions(JNIEnv* env,
         jfloat shadowFarHint, jboolean stable, jboolean lispsm,
         jfloat polygonOffsetConstant, jfloat polygonOffsetSlope,
         jboolean screenSpaceContactShadows, jint stepCount,
-        jfloat maxShadowDistance, jboolean elvsm, jfloat blurWidth, jfloat shadowBulbRadius) {
+        jfloat maxShadowDistance, jboolean elvsm, jfloat blurWidth, jfloat shadowBulbRadius,
+        jfloatArray transform) {
     LightManager::Builder *builder = (LightManager::Builder *) nativeBuilder;
     LightManager::ShadowOptions shadowOptions {
             .mapSize = (uint32_t)mapSize,
@@ -102,12 +103,18 @@ Java_com_google_android_filament_LightManager_nBuilderShadowOptions(JNIEnv* env,
             },
             .shadowBulbRadius = shadowBulbRadius
     };
+
     jfloat *nativeSplits = env->GetFloatArrayElements(splitPositions, NULL);
     const jsize splitCount = std::min((jsize) 3, env->GetArrayLength(splitPositions));
-    for (jsize i = 0; i < splitCount; i++) {
-        shadowOptions.cascadeSplitPositions[i] = nativeSplits[i];
-    }
+    std::copy_n(nativeSplits, splitCount, shadowOptions.cascadeSplitPositions);
     env->ReleaseFloatArrayElements(splitPositions, nativeSplits, 0);
+
+    jfloat* nativeTransform = env->GetFloatArrayElements(transform, NULL);
+    std::copy_n(nativeTransform,
+                std::min(4, env->GetArrayLength(transform)),
+                shadowOptions.transform.xyzw.v);
+    env->ReleaseFloatArrayElements(transform, nativeTransform, 0);
+
     builder->shadowOptions(shadowOptions);
 }
 

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

@@ -105,6 +105,22 @@ Java_com_google_android_filament_Material_nGetRefractionType(JNIEnv*, jclass,
     return (jint) material->getRefractionType();
 }
 
+extern "C"
+JNIEXPORT jint JNICALL
+Java_com_google_android_filament_Material_nGetReflectionMode(JNIEnv*, jclass,
+        jlong nativeMaterial) {
+    Material* material = (Material*) nativeMaterial;
+    return (jint) material->getReflectionMode();
+}
+
+extern "C"
+JNIEXPORT jint JNICALL
+Java_com_google_android_filament_Material_nGetFeatureLevel(JNIEnv*, jclass,
+        jlong nativeMaterial) {
+    Material* material = (Material*) nativeMaterial;
+    return (jint) material->getFeatureLevel();
+}
+
 extern "C"
 JNIEXPORT jint JNICALL
 Java_com_google_android_filament_Material_nGetVertexDomain(JNIEnv*, jclass,

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

@@ -246,17 +246,21 @@ Java_com_google_android_filament_MaterialInstance_nSetFloatParameterArray(JNIEnv
     env->ReleaseStringUTFChars(name_, name);
 }
 
+// defined in TextureSampler.cpp
+namespace filament::JniUtils {
+    TextureSampler from_long(jlong params) noexcept;
+} // TextureSamplerJniUtils
+
 extern "C"
 JNIEXPORT void JNICALL
 Java_com_google_android_filament_MaterialInstance_nSetParameterTexture(
         JNIEnv *env, jclass, jlong nativeMaterialInstance, jstring name_,
-        jlong nativeTexture, jint sampler_) {
+        jlong nativeTexture, jlong sampler_) {
     MaterialInstance* instance = (MaterialInstance*) nativeMaterialInstance;
     Texture* texture = (Texture*) nativeTexture;
-    TextureSampler& sampler = reinterpret_cast<TextureSampler&>(sampler_);
 
     const char *name = env->GetStringUTFChars(name_, 0);
-    instance->setParameter(name, texture, sampler);
+    instance->setParameter(name, texture, JniUtils::from_long(sampler_));
     env->ReleaseStringUTFChars(name_, name);
 }
 
@@ -357,6 +361,14 @@ Java_com_google_android_filament_MaterialInstance_nSetDepthCulling(JNIEnv*,
     instance->setDepthCulling(enable);
 }
 
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_google_android_filament_MaterialInstance_nSetDepthFunc(JNIEnv*,
+        jclass, jlong nativeMaterialInstance, jlong function) {
+    MaterialInstance* instance = (MaterialInstance*) nativeMaterialInstance;
+    instance->setDepthFunc(static_cast<MaterialInstance::DepthFunc>(function));
+}
+
 extern "C"
 JNIEXPORT void JNICALL
 Java_com_google_android_filament_MaterialInstance_nSetStencilCompareFunction(JNIEnv*, jclass,
@@ -524,3 +536,11 @@ Java_com_google_android_filament_MaterialInstance_nIsDepthCullingEnabled(JNIEnv*
     MaterialInstance* instance = (MaterialInstance*)nativeMaterialInstance;
     return instance->isDepthCullingEnabled();
 }
+
+extern "C"
+JNIEXPORT jint JNICALL
+Java_com_google_android_filament_MaterialInstance_nGetDepthFunc(JNIEnv* env, jclass clazz,
+        jlong nativeMaterialInstance) {
+    MaterialInstance* instance = (MaterialInstance*)nativeMaterialInstance;
+    return (jint)instance->getDepthFunc();
+}

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

@@ -201,12 +201,19 @@ Java_com_google_android_filament_RenderableManager_nBuilderSkinning(JNIEnv*, jcl
 }
 
 extern "C" JNIEXPORT void JNICALL
-Java_com_google_android_filament_RenderableManager_nEnableSkinningBuffers(JNIEnv*, jclass,
+Java_com_google_android_filament_RenderableManager_nBuilderEnableSkinningBuffers(JNIEnv*, jclass,
         jlong nativeBuilder, jboolean enabled) {
     RenderableManager::Builder *builder = (RenderableManager::Builder *) nativeBuilder;
     builder->enableSkinningBuffers(enabled);
 }
 
+extern "C" JNIEXPORT void JNICALL
+Java_com_google_android_filament_RenderableManager_nBuilderFog(JNIEnv*, jclass,
+        jlong nativeBuilder, jboolean enabled) {
+    RenderableManager::Builder *builder = (RenderableManager::Builder *) nativeBuilder;
+    builder->fog(enabled);
+}
+
 extern "C" JNIEXPORT jint JNICALL
 Java_com_google_android_filament_RenderableManager_nBuilderSkinningBones(JNIEnv* env, jclass,
         jlong nativeBuilder, jint boneCount, jobject bones, jint remaining) {
@@ -360,6 +367,20 @@ Java_com_google_android_filament_RenderableManager_nSetCulling(JNIEnv*, jclass,
     rm->setCulling((RenderableManager::Instance) i, enabled);
 }
 
+extern "C" JNIEXPORT void JNICALL
+Java_com_google_android_filament_RenderableManager_nSetFogEnabled(JNIEnv*, jclass,
+        jlong nativeRenderableManager, jint i, jboolean enabled) {
+    RenderableManager *rm = (RenderableManager *) nativeRenderableManager;
+    rm->setFogEnabled((RenderableManager::Instance) i, enabled);
+}
+
+extern "C" JNIEXPORT jboolean JNICALL
+Java_com_google_android_filament_RenderableManager_nGetFogEnabled(JNIEnv*, jclass,
+        jlong nativeRenderableManager, jint i) {
+    RenderableManager *rm = (RenderableManager *) nativeRenderableManager;
+    return (jboolean)rm->getFogEnabled((RenderableManager::Instance) i);
+}
+
 extern "C" JNIEXPORT void JNICALL
 Java_com_google_android_filament_RenderableManager_nSetCastShadows(JNIEnv*, jclass,
         jlong nativeRenderableManager, jint i, jboolean enabled) {

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

@@ -71,6 +71,13 @@ Java_com_google_android_filament_Scene_nRemoveEntities(JNIEnv *env, jclass type,
     env->ReleaseIntArrayElements(entities, (jint*) nativeEntities, JNI_ABORT);
 }
 
+extern "C" JNIEXPORT jint JNICALL
+Java_com_google_android_filament_Scene_nGetEntityCount(JNIEnv *env, jclass type,
+        jlong nativeScene) {
+    Scene* scene = (Scene*) nativeScene;
+    return (jint) scene->getEntityCount();
+}
+
 extern "C" JNIEXPORT jint JNICALL
 Java_com_google_android_filament_Scene_nGetRenderableCount(JNIEnv *env, jclass type,
         jlong nativeScene) {

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

@@ -27,11 +27,10 @@ extern "C" JNIEXPORT void JNICALL
 Java_com_google_android_filament_SwapChain_nSetFrameCompletedCallback(JNIEnv* env, jclass,
         jlong nativeSwapChain, jobject handler, jobject runnable) {
     SwapChain* swapChain = (SwapChain*) nativeSwapChain;
-    auto *callback = JniCallback::make(env, handler, runnable);
-    swapChain->setFrameCompletedCallback([](void* user) {
-        JniCallback* callback = (JniCallback*)user;
+    auto* callback = JniCallback::make(env, handler, runnable);
+    swapChain->setFrameCompletedCallback(nullptr, [callback](SwapChain* swapChain) {
         JniCallback::postToJavaAndDestroy(callback);
-    }, callback);
+    });
 }
 
 extern "C" JNIEXPORT jboolean JNICALL

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

@@ -511,9 +511,7 @@ public:
 
 private:
     void* mData = nullptr;
-    jobject mBitmap = nullptr;
-    jobject mHandler = nullptr;
-    jobject mCallback = nullptr;
+    jobject mBitmap{};
     AndroidBitmapInfo mInfo{};
 };
 

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

@@ -18,142 +18,139 @@
 
 #include <filament/TextureSampler.h>
 
+#include <utils/algorithm.h>
+
 using namespace filament;
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nCreateSampler(JNIEnv *env, jclass type, jint min,
+namespace filament::JniUtils {
+
+jlong to_long(TextureSampler const& sampler) noexcept {
+    return jlong(utils::bit_cast<uint32_t>(sampler.getSamplerParams()));
+}
+
+TextureSampler from_long(jlong params) noexcept {
+    return TextureSampler{
+            utils::bit_cast<backend::SamplerParams>(
+                    static_cast<uint32_t>(params))};
+}
+
+} // namespace filament::JniUtils
+
+using namespace JniUtils;
+
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nCreateSampler(JNIEnv *, jclass, jint min,
         jint max, jint s, jint t, jint r) {
-    return TextureSampler(static_cast<TextureSampler::MinFilter>(min),
-            static_cast<TextureSampler::MagFilter>(max), static_cast<TextureSampler::WrapMode>(s),
-            static_cast<TextureSampler::WrapMode>(t),
-            static_cast<TextureSampler::WrapMode>(r)).getSamplerParams().u;
+    TextureSampler sampler(static_cast<TextureSampler::MinFilter>(min),
+                           static_cast<TextureSampler::MagFilter>(max),
+                           static_cast<TextureSampler::WrapMode>(s),
+                           static_cast<TextureSampler::WrapMode>(t),
+                           static_cast<TextureSampler::WrapMode>(r));
+    return to_long(sampler);
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nCreateCompareSampler(JNIEnv *env, jclass type,
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nCreateCompareSampler(JNIEnv *, jclass,
         jint mode, jint function) {
-    return TextureSampler(static_cast<TextureSampler::CompareMode>(mode),
-            static_cast<TextureSampler::CompareFunc>(function)).getSamplerParams().u;
+    TextureSampler sampler(static_cast<TextureSampler::CompareMode>(mode),
+                           static_cast<TextureSampler::CompareFunc>(function));
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetMinFilter(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getMinFilter());
+Java_com_google_android_filament_TextureSampler_nGetMinFilter(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getMinFilter());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetMinFilter(JNIEnv *env, jclass type,
-        jint sampler_, jint filter) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetMinFilter(JNIEnv *, jclass, jlong sampler_, jint filter) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setMinFilter(static_cast<TextureSampler::MinFilter>(filter));
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetMagFilter(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getMagFilter());
+Java_com_google_android_filament_TextureSampler_nGetMagFilter(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getMagFilter());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetMagFilter(JNIEnv *env, jclass type,
-        jint sampler_, jint filter) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetMagFilter(JNIEnv *, jclass, jlong sampler_, jint filter) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setMagFilter(static_cast<TextureSampler::MagFilter>(filter));
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetWrapModeS(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getWrapModeS());
+Java_com_google_android_filament_TextureSampler_nGetWrapModeS(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getWrapModeS());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetWrapModeS(JNIEnv *env, jclass type,
-        jint sampler_, jint mode) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetWrapModeS(JNIEnv *, jclass, jlong sampler_, jint mode) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setWrapModeS(static_cast<TextureSampler::WrapMode>(mode));
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetWrapModeT(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getWrapModeT());
+Java_com_google_android_filament_TextureSampler_nGetWrapModeT(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getWrapModeT());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetWrapModeT(JNIEnv *env, jclass type,
-        jint sampler_, jint mode) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetWrapModeT(JNIEnv *, jclass, jlong sampler_, jint mode) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setWrapModeT(static_cast<TextureSampler::WrapMode>(mode));
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetWrapModeR(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getWrapModeR());
+Java_com_google_android_filament_TextureSampler_nGetWrapModeR(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getWrapModeR());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetWrapModeR(JNIEnv *env, jclass type,
-        jint sampler_, jint mode) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetWrapModeR(JNIEnv *, jclass, jlong sampler_, jint mode) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setWrapModeR(static_cast<TextureSampler::WrapMode>(mode));
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetCompareMode(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getCompareMode());
+Java_com_google_android_filament_TextureSampler_nGetCompareMode(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getCompareMode());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetCompareMode(JNIEnv *env, jclass type,
-        jint sampler_, jint mode) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetCompareMode(JNIEnv *, jclass, jlong sampler_, jint mode) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setCompareMode(static_cast<TextureSampler::CompareMode>(mode),
             sampler.getCompareFunc());
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nGetCompareFunction(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return static_cast<jint>(sampler.getCompareFunc());
+Java_com_google_android_filament_TextureSampler_nGetCompareFunction(JNIEnv *, jclass, jlong sampler) {
+    return static_cast<jint>(from_long(sampler).getCompareFunc());
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetCompareFunction(JNIEnv *env, jclass type,
-        jint sampler_, jint function) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetCompareFunction(JNIEnv *, jclass, jlong sampler_, jint function) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setCompareMode(sampler.getCompareMode(),
             static_cast<TextureSampler::CompareFunc>(function));
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }
 
 extern "C" JNIEXPORT jfloat JNICALL
-Java_com_google_android_filament_TextureSampler_nGetAnisotropy(JNIEnv *env, jclass type,
-        jint sampler_) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
-    return sampler.getAnisotropy();
+Java_com_google_android_filament_TextureSampler_nGetAnisotropy(JNIEnv *, jclass, jlong sampler) {
+    return from_long(sampler).getAnisotropy();
 }
 
-extern "C" JNIEXPORT jint JNICALL
-Java_com_google_android_filament_TextureSampler_nSetAnisotropy(JNIEnv *env, jclass type,
-        jint sampler_, jfloat anisotropy) {
-    TextureSampler &sampler = reinterpret_cast<TextureSampler &>(sampler_);
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_TextureSampler_nSetAnisotropy(JNIEnv *, jclass, jlong sampler_, jfloat anisotropy) {
+    TextureSampler sampler{from_long(sampler_)};
     sampler.setAnisotropy(anisotropy);
-    return sampler.getSamplerParams().u;
+    return to_long(sampler);
 }

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

@@ -47,6 +47,11 @@ Java_com_google_android_filament_ToneMapper_nCreateFilmicToneMapper(JNIEnv*, jcl
     return (jlong) new FilmicToneMapper();
 }
 
+extern "C" JNIEXPORT jlong JNICALL
+Java_com_google_android_filament_ToneMapper_nCreateAgxToneMapper(JNIEnv*, jclass, jint look) {
+    return (jlong) new AgxToneMapper(AgxToneMapper::AgxLook(look));
+}
+
 extern "C" JNIEXPORT jlong JNICALL
 Java_com_google_android_filament_ToneMapper_nCreateGenericToneMapper(JNIEnv*, jclass,
         jfloat contrast, jfloat midGrayIn, jfloat midGrayOut, jfloat hdrMax) {

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

@@ -282,7 +282,7 @@ Java_com_google_android_filament_View_nSetSSCTOptions(JNIEnv *, jclass, jlong na
 extern "C" JNIEXPORT void JNICALL
 Java_com_google_android_filament_View_nSetBloomOptions(JNIEnv*, jclass,
         jlong nativeView, jlong nativeTexture,
-        jfloat dirtStrength, jfloat strength, jint resolution, jfloat anamorphism, jint levels,
+        jfloat dirtStrength, jfloat strength, jint resolution, jint levels,
         jint blendMode, jboolean threshold, jboolean enabled, jfloat highlight,
         jboolean lensFlare, jboolean starburst, jfloat chromaticAberration, jint ghostCount,
         jfloat ghostSpacing, jfloat ghostThreshold, jfloat haloThickness, jfloat haloRadius,
@@ -294,7 +294,6 @@ Java_com_google_android_filament_View_nSetBloomOptions(JNIEnv*, jclass,
             .dirtStrength = dirtStrength,
             .strength = strength,
             .resolution = (uint32_t)resolution,
-            .anamorphism = anamorphism,
             .levels = (uint8_t)levels,
             .blendMode = (View::BloomOptions::BlendMode)blendMode,
             .threshold = (bool)threshold,
@@ -317,8 +316,9 @@ extern "C" JNIEXPORT void JNICALL
 Java_com_google_android_filament_View_nSetFogOptions(JNIEnv *, jclass , jlong nativeView,
         jfloat distance, jfloat maximumOpacity, jfloat height, jfloat heightFalloff, jfloat cutOffDistance,
         jfloat r, jfloat g, jfloat b, jfloat density, jfloat inScatteringStart,
-        jfloat inScatteringSize, jboolean fogColorFromIbl, jboolean enabled) {
+        jfloat inScatteringSize, jboolean fogColorFromIbl, jlong skyColorNativeObject, jboolean enabled) {
     View* view = (View*) nativeView;
+    Texture* skyColor = (Texture*) skyColorNativeObject;
     View::FogOptions options = {
              .distance = distance,
              .cutOffDistance = cutOffDistance,
@@ -330,6 +330,7 @@ Java_com_google_android_filament_View_nSetFogOptions(JNIEnv *, jclass , jlong na
              .inScatteringStart = inScatteringStart,
              .inScatteringSize = inScatteringSize,
              .fogColorFromIbl = (bool)fogColorFromIbl,
+             .skyColor = skyColor,
              .enabled = (bool)enabled
     };
     view->setFogOptions(options);
@@ -505,3 +506,11 @@ Java_com_google_android_filament_View_nGetMaterialGlobal(JNIEnv *env, jclass cla
     std::copy_n(result.v, 4, out);
     env->ReleaseFloatArrayElements(out_, out, 0);
 }
+
+extern "C"
+JNIEXPORT int JNICALL
+Java_com_google_android_filament_View_nGetFogEntity(JNIEnv *env, jclass clazz,
+        jlong nativeView) {
+    View *view = (View *) nativeView;
+    return (jint)view->getFogEntity().getId();
+}

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

@@ -154,6 +154,195 @@ public class Engine {
         FEATURE_LEVEL_2
     };
 
+    /**
+     * Constructs <code>Engine</code> objects using a builder pattern.
+     */
+    public static class Builder {
+        @SuppressWarnings({"FieldCanBeLocal", "UnusedDeclaration"})
+        private final BuilderFinalizer mFinalizer;
+        private final long mNativeBuilder;
+
+        public Builder() {
+            mNativeBuilder = nCreateBuilder();
+            mFinalizer = new BuilderFinalizer(mNativeBuilder);
+        }
+
+        /**
+         * Sets the {@link Backend} for the Engine.
+         *
+         * @param backend Driver backend to use
+         * @return A reference to this Builder for chaining calls.
+         */
+        public Builder backend(Backend backend) {
+            nSetBuilderBackend(mNativeBuilder, backend.ordinal());
+            return this;
+        }
+
+        /**
+         * Sets a sharedContext for the Engine.
+         *
+         * @param sharedContext  A platform-dependant OpenGL context used as a shared context
+         *                       when creating filament's internal context. On Android this parameter
+         *                       <b>must be</b> an instance of {@link android.opengl.EGLContext}.
+         * @return A reference to this Builder for chaining calls.
+         */
+        public Builder sharedContext(Object sharedContext) {
+            if (Platform.get().validateSharedContext(sharedContext)) {
+                nSetBuilderSharedContext(mNativeBuilder,
+                        Platform.get().getSharedContextNativeHandle(sharedContext));
+                return this;
+            }
+            throw new IllegalArgumentException("Invalid shared context " + sharedContext);
+        }
+
+        /**
+         * Configure the Engine with custom parameters.
+         *
+         * @param config A {@link Config} object
+         * @return A reference to this Builder for chaining calls.
+         */
+        public Builder config(Config config) {
+            nSetBuilderConfig(mNativeBuilder, config.commandBufferSizeMB,
+                    config.perRenderPassArenaSizeMB, config.driverHandleArenaSizeMB,
+                    config.minCommandBufferSizeMB, config.perFrameCommandsSizeMB,
+                    config.jobSystemThreadCount);
+            return this;
+        }
+
+        /**
+         * Sets the initial featureLevel for the Engine.
+         *
+         * @param featureLevel The feature level at which initialize Filament.
+         * @return A reference to this Builder for chaining calls.
+         */
+        public Builder featureLevel(FeatureLevel featureLevel) {
+            nSetBuilderFeatureLevel(mNativeBuilder, featureLevel.ordinal());
+            return this;
+        }
+
+        /**
+         * Creates an instance of Engine
+         *
+         * @return A newly created <code>Engine</code>, or <code>null</code> if the GPU driver couldn't
+         *         be initialized, for instance if it doesn't support the right version of OpenGL or
+         *         OpenGL ES.
+         *
+         * @exception IllegalStateException can be thrown if there isn't enough memory to
+         * allocate the command buffer.
+         */
+        public Engine build() {
+            long nativeEngine = nBuilderBuild(mNativeBuilder);
+            if (nativeEngine == 0) throw new IllegalStateException("Couldn't create Engine");
+            return new Engine(nativeEngine);
+        }
+
+        private static class BuilderFinalizer {
+            private final long mNativeObject;
+
+            BuilderFinalizer(long nativeObject) {
+                mNativeObject = nativeObject;
+            }
+
+            @Override
+            public void finalize() {
+                try {
+                    super.finalize();
+                } catch (Throwable t) { // Ignore
+                } finally {
+                    nDestroyBuilder(mNativeObject);
+                }
+            }
+        }
+    }
+
+    /**
+     * Parameters for customizing the initialization of {@link Engine}.
+     */
+    public static class Config {
+
+        // #defines in Engine.h
+        private static final long FILAMENT_PER_RENDER_PASS_ARENA_SIZE_IN_MB = 3;
+        private static final long FILAMENT_PER_FRAME_COMMANDS_SIZE_IN_MB = 2;
+        private static final long FILAMENT_MIN_COMMAND_BUFFERS_SIZE_IN_MB = 1;
+        private static final long FILAMENT_COMMAND_BUFFER_SIZE_IN_MB =
+                FILAMENT_MIN_COMMAND_BUFFERS_SIZE_IN_MB * 3;
+
+        /**
+         * Size in MiB of the low-level command buffer arena.
+         *
+         * Each new command buffer is allocated from here. If this buffer is too small the program
+         * might terminate or rendering errors might occur.
+         *
+         * This is typically set to minCommandBufferSizeMB * 3, so that up to 3 frames can be
+         * batched-up at once.
+         *
+         * This value affects the application's memory usage.
+         */
+        public long commandBufferSizeMB = FILAMENT_COMMAND_BUFFER_SIZE_IN_MB;
+
+        /**
+         * Size in MiB of the per-frame data arena.
+         *
+         * This is the main arena used for allocations when preparing a frame.
+         * e.g.: Froxel data and high-level commands are allocated from this arena.
+         *
+         * If this size is too small, the program will abort on debug builds and have undefined
+         * behavior otherwise.
+         *
+         * This value affects the application's memory usage.
+         */
+        public long perRenderPassArenaSizeMB = FILAMENT_PER_RENDER_PASS_ARENA_SIZE_IN_MB;
+
+        /**
+         * Size in MiB of the backend's handle arena.
+         *
+         * Backends will fallback to slower heap-based allocations when running out of space and
+         * log this condition.
+         *
+         * If 0, then the default value for the given platform is used
+         *
+         * This value affects the application's memory usage.
+         */
+        public long driverHandleArenaSizeMB = 0;
+
+        /**
+         * Minimum size in MiB of a low-level command buffer.
+         *
+         * This is how much space is guaranteed to be available for low-level commands when a new
+         * buffer is allocated. If this is too small, the engine might have to stall to wait for
+         * more space to become available, this situation is logged.
+         *
+         * This value does not affect the application's memory usage.
+         */
+        public long minCommandBufferSizeMB = FILAMENT_MIN_COMMAND_BUFFERS_SIZE_IN_MB;
+
+        /**
+         * Size in MiB of the per-frame high level command buffer.
+         *
+         * This buffer is related to the number of draw calls achievable within a frame, if it is
+         * too small, the program will abort on debug builds and have undefined behavior otherwise.
+         *
+         * It is allocated from the 'per-render-pass arena' above. Make sure that at least 1 MiB is
+         * left in the per-render-pass arena when deciding the size of this buffer.
+         *
+         * This value does not affect the application's memory usage.
+         */
+        public long perFrameCommandsSizeMB = FILAMENT_PER_FRAME_COMMANDS_SIZE_IN_MB;
+
+        /**
+         * Number of threads to use in Engine's JobSystem.
+         *
+         * Engine uses a utils::JobSystem to carry out paralleization of Engine workloads. This
+         * value sets the number of threads allocated for JobSystem. Configuring this value can be
+         * helpful in CPU-constrained environments where too many threads can cause contention of
+         * CPU and reduce performance.
+         *
+         * The default value is 0, which implies that the Engine will use a heuristic to determine
+         * the number of threads to use.
+         */
+        public long jobSystemThreadCount = 0;
+    }
+
     private Engine(long nativeEngine) {
         mNativeObject = nativeEngine;
         mTransformManager = new TransformManager(nGetTransformManager(nativeEngine));
@@ -177,9 +366,7 @@ public class Engine {
      */
     @NonNull
     public static Engine create() {
-        long nativeEngine = nCreateEngine(0, 0);
-        if (nativeEngine == 0) throw new IllegalStateException("Couldn't create Engine");
-        return new Engine(nativeEngine);
+        return new Builder().build();
     }
 
     /**
@@ -199,9 +386,9 @@ public class Engine {
      */
     @NonNull
     public static Engine create(@NonNull Backend backend) {
-        long nativeEngine = nCreateEngine(backend.ordinal(), 0);
-        if (nativeEngine == 0) throw new IllegalStateException("Couldn't create Engine");
-        return new Engine(nativeEngine);
+        return new Builder()
+            .backend(backend)
+            .build();
     }
 
     /**
@@ -223,13 +410,9 @@ public class Engine {
      */
     @NonNull
     public static Engine create(@NonNull Object sharedContext) {
-        if (Platform.get().validateSharedContext(sharedContext)) {
-            long nativeEngine = nCreateEngine(0,
-                    Platform.get().getSharedContextNativeHandle(sharedContext));
-            if (nativeEngine == 0) throw new IllegalStateException("Couldn't create Engine");
-            return new Engine(nativeEngine);
-        }
-        throw new IllegalArgumentException("Invalid shared context " + sharedContext);
+        return new Builder()
+            .sharedContext(sharedContext)
+            .build();
     }
 
     /**
@@ -296,17 +479,23 @@ public class Engine {
     }
 
     /**
-     * Activate all features of a given feature level. By default FeatureLevel::FEATURE_LEVEL_1 is
-     * active. The selected feature level must not be higher than the value returned by
-     * getActiveFeatureLevel() and it's not possible lower the active feature level.
+     * Activate all features of a given feature level. If an explicit feature level is not specified
+     * at Engine initialization time via {@link Builder#featureLevel}, the default feature level is
+     * {@link FeatureLevel#FEATURE_LEVEL_0} on devices not compatible with GLES 3.0; otherwise, the
+     * default is {@link FeatureLevel::FEATURE_LEVEL_1}. The selected feature level must not be
+     * higher than the value returned by {@link #getActiveFeatureLevel} and it's not possible lower
+     * the active feature level. Additionally, it is not possible to modify the feature level at all
+     * if the Engine was initialized at {@link FeatureLevel#FEATURE_LEVEL_0}.
      *
-     * @param featureLevel the feature level to activate. If featureLevel is lower than
-     *                     getActiveFeatureLevel(), the current (higher) feature level is kept.
-     *                     If featureLevel is higher than getSupportedFeatureLevel(), an exception
-     *                     is thrown, or the program is terminated if exceptions are disabled.
+     * @param featureLevel the feature level to activate. If featureLevel is lower than {@link
+     *                     #getActiveFeatureLevel}, the current (higher) feature level is kept. If
+     *                     featureLevel is higher than {@link #getSupportedFeatureLevel}, or if the
+     *                     engine was initialized at feature level 0, an exception is thrown, or the
+     *                     program is terminated if exceptions are disabled.
      *
      * @return the active feature level.
      *
+     * @see Builder#featureLevel
      * @see #getSupportedFeatureLevel
      * @see #getActiveFeatureLevel
      */
@@ -449,6 +638,141 @@ public class Engine {
         swapChain.clearNativeObject();
     }
 
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidRenderer(@NonNull Renderer object) {
+        return nIsValidRenderer(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidView(@NonNull View object) {
+        return nIsValidView(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidScene(@NonNull Scene object) {
+        return nIsValidScene(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidFence(@NonNull Fence object) {
+        return nIsValidFence(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidStream(@NonNull Stream object) {
+        return nIsValidStream(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidIndexBuffer(@NonNull IndexBuffer object) {
+        return nIsValidIndexBuffer(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidVertexBuffer(@NonNull VertexBuffer object) {
+        return nIsValidVertexBuffer(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidSkinningBuffer(@NonNull SkinningBuffer object) {
+        return nIsValidSkinningBuffer(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidIndirectLight(@NonNull IndirectLight object) {
+        return nIsValidIndirectLight(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidMaterial(@NonNull Material object) {
+        return nIsValidMaterial(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidSkybox(@NonNull Skybox object) {
+        return nIsValidSkybox(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidColorGrading(@NonNull ColorGrading object) {
+        return nIsValidColorGrading(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidTexture(@NonNull Texture object) {
+        return nIsValidTexture(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidRenderTarget(@NonNull RenderTarget object) {
+        return nIsValidRenderTarget(getNativeObject(), object.getNativeObject());
+    }
+
+    /**
+     * Returns whether the object is valid.
+     * @param object Object to check for validity
+     * @return returns true if the specified object is valid.
+     */
+    public boolean isValidSwapChain(@NonNull SwapChain object) {
+        return nIsValidSwapChain(getNativeObject(), object.getNativeObject());
+    }
+
     // View
 
     /**
@@ -779,23 +1103,22 @@ public class Engine {
         }
     }
 
-    private static native long nCreateEngine(long backend, long sharedContext);
     private static native void nDestroyEngine(long nativeEngine);
     private static native long nGetBackend(long nativeEngine);
     private static native long nCreateSwapChain(long nativeEngine, Object nativeWindow, long flags);
     private static native long nCreateSwapChainHeadless(long nativeEngine, int width, int height, long flags);
     private static native long nCreateSwapChainFromRawPointer(long nativeEngine, long pointer, long flags);
-    private static native boolean nDestroySwapChain(long nativeEngine, long nativeSwapChain);
     private static native long nCreateView(long nativeEngine);
-    private static native boolean nDestroyView(long nativeEngine, long nativeView);
     private static native long nCreateRenderer(long nativeEngine);
-    private static native boolean nDestroyRenderer(long nativeEngine, long nativeRenderer);
     private static native long nCreateCamera(long nativeEngine, int entity);
     private static native long nGetCameraComponent(long nativeEngine, int entity);
     private static native void nDestroyCameraComponent(long nativeEngine, int entity);
     private static native long nCreateScene(long nativeEngine);
-    private static native boolean nDestroyScene(long nativeEngine, long nativeScene);
     private static native long nCreateFence(long nativeEngine);
+
+    private static native boolean nDestroyRenderer(long nativeEngine, long nativeRenderer);
+    private static native boolean nDestroyView(long nativeEngine, long nativeView);
+    private static native boolean nDestroyScene(long nativeEngine, long nativeScene);
     private static native boolean nDestroyFence(long nativeEngine, long nativeFence);
     private static native boolean nDestroyStream(long nativeEngine, long nativeStream);
     private static native boolean nDestroyIndexBuffer(long nativeEngine, long nativeIndexBuffer);
@@ -808,6 +1131,22 @@ public class Engine {
     private static native boolean nDestroyColorGrading(long nativeEngine, long nativeColorGrading);
     private static native boolean nDestroyTexture(long nativeEngine, long nativeTexture);
     private static native boolean nDestroyRenderTarget(long nativeEngine, long nativeTarget);
+    private static native boolean nDestroySwapChain(long nativeEngine, long nativeSwapChain);
+    private static native boolean nIsValidRenderer(long nativeEngine, long nativeRenderer);
+    private static native boolean nIsValidView(long nativeEngine, long nativeView);
+    private static native boolean nIsValidScene(long nativeEngine, long nativeScene);
+    private static native boolean nIsValidFence(long nativeEngine, long nativeFence);
+    private static native boolean nIsValidStream(long nativeEngine, long nativeStream);
+    private static native boolean nIsValidIndexBuffer(long nativeEngine, long nativeIndexBuffer);
+    private static native boolean nIsValidVertexBuffer(long nativeEngine, long nativeVertexBuffer);
+    private static native boolean nIsValidSkinningBuffer(long nativeEngine, long nativeSkinningBuffer);
+    private static native boolean nIsValidIndirectLight(long nativeEngine, long nativeIndirectLight);
+    private static native boolean nIsValidMaterial(long nativeEngine, long nativeMaterial);
+    private static native boolean nIsValidSkybox(long nativeEngine, long nativeSkybox);
+    private static native boolean nIsValidColorGrading(long nativeEngine, long nativeColorGrading);
+    private static native boolean nIsValidTexture(long nativeEngine, long nativeTexture);
+    private static native boolean nIsValidRenderTarget(long nativeEngine, long nativeTarget);
+    private static native boolean nIsValidSwapChain(long nativeEngine, long nativeSwapChain);
     private static native void nDestroyEntity(long nativeEngine, int entity);
     private static native void nFlushAndWait(long nativeEngine);
     private static native long nGetTransformManager(long nativeEngine);
@@ -820,4 +1159,14 @@ public class Engine {
     private static native int nGetSupportedFeatureLevel(long nativeEngine);
     private static native int nSetActiveFeatureLevel(long nativeEngine, int ordinal);
     private static native int nGetActiveFeatureLevel(long nativeEngine);
+
+    private static native long nCreateBuilder();
+    private static native void nDestroyBuilder(long nativeBuilder);
+    private static native void nSetBuilderBackend(long nativeBuilder, long backend);
+    private static native void nSetBuilderConfig(long nativeBuilder, long commandBufferSizeMB,
+            long perRenderPassArenaSizeMB, long driverHandleArenaSizeMB,
+            long minCommandBufferSizeMB, long perFrameCommandsSizeMB, long jobSystemThreadCount);
+    private static native void nSetBuilderFeatureLevel(long nativeBuilder, int ordinal);
+    private static native void nSetBuilderSharedContext(long nativeBuilder, long sharedContext);
+    private static native long nBuilderBuild(long nativeBuilder);
 }

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

@@ -258,6 +258,7 @@ public class LightManager {
          * shadows that are too far and wouldn't contribute to the scene much, improving
          * performance and quality. This value is always positive.
          * Use 0.0f to use the camera far distance.
+         * This only affect directional lights.
          */
         public float shadowFar = 0.0f;
 
@@ -368,6 +369,17 @@ public class LightManager {
          * enabled. (2cm by default).
          */
         public float shadowBulbRadius = 0.02f;
+
+        /**
+         * Transforms the shadow direction. Must be a unit quaternion.
+         * The default is identity.
+         * Ignored if the light type isn't directional. For artistic use. Use with caution.
+         * The quaternion is stored as the imaginary part in the first 3 elements and the real
+         * part in the last element of the transform array.
+         */
+        @NonNull
+        @Size(min = 4, max = 4)
+        public float[] transform = { 0.0f, 0.0f, 0.0f, 1.0f };
     }
 
     public static class ShadowCascades {
@@ -506,7 +518,7 @@ public class LightManager {
                     options.polygonOffsetConstant, options.polygonOffsetSlope,
                     options.screenSpaceContactShadows,
                     options.stepCount, options.maxShadowDistance,
-                    options.elvsm, options.blurWidth, options.shadowBulbRadius);
+                    options.elvsm, options.blurWidth, options.shadowBulbRadius, options.transform);
             return this;
         }
 
@@ -1169,7 +1181,7 @@ public class LightManager {
              boolean stable, boolean lispsm,
              float polygonOffsetConstant, float polygonOffsetSlope,
              boolean screenSpaceContactShadows, int stepCount, float maxShadowDistance,
-             boolean elvsm, float blurWidth, float shadowBulbRadius);
+             boolean elvsm, float blurWidth, float shadowBulbRadius, float[] transform);
     private static native void nBuilderCastLight(long nativeBuilder, boolean enabled);
     private static native void nBuilderPosition(long nativeBuilder, float x, float y, float z);
     private static native void nBuilderDirection(long nativeBuilder, float x, float y, float z);

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

@@ -21,6 +21,7 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Size;
 
 import com.google.android.filament.proguard.UsedByNative;
+import com.google.android.filament.Engine.FeatureLevel;
 
 import java.nio.Buffer;
 import java.util.ArrayList;
@@ -46,6 +47,8 @@ public class Material {
         static final BlendingMode[] sBlendingModeValues = BlendingMode.values();
         static final RefractionMode[] sRefractionModeValues = RefractionMode.values();
         static final RefractionType[] sRefractionTypeValues = RefractionType.values();
+        static final ReflectionMode[] sReflectionModeValues = ReflectionMode.values();
+        static final FeatureLevel[] sFeatureLevelValues = FeatureLevel.values();
         static final VertexDomain[] sVertexDomainValues = VertexDomain.values();
         static final CullingMode[] sCullingModeValues = CullingMode.values();
         static final VertexBuffer.VertexAttribute[] sVertexAttributeValues =
@@ -181,6 +184,18 @@ public class Material {
         THIN
     }
 
+    /**
+     * Supported reflection modes
+     *
+     * @see
+     * <a href="https://google.github.io/filament/Materials.html#materialdefinitions/materialblock/lighting:reflections">
+     * Lighting: reflections</a>
+     */
+    public enum ReflectionMode {
+        DEFAULT,
+        SCREEN_SPACE
+    }
+
     /**
      * Supported types of vertex domains
      *
@@ -437,6 +452,28 @@ public class Material {
         return EnumCache.sRefractionTypeValues[nGetRefractionType(getNativeObject())];
     }
 
+    /**
+     * Returns the reflection mode of this material.
+     *
+     * @see
+     * <a href="https://google.github.io/filament/Materials.html#materialdefinitions/materialblock/lighting:reflections">
+     * Lighting: reflections</a>
+     */
+    public ReflectionMode getReflectionMode() {
+        return EnumCache.sReflectionModeValues[nGetReflectionMode(getNativeObject())];
+    }
+
+    /**
+     * Returns the minimum required feature level for this material.
+     *
+     * @see
+     * <a href="https://google.github.io/filament/Materials.html#materialdefinitions/materialblock/general:featurelevel">
+     * General: featureLevel</a>
+     */
+    public FeatureLevel getFeatureLevel() {
+        return EnumCache.sFeatureLevelValues[nGetFeatureLevel(getNativeObject())];
+    }
+
     /**
      * Returns the vertex domain of this material.
      *
@@ -932,6 +969,8 @@ public class Material {
     private static native float nGetSpecularAntiAliasingThreshold(long nativeMaterial);
     private static native int nGetRefractionMode(long nativeMaterial);
     private static native int nGetRefractionType(long nativeMaterial);
+    private static native int nGetReflectionMode(long nativeMaterial);
+    private static native int nGetFeatureLevel(long nativeMaterial);
 
 
     private static native int nGetParameterCount(long nativeMaterial);

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

@@ -625,6 +625,15 @@ public class MaterialInstance {
         nSetDepthCulling(getNativeObject(), enable);
     }
 
+    /**
+     * Sets the depth comparison function (default is {@link TextureSampler.CompareFunction#GE}).
+     *
+     * @param func the depth comparison function
+     */
+    public void setDepthFunc(TextureSampler.CompareFunction func) {
+        nSetDepthFunc(getNativeObject(), func.ordinal());
+    }
+
     /**
      * Returns whether depth culling is enabled.
      */
@@ -632,6 +641,13 @@ public class MaterialInstance {
         return nIsDepthCullingEnabled(getNativeObject());
     }
 
+    /**
+     * Returns the depth comparison function.
+     */
+    public TextureSampler.CompareFunction getDepthFunc() {
+        return TextureSampler.EnumCache.sCompareFunctionValues[nGetDepthFunc(getNativeObject())];
+    }
+
     /**
      * Sets the stencil comparison function (default is {@link TextureSampler.CompareFunction#ALWAYS}).
      *
@@ -884,7 +900,7 @@ public class MaterialInstance {
             @IntRange(from = 0) int offset, @IntRange(from = 1) int count);
 
     private static native void nSetParameterTexture(long nativeMaterialInstance,
-            @NonNull String name, long nativeTexture, int sampler);
+            @NonNull String name, long nativeTexture, long sampler);
 
     private static native void nSetScissor(long nativeMaterialInstance,
             @IntRange(from = 0) int left, @IntRange(from = 0) int bottom,
@@ -908,6 +924,7 @@ public class MaterialInstance {
     private static native void nSetDepthWrite(long nativeMaterialInstance, boolean enable);
     private static native void nSetStencilWrite(long nativeMaterialInstance, boolean enable);
     private static native void nSetDepthCulling(long nativeMaterialInstance, boolean enable);
+    private static native void nSetDepthFunc(long nativeMaterialInstance, long function);
 
     private static native void nSetStencilCompareFunction(long nativeMaterialInstance,
             long function, long face);
@@ -939,4 +956,5 @@ public class MaterialInstance {
     private static native boolean nIsDepthWriteEnabled(long nativeMaterialInstance);
     private static native boolean nIsStencilWriteEnabled(long nativeMaterialInstance);
     private static native boolean nIsDepthCullingEnabled(long nativeMaterialInstance);
+    private static native int nGetDepthFunc(long nativeMaterialInstance);
 }

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

@@ -81,8 +81,6 @@ public class RenderTarget {
         /**
          * Sets a texture to a given attachment point.
          *
-         * <p>All RenderTargets must have a non-null <code>COLOR</code> attachment.</p>
-         *
          * @param attachment The attachment point of the texture.
          * @param texture The associated texture object.
          * @return A reference to this Builder for chaining calls.

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

@@ -417,7 +417,19 @@ public class RenderableManager {
          */
         @NonNull
         public Builder enableSkinningBuffers(boolean enabled) {
-            nEnableSkinningBuffers(mNativeBuilder, enabled);
+            nBuilderEnableSkinningBuffers(mNativeBuilder, enabled);
+            return this;
+        }
+
+        /**
+         * Controls if this renderable is affected by the large-scale fog.
+         * @param enabled If true, enables large-scale fog on this object. Disables it otherwise.
+         *                True by default.
+         * @return this <code>Builder</code> object for chaining calls
+         */
+         @NonNull
+        public Builder fog(boolean enabled) {
+            nBuilderFog(mNativeBuilder, enabled);
             return this;
         }
 
@@ -729,6 +741,23 @@ public class RenderableManager {
         nSetCulling(mNativeObject, i, enabled);
     }
 
+    /**
+     * Changes whether or not the large-scale fog is applied to this renderable
+     * @see Builder#fog
+     */
+    public void setFogEnabled(@EntityInstance int i, boolean enabled) {
+        nSetFogEnabled(mNativeObject, i, enabled);
+    }
+
+    /**
+     * Returns whether large-scale fog is enabled for this renderable.
+     * @return True if fog is enabled for this renderable.
+     * @see Builder#fog
+     */
+    public boolean getFogEnabled(@EntityInstance int i) {
+        return nGetFogEnabled(mNativeObject, i);
+    }
+
     /**
      * Enables or disables a light channel.
      * Light channel 0 is enabled by default.
@@ -951,7 +980,8 @@ public class RenderableManager {
     private static native void nBuilderSkinningBuffer(long nativeBuilder, long nativeSkinningBuffer, int boneCount, int offset);
     private static native void nBuilderMorphing(long nativeBuilder, int targetCount);
     private static native void nBuilderSetMorphTargetBufferAt(long nativeBuilder, int level, int primitiveIndex, long nativeMorphTargetBuffer, int offset, int count);
-    private static native void nEnableSkinningBuffers(long nativeBuilder, boolean enabled);
+    private static native void nBuilderEnableSkinningBuffers(long nativeBuilder, boolean enabled);
+    private static native void nBuilderFog(long nativeBuilder, boolean enabled);
     private static native void nBuilderLightChannel(long nativeRenderableManager, int channel, boolean enable);
     private static native void nBuilderInstances(long nativeRenderableManager, int instances);
 
@@ -966,6 +996,8 @@ public class RenderableManager {
     private static native void nSetPriority(long nativeRenderableManager, int i, int priority);
     private static native void nSetChannel(long nativeRenderableManager, int i, int channel);
     private static native void nSetCulling(long nativeRenderableManager, int i, boolean enabled);
+    private static native void nSetFogEnabled(long nativeRenderableManager, int i, boolean enabled);
+    private static native boolean nGetFogEnabled(long nativeRenderableManager, int i);
     private static native void nSetLightChannel(long nativeRenderableManager, int i, int channel, boolean enable);
     private static native boolean nGetLightChannel(long nativeRenderableManager, int i, int channel);
     private static native void nSetCastShadows(long nativeRenderableManager, int i, boolean enabled);

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

@@ -146,18 +146,29 @@ public class Scene {
     }
 
     /**
-     * Returns the number of {@link RenderableManager} components in the <code>Scene</code>.
+     * Returns the total number of Entities in the <code>Scene</code>, whether alive or not.
      *
-     * @return number of {@link RenderableManager} components in the <code>Scene</code>..
+     * @return the total number of Entities in the <code>Scene</code>.
+     */
+    public int getEntityCount() {
+        return nGetEntityCount(getNativeObject());
+    }
+
+    /**
+     * Returns the number of active (alive) {@link RenderableManager} components in the
+     * <code>Scene</code>.
+     *
+     * @return number of {@link RenderableManager} components in the <code>Scene</code>.
      */
     public int getRenderableCount() {
         return nGetRenderableCount(getNativeObject());
     }
 
     /**
-     * Returns the number of {@link LightManager} components in the <code>Scene</code>.
+     * Returns the number of active (alive) {@link LightManager} components in the
+     * <code>Scene</code>.
      *
-     * @return number of {@link LightManager} components in the <code>Scene</code>..
+     * @return number of {@link LightManager} components in the <code>Scene</code>.
      */
     public int getLightCount() {
         return nGetLightCount(getNativeObject());
@@ -189,6 +200,7 @@ public class Scene {
     private static native void nAddEntities(long nativeScene, int[] entities);
     private static native void nRemove(long nativeScene, int entity);
     private static native void nRemoveEntities(long nativeScene, int[] entities);
+    private static native int nGetEntityCount(long nativeScene);
     private static native int nGetRenderableCount(long nativeScene);
     private static native int nGetLightCount(long nativeScene);
     private static native boolean nHasEntity(long nativeScene, int entity);

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

@@ -103,6 +103,31 @@ public class SwapChain {
      */
     public static final long CONFIG_SRGB_COLORSPACE = 0x10;
 
+    /**
+     * Indicates that this SwapChain should allocate a stencil buffer in addition to a depth buffer.
+     *
+     * This flag is necessary when using View::setStencilBufferEnabled and rendering directly into
+     * the SwapChain (when post-processing is disabled).
+     *
+     * The specific format of the stencil buffer depends on platform support. The following pixel
+     * formats are tried, in order of preference:
+     *
+     * Depth only (without CONFIG_HAS_STENCIL_BUFFER):
+     * - DEPTH32F
+     * - DEPTH24
+     *
+     * Depth + stencil (with CONFIG_HAS_STENCIL_BUFFER):
+     * - DEPTH32F_STENCIL8
+     * - DEPTH24F_STENCIL8
+     *
+     * Note that enabling the stencil buffer may hinder depth precision and should only be used if
+     * necessary.
+     *
+     * @see View#setStencilBufferEnabled
+     * @see View#setPostProcessingEnabled
+     */
+    public static final long CONFIG_HAS_STENCIL_BUFFER = 0x20;
+
     SwapChain(long nativeSwapChain, Object surface) {
         mNativeObject = nativeSwapChain;
         mSurface = surface;
@@ -137,10 +162,6 @@ public class SwapChain {
      * </p>
      *
      * <p>
-     * The FrameCompletedCallback is guaranteed to be called on the main Filament thread.
-     * </p>
-     *
-     * <p>
      * Warning: Only Filament's Metal backend supports frame callbacks. Other backends ignore the
      * callback (which will never be called) and proceed normally.
      * </p>

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

@@ -126,7 +126,7 @@ public class TextureSampler {
         NEVER
     }
 
-    int mSampler = 0; // bit field used by native
+    long mSampler = 0; // bit field used by native
 
     /**
      * Initializes the <code>TextureSampler</code> with default values.
@@ -342,26 +342,26 @@ public class TextureSampler {
         }
     }
 
-    private static native int nCreateSampler(int min, int max, int s, int t, int r);
-    private static native int nCreateCompareSampler(int mode, int function);
+    private static native long nCreateSampler(int min, int max, int s, int t, int r);
+    private static native long nCreateCompareSampler(int mode, int function);
 
-    private static native int nGetMinFilter(int sampler);
-    private static native int nSetMinFilter(int sampler, int filter);
-    private static native int nGetMagFilter(int sampler);
-    private static native int nSetMagFilter(int sampler, int filter);
+    private static native int nGetMinFilter(long sampler);
+    private static native long nSetMinFilter(long sampler, int filter);
+    private static native int nGetMagFilter(long sampler);
+    private static native long nSetMagFilter(long sampler, int filter);
 
-    private static native int nGetWrapModeS(int sampler);
-    private static native int nSetWrapModeS(int sampler, int mode);
-    private static native int nGetWrapModeT(int sampler);
-    private static native int nSetWrapModeT(int sampler, int mode);
-    private static native int nGetWrapModeR(int sampler);
-    private static native int nSetWrapModeR(int sampler, int mode);
+    private static native int nGetWrapModeS(long sampler);
+    private static native long nSetWrapModeS(long sampler, int mode);
+    private static native int nGetWrapModeT(long sampler);
+    private static native long nSetWrapModeT(long sampler, int mode);
+    private static native int nGetWrapModeR(long sampler);
+    private static native long nSetWrapModeR(long sampler, int mode);
 
-    private static native int nGetCompareMode(int sampler);
-    private static native int nSetCompareMode(int sampler, int mode);
-    private static native int nGetCompareFunction(int sampler);
-    private static native int nSetCompareFunction(int sampler, int function);
+    private static native int nGetCompareMode(long sampler);
+    private static native long nSetCompareMode(long sampler, int mode);
+    private static native int nGetCompareFunction(long sampler);
+    private static native long nSetCompareFunction(long sampler, int function);
 
-    private static native float nGetAnisotropy(int sampler);
-    private static native int nSetAnisotropy(int sampler, float anisotropy);
+    private static native float nGetAnisotropy(long sampler);
+    private static native long nSetAnisotropy(long sampler, float anisotropy);
 }

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

@@ -100,6 +100,45 @@ public class ToneMapper {
         }
     }
 
+    /**
+     * AgX tone mapping operator.
+     */
+    public static class Agx extends ToneMapper {
+
+        public enum AgxLook {
+            /**
+             * Base contrast with no look applied
+             */
+            NONE,
+
+            /**
+             * A punchy and more chroma laden look for sRGB displays
+             */
+            PUNCHY,
+
+            /**
+             * A golden tinted, slightly washed look for BT.1886 displays
+             */
+            GOLDEN
+        }
+
+        /**
+         * Builds a new AgX tone mapper with no look applied.
+         */
+        public Agx() {
+            this(AgxLook.NONE);
+        }
+
+        /**
+         * Builds a new AgX tone mapper.
+         *
+         * @param look: an optional creative adjustment to contrast and saturation
+         */
+        public Agx(AgxLook look) {
+            super(nCreateAgxToneMapper(look.ordinal()));
+        }
+    }
+
     /**
      * Generic tone mapping operator that gives control over the tone mapping
      * curve. This operator can be used to control the aesthetics of the final
@@ -194,6 +233,7 @@ public class ToneMapper {
     private static native long nCreateACESToneMapper();
     private static native long nCreateACESLegacyToneMapper();
     private static native long nCreateFilmicToneMapper();
+    private static native long nCreateAgxToneMapper(int look);
     private static native long nCreateGenericToneMapper(
             float contrast, float midGrayIn, float midGrayOut, float hdrMax);
 

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

@@ -27,6 +27,8 @@ import static com.google.android.filament.Asserts.assertFloat3In;
 import static com.google.android.filament.Asserts.assertFloat4In;
 import static com.google.android.filament.Colors.LinearColor;
 
+import com.google.android.filament.proguard.UsedByNative;
+
 /**
  * Encompasses all the state needed for rendering a {@link Scene}.
  *
@@ -902,7 +904,7 @@ public class View {
         mBloomOptions = options;
         nSetBloomOptions(getNativeObject(), options.dirt != null ? options.dirt.getNativeObject() : 0,
                 options.dirtStrength, options.strength, options.resolution,
-                options.anamorphism, options.levels, options.blendMode.ordinal(),
+                options.levels, options.blendMode.ordinal(),
                 options.threshold, options.enabled, options.highlight,
                 options.lensFlare, options.starburst, options.chromaticAberration,
                 options.ghostCount, options.ghostSpacing, options.ghostThreshold,
@@ -966,6 +968,7 @@ public class View {
                 options.color[0], options.color[1], options.color[2],
                 options.density, options.inScatteringStart, options.inScatteringSize,
                 options.fogColorFromIbl,
+                options.skyColor == null ? 0 : options.skyColor.getNativeObject(),
                 options.enabled);
     }
 
@@ -1029,7 +1032,8 @@ public class View {
      * </p>
      *
      * <p>
-     * Post-processing must be enabled in order to use the stencil buffer.
+     * If post-processing is disabled, then the SwapChain must have the CONFIG_HAS_STENCIL_BUFFER
+     * flag set in order to use the stencil buffer.
      * </p>
      *
      * <p>
@@ -1095,10 +1099,29 @@ public class View {
         nPick(getNativeObject(), x, y, handler, internalCallback);
     }
 
+    @UsedByNative("View.cpp")
     private static class InternalOnPickCallback implements Runnable {
+        private final OnPickCallback mUserCallback;
+        private final PickingQueryResult mPickingQueryResult = new PickingQueryResult();
+
+        @UsedByNative("View.cpp")
+        @Entity
+        int mRenderable;
+
+        @UsedByNative("View.cpp")
+        float mDepth;
+
+        @UsedByNative("View.cpp")
+        float mFragCoordsX;
+        @UsedByNative("View.cpp")
+        float mFragCoordsY;
+        @UsedByNative("View.cpp")
+        float mFragCoordsZ;
+
         public InternalOnPickCallback(OnPickCallback mUserCallback) {
             this.mUserCallback = mUserCallback;
         }
+
         @Override
         public void run() {
             mPickingQueryResult.renderable = mRenderable;
@@ -1108,13 +1131,6 @@ public class View {
             mPickingQueryResult.fragCoords[2] = mFragCoordsZ;
             mUserCallback.onPick(mPickingQueryResult);
         }
-        private final OnPickCallback mUserCallback;
-        private final PickingQueryResult mPickingQueryResult = new PickingQueryResult();
-        @Entity int mRenderable;
-        float mDepth;
-        float mFragCoordsX;
-        float mFragCoordsY;
-        float mFragCoordsZ;
     }
 
     /**
@@ -1148,6 +1164,20 @@ public class View {
         return out;
     }
 
+    /**
+     * Get an Entity representing the large scale fog object.
+     * This entity is always inherited by the View's Scene.
+     *
+     * It is for example possible to create a TransformManager component with this
+     * Entity and apply a transformation globally on the fog.
+     *
+     * @return an Entity representing the large scale fog object.
+     */
+    @Entity
+    public int getFogEntity() {
+        return nGetFogEntity(getNativeObject());
+    }
+
     public long getNativeObject() {
         if (mNativeObject == 0) {
             throw new IllegalStateException("Calling method on destroyed View");
@@ -1187,9 +1217,9 @@ public class View {
     private static native int nGetAmbientOcclusion(long nativeView);
     private static native void nSetAmbientOcclusionOptions(long nativeView, float radius, float bias, float power, float resolution, float intensity, float bilateralThreshold, int quality, int lowPassFilter, int upsampling, boolean enabled, boolean bentNormals, float minHorizonAngleRad);
     private static native void nSetSSCTOptions(long nativeView, float ssctLightConeRad, float ssctStartTraceDistance, float ssctContactDistanceMax, float ssctIntensity, float v, float v1, float v2, float ssctDepthBias, float ssctDepthSlopeBias, int ssctSampleCount, int ssctRayCount, boolean ssctEnabled);
-    private static native void nSetBloomOptions(long nativeView, long dirtNativeObject, float dirtStrength, float strength, int resolution, float anamorphism, int levels, int blendMode, boolean threshold, boolean enabled, float highlight,
+    private static native void nSetBloomOptions(long nativeView, long dirtNativeObject, float dirtStrength, float strength, int resolution, int levels, int blendMode, boolean threshold, boolean enabled, float highlight,
             boolean lensFlare, boolean starburst, float chromaticAberration, int ghostCount, float ghostSpacing, float ghostThreshold, float haloThickness, float haloRadius, float haloThreshold);
-    private static native void nSetFogOptions(long nativeView, float distance, float maximumOpacity, float height, float heightFalloff, float cutOffDistance, float v, float v1, float v2, float density, float inScatteringStart, float inScatteringSize, boolean fogColorFromIbl, boolean enabled);
+    private static native void nSetFogOptions(long nativeView, float distance, float maximumOpacity, float height, float heightFalloff, float cutOffDistance, float v, float v1, float v2, float density, float inScatteringStart, float inScatteringSize, boolean fogColorFromIbl, long skyColorNativeObject, boolean enabled);
     private static native void nSetBlendMode(long nativeView, int blendMode);
     private static native void nSetDepthOfFieldOptions(long nativeView, float cocScale, float maxApertureDiameter, boolean enabled, int filter,
             boolean nativeResolution, int foregroundRingCount, int backgroundRingCount, int fastGatherRingCount, int maxForegroundCOC, int maxBackgroundCOC);
@@ -1206,6 +1236,7 @@ public class View {
     private static native boolean nIsStencilBufferEnabled(long nativeView);
     private static native void nSetMaterialGlobal(long nativeView, int index, float x, float y, float z, float w);
     private static native void nGetMaterialGlobal(long nativeView, int index, float[] out);
+    private static native int nGetFogEntity(long nativeView);
 
 
     /**
@@ -1323,8 +1354,6 @@ public class View {
      * blendMode:   Whether the bloom effect is purely additive (false) or mixed with the original
      *              image (true).
      *
-     * anamorphism: Bloom's aspect ratio (x/y), for artistic purposes.
-     *
      * threshold:   When enabled, a threshold at 1.0 is applied on the source image, this is
      *              useful for artistic reasons and is usually needed when a dirt texture is used.
      *
@@ -1362,13 +1391,9 @@ public class View {
         /**
          * resolution of vertical axis (2^levels to 2048)
          */
-        public int resolution = 360;
+        public int resolution = 384;
         /**
-         * bloom x/y aspect-ratio (1/32 to 32)
-         */
-        public float anamorphism = 1.0f;
-        /**
-         * number of blur levels (3 to 11)
+         * number of blur levels (1 to 11)
          */
         public int levels = 6;
         /**
@@ -1388,6 +1413,17 @@ public class View {
          * limit highlights to this value before bloom [10, +inf]
          */
         public float highlight = 1000.0f;
+        /**
+         * Bloom quality level.
+         * LOW (default): use a more optimized down-sampling filter, however there can be artifacts
+         *      with dynamic resolution, this can be alleviated by using the homogenous mode.
+         * MEDIUM: Good balance between quality and performance.
+         * HIGH: In this mode the bloom resolution is automatically increased to avoid artifacts.
+         *      This mode can be significantly slower on mobile, especially at high resolution.
+         *      This mode greatly improves the anamorphic bloom.
+         */
+        @NonNull
+        public QualityLevel quality = QualityLevel.LOW;
         /**
          * enable screen-space lens flare
          */
@@ -1503,9 +1539,31 @@ public class View {
         /**
          * The fog color will be sampled from the IBL in the view direction and tinted by `color`.
          * Depending on the scene this can produce very convincing results.
-         * This simulate a more anisotropic phase-function.
+         *
+         * This simulates a more anisotropic phase-function.
+         *
+         * `fogColorFromIbl` is ignored when skyTexture is specified.
+         *
+         * @see skyColor
          */
         public boolean fogColorFromIbl = false;
+        /**
+         * skyTexture must be a mipmapped cubemap. When provided, the fog color will be sampled from
+         * this texture, higher resolution mip levels will be used for objects at the far clip plane,
+         * and lower resolution mip levels for objects closer to the camera. The skyTexture should
+         * typically be heavily blurred; a typical way to produce this texture is to blur the base
+         * level with a strong gaussian filter or even an irradiance filter and then generate mip
+         * levels as usual. How blurred the base level is somewhat of an artistic decision.
+         *
+         * This simulates a more anisotropic phase-function.
+         *
+         * `fogColorFromIbl` is ignored when skyTexture is specified.
+         *
+         * @see Texture
+         * @see fogColorFromIbl
+         */
+        @Nullable
+        public Texture skyColor = null;
         /**
          * Enable or disable large-scale fog
          */
@@ -1872,6 +1930,7 @@ public class View {
          * PCF with soft shadows and contact hardening
          */
         PCSS,
+        PCFd,
     }
 
     /**
@@ -1934,4 +1993,11 @@ public class View {
          */
         public float penumbraRatioScale = 1.0f;
     }
+
+    /**
+     * Options for stereoscopic (multi-eye) rendering.
+     */
+    public static class StereoscopicOptions {
+        public boolean enabled = false;
+    }
 }

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

@@ -22,17 +22,35 @@ import com.google.android.filament.Fence;
 public class FilamentHelper {
 
     /**
-     * Wait for all pending frames to be processed before returning. This is to
-     * avoid a race between the surface being resized before pending frames are
-     * rendered into it. This is typically called from {@link UiHelper.RendererCallback#onResized},
-     * {@link android.view.SurfaceHolder.Callback#surfaceChanged} or
-     * {@link android.view.TextureView.SurfaceTextureListener#onSurfaceTextureSizeChanged}.
+     * Wait for all pending frames to be processed before returning. This is to avoid a race
+     * between the surface being resized before pending frames are rendered into it.
+     * <p>
+     * For {@link android.view.TextureView} this must be called before the texture's size is
+     * reconfigured, which unfortunately is done by the Android framework before
+     * {@link UiHelper} listeners are invoked. Therefore <code>synchronizePendingFrames</code>
+     * cannot be called from
+     * {@link android.view.TextureView.SurfaceTextureListener#onSurfaceTextureSizeChanged}; instead
+     * a subclass of {@link android.view.TextureView} must be used in order to call it from
+     * {@link android.view.TextureView#onSizeChanged}:
+     * </p>
+     * <pre>
+     * public class MyTextureView extends TextureView {
+     *     private Engine engine;
+     *     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+     *         FilamentHelper.synchronizePendingFrames(engine);
+     *         super.onSizeChanged(w, h, oldw, oldh);
+     *     }
+     * }
+     * </pre>
+     *
+     * Otherwise, this is typically called from {@link UiHelper.RendererCallback#onResized},
+     * {@link android.view.SurfaceHolder.Callback#surfaceChanged}.
      *
      * @param engine Filament engine to synchronize
      *
      * @see UiHelper.RendererCallback#onResized
      * @see android.view.SurfaceHolder.Callback#surfaceChanged
-     * @see android.view.TextureView.SurfaceTextureListener#onSurfaceTextureSizeChanged
+     * @see android.view.TextureView#onSizeChanged
      */
     static public void synchronizePendingFrames(Engine engine) {
         Fence fence = engine.createFence();

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

@@ -227,8 +227,10 @@ public class UiHelper {
             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
                 mTextureView.getSurfaceTexture().setDefaultBufferSize(width, height);
             }
-            // the call above won't cause TextureView.onSurfaceTextureSizeChanged()
-            mRenderCallback.onResized(width, height);
+            if (mRenderCallback != null) {
+                // the call above won't cause TextureView.onSurfaceTextureSizeChanged()
+                mRenderCallback.onResized(width, height);
+            }
         }
 
         @Override
@@ -244,6 +246,10 @@ public class UiHelper {
             }
             mSurface = surface;
         }
+
+        public Surface getSurface() {
+            return mSurface;
+        }
     }
 
     /**
@@ -294,7 +300,6 @@ public class UiHelper {
 
     /**
      * Checks whether we are ready to render into the attached surface.
-     *
      * Using OpenGL ES when this returns true, will result in drawing commands being lost,
      * HOWEVER, GLES state will be preserved. This is useful to initialize the engine.
      *
@@ -339,7 +344,6 @@ public class UiHelper {
     /**
      * Controls whether the render target (SurfaceView or TextureView) is opaque or not.
      * The render target is considered opaque by default.
-     *
      * Must be called before calling {@link #attachTo(SurfaceView)}, {@link #attachTo(TextureView)},
      * or {@link #attachTo(SurfaceHolder)}.
      *
@@ -362,10 +366,8 @@ public class UiHelper {
      * positioned above other surfaces but below the activity's surface. This property
      * only has an effect when used in combination with {@link #setOpaque(boolean) setOpaque(false)}
      * and does not affect TextureView targets.
-     *
      * Must be called before calling {@link #attachTo(SurfaceView)}
      * or {@link #attachTo(TextureView)}.
-     *
      * Has no effect when using {@link #attachTo(SurfaceHolder)}.
      *
      * @param overlay Indicates whether the render target should be rendered below the activity's
@@ -386,7 +388,6 @@ public class UiHelper {
 
     /**
      * Associate UiHelper with a SurfaceView.
-     *
      * As soon as SurfaceView is ready (i.e. has a Surface), we'll create the
      * EGL resources needed, and call user callbacks if needed.
      */
@@ -408,21 +409,23 @@ public class UiHelper {
 
             final SurfaceHolder.Callback callback = new SurfaceHolder.Callback() {
                 @Override
-                public void surfaceCreated(SurfaceHolder holder) {
+                public void surfaceCreated(@NonNull SurfaceHolder holder) {
                     if (LOGGING) Log.d(LOG_TAG, "surfaceCreated()");
                     createSwapChain(holder.getSurface());
                 }
 
                 @Override
                 public void surfaceChanged(
-                        SurfaceHolder holder, int format, int width, int height) {
+                    @NonNull SurfaceHolder holder, int format, int width, int height) {
                     // Note: this is always called at least once after surfaceCreated()
                     if (LOGGING) Log.d(LOG_TAG, "surfaceChanged(" + width + ", " + height + ")");
-                    mRenderCallback.onResized(width, height);
+                    if (mRenderCallback != null) {
+                        mRenderCallback.onResized(width, height);
+                    }
                 }
 
                 @Override
-                public void surfaceDestroyed(SurfaceHolder holder) {
+                public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
                     if (LOGGING) Log.d(LOG_TAG, "surfaceDestroyed()");
                     destroySwapChain();
                 }
@@ -446,7 +449,6 @@ public class UiHelper {
 
     /**
      * Associate UiHelper with a TextureView.
-     *
      * As soon as TextureView is ready (i.e. has a buffer), we'll create the
      * EGL resources needed, and call user callbacks if needed.
      */
@@ -459,7 +461,7 @@ public class UiHelper {
             TextureView.SurfaceTextureListener listener = new TextureView.SurfaceTextureListener() {
                 @Override
                 public void onSurfaceTextureAvailable(
-                        SurfaceTexture surfaceTexture, int width, int height) {
+                    @NonNull SurfaceTexture surfaceTexture, int width, int height) {
                     if (LOGGING) Log.d(LOG_TAG, "onSurfaceTextureAvailable()");
 
                     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
@@ -474,32 +476,44 @@ public class UiHelper {
 
                     createSwapChain(surface);
 
-                    // Call this the first time because onSurfaceTextureSizeChanged()
-                    // isn't called at initialization time
-                    mRenderCallback.onResized(width, height);
-                }
-
-                @Override
-                public void onSurfaceTextureSizeChanged(
-                        SurfaceTexture surfaceTexture, int width, int height) {
-                    if (LOGGING) Log.d(LOG_TAG, "onSurfaceTextureSizeChanged()");
-                    if (mDesiredWidth > 0 && mDesiredHeight > 0) {
-                        surfaceTexture.setDefaultBufferSize(mDesiredWidth, mDesiredHeight);
-                        mRenderCallback.onResized(mDesiredWidth, mDesiredHeight);
-                    } else {
+                    if (mRenderCallback != null) {
+                        // Call this the first time because onSurfaceTextureSizeChanged()
+                        // isn't called at initialization time
                         mRenderCallback.onResized(width, height);
                     }
                 }
 
                 @Override
-                public boolean onSurfaceTextureDestroyed(SurfaceTexture surfaceTexture) {
+                public void onSurfaceTextureSizeChanged(
+                    @NonNull SurfaceTexture surfaceTexture, int width, int height) {
+                    if (LOGGING) Log.d(LOG_TAG, "onSurfaceTextureSizeChanged()");
+                    if (mRenderCallback != null) {
+                        if (mDesiredWidth > 0 && mDesiredHeight > 0) {
+                            surfaceTexture.setDefaultBufferSize(mDesiredWidth, mDesiredHeight);
+                            mRenderCallback.onResized(mDesiredWidth, mDesiredHeight);
+                        } else {
+                            mRenderCallback.onResized(width, height);
+                        }
+                        // We must recreate the SwapChain to guarantee that it sees the new size.
+                        // More precisely, for an EGL client, the EGLSurface must be recreated. For
+                        // a Vulkan client, the SwapChain must be recreated. Calling
+                        // onNativeWindowChanged() will accomplish that.
+                        // This requirement comes from SurfaceTexture.setDefaultBufferSize()
+                        // documentation.
+                        TextureViewHandler textureViewHandler = (TextureViewHandler) mRenderSurface;
+                        mRenderCallback.onNativeWindowChanged(textureViewHandler.getSurface());
+                    }
+                }
+
+                @Override
+                public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
                     if (LOGGING) Log.d(LOG_TAG, "onSurfaceTextureDestroyed()");
                     destroySwapChain();
                     return true;
                 }
 
                 @Override
-                public void onSurfaceTextureUpdated(SurfaceTexture surface) { }
+                public void onSurfaceTextureUpdated(@NonNull SurfaceTexture surface) { }
             };
 
             view.setSurfaceTextureListener(listener);
@@ -507,14 +521,15 @@ public class UiHelper {
             // in case the View's SurfaceTexture already existed
             if (view.isAvailable()) {
                 SurfaceTexture surfaceTexture = view.getSurfaceTexture();
-                listener.onSurfaceTextureAvailable(surfaceTexture, mDesiredWidth, mDesiredHeight);
+                if (surfaceTexture != null) {
+                    listener.onSurfaceTextureAvailable(surfaceTexture, mDesiredWidth, mDesiredHeight);
+                }
             }
         }
     }
 
     /**
      * Associate UiHelper with a SurfaceHolder.
-     *
      * As soon as a Surface is created, we'll create the
      * EGL resources needed, and call user callbacks if needed.
      */
@@ -527,20 +542,22 @@ public class UiHelper {
 
             final SurfaceHolder.Callback callback = new SurfaceHolder.Callback() {
                 @Override
-                public void surfaceCreated(SurfaceHolder surfaceHolder) {
+                public void surfaceCreated(@NonNull SurfaceHolder surfaceHolder) {
                     if (LOGGING) Log.d(LOG_TAG, "surfaceCreated()");
                     createSwapChain(holder.getSurface());
                 }
 
                 @Override
-                public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
+                public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
                     // Note: this is always called at least once after surfaceCreated()
                     if (LOGGING) Log.d(LOG_TAG, "surfaceChanged(" + width + ", " + height + ")");
-                    mRenderCallback.onResized(width, height);
+                    if (mRenderCallback != null) {
+                        mRenderCallback.onResized(width, height);
+                    }
                 }
 
                 @Override
-                public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
+                public void surfaceDestroyed(@NonNull SurfaceHolder surfaceHolder) {
                     if (LOGGING) Log.d(LOG_TAG, "surfaceDestroyed()");
                     destroySwapChain();
                 }
@@ -575,7 +592,9 @@ public class UiHelper {
     }
 
     private void createSwapChain(@NonNull Surface surface) {
-        mRenderCallback.onNativeWindowChanged(surface);
+        if (mRenderCallback != null) {
+            mRenderCallback.onNativeWindowChanged(surface);
+        }
         mHasSwapChain = true;
     }
 
@@ -583,7 +602,9 @@ public class UiHelper {
         if (mRenderSurface != null) {
             mRenderSurface.detach();
         }
-        mRenderCallback.onDetachedFromSurface();
+        if (mRenderCallback != null) {
+            mRenderCallback.onDetachedFromSurface();
+        }
         mHasSwapChain = false;
     }
 }

android/filament-utils-android/build.gradle

@@ -12,9 +12,6 @@ android {
         }
     }
 
-    defaultConfig {
-        missingDimensionStrategy 'functionality', 'full'
-    }
     packagingOptions {
         // No need to package up the following shared libs, which arise as a side effect of our
         // externalNativeBuild dependencies. When clients pick and choose from project-level gradle

android/filament-utils-android/src/main/java/com/google/android/filament/utils/Half.kt

@@ -17,6 +17,8 @@
 // Operators +, *, / based on http://half.sourceforge.net/ by Christian Rau
 // and licensed under MIT
 
+@file:Suppress("NOTHING_TO_INLINE")
+
 package com.google.android.filament.utils
 
 import com.google.android.filament.utils.Half.Companion.POSITIVE_INFINITY

android/filament-utils-android/src/main/java/com/google/android/filament/utils/ModelViewer.kt

@@ -191,7 +191,7 @@ class ModelViewer(
         asset = assetLoader.createAsset(buffer)
         asset?.let { asset ->
             resourceLoader.asyncBeginLoad(asset)
-            animator = asset.getInstance().animator
+            animator = asset.instance.animator
             asset.releaseSourceData()
         }
     }
@@ -214,7 +214,7 @@ class ModelViewer(
                 resourceLoader.addResourceData(uri, resourceBuffer)
             }
             resourceLoader.asyncBeginLoad(asset)
-            animator = asset.getInstance().animator
+            animator = asset.instance.animator
             asset.releaseSourceData()
         }
     }
@@ -311,7 +311,7 @@ class ModelViewer(
         var count = 0
         val popRenderables = { count = asset.popRenderables(readyRenderables); count != 0 }
         while (popRenderables()) {
-            for (i in 0..count - 1) {
+            for (i in 0 until count) {
                 val ri = rcm.getInstance(readyRenderables[i])
                 rcm.setScreenSpaceContactShadows(ri, true)
             }
@@ -371,7 +371,7 @@ class ModelViewer(
                 resourceLoader.addResourceData(uri, buffer)
             }
             resourceLoader.asyncBeginLoad(asset)
-            animator = asset.getInstance().animator
+            animator = asset.instance.animator
             asset.releaseSourceData()
         }
     }

android/gltfio-android/CMakeLists.txt

@@ -52,6 +52,7 @@ set(GLTFIO_SRCS
         ${GLTFIO_DIR}/include/gltfio/FilamentInstance.h
         ${GLTFIO_DIR}/include/gltfio/MaterialProvider.h
         ${GLTFIO_DIR}/include/gltfio/NodeManager.h
+        ${GLTFIO_DIR}/include/gltfio/TrsTransformManager.h
         ${GLTFIO_DIR}/include/gltfio/ResourceLoader.h
         ${GLTFIO_DIR}/include/gltfio/TextureProvider.h
         ${GLTFIO_DIR}/include/gltfio/math.h
@@ -69,10 +70,12 @@ set(GLTFIO_SRCS
         ${GLTFIO_DIR}/src/FilamentAsset.cpp
         ${GLTFIO_DIR}/src/FilamentInstance.cpp
         ${GLTFIO_DIR}/src/FNodeManager.h
+        ${GLTFIO_DIR}/src/FTrsTransformManager.h
         ${GLTFIO_DIR}/src/GltfEnums.h
         ${GLTFIO_DIR}/src/Ktx2Provider.cpp
         ${GLTFIO_DIR}/src/MaterialProvider.cpp
         ${GLTFIO_DIR}/src/NodeManager.cpp
+        ${GLTFIO_DIR}/src/TrsTransformManager.cpp
         ${GLTFIO_DIR}/src/ResourceLoader.cpp
         ${GLTFIO_DIR}/src/StbProvider.cpp
         ${GLTFIO_DIR}/src/TangentsJob.cpp

android/gltfio-android/build.gradle

@@ -1,12 +1,6 @@
 android {
     namespace 'com.google.android.filament.gltfio'
 
-    flavorDimensions "functionality"
-    productFlavors {
-        full {
-            dimension "functionality"
-        }
-    }
     packagingOptions {
         // No need to package up the following shared libs, which arise as a side effect of our
         // externalNativeBuild dependencies. When clients pick and choose from project-level gradle
@@ -18,7 +12,7 @@ android {
     }
 
     publishing {
-        singleVariant("fullRelease") {
+        singleVariant("release") {
             withSourcesJar()
             withJavadocJar()
         }
@@ -36,9 +30,9 @@ apply from: rootProject.file('gradle/gradle-mvn-push.gradle')
 afterEvaluate { project ->
     publishing {
         publications {
-            fullRelease(MavenPublication) {
+            release(MavenPublication) {
                 artifactId = POM_ARTIFACT_ID_FULL
-                from components.fullRelease
+                from components.release
             }
         }
     }

android/gradle.properties

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

android/samples/README.md

@@ -87,9 +87,9 @@ compile Filament's native library and Filament's AAR for this project. The easie
 is to install all the required dependencies and to run the following commands at the root of the
 source tree:
 
-```
-$ ./build.sh -p desktop -i release
-$ ./build.sh -p android release
+```shell
+./build.sh -p desktop -i release
+./build.sh -p android release
 ```
 
 This will build all the native components and the AAR required by this sample application.
@@ -100,8 +100,8 @@ distribution/install directory for desktop (produced by make/ninja install). Thi
 contain `bin/matc` and `bin/cmgen`.
 
 Example:
-```
-$ ./gradlew -Pfilament_tools_dir=../../dist-release assembleDebug
+```shell
+./gradlew -Pfilament_tools_dir=../../dist-release assembleDebug
 ```
 
 ## Important: SDK location
@@ -110,14 +110,24 @@ Either ensure your `ANDROID_HOME` environment variable is set or make sure the r
 contains a `local.properties` file with the `sdk.dir` property pointing to your installation of
 the Android SDK.
 
-## Android Studio
+## Compiling
+
+### Android Studio
 
 You must use the latest stable release of Android Studio. To open the project, point Studio to the
 `android` folder. After opening the project and syncing to gradle, select the sample of your choice
 using the drop-down widget in the toolbar.
 
-## Compiling
-
 To compile and run each sample make sure you have selected the appropriate build variant
 (arm7, arm8, x86 or x86_64). If you are not sure you can simply select the "universal"
 variant which includes all the other ones.
+
+### Command Line
+
+From the `android` directory in the project root:
+
+```shell
+./gradlew :samples:sample-hello-triangle:installDebug
+```
+
+Replace `sample-hello-triangle` with your preferred project.

android/samples/sample-gltf-viewer/build.gradle

@@ -32,7 +32,6 @@ android {
         applicationId "com.google.android.filament.gltf"
         minSdkVersion 19
         targetSdkVersion versions.targetSdk
-        missingDimensionStrategy 'functionality', 'full'
     }
 
     // NOTE: This is a workaround required because the AGP task collectReleaseDependencies

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

@@ -28,6 +28,7 @@ import com.google.android.filament.Fence
 import com.google.android.filament.IndirectLight
 import com.google.android.filament.Skybox
 import com.google.android.filament.View
+import com.google.android.filament.View.OnPickCallback
 import com.google.android.filament.utils.*
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -56,7 +57,9 @@ class MainActivity : Activity() {
     private lateinit var modelViewer: ModelViewer
     private lateinit var titlebarHint: TextView
     private val doubleTapListener = DoubleTapListener()
+    private val singleTapListener = SingleTapListener()
     private lateinit var doubleTapDetector: GestureDetector
+    private lateinit var singleTapDetector: GestureDetector
     private var remoteServer: RemoteServer? = null
     private var statusToast: Toast? = null
     private var statusText: String? = null
@@ -77,6 +80,7 @@ class MainActivity : Activity() {
         choreographer = Choreographer.getInstance()
 
         doubleTapDetector = GestureDetector(applicationContext, doubleTapListener)
+        singleTapDetector = GestureDetector(applicationContext, singleTapListener)
 
         modelViewer = ModelViewer(surfaceView)
         viewerContent.view = modelViewer.view
@@ -88,6 +92,7 @@ class MainActivity : Activity() {
         surfaceView.setOnTouchListener { _, event ->
             modelViewer.onTouchEvent(event)
             doubleTapDetector.onTouchEvent(event)
+            singleTapDetector.onTouchEvent(event)
             true
         }
 
@@ -229,6 +234,7 @@ class MainActivity : Activity() {
                 modelViewer.scene.skybox = sky
                 modelViewer.scene.indirectLight = ibl
                 viewerContent.indirectLight = ibl
+
             }
         }
     }
@@ -337,6 +343,11 @@ class MainActivity : Activity() {
         remoteServer?.close()
     }
 
+    override fun onBackPressed() {
+        super.onBackPressed()
+        finish()
+    }
+
     fun loadModelData(message: RemoteServer.ReceivedMessage) {
         Log.i(TAG, "Downloaded model ${message.label} (${message.buffer.capacity()} bytes)")
         clearStatusText()
@@ -425,4 +436,19 @@ class MainActivity : Activity() {
             return super.onDoubleTap(e)
         }
     }
+
+    // Just for testing purposes
+    inner class SingleTapListener : GestureDetector.SimpleOnGestureListener() {
+        override fun onSingleTapUp(event: MotionEvent): Boolean {
+            modelViewer.view.pick(
+                event.x.toInt(),
+                surfaceView.height - event.y.toInt(),
+                surfaceView.handler, {
+                    val name = modelViewer.asset!!.getName(it.renderable)
+                    Log.v("Filament", "Picked ${it.renderable}: " + name)
+                },
+            )
+            return super.onSingleTapUp(event)
+        }
+    }
 }

android/samples/sample-hello-triangle/src/main/java/com/google/android/filament/hellotriangle/MainActivity.kt

@@ -110,7 +110,7 @@ class MainActivity : Activity() {
     }
 
     private fun setupFilament() {
-        engine = Engine.create()
+        engine = Engine.Builder().featureLevel(Engine.FeatureLevel.FEATURE_LEVEL_0).build()
         renderer = engine.createRenderer()
         scene = engine.createScene()
         view = engine.createView()
@@ -120,13 +120,8 @@ class MainActivity : Activity() {
     private fun setupView() {
         scene.skybox = Skybox.Builder().color(0.035f, 0.035f, 0.035f, 1.0f).build(engine)
 
-        if (engine.activeFeatureLevel == Engine.FeatureLevel.FEATURE_LEVEL_0) {
-            // post-processing is not supported at feature level 0
-            view.isPostProcessingEnabled = false
-        } else {
-            // NOTE: Try to disable post-processing (tone-mapping, etc.) to see the difference
-            // view.isPostProcessingEnabled = false
-        }
+        // post-processing is not supported at feature level 0
+        view.isPostProcessingEnabled = false
 
         // Tell the view which camera we want to use
         view.camera = camera
@@ -160,11 +155,7 @@ class MainActivity : Activity() {
     }
 
     private fun loadMaterial() {
-        var name = "materials/baked_color.filamat"
-        if (engine.activeFeatureLevel == Engine.FeatureLevel.FEATURE_LEVEL_0) {
-            name = "materials/baked_color_es2.filamat"
-        }
-        readUncompressedAsset(name).let {
+        readUncompressedAsset("materials/baked_color.filamat").let {
             material = Material.Builder().payload(it, it.remaining()).build(engine)
         }
     }

android/samples/sample-hello-triangle/src/main/materials/baked_color.mat

@@ -17,7 +17,8 @@ material {
     ],
 
     // This material disables all lighting
-    shadingModel : unlit
+    shadingModel : unlit,
+    featureLevel : 0
 }
 
 fragment {

android/samples/sample-hello-triangle/src/main/materials/baked_color_es2.mat

@@ -1,33 +0,0 @@
-// Simple unlit material that uses the colors associated with each vertex.
-//
-// This source material must be compiled to a binary material using the matc tool.
-// The command used to compile this material is:
-// matc -p mobile -a opengl -o app/src/main/assets/baked_color.filamat app/src/materials/baked_color.mat
-//
-// See build.gradle for an example of how to compile materials automatically
-// Please refer to the documentation for more information about matc and the materials system.
-
-material {
-    name : baked_color,
-
-    // Lists the required vertex attributes
-    // Here we only need a color (RGBA)
-    requires : [
-        color
-    ],
-
-    // This material disables all lighting
-    shadingModel : unlit,
-    featureLevel : 0
-}
-
-fragment {
-    void material(inout MaterialInputs material) {
-        // You must always call the prepareMaterial() function
-        prepareMaterial(material);
-
-        // We set the material's color to the color interpolated from
-        // the model's vertices
-        material.baseColor = getColor();
-    }
-}

android/samples/sample-image-based-lighting/src/main/java/com/google/android/filament/ibl/MainActivity.kt

@@ -118,9 +118,10 @@ class MainActivity : Activity() {
     }
 
     private fun setupView() {
-        val ssaoOptions = view.ambientOcclusionOptions
-        ssaoOptions.enabled = true
-        view.ambientOcclusionOptions = ssaoOptions
+        // ambient occlusion is the cheapest effect that adds a lot of quality
+        view.ambientOcclusionOptions = view.ambientOcclusionOptions.apply {
+            enabled = true
+        }
 
         // NOTE: Try to disable post-processing (tone-mapping, etc.) to see the difference
         // view.isPostProcessingEnabled = false

android/samples/sample-material-builder/build.gradle

@@ -32,13 +32,6 @@ android {
         targetSdkVersion versions.targetSdk
     }
 
-    // The filamat library has two variants: full and lite. Here we default to the "full" variant.
-    // Replace "full" with "lite" to use the filamat-lite variant, which has a smaller binary size
-    // but comes with certain restrictions. See "Filamat Lite" in libs/filamat/README.md.
-    defaultConfig {
-        missingDimensionStrategy 'functionality', 'full'
-    }
-
     // NOTE: This is a workaround required because the AGP task collectReleaseDependencies
     //       is not configuration-cache friendly yet; this is only useful for Play publication
     dependenciesInfo {

android/samples/sample-textured-object/build.gradle

@@ -33,7 +33,6 @@ android {
         applicationId "com.google.android.filament.textured"
         minSdkVersion versions.minSdk
         targetSdkVersion versions.targetSdk
-        missingDimensionStrategy 'functionality', 'full'
     }
 
     // NOTE: This is a workaround required because the AGP task collectReleaseDependencies

android/samples/sample-textured-object/src/main/java/com/google/android/filament/textured/MainActivity.kt

@@ -231,7 +231,7 @@ class MainActivity : Activity() {
         animator.repeatCount = ValueAnimator.INFINITE
         animator.addUpdateListener { a ->
             val v = (a.animatedValue as Float)
-            camera.lookAt(cos(v) * 4.5, 1.5, sin(v) * 4.5, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)
+            camera.lookAt(cos(v) * 5.5, 1.5, sin(v) * 5.5, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0)
         }
         animator.start()
     }
@@ -253,7 +253,7 @@ class MainActivity : Activity() {
 
         // Stop the animation and any pending frame
         choreographer.removeFrameCallback(frameScheduler)
-        animator.cancel();
+        animator.cancel()
 
         // Always detach the surface before destroying the engine
         uiHelper.detach()

android/samples/sample-transparent-view/src/main/java/com/google/android/filament/transparentrendering/MainActivity.kt

@@ -140,9 +140,9 @@ class MainActivity : Activity() {
         camera = engine.createCamera(engine.entityManager.create())
 
         // clear the swapchain with transparent pixels
-        val options = renderer.clearOptions
-        options.clear = true
-        renderer.clearOptions = options
+        renderer.clearOptions = renderer.clearOptions.apply {
+            clear = true
+        }
     }
 
     private fun setupView() {

build.sh

@@ -90,8 +90,8 @@ function print_help {
     echo "    Desktop matc target, release build:"
     echo "        \$ ./$self_name release matc"
     echo ""
-    echo "    Build gltf_viewer then immediately run it with no arguments:"
-    echo "        \$ ./$self_name release run_gltf_viewer"
+    echo "    Build gltf_viewer:"
+    echo "        \$ ./$self_name release gltf_viewer"
     echo ""
  }
 
@@ -191,6 +191,7 @@ function build_clean {
     rm -Rf android/filamat-android/build android/filamat-android/.externalNativeBuild android/filamat-android/.cxx
     rm -Rf android/gltfio-android/build android/gltfio-android/.externalNativeBuild android/gltfio-android/.cxx
     rm -Rf android/filament-utils-android/build android/filament-utils-android/.externalNativeBuild android/filament-utils-android/.cxx
+    rm -f compile_commands.json
 }
 
 function build_clean_aggressive {
@@ -210,13 +211,10 @@ function build_desktop_target {
     echo "Building ${lc_target} in out/cmake-${lc_target}..."
     mkdir -p "out/cmake-${lc_target}"
 
-    cd "out/cmake-${lc_target}"
+    pushd "out/cmake-${lc_target}" > /dev/null
 
-    # On macOS, set the deployment target to 10.15.
     local lc_name=$(echo "${UNAME}" | tr '[:upper:]' '[:lower:]')
     if [[ "${lc_name}" == "darwin" ]]; then
-        local deployment_target="-DCMAKE_OSX_DEPLOYMENT_TARGET=10.15"
-
         if [[ "${BUILD_UNIVERSAL_LIBRARIES}" == "true" ]]; then
             local architectures="-DCMAKE_OSX_ARCHITECTURES=arm64;x86_64"
         fi
@@ -233,9 +231,10 @@ function build_desktop_target {
             ${MATDBG_OPTION} \
             ${MATOPT_OPTION} \
             ${ASAN_UBSAN_OPTION} \
-            ${deployment_target} \
             ${architectures} \
             ../..
+        ln -sf "out/cmake-${lc_target}/compile_commands.json" \
+           ../../compile_commands.json
     fi
     ${BUILD_COMMAND} ${build_targets}
 
@@ -247,12 +246,13 @@ function build_desktop_target {
     if [[ -d "../${lc_target}/filament" ]]; then
         if [[ "${ISSUE_ARCHIVES}" == "true" ]]; then
             echo "Generating out/filament-${lc_target}-${LC_UNAME}.tgz..."
-            cd "../${lc_target}"
+            pushd "../${lc_target}" > /dev/null
             tar -czvf "../filament-${lc_target}-${LC_UNAME}.tgz" filament
+            popd > /dev/null
         fi
     fi
 
-    cd ../..
+    popd > /dev/null
 }
 
 function build_desktop {
@@ -270,7 +270,7 @@ function build_webgl_with_target {
 
     echo "Building WebGL ${lc_target}..."
     mkdir -p "out/cmake-webgl-${lc_target}"
-    cd "out/cmake-webgl-${lc_target}"
+    pushd "out/cmake-webgl-${lc_target}" > /dev/null
 
     if [[ ! "${BUILD_TARGETS}" ]]; then
         BUILD_TARGETS=${BUILD_CUSTOM_TARGETS}
@@ -290,6 +290,8 @@ function build_webgl_with_target {
             -DCMAKE_INSTALL_PREFIX="../webgl-${lc_target}/filament" \
             -DWEBGL=1 \
             ../..
+        ln -sf "out/cmake-webgl-${lc_target}/compile_commands.json" \
+           ../../compile_commands.json
         ${BUILD_COMMAND} ${BUILD_TARGETS}
         )
     fi
@@ -307,17 +309,17 @@ function build_webgl_with_target {
 
         if [[ "${ISSUE_ARCHIVES}" == "true" ]]; then
             echo "Generating out/filament-${lc_target}-web.tgz..."
-            cd web/filament-js
+            pushd web/filament-js > /dev/null
             tar -cvf "../../../filament-${lc_target}-web.tar" filament.js
             tar -rvf "../../../filament-${lc_target}-web.tar" filament.wasm
             tar -rvf "../../../filament-${lc_target}-web.tar" filament.d.ts
-            cd -
+            popd > /dev/null
             gzip -c "../filament-${lc_target}-web.tar" > "../filament-${lc_target}-web.tgz"
             rm "../filament-${lc_target}-web.tar"
         fi
     fi
 
-    cd ../..
+    popd > /dev/null
 }
 
 function build_webgl {
@@ -348,7 +350,7 @@ function build_android_target {
     echo "Building Android ${lc_target} (${arch})..."
     mkdir -p "out/cmake-android-${lc_target}-${arch}"
 
-    cd "out/cmake-android-${lc_target}-${arch}"
+    pushd "out/cmake-android-${lc_target}-${arch}" > /dev/null
 
     if [[ ! -d "CMakeFiles" ]] || [[ "${ISSUE_CMAKE_ALWAYS}" == "true" ]]; then
         cmake \
@@ -362,12 +364,14 @@ function build_android_target {
             ${MATOPT_OPTION} \
             ${VULKAN_ANDROID_OPTION} \
             ../..
+        ln -sf "out/cmake-android-${lc_target}-${arch}/compile_commands.json" \
+           ../../compile_commands.json
     fi
 
     # We must always install Android libraries to build the AAR
     ${BUILD_COMMAND} install
 
-    cd ../..
+    popd > /dev/null
 }
 
 function build_android_arch {
@@ -388,9 +392,9 @@ function archive_android {
     if [[ -d "out/android-${lc_target}/filament" ]]; then
         if [[ "${ISSUE_ARCHIVES}" == "true" ]]; then
             echo "Generating out/filament-android-${lc_target}-${LC_UNAME}.tgz..."
-            cd "out/android-${lc_target}"
+            pushd "out/android-${lc_target}" > /dev/null
             tar -czvf "../filament-android-${lc_target}-${LC_UNAME}.tgz" filament
-            cd ../..
+            popd > /dev/null
         fi
     fi
 }
@@ -468,7 +472,7 @@ function build_android {
         archive_android "Release"
     fi
 
-    cd android
+    pushd android > /dev/null
 
     if [[ "${ISSUE_DEBUG_BUILD}" == "true" ]]; then
         ./gradlew \
@@ -498,13 +502,13 @@ function build_android {
 
         if [[ "${INSTALL_COMMAND}" ]]; then
             echo "Installing out/filamat-android-debug.aar..."
-            cp filamat-android/build/outputs/aar/filamat-android-full-debug.aar ../out/filamat-android-debug.aar
+            cp filamat-android/build/outputs/aar/filamat-android-debug.aar ../out/filamat-android-debug.aar
 
             echo "Installing out/filament-android-debug.aar..."
             cp filament-android/build/outputs/aar/filament-android-debug.aar ../out/
 
             echo "Installing out/gltfio-android-debug.aar..."
-            cp gltfio-android/build/outputs/aar/gltfio-android-full-debug.aar ../out/gltfio-android-debug.aar
+            cp gltfio-android/build/outputs/aar/gltfio-android-debug.aar ../out/gltfio-android-debug.aar
 
             echo "Installing out/filament-utils-android-debug.aar..."
             cp filament-utils-android/build/outputs/aar/filament-utils-android-debug.aar ../out/filament-utils-android-debug.aar
@@ -547,14 +551,13 @@ function build_android {
 
         if [[ "${INSTALL_COMMAND}" ]]; then
             echo "Installing out/filamat-android-release.aar..."
-            cp filamat-android/build/outputs/aar/filamat-android-lite-release.aar ../out/
-            cp filamat-android/build/outputs/aar/filamat-android-full-release.aar ../out/filamat-android-release.aar
+            cp filamat-android/build/outputs/aar/filamat-android-release.aar ../out/filamat-android-release.aar
 
             echo "Installing out/filament-android-release.aar..."
             cp filament-android/build/outputs/aar/filament-android-release.aar ../out/
 
             echo "Installing out/gltfio-android-release.aar..."
-            cp gltfio-android/build/outputs/aar/gltfio-android-full-release.aar ../out/gltfio-android-release.aar
+            cp gltfio-android/build/outputs/aar/gltfio-android-release.aar ../out/gltfio-android-release.aar
 
             echo "Installing out/filament-utils-android-release.aar..."
             cp filament-utils-android/build/outputs/aar/filament-utils-android-release.aar ../out/filament-utils-android-release.aar
@@ -569,7 +572,7 @@ function build_android {
         fi
     fi
 
-    cd ..
+    popd > /dev/null
 }
 
 function build_ios_target {
@@ -580,7 +583,7 @@ function build_ios_target {
     echo "Building iOS ${lc_target} (${arch}) for ${platform}..."
     mkdir -p "out/cmake-ios-${lc_target}-${arch}"
 
-    cd "out/cmake-ios-${lc_target}-${arch}"
+    pushd "out/cmake-ios-${lc_target}-${arch}" > /dev/null
 
     if [[ ! -d "CMakeFiles" ]] || [[ "${ISSUE_CMAKE_ALWAYS}" == "true" ]]; then
         cmake \
@@ -595,6 +598,8 @@ function build_ios_target {
             ${MATDBG_OPTION} \
             ${MATOPT_OPTION} \
             ../..
+        ln -sf "out/cmake-ios-${lc_target}-${arch}/compile_commands.json" \
+           ../../compile_commands.json
     fi
 
     ${BUILD_COMMAND}
@@ -604,7 +609,7 @@ function build_ios_target {
         ${BUILD_COMMAND} ${INSTALL_COMMAND}
     fi
 
-    cd ../..
+    popd > /dev/null
 }
 
 function archive_ios {
@@ -613,9 +618,9 @@ function archive_ios {
     if [[ -d "out/ios-${lc_target}/filament" ]]; then
         if [[ "${ISSUE_ARCHIVES}" == "true" ]]; then
             echo "Generating out/filament-${lc_target}-ios.tgz..."
-            cd "out/ios-${lc_target}"
+            pushd "out/ios-${lc_target}" > /dev/null
             tar -czvf "../filament-${lc_target}-ios.tgz" filament
-            cd ../..
+            popd > /dev/null
         fi
     fi
 }
@@ -674,14 +679,14 @@ function build_web_docs {
 
     mkdir -p out/web-docs
     cp -f docs/web-docs-package.json out/web-docs/package.json
-    cd out/web-docs
+    pushd out/web-docs > /dev/null
 
     npm install > /dev/null
 
     # Generate documents
     npx markdeep-rasterizer ../../docs/Filament.md.html ../../docs/Materials.md.html  ../../docs/
 
-    cd ../..
+    popd > /dev/null
 }
 
 function validate_build_command {
@@ -754,6 +759,19 @@ function run_tests {
     fi
 }
 
+function check_debug_release_build {
+    if [[ "${ISSUE_DEBUG_BUILD}" == "true" || \
+          "${ISSUE_RELEASE_BUILD}" == "true" || \
+          "${ISSUE_CLEAN}" == "true" || \
+          "${ISSUE_WEB_DOCS}" == "true" ]]; then
+        "$@";
+    else
+        echo "You must declare a debug or release target for $@ builds."
+        echo ""
+        exit 1
+    fi
+}
+
 # Beginning of the script
 
 pushd "$(dirname "$0")" > /dev/null
@@ -762,7 +780,7 @@ while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
     case ${opt} in
         h)
             print_help
-            exit 1
+            exit 0
             ;;
         a)
             ISSUE_ARCHIVES=true
@@ -798,7 +816,7 @@ while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
             platforms=$(echo "${OPTARG}" | tr ',' '\n')
             for platform in ${platforms}
             do
-                case ${platform} in
+                case $(echo "${platform}" | tr '[:upper:]' '[:lower:]') in
                     desktop)
                         ISSUE_DESKTOP_BUILD=true
                     ;;
@@ -817,6 +835,12 @@ while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
                         ISSUE_DESKTOP_BUILD=true
                         ISSUE_WEBGL_BUILD=false
                     ;;
+                    *)
+                        echo "Unknown platform ${platform}"
+                        echo "Platform must be one of [desktop|android|ios|webgl|all]"
+                        echo ""
+                        exit 1
+                    ;;    
                 esac
             done
             ;;
@@ -829,7 +853,7 @@ while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
             abis=$(echo "${OPTARG}" | tr ',' '\n')
             for abi in ${abis}
             do
-                case ${abi} in
+                case $(echo "${abi}" | tr '[:upper:]' '[:lower:]') in
                     armeabi-v7a)
                         ABI_ARMEABI_V7A=true
                     ;;
@@ -848,6 +872,12 @@ while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
                         ABI_X86=true
                         ABI_X86_64=true
                     ;;
+                    *)
+                        echo "Unknown abi ${abi}"
+                        echo "ABI must be one of [armeabi-v7a|arm64-v8a|x86|x86_64|all]"
+                        echo ""
+                        exit 1
+                    ;;
                 esac
             done
             ;;
@@ -911,9 +941,9 @@ fi
 shift $((OPTIND - 1))
 
 for arg; do
-    if [[ "${arg}" == "release" ]]; then
+    if [[ $(echo "${arg}" | tr '[:upper:]' '[:lower:]') == "release" ]]; then
         ISSUE_RELEASE_BUILD=true
-    elif [[ "${arg}" == "debug" ]]; then
+    elif [[ $(echo "${arg}" | tr '[:upper:]' '[:lower:]') == "debug" ]]; then
         ISSUE_DEBUG_BUILD=true
     else
         BUILD_CUSTOM_TARGETS="${BUILD_CUSTOM_TARGETS} ${arg}"
@@ -931,19 +961,19 @@ if [[ "${ISSUE_CLEAN_AGGRESSIVE}" == "true" ]]; then
 fi
 
 if [[ "${ISSUE_DESKTOP_BUILD}" == "true" ]]; then
-    build_desktop
+    check_debug_release_build build_desktop
 fi
 
 if [[ "${ISSUE_ANDROID_BUILD}" == "true" ]]; then
-    build_android
+    check_debug_release_build build_android
 fi
 
 if [[ "${ISSUE_IOS_BUILD}" == "true" ]]; then
-    build_ios
+    check_debug_release_build build_ios
 fi
 
 if [[ "${ISSUE_WEBGL_BUILD}" == "true" ]]; then
-    build_webgl
+    check_debug_release_build build_webgl
 fi
 
 if [[ "${ISSUE_WEB_DOCS}" == "true" ]]; then

build/android/build.sh

@@ -57,8 +57,7 @@ FILAMENT_NDK_VERSION=${FILAMENT_NDK_VERSION:-$(cat `dirname $0`/ndk.version)}
 
 # Install the required NDK version specifically (if not present)
 if [[ ! -d "${ANDROID_HOME}/ndk/$FILAMENT_NDK_VERSION" ]]; then
-    # NOTE: We MUST use Java 1.8 to run sdkmanager currently, it fails starting with Java 11
-    JAVA_HOME=${JAVA_HOME_8_X64} ${ANDROID_HOME}/tools/bin/sdkmanager "ndk;$FILAMENT_NDK_VERSION" > /dev/null
+    ${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager "ndk;$FILAMENT_NDK_VERSION" > /dev/null
 fi
 
 # Only build 1 64 bit target during presubmit to cut down build times during presubmit

build/common/bump-version.sh

@@ -2,6 +2,11 @@
 
 set -e
 
+case "$(uname -s)" in
+    Darwin*) IS_DARWIN=1;;
+    *) ;;
+esac
+
 function print_help {
     local SELF_NAME
     SELF_NAME=$(basename "$0")
@@ -45,7 +50,11 @@ function replace {
     FIND_STR="${1//\{\{VERSION\}\}/${VERSION_REGEX}}"
     REPLACE_STR="${1//\{\{VERSION\}\}/${NEW_VERSION}}"
     local FILE_NAME="$2"
-    sed -i '' -E "s/${FIND_STR}/${REPLACE_STR}/" "${FILE_NAME}"
+    if [ IS_DARWIN ]; then
+        sed -i '' -E "s/${FIND_STR}/${REPLACE_STR}/" "${FILE_NAME}"
+    else
+        sed -i -E "s/${FIND_STR}/${REPLACE_STR}/" "${FILE_NAME}"
+    fi
 }
 
 # The following are the canonical locations where the Filament version number is referenced.

build/common/test_list.txt

@@ -5,7 +5,6 @@ libs/math/test_math
 libs/image/test_image compare libs/image/tests/reference/
 libs/utils/test_utils
 libs/filamat/test_filamat
-libs/filamat/test_filamat_lite
 tools/matc/test_matc
 tools/cmgen/test_cmgen compare
 tools/glslminifier/test_glslminifier

docs/Materials.md.html

@@ -1139,7 +1139,8 @@ Type
 :    array of `string`
 
 Value
-:     Each entry must be any of `dynamicLighting`, `directionalLighting`, `shadowReceiver`,`skinning` or `ssr`.
+:     Each entry must be any of `dynamicLighting`, `directionalLighting`, `shadowReceiver`,
+      `skinning`, `ssr`, or `stereo`.
 
 Description
 :     Used to specify a list of shader variants that the application guarantees will never be
@@ -1158,6 +1159,7 @@ Description of the variants:
 - `fog`, used when global fog is applied to the scene
 - `vsm`, used when VSM shadows are enabled and the object is a shadow receiver
 - `ssr`, used when screen-space reflections are enabled in the View
+- `stereo`, used when stereoscopic rendering is enabled in the View
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ JSON
 material {
@@ -2593,4 +2595,26 @@ pre-multiplied ahead of time. On Android, any texture uploaded from a
 [Bitmap](https://developer.android.com/reference/android/graphics/Bitmap.html) will be
 pre-multiplied by default.
 
+# Sampler usage in Materials
+
+The number of usable sampler parameters (e.g.: type is `sampler2d`) in materials is limited and
+depends on the material properties, shading model, feature level and variant filter.
+
+## Feature level 1 and 2
+
+`unlit` materials can use up to 12 samplers by default.
+
+`lit` materials can use up to 9 samplers by default, however if `refractionMode` or `reflectionMode`
+is set to `screenspace` that number is reduced to 8.
+
+Finally if `variantFilter` contains the `fog` filter, an extra sampler is made available, such that
+`unlit` materials can use up to 13 and `lit` materials up to 10 samplers by default.
+
+## Feature level 3
+
+16 samplers are available.
+
+!!! TIP: external samplers
+               Be aware that `external` samplers account for 2 regular samplers.
+
 <!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="../third_party/markdeep/markdeep.min.js"></script><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>

docs/viewer/filament-viewer.js

@@ -15,7 +15,7 @@
 */
 
 // If you are bundling this with rollup, webpack, or esbuild, the following URL should be trimmed.
-import { LitElement, html, css } from "https://unpkg.com/lit?module";
+import { LitElement, html, css } from "https://unpkg.com/lit@2.8.0?module";
 
 // This little utility checks if the Filament module is ready for action.
 // If so, it immediately calls the given function. If not, it asks the Filament
@@ -287,12 +287,12 @@ class FilamentViewer extends LitElement {
         // Dropping a glb file is simple because there are no external resources.
         if (this.srcBlob && this.srcBlob.name.endsWith(".glb")) {
             this.srcBlob.arrayBuffer().then(buffer => {
-                this.asset = this.loader.createAssetFromBinary(new Uint8Array(buffer));
+                this.asset = this.loader.createAsset(new Uint8Array(buffer));
                 const aabb = this.asset.getBoundingBox();
                 this.assetRoot = this.asset.getRoot();
                 this.unitCubeTransform = Filament.fitIntoUnitCube(aabb, zoffset);
                 this.asset.loadResources();
-                this.animator = this.asset.getAnimator();
+                this.animator = this.asset.getInstance().getAnimator();
                 this.animationStartTime = Date.now();
                 this._updateOverlay();
             });
@@ -304,8 +304,6 @@ class FilamentViewer extends LitElement {
 
             const config = {
                 normalizeSkinningWeights: true,
-                recomputeBoundingBoxes: false,
-                ignoreBindTransform: false,
                 asyncInterval: 30
             };
 
@@ -320,22 +318,20 @@ class FilamentViewer extends LitElement {
                         resourceLoader.delete();
                         stbProvider.delete();
                         ktx2Provider.delete();
-                        this.animator = this.asset.getAnimator();
+                        this.animator = this.asset.getInstance().getAnimator();
                         this.animationStartTime = Date.now();
                     }
                 }, config.asyncInterval);
             };
 
             this.srcBlob.arrayBuffer().then(buffer => {
-                this.asset = this.loader.createAssetFromJson(new Uint8Array(buffer));
+                this.asset = this.loader.createAsset(new Uint8Array(buffer));
                 const aabb = this.asset.getBoundingBox();
                 this.assetRoot = this.asset.getRoot();
                 this.unitCubeTransform = Filament.fitIntoUnitCube(aabb, zoffset);
 
                 const resourceLoader = new Filament.gltfio$ResourceLoader(this.engine,
-                    config.normalizeSkinningWeights,
-                    config.recomputeBoundingBoxes,
-                    config.ignoreBindTransform);
+                    config.normalizeSkinningWeights);
 
                 const stbProvider = new Filament.gltfio$StbProvider(this.engine);
                 const ktx2Provider = new Filament.gltfio$Ktx2Provider(this.engine);
@@ -367,12 +363,7 @@ class FilamentViewer extends LitElement {
             return response.arrayBuffer();
         }).then(arrayBuffer => {
             const modelData = new Uint8Array(arrayBuffer);
-            if (this.src.endsWith(".glb")) {
-                this.asset = this.loader.createAssetFromBinary(modelData);
-            } else {
-                this.asset = this.loader.createAssetFromJson(modelData);
-            }
-
+            this.asset = this.loader.createAsset(modelData);
             const aabb = this.asset.getBoundingBox();
             this.assetRoot = this.asset.getRoot();
             this.unitCubeTransform = Filament.fitIntoUnitCube(aabb, zoffset);
@@ -380,7 +371,7 @@ class FilamentViewer extends LitElement {
             const basePath = '' + new URL(this.src, document.location);
 
             this.asset.loadResources(() => {
-                this.animator = this.asset.getAnimator();
+                this.animator = this.asset.getInstance().getAnimator();
                 this.animationStartTime = Date.now();
                 this._applyMaterialVariant();
             }, null, basePath);
@@ -441,14 +432,15 @@ class FilamentViewer extends LitElement {
         if (!this.hasAttribute("materialVariant")) {
             return;
         }
-        const names = this.asset.getMaterialVariantNames();
+        const instance = this.asset.getInstance();
+        const names = instance.getMaterialVariantNames();
         const index = this.materialVariant;
         if (index < 0 || index >= names.length) {
             console.error(`Material variant ${index} does not exist in this asset.`);
             return;
         }
         console.info(this.src, `Applying material variant: ${names[index]}`);
-        this.asset.applyMaterialVariant(index);
+        instance.applyMaterialVariant(index);
     }
 }
 

docs/viewer/index.html

@@ -43,7 +43,7 @@ filament-viewer::part(canvas) {
 </p>
 
 </main>
-<script src="https://unpkg.com/filament@1.25.3/filament.js"></script>
+<script src="https://unpkg.com/filament@1.44.0/filament.js"></script>
 <script src="https://unpkg.com/gltumble"></script>
 <script src="filament-viewer.js" type="module"></script>
 </body>

docs/webgl/tutorial_redball.html

@@ -44,7 +44,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: #bbbbbb"> </span>-a<span style="color: #bbbbbb"> </span>opengl<span style="color: #bbbbbb"> </span>-p<span style="color: #bbbbbb"> </span>mobile<span style="color: #bbbbbb"> </span>-o<span style="color: #bbbbbb"> </span>plastic.filamat<span style="color: #bbbbbb"> </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&#x27;ll use later in the
@@ -53,7 +53,7 @@ tutorial.</p>
 <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: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>pillars_2k<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </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,81 +61,81 @@ well as a text file with spherical harmonics coefficients. You can discard the t
 IBL KTX contains these coefficients in its metadata.</p>
 <h2>Create JavaScript</h2>
 <p>Next, create <code>redball.js</code> with the following content.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;pillars_2k&#39;</span>;
-<span style="color: #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: #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: #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>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;pillars_2k&#39;</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;plastic.filamat&#39;</span><span style="color: #bbbbbb"></span>
 
-Filament.init([<span style="color: #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: #3D7B7B; font-style: italic">// Create some global aliases to enums for convenience.</span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;
-<span style="color: #bbbbbb">  </span><span style="color: #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: #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: #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: #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: #008000">window</span>.LightType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.LightManager$Type;
+Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>ibl_url,<span style="color: #bbbbbb"> </span>sky_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #3D7B7B; font-style: italic">// Create some global aliases to enums for convenience.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.AttributeType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer$AttributeType;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.PrimitiveType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.RenderableManager$PrimitiveType;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.IndexType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer$IndexType;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.LightType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.LightManager$Type;<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(canvas);
-}<span style="color: #bbbbbb"> </span>);
+<span style="color: #bbbbbb">  </span><span style="color: #3D7B7B; font-style: italic">// Obtain the canvas DOM object and pass it to the App.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(canvas);<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"> </span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #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: #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: #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: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createScene();<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </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 sphere</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: #3D7B7B; font-style: italic">// TODO: create IBL</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: #3D7B7B; font-style: italic">// TODO: create material</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sphere</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create lights</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create IBL</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create skybox</span><span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createRenderer();
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createCamera(Filament.EntityManager.get().create());
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createView();
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(scene);
-<span style="color: #bbbbbb">    </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>.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: #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: #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: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">  </span>}
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(scene);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];
-<span style="color: #bbbbbb">    </span><span style="color: #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>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: #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: #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: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">  </span>}
+<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>radians<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Date</span>.now()<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">10000</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>vec3.rotateY(eye,<span style="color: #bbbbbb"> </span>eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>radians);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>up);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>Fov.VERTICAL);
-<span style="color: #bbbbbb">  </span>}
-}
+<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>Fov.VERTICAL);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The above boilerplate should be familiar to you from the previous tutorial, although it loads in a
 new set of assets. We also added some animation to the camera.</p>
 <p>Next let&#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: #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: #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();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>material<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createMaterial(filamat_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>];
-matinstance.setColor3Parameter(<span style="color: #BA2121">&#39;baseColor&#39;</span>,<span style="color: #bbbbbb"> </span>Filament.RgbType.sRGB,<span style="color: #bbbbbb"> </span>red);
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.5</span>);
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoat&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>red<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0.8</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.0</span>];<span style="color: #bbbbbb"></span>
+matinstance.setColor3Parameter(<span style="color: #BA2121">&#39;baseColor&#39;</span>,<span style="color: #bbbbbb"> </span>Filament.RgbType.sRGB,<span style="color: #bbbbbb"> </span>red);<span style="color: #bbbbbb"></span>
+matinstance.setFloatParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.5</span>);<span style="color: #bbbbbb"></span>
+matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoat&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>);<span style="color: #bbbbbb"></span>
+matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoatRoughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.3</span>);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The next step is to create a renderable for the sphere. To help with this, we&#x27;ll use the <code>IcoSphere</code>
@@ -149,33 +149,33 @@ as quaternions.</li>
 </ul>
 <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: #bbbbbb"> </span>renderable<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();
-scene.addEntity(renderable);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>renderable<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+scene.addEntity(renderable);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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: #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>.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>.bufferCount(<span style="color: #666666">2</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>.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>.normalized(VertexAttribute.TANGENTS)
-<span style="color: #bbbbbb">  </span>.build(engine);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>vb<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.vertexCount(icosphere.vertices.length<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.attribute(VertexAttribute.POSITION,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>AttributeType.FLOAT3,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.attribute(VertexAttribute.TANGENTS,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>AttributeType.SHORT4,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.normalized(VertexAttribute.TANGENTS)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>.indexCount(icosphere.triangles.length)
-<span style="color: #bbbbbb">  </span>.bufferType(IndexType.USHORT)
-<span style="color: #bbbbbb">  </span>.build(engine);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ib<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.indexCount(icosphere.triangles.length)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.bufferType(IndexType.USHORT)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>icosphere.vertices);
-vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>icosphere.tangents);
-ib.setBuffer(engine,<span style="color: #bbbbbb"> </span>icosphere.triangles);
+vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>icosphere.vertices);<span style="color: #bbbbbb"></span>
+vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>icosphere.tangents);<span style="color: #bbbbbb"></span>
+ib.setBuffer(engine,<span style="color: #bbbbbb"> </span>icosphere.triangles);<span style="color: #bbbbbb"></span>
 
-Filament.RenderableManager.Builder(<span style="color: #666666">1</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>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinstance)
-<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>.build(engine,<span style="color: #bbbbbb"> </span>renderable);
+Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.boundingBox({<span style="color: #bbbbbb"> </span>center<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>],<span style="color: #bbbbbb"> </span>halfExtent<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]<span style="color: #bbbbbb"> </span>})<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinstance)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.geometry(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>PrimitiveType.TRIANGLES,<span style="color: #bbbbbb"> </span>vb,<span style="color: #bbbbbb"> </span>ib)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>renderable);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>At this point, the app is rendering a sphere, but it is black so it doesn&#x27;t show up. To prove that
@@ -185,94 +185,94 @@ did in the first tutorial.</p>
 <p>In this section we will create some directional light sources, as well as an image-based light (IBL)
 defined by one of the KTX files we built at the start of the demo. First, replace the <strong>create
 lights</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sunlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();
-scene.addEntity(sunlight);
-Filament.LightManager.Builder(LightType.SUN)
-<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>.intensity(<span style="color: #666666">110000.0</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>.sunAngularRadius(<span style="color: #666666">1.9</span>)
-<span style="color: #bbbbbb">  </span>.sunHaloSize(<span style="color: #666666">10.0</span>)
-<span style="color: #bbbbbb">  </span>.sunHaloFalloff(<span style="color: #666666">80.0</span>)
-<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>sunlight);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sunlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+scene.addEntity(sunlight);<span style="color: #bbbbbb"></span>
+Filament.LightManager.Builder(LightType.SUN)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.color([<span style="color: #666666">0.98</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.92</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.89</span>])<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">110000.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.direction([<span style="color: #666666">0.6</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-0.8</span>])<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sunAngularRadius(<span style="color: #666666">1.9</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sunHaloSize(<span style="color: #666666">10.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sunHaloFalloff(<span style="color: #666666">80.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>sunlight);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>backlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();
-scene.addEntity(backlight);
-Filament.LightManager.Builder(LightType.DIRECTIONAL)
-<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>.intensity(<span style="color: #666666">50000.0</span>)
-<span style="color: #bbbbbb">        </span>.build(engine,<span style="color: #bbbbbb"> </span>backlight);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>backlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+scene.addEntity(backlight);<span style="color: #bbbbbb"></span>
+Filament.LightManager.Builder(LightType.DIRECTIONAL)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>.direction([<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>])<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>.build(engine,<span style="color: #bbbbbb"> </span>backlight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The <code>SUN</code> light source is similar to the <code>DIRECTIONAL</code> light source, but has some extra
 parameters because Filament will automatically draw a disk into the skybox.</p>
 <p>Next we need to create an <code>IndirectLight</code> object from the KTX IBL. One way of doing this is the
 following (don&#x27;t type this out, there&#x27;s an easier way).</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>format<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataFormat.RGB;
-<span style="color: #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;
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>format<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataFormat.RGB;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>datatype<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataType.UINT_10F_11F_11F_REV;<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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: #3D7B7B; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[ibl_url]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>iblktx<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.Ktx1Bundle(ibl_package);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>.width(iblktx.info().pixelWidth)
-<span style="color: #bbbbbb">  </span>.height(iblktx.info().pixelHeight)
-<span style="color: #bbbbbb">  </span>.levels(iblktx.getNumMipLevels())
-<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)
-<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)
-<span style="color: #bbbbbb">  </span>.build(engine);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibltex<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Texture.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.width(iblktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.height(iblktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.levels(iblktx.getNumMipLevels())<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">for</span><span style="color: #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: #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: #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>ibltex.setImageCube(engine,<span style="color: #bbbbbb"> </span>level,<span style="color: #bbbbbb"> </span>pixelbuffer);
-}
+<span style="color: #008000; font-weight: bold">for</span><span style="color: #bbbbbb"> </span>(<span style="color: #008000; font-weight: bold">let</span><span style="color: #bbbbbb"> </span>level<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>;<span style="color: #bbbbbb"> </span>level<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span>iblktx.getNumMipLevels();<span style="color: #bbbbbb"> </span><span style="color: #666666">++</span>level)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>uint8array<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>iblktx.getCubeBlob(level).getBytes();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>pixelbuffer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelBuffer(uint8array,<span style="color: #bbbbbb"> </span>format,<span style="color: #bbbbbb"> </span>datatype);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>ibltex.setImageCube(engine,<span style="color: #bbbbbb"> </span>level,<span style="color: #bbbbbb"> </span>pixelbuffer);<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Parse the spherical harmonics metadata.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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: #3D7B7B; font-style: italic">// Parse the spherical harmonics metadata.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>shstring<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>iblktx.getMetadata(<span style="color: #BA2121">&#39;sh&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>shfloats<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>shstring.split(<span style="color: #A45A77">/\s/</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">9</span><span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>).map(<span style="color: #008000">parseFloat</span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Build the IBL object and insert it into the scene.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>.reflections(ibltex)
-<span style="color: #bbbbbb">  </span>.irradianceSh(<span style="color: #666666">3</span>,<span style="color: #bbbbbb"> </span>shfloats)
-<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">50000.0</span>)
-<span style="color: #bbbbbb">  </span>.build(engine);
+<span style="color: #3D7B7B; font-style: italic">// Build the IBL object and insert it into the scene.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndirectLight.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.reflections(ibltex)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.irradianceSh(<span style="color: #666666">3</span>,<span style="color: #bbbbbb"> </span>shfloats)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-scene.setIndirectLight(indirectLight);
+scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Filament provides a JavaScript utility to make this simpler,
 simply replace the <strong>create IBL</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createIblFromKtx1(ibl_url);
-indirectLight.setIntensity(<span style="color: #666666">50000</span>);
-scene.setIndirectLight(indirectLight);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
+indirectLight.setIntensity(<span style="color: #666666">50000</span>);<span style="color: #bbbbbb"></span>
+scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Add background</h2>
 <p>At this point you can run the demo and you should see a red plastic ball against a black background.
 Without a skybox, the reflections on the ball are not representative of its surroundings.
 Here&#x27;s one way to create a texture for the skybox:</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[sky_url]);
-<span style="color: #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: #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>.width(skyktx.info().pixelWidth)
-<span style="color: #bbbbbb">  </span>.height(skyktx.info().pixelHeight)
-<span style="color: #bbbbbb">  </span>.levels(<span style="color: #666666">1</span>)
-<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)
-<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)
-<span style="color: #bbbbbb">  </span>.build(engine);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[sky_url]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skyktx<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.Ktx1Bundle(sky_package);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skytex<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Texture.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.width(skyktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.height(skyktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.levels(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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);
-skytex.setImageCube(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>pixelbuffer);
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>uint8array<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>skyktx.getCubeBlob(<span style="color: #666666">0</span>).getBytes();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>pixelbuffer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelBuffer(uint8array,<span style="color: #bbbbbb"> </span>format,<span style="color: #bbbbbb"> </span>datatype);<span style="color: #bbbbbb"></span>
+skytex.setImageCube(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>pixelbuffer);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Filament provides a Javascript utility to make this easier.
 Replace <strong>create skybox</strong> with the following.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSkyFromKtx1(sky_url);
-scene.setSkybox(skybox);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSkyFromKtx1(sky_url);<span style="color: #bbbbbb"></span>
+scene.setSkybox(skybox);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>That&#x27;s it, we now have a shiny red ball floating in an environment! The complete JavaScript file is

docs/webgl/tutorial_suzanne.html

@@ -15,34 +15,33 @@ we&#x27;ll also be using <code>filamesh</code> and <code>mipgen</code>.</p>
 <p>Filament does not have an asset loading system, but it does provide a binary mesh format
 called <code>filamesh</code> for simple use cases. Let&#x27;s create a compressed filamesh file for suzanne by
 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: #bbbbbb"> </span>--compress<span style="color: #bbbbbb"> </span>monkey.obj<span style="color: #bbbbbb"> </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&#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 and two compressed variants.</span>
-mipgen<span style="color: #bbbbbb"> </span>albedo.png<span style="color: #bbbbbb"> </span>albedo.ktx
-mipgen<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>astc_fast_ldr_4x4<span style="color: #bbbbbb"> </span>albedo.png<span style="color: #bbbbbb"> </span>albedo_astc.ktx
-mipgen<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>s3tc_rgb_dxt1<span style="color: #bbbbbb"> </span>albedo.png<span style="color: #bbbbbb"> </span>albedo_s3tc_srgb.ktx
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic"># Create mipmaps for base color</span>
+mipgen albedo.png albedo.ktx2
+mipgen --compression<span style="color: #666666">=</span>uastc albedo.png albedo.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the normal map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--strip-alpha<span style="color: #bbbbbb"> </span>--kernel<span style="color: #666666">=</span>NORMALS<span style="color: #bbbbbb"> </span>--linear<span style="color: #bbbbbb"> </span>normal.png<span style="color: #bbbbbb"> </span>normal.ktx
-mipgen<span style="color: #bbbbbb"> </span>--strip-alpha<span style="color: #bbbbbb"> </span>--kernel<span style="color: #666666">=</span>NORMALS<span style="color: #bbbbbb"> </span>--linear<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_rgb8_normalxyz_40<span style="color: #bbbbbb"> </span><span style="color: #AA5D1F; font-weight: bold">\</span>
-<span style="color: #bbbbbb">    </span>normal.png<span style="color: #bbbbbb"> </span>normal_etc.ktx
+mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear normal.png normal.ktx
+mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear --compression<span style="color: #666666">=</span>uastc_normals <span style="color: #AA5D1F; font-weight: bold">\</span>
+    normal.png normal.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component roughness map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>roughness.png<span style="color: #bbbbbb"> </span>roughness.ktx
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_r11_numeric_40<span style="color: #bbbbbb"> </span>roughness.png<span style="color: #bbbbbb"> </span>roughness_etc.ktx
+mipgen --grayscale roughness.png roughness.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>uastc roughness.png roughness.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component metallic map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>metallic.png<span style="color: #bbbbbb"> </span>metallic.ktx
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_r11_numeric_40<span style="color: #bbbbbb"> </span>metallic.png<span style="color: #bbbbbb"> </span>metallic_etc.ktx
+mipgen --grayscale metallic.png metallic.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>uastc metallic.png metallic.ktx2
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component occlusion map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>ao.png<span style="color: #bbbbbb"> </span>ao.ktx
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_r11_numeric_40<span style="color: #bbbbbb"> </span>ao.png<span style="color: #bbbbbb"> </span>ao_etc.ktx
+mipgen --grayscale ao.png ao.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>uastc ao.png ao.ktx2
 </pre></div>
 
 <p>For more information on mipgen&#x27;s arguments and supported formats, do <code>mipgen --help</code>.</p>
@@ -50,12 +49,12 @@ mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbb
 <h2>Bake environment map</h2>
 <p>Much like the <a href="tutorial_redball.html">previous tutorial</a> we need to use Filament&#x27;s <code>cmgen</code> tool to produce cubemap files.</p>
 <p>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: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=64</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
-<span style="color: #008000">cd</span><span style="color: #bbbbbb"> </span>venetian*<span style="color: #bbbbbb"> </span>;<span style="color: #bbbbbb"> </span>mv<span style="color: #bbbbbb"> </span>venetian*_ibl.ktx<span style="color: #bbbbbb"> </span>venetian_crossroads_2k_skybox_tiny.ktx<span style="color: #bbbbbb"> </span>;<span style="color: #bbbbbb"> </span><span style="color: #008000">cd</span><span style="color: #bbbbbb"> </span>-
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=64</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+<span style="color: #008000">cd</span> venetian* ; mv venetian*_ibl.ktx venetian_crossroads_2k_skybox_tiny.ktx ; <span style="color: #008000">cd</span> -
 
-cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
-cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
-cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
 </pre></div>
 
 <h2>Define textured material</h2>
@@ -91,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: #bbbbbb"> </span>-a<span style="color: #bbbbbb"> </span>opengl<span style="color: #bbbbbb"> </span>-p<span style="color: #bbbbbb"> </span>mobile<span style="color: #bbbbbb"> </span>-o<span style="color: #bbbbbb"> </span>textured.filamat<span style="color: #bbbbbb"> </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
@@ -101,62 +100,62 @@ 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: #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: #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>]);
-});
+Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>filamesh_url,<span style="color: #bbbbbb"> </span>sky_small_url,<span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);<span style="color: #bbbbbb"></span>
+});<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">        </span><span style="color: #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: #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: #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: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>material<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createMaterial(filamat_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.loadFilamesh(filamesh_url,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.matinstance);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.suzanne<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>filamesh.renderable;<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </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: initialize gltumble</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: #3D7B7B; font-style: italic">// TODO: create sky box and IBL</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: initialize gltumble</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: fetch larger assets</span><span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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: #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: #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: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);
-<span style="color: #bbbbbb">        </span><span style="color: #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: #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: #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: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>up);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize();
-<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">    </span>}
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span>render()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
-<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">    </span>}
+<span style="color: #bbbbbb">    </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span>resize()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);
+<span style="color: #bbbbbb">    </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>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: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>fov);
-<span style="color: #bbbbbb">    </span>}
-}
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov,<span style="color: #bbbbbb"> </span>fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1</span><span style="color: #bbbbbb"> </span><span style="color: #666666">?</span><span style="color: #bbbbbb"> </span>Fov.HORIZONTAL<span style="color: #bbbbbb"> </span><span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>Fov.VERTICAL;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>fov);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Our app will only require a subset of assets to be present for <code>App</code> construction. We&#x27;ll download
@@ -172,29 +171,29 @@ string -- which might be empty.</p>
 <p>In our case, we know that our web server will have <code>astc</code> and <code>s3tc</code> variants for albedo, and <code>etc</code>
 variants for the other textures. The uncompressed variants (empty string) are always available as a
 last resort. Go ahead and replace the <strong>declare asset URLs</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc_srgb&#39;</span>);
-<span style="color: #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>);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc_srgb&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>texture_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_small_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox_tiny.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_large_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`albedo</span><span style="color: #A45A77; font-weight: bold">${</span>albedo_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`ao</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`metallic</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`normal</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`roughness</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;textured.filamat&#39;</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;suzanne.filamesh&#39;</span>;<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Create skybox and IBL</h2>
 <p>Next, let&#x27;s create the low-resolution skybox and IBL in the <code>App</code> constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);
-<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #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: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666666">100000</span>);
-<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666666">100000</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>This allows users to see a reasonable background fairly quickly, before larger assets have finished
@@ -206,31 +205,31 @@ when the assets have finished downloading.</p>
 <p>In our callback, we&#x27;ll make several <code>setTextureParameter</code> calls on the material instance, then we&#x27;ll
 recreate the skybox using a higher-resolution texture. As a last step we unhide the renderable that
 was created in the app constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>Filament.fetch([sky_large_url,<span style="color: #bbbbbb"> </span>albedo_url,<span style="color: #bbbbbb"> </span>roughness_url,<span style="color: #bbbbbb"> </span>metallic_url,<span style="color: #bbbbbb"> </span>normal_url,<span style="color: #bbbbbb"> </span>ao_url],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #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.createTextureFromKtx1(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: #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.createTextureFromKtx1(roughness_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.createTextureFromKtx1(metallic_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.createTextureFromKtx1(normal_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.createTextureFromKtx1(ao_url);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>Filament.fetch([sky_large_url,<span style="color: #bbbbbb"> </span>albedo_url,<span style="color: #bbbbbb"> </span>roughness_url,<span style="color: #bbbbbb"> </span>metallic_url,<span style="color: #bbbbbb"> </span>normal_url,<span style="color: #bbbbbb"> </span>ao_url],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(albedo_url,<span style="color: #bbbbbb"> </span>{srgb<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">true</span>});<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(roughness_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(metallic_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(normal_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx2(ao_url);<span style="color: #bbbbbb"></span>
 
-<span style="color: #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>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
-<span style="color: #bbbbbb">        </span>Filament.MagFilter.LINEAR,
-<span style="color: #bbbbbb">        </span>Filament.WrapMode.CLAMP_TO_EDGE);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sampler<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.TextureSampler(<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.MagFilter.LINEAR,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.WrapMode.CLAMP_TO_EDGE);<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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: #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: #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: #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: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;albedo&#39;</span>,<span style="color: #bbbbbb"> </span>albedo,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span>roughness,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;metallic&#39;</span>,<span style="color: #bbbbbb"> </span>metallic,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;normal&#39;</span>,<span style="color: #bbbbbb"> </span>normal,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;ao&#39;</span>,<span style="color: #bbbbbb"> </span>ao,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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>.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: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// Replace low-res skybox with high-res skybox.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.engine.destroySkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_large_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
 
-<span style="color: #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: #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>
@@ -241,13 +240,13 @@ listens for drag events and computes a rotation matrix.</p>
 
 <p>Next, replace the <strong>initialize gltumble</strong> and <strong>apply gltumble matrix</strong> comments with the following
 two code snippets.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Trackball(canvas,<span style="color: #bbbbbb"> </span>{startSpin<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #666666">0.035</span>});
+<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: #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: #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);
-tcm.setTransform(inst,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());
-inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
+tcm.setTransform(inst,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());<span style="color: #bbbbbb"></span>
+inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>That&#x27;s it, we now have a fast-loading interactive demo. The complete JavaScript file is available

docs/webgl/tutorial_suzanne.js

@@ -33,13 +33,13 @@ class App {
     });
     Filament.fetch([sky_large_url, albedo_url, roughness_url, metallic_url, normal_url, ao_url],
     () => {
-      const albedo = this.engine.createTextureFromKtx1(albedo_url, {
+      const albedo = this.engine.createTextureFromKtx2(albedo_url, {
         srgb: true
       });
-      const roughness = this.engine.createTextureFromKtx1(roughness_url);
-      const metallic = this.engine.createTextureFromKtx1(metallic_url);
-      const normal = this.engine.createTextureFromKtx1(normal_url);
-      const ao = this.engine.createTextureFromKtx1(ao_url);
+      const roughness = this.engine.createTextureFromKtx2(roughness_url);
+      const metallic = this.engine.createTextureFromKtx2(metallic_url);
+      const normal = this.engine.createTextureFromKtx2(normal_url);
+      const ao = this.engine.createTextureFromKtx2(ao_url);
       const sampler = new Filament.TextureSampler(Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
         Filament.MagFilter.LINEAR, Filament.WrapMode.CLAMP_TO_EDGE);
       this.matinstance.setTextureParameter('albedo', albedo, sampler);

docs/webgl/tutorial_triangle.html

@@ -22,9 +22,9 @@ a mobile-friendly page with a full-screen canvas.</p>
     &lt;<span style="color: #008000; font-weight: bold">title</span>&gt;Filament Tutorial&lt;/<span style="color: #008000; font-weight: bold">title</span>&gt;
     &lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #687822">charset</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;utf-8&quot;</span>&gt;
     &lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #687822">name</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;viewport&quot;</span> <span style="color: #687822">content</span><span style="color: #666666">=</span><span style="color: #BA2121">&quot;width=device-width,user-scalable=no,initial-scale=1&quot;</span>&gt;
-    &lt;<span style="color: #008000; font-weight: bold">style</span>&gt;
-<span style="color: #bbbbbb">        </span><span style="color: #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: #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>}
+    &lt;<span style="color: #008000; font-weight: bold">style</span>&gt;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">body</span><span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">margin</span>:<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>;<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">overflow</span>:<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">hidden</span>;<span style="color: #bbbbbb"> </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">canvas</span><span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"> </span>touch-action:<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">none</span>;<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">width</span>:<span style="color: #bbbbbb"> </span><span style="color: #666666">100</span><span style="color: #B00040">%</span>;<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">height</span>:<span style="color: #bbbbbb"> </span><span style="color: #666666">100</span><span style="color: #B00040">%</span>;<span style="color: #bbbbbb"> </span>}<span style="color: #bbbbbb"></span>
 <span style="color: #bbbbbb">    </span>&lt;/<span style="color: #008000; font-weight: bold">style</span>&gt;
 &lt;/<span style="color: #008000; font-weight: bold">head</span>&gt;
 &lt;<span style="color: #008000; font-weight: bold">body</span>&gt;
@@ -48,24 +48,24 @@ a mobile-friendly page with a full-screen canvas.</p>
 <li><code>triangle.js</code> will contain your application code.</li>
 </ul>
 <p>Go ahead and create <code>triangle.js</code> with the following content.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create entities</span>
-<span style="color: #bbbbbb">    </span><span style="color: #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: #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: #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: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">  </span>}
-<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">  </span>}
-<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: adjust viewport and canvas</span>
-<span style="color: #bbbbbb">  </span>}
-}
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create entities</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: adjust viewport and canvas</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 
-Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>],<span style="color: #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>);
+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
@@ -81,9 +81,9 @@ that define a PBR material. We&#x27;ll learn more about material packages in the
 <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: #bbbbbb"> </span>-m<span style="color: #bbbbbb"> </span>http.server<span style="color: #bbbbbb">     </span><span style="color: #3D7B7B; font-style: italic"># Python 3</span>
-python<span style="color: #bbbbbb"> </span>-m<span style="color: #bbbbbb"> </span>SimpleHTTPServer<span style="color: #bbbbbb"> </span><span style="color: #3D7B7B; font-style: italic"># Python 2.7</span>
-npx<span style="color: #bbbbbb"> </span>http-server<span style="color: #bbbbbb"> </span>-p<span style="color: #bbbbbb"> </span><span style="color: #666666">8000</span><span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic"># nodejs</span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>python3 -m http.server     <span style="color: #3D7B7B; font-style: italic"># Python 3</span>
+python -m SimpleHTTPServer <span style="color: #3D7B7B; font-style: italic"># Python 2.7</span>
+npx http-server -p <span style="color: #666666">8000</span>    <span style="color: #3D7B7B; font-style: italic"># nodejs</span>
 </pre></div>
 
 <p>To see if this works, navigate to <a href="http://localhost:8000">http://localhost:8000</a> and check if you
@@ -93,8 +93,8 @@ with the correct MIME type.</p>
 <h2>Create the Engine and Scene</h2>
 <p>We now have a basic skeleton that can respond to paint and resize events. Let&#x27;s start adding
 Filament objects to the app. Insert the following code into the top of the app constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>];
-<span style="color: #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);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(<span style="color: #008000; font-weight: bold">this</span>.canvas);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The above snippet creates the <code>Engine</code> by passing it a canvas DOM object. The engine needs the
@@ -102,9 +102,9 @@ canvas in order to create a WebGL 2.0 context in its contructor.</p>
 <p>The engine is a factory for many Filament entities, including <code>Scene</code>, which is a flat container of
 entities. Let&#x27;s go ahead and create a scene, then add a blank entity called <code>triangle</code> into the
 scene.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createScene();
-<span style="color: #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: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.triangle);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createScene();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.triangle<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Filament uses an <a href="//en.wikipedia.org/wiki/Entity-component-system">Entity-Component System</a>.
@@ -114,28 +114,28 @@ calls.</p>
 <h2>Construct typed arrays</h2>
 <p>Next we&#x27;ll create two typed arrays: a positions array with XY coordinates for each vertex, and a
 colors array with a 32-bit word for each vertex.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Float32Array</span>([
-<span style="color: #bbbbbb">    </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</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: #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>),
-]);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Float32Array</span>([<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">2</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">2</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">4</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">4</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"></span>
+]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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&#x27;ll use the positions and colors buffers to create a single <code>VertexBuffer</code> object.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;
-<span style="color: #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: #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>.vertexCount(<span style="color: #666666">3</span>)
-<span style="color: #bbbbbb">    </span>.bufferCount(<span style="color: #666666">2</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>.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>.normalized(VertexAttribute.COLOR)
-<span style="color: #bbbbbb">    </span>.build(engine);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>AttributeType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer$AttributeType;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.vb<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.vertexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.attribute(VertexAttribute.POSITION,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>AttributeType.FLOAT2,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">8</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.attribute(VertexAttribute.COLOR,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>AttributeType.UBYTE4,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.normalized(VertexAttribute.COLOR)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS);
-<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: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_COLORS);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The above snippet first creates aliases for two enum types, then constructs the vertex buffer using
@@ -149,12 +149,12 @@ attribute. Alternatively, we could have interleaved or concatenated these attrib
 buffer slot.</p>
 <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: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer.Builder()
-<span style="color: #bbbbbb">    </span>.indexCount(<span style="color: #666666">3</span>)
-<span style="color: #bbbbbb">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)
-<span style="color: #bbbbbb">    </span>.build(engine);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.ib<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer.Builder()<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.indexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.build(engine);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine,<span style="color: #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: #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
@@ -167,29 +167,29 @@ parameters, and they can be bound to renderables. We&#x27;ll learn more about ma
 next tutorial.</p>
 <p>After extracting the material instance, we can finally create a renderable component for the
 triangle by setting up a bounding box and passing in the vertex and index buffers.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>mat<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createMaterial(<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>);
-<span style="color: #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();
-Filament.RenderableManager.Builder(<span style="color: #666666">1</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>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinst)
-<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>.build(engine,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.triangle);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>mat<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createMaterial(<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>matinst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>mat.getDefaultInstance();<span style="color: #bbbbbb"></span>
+Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.boundingBox({<span style="color: #bbbbbb"> </span>center<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>],<span style="color: #bbbbbb"> </span>halfExtent<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]<span style="color: #bbbbbb"> </span>})<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinst)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.geometry(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>Filament.RenderableManager$PrimitiveType.TRIANGLES,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.vb,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.ib)<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>.build(engine,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Next let&#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: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSwapChain();
-<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: #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: #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: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Set up a blue-green background:</span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #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: #3D7B7B; font-style: italic">// Set up a blue-green background:</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.2</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>],<span style="color: #bbbbbb"> </span>clear<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">true</span>});<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Adjust the initial viewport:</span>
-<span style="color: #008000; font-weight: bold">this</span>.resize();
+<span style="color: #3D7B7B; font-style: italic">// Adjust the initial viewport:</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>At this point, we&#x27;re done creating all Filament entities, and the code should run without errors.
@@ -197,24 +197,24 @@ However the canvas is still blank!</p>
 <h2>Render and resize handlers</h2>
 <p>Recall that our App class has a skeletal render method, which the browser calls every time it needs
 to repaint. Often this is 60 times a second.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>render()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-}
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Let&#x27;s flesh this out by rotating the triangle and invoking the Filament renderer. Add the following
 code to the top of the render method.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// Rotate the triangle.</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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: #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: #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);
-tcm.setTransform(inst,<span style="color: #bbbbbb"> </span>transform);
-inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// Rotate the triangle.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>radians<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Date</span>.now()<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1000</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>transform<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>mat4.fromRotation(mat4.create(),<span style="color: #bbbbbb"> </span>radians,<span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
+tcm.setTransform(inst,<span style="color: #bbbbbb"> </span>transform);<span style="color: #bbbbbb"></span>
+inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
 
-<span style="color: #3D7B7B; font-style: italic">// Render the frame.</span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
+<span style="color: #3D7B7B; font-style: italic">// Render the frame.</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>The first half of our render method obtains the transform component of the triangle entity and uses
@@ -225,14 +225,14 @@ that it wants to skip a frame, hence the <code>if</code> statement.</p>
 <p>One last step. Add the following code to the resize method. This adjusts the resolution of the
 rendering surface when the window size changes, taking <code>devicePixelRatio</code> into account for high-DPI
 displays. It also adjusts the camera frustum accordingly.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #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: #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: #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]);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #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: #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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Projection<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Projection;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.camera.setProjection(Projection.ORTHO,<span style="color: #bbbbbb"> </span><span style="color: #666666">-</span>aspect,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>You should now have a spinning triangle! The completed JavaScript is available

filament/CMakeLists.txt

@@ -218,6 +218,7 @@ set(MATERIAL_SRCS
         src/materials/colorGrading/customResolveAsSubpass.mat
         src/materials/debugShadowCascades.mat
         src/materials/defaultMaterial.mat
+        src/materials/defaultMaterial0.mat
         src/materials/dof/dof.mat
         src/materials/dof/dofCoc.mat
         src/materials/dof/dofDownsample.mat
@@ -230,31 +231,22 @@ set(MATERIAL_SRCS
         src/materials/flare/flare.mat
         src/materials/blitLow.mat
         src/materials/bloom/bloomDownsample.mat
+        src/materials/bloom/bloomDownsample2x.mat
+        src/materials/bloom/bloomDownsample9.mat
         src/materials/bloom/bloomUpsample.mat
         src/materials/ssao/bilateralBlur.mat
         src/materials/ssao/bilateralBlurBentNormals.mat
         src/materials/ssao/mipmapDepth.mat
         src/materials/skybox.mat
+        src/materials/skybox0.mat
         src/materials/ssao/sao.mat
         src/materials/ssao/saoBentNormals.mat
-        src/materials/separableGaussianBlur1.mat
-        src/materials/separableGaussianBlur2.mat
-        src/materials/separableGaussianBlur3.mat
-        src/materials/separableGaussianBlur4.mat
-        src/materials/separableGaussianBlur1L.mat
-        src/materials/separableGaussianBlur2L.mat
-        src/materials/separableGaussianBlur3L.mat
-        src/materials/separableGaussianBlur4L.mat
+        src/materials/separableGaussianBlur.mat
         src/materials/antiAliasing/fxaa.mat
         src/materials/antiAliasing/taa.mat
         src/materials/vsmMipmap.mat
 )
 
-set(MATERIAL_ES2_SRCS
-        src/materials/defaultMaterial0.mat
-        src/materials/skybox0.mat
-)
-
 # Embed the binary resource blob for materials.
 get_resgen_vars(${RESOURCE_DIR} materials)
 list(APPEND PRIVATE_HDRS ${RESGEN_HEADER})
@@ -320,23 +312,6 @@ foreach (mat_src ${MATERIAL_SRCS})
     list(APPEND MATERIAL_BINS ${output_path})
 endforeach()
 
-if (IS_MOBILE_TARGET AND FILAMENT_SUPPORTS_OPENGL)
-    foreach (mat_src ${MATERIAL_ES2_SRCS})
-        get_filename_component(localname "${mat_src}" NAME_WE)
-        get_filename_component(fullname "${mat_src}" ABSOLUTE)
-        set(output_path "${MATERIAL_DIR}/${localname}.filamat")
-
-        add_custom_command(
-                OUTPUT ${output_path}
-                COMMAND matc -a opengl -p ${MATC_TARGET} ${MATC_OPT_FLAGS} -o ${output_path} ${fullname}
-                MAIN_DEPENDENCY ${fullname}
-                DEPENDS matc
-                COMMENT "Compiling material ${mat_src} to ${output_path}"
-        )
-        list(APPEND MATERIAL_BINS ${output_path})
-    endforeach ()
-endif ()
-
 # Additional dependencies on included files for materials
 
 add_custom_command(
@@ -401,8 +376,8 @@ add_custom_command(
         OUTPUT "${MATERIAL_DIR}/sao.filamat"
         DEPENDS src/materials/ssao/ssaoUtils.fs
         DEPENDS src/materials/ssao/ssct.fs
-        DEPENDS src/materials/ssao/depthUtils.fs
-        DEPENDS src/materials/ssao/geometry.fs
+        DEPENDS src/materials/utils/depthUtils.fs
+        DEPENDS src/materials/utils/geometry.fs
         DEPENDS src/materials/ssao/saoImpl.fs
         DEPENDS src/materials/ssao/ssctImpl.fs
         APPEND
@@ -412,8 +387,8 @@ add_custom_command(
         OUTPUT "${MATERIAL_DIR}/saoBentNormals.filamat"
         DEPENDS src/materials/ssao/ssaoUtils.fs
         DEPENDS src/materials/ssao/ssct.fs
-        DEPENDS src/materials/ssao/depthUtils.fs
-        DEPENDS src/materials/ssao/geometry.fs
+        DEPENDS src/materials/utils/depthUtils.fs
+        DEPENDS src/materials/utils/geometry.fs
         DEPENDS src/materials/ssao/saoImpl.fs
         DEPENDS src/materials/ssao/ssctImpl.fs
         APPEND
@@ -462,56 +437,7 @@ add_custom_command(
 )
 
 add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur1.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur2.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur3.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur4.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur1L.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur2L.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur3L.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur4L.filamat"
+        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur.filamat"
         DEPENDS src/materials/separableGaussianBlur.vs
         DEPENDS src/materials/separableGaussianBlur.fs
         APPEND
@@ -611,7 +537,7 @@ if (MSVC)
     set(FILAMENT_WARNINGS /W3)
 else()
     set(FILAMENT_WARNINGS
-            -Wall -Wextra -Wno-unused-parameter
+            -Wall -Wextra -Wno-unused-parameter -Wno-missing-field-initializers
             -Wextra-semi -Wnewline-eof -Wdeprecated -Wundef
             -Wgnu-conditional-omitted-operand
             -Wweak-vtables -Wnon-virtual-dtor -Wclass-varargs -Wimplicit-fallthrough

filament/README.md

@@ -61,7 +61,7 @@ with the platform name, for example, `filament-20181009-linux.tgz`.
 
 Create a file, `main.cpp`, in the same directory with the following contents:
 
-```
+```c++
 #include <filament/FilamentAPI.h>
 #include <filament/Engine.h>
 
@@ -91,7 +91,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
 CC=clang++
 
@@ -109,7 +109,7 @@ clean:
 
 ### macOS
 
-```
+```make
 FILAMENT_LIBS=-lfilament -lbackend -lbluegl -lbluevk -lfilabridge -lfilaflat -lutils -lgeometry -lsmol-v -lvkshaders -libl
 FRAMEWORKS=-framework Cocoa -framework Metal -framework CoreVideo
 CC=clang++
@@ -137,7 +137,7 @@ be sure to also include `matdbg.lib` in `FILAMENT_LIBS`.
 When building Filament from source, the `USE_STATIC_CRT` CMake option can be
 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
 CC=cl.exe
@@ -171,12 +171,12 @@ and invoke `nmake` instead of `make`.
 
 ### Generating C++ documentation
 
-To generate the documentation you must first install `doxygen` and `graphviz`, then run the 
+To generate the documentation you must first install `doxygen` and `graphviz`, then run the
 following commands:
 
-```
-$ cd filament/filament
-$ doxygen docs/doxygen/filament.doxygen
+```shell
+cd filament/filament
+doxygen docs/doxygen/filament.doxygen
 ```
 
 Finally simply open `docs/html/index.html` in your web browser.

filament/backend/CMakeLists.txt

@@ -25,11 +25,13 @@ set(PUBLIC_HDRS
 
 set(SRCS
         src/BackendUtils.cpp
+        src/BlobCacheKey.cpp
         src/Callable.cpp
-        src/CallbackHandler.cpp
+        src/CallbackManager.cpp
         src/CircularBuffer.cpp
         src/CommandBufferQueue.cpp
         src/CommandStream.cpp
+        src/CompilerThreadPool.cpp
         src/Driver.cpp
         src/Handle.cpp
         src/HandleAllocator.cpp
@@ -53,7 +55,9 @@ set(PRIVATE_HDRS
         include/private/backend/HandleAllocator.h
         include/private/backend/PlatformFactory.h
         include/private/backend/SamplerGroup.h
+        src/CallbackManager.h
         src/CommandStreamDispatcher.h
+        src/CompilerThreadPool.h
         src/DataReshaper.h
         src/DriverBase.h
 )
@@ -69,6 +73,8 @@ if (FILAMENT_SUPPORTS_OPENGL AND NOT FILAMENT_USE_EXTERNAL_GLES3 AND NOT FILAMEN
             src/opengl/gl_headers.h
             src/opengl/GLUtils.cpp
             src/opengl/GLUtils.h
+            src/opengl/OpenGLBlobCache.cpp
+            src/opengl/OpenGLBlobCache.h
             src/opengl/OpenGLContext.cpp
             src/opengl/OpenGLContext.h
             src/opengl/OpenGLDriver.cpp
@@ -79,6 +85,8 @@ if (FILAMENT_SUPPORTS_OPENGL AND NOT FILAMENT_USE_EXTERNAL_GLES3 AND NOT FILAMEN
             src/opengl/OpenGLPlatform.cpp
             src/opengl/OpenGLTimerQuery.cpp
             src/opengl/OpenGLTimerQuery.h
+            src/opengl/ShaderCompilerService.cpp
+            src/opengl/ShaderCompilerService.h
     )
     if (EGL)
         list(APPEND SRCS src/opengl/platforms/PlatformEGL.cpp)
@@ -125,6 +133,7 @@ if (FILAMENT_SUPPORTS_METAL)
             src/metal/MetalExternalImage.mm
             src/metal/MetalHandles.mm
             src/metal/MetalPlatform.mm
+            src/metal/MetalShaderCompiler.mm
             src/metal/MetalState.mm
             src/metal/MetalTimerQuery.mm
             src/metal/MetalUtils.mm
@@ -157,6 +166,9 @@ endif()
 if (FILAMENT_SUPPORTS_VULKAN)
     list(APPEND SRCS
             include/backend/platforms/VulkanPlatform.h
+            src/vulkan/platform/VulkanPlatform.cpp
+            src/vulkan/platform/VulkanPlatformSwapChainImpl.cpp
+            src/vulkan/platform/VulkanPlatformSwapChainImpl.h
             src/vulkan/VulkanBlitter.cpp
             src/vulkan/VulkanBlitter.h
             src/vulkan/VulkanBuffer.cpp
@@ -166,8 +178,6 @@ if (FILAMENT_SUPPORTS_VULKAN)
             src/vulkan/VulkanConstants.h
             src/vulkan/VulkanContext.cpp
             src/vulkan/VulkanContext.h
-            src/vulkan/VulkanDisposer.cpp
-            src/vulkan/VulkanDisposer.h
             src/vulkan/VulkanDriver.cpp
             src/vulkan/VulkanDriver.h
             src/vulkan/VulkanDriverFactory.h
@@ -181,32 +191,26 @@ if (FILAMENT_SUPPORTS_VULKAN)
             src/vulkan/VulkanMemory.cpp
             src/vulkan/VulkanPipelineCache.cpp
             src/vulkan/VulkanPipelineCache.h
-            src/vulkan/VulkanPlatform.cpp
             src/vulkan/VulkanSamplerCache.cpp
             src/vulkan/VulkanSamplerCache.h
             src/vulkan/VulkanStagePool.cpp
             src/vulkan/VulkanStagePool.h
             src/vulkan/VulkanSwapChain.cpp
             src/vulkan/VulkanSwapChain.h
+            src/vulkan/VulkanReadPixels.cpp
+            src/vulkan/VulkanReadPixels.h
+            src/vulkan/VulkanResourceAllocator.h
+            src/vulkan/VulkanResources.cpp
+            src/vulkan/VulkanResources.h
             src/vulkan/VulkanTexture.cpp
             src/vulkan/VulkanTexture.h
             src/vulkan/VulkanUtility.cpp
             src/vulkan/VulkanUtility.h
     )
-    if (LINUX)
-        if (FILAMENT_SUPPORTS_WAYLAND)
-            list(APPEND SRCS src/vulkan/PlatformVkLinuxWayland.cpp)
-        elseif (FILAMENT_SUPPORTS_X11)
-            list(APPEND SRCS src/vulkan/PlatformVkLinuxX11.cpp)
-        endif()
-    elseif (APPLE AND NOT IOS)
-        list(APPEND SRCS src/vulkan/PlatformVkCocoa.mm)
-    elseif (IOS)
-        list(APPEND SRCS src/vulkan/PlatformVkCocoaTouch.mm)
-    elseif (ANDROID)
-        list(APPEND SRCS src/vulkan/PlatformVkAndroid.cpp)
-    elseif (WIN32)
-        list(APPEND SRCS src/vulkan/PlatformVkWindows.cpp)
+    if (ANDROID OR LINUX OR WIN32)
+        list(APPEND SRCS src/vulkan/platform/VulkanPlatformAndroidLinuxWindows.cpp)
+    elseif (APPLE OR IOS)
+        list(APPEND SRCS src/vulkan/platform/VulkanPlatformApple.mm)
     endif()
 endif()
 
@@ -352,7 +356,7 @@ if (MSVC)
     set(FILAMENT_WARNINGS /W3)
 else()
     set(FILAMENT_WARNINGS
-            -Wall -Wextra -Wno-unused-parameter
+            -Wall -Wextra -Wno-unused-parameter -Wno-missing-field-initializers
             -Wextra-semi -Wnewline-eof -Wdeprecated -Wundef
             -Wgnu-conditional-omitted-operand
             -Wweak-vtables -Wnon-virtual-dtor -Wclass-varargs -Wimplicit-fallthrough
@@ -409,6 +413,7 @@ if (APPLE)
         test/test_RenderExternalImage.cpp
         test/test_StencilBuffer.cpp
         test/test_Scissor.cpp
+        test/test_MipLevels.cpp
         )
 
     target_link_libraries(backend_test PRIVATE

filament/backend/include/backend/CallbackHandler.h

@@ -66,7 +66,7 @@ public:
     virtual void post(void* user, Callback callback) = 0;
 
 protected:
-    virtual ~CallbackHandler();
+    virtual ~CallbackHandler() = default;
 };
 
 } // namespace filament::backend

filament/backend/include/backend/DriverEnums.h

@@ -77,6 +77,11 @@ static constexpr uint64_t SWAP_CHAIN_CONFIG_APPLE_CVPIXELBUFFER = 0x8;
  */
 static constexpr uint64_t SWAP_CHAIN_CONFIG_SRGB_COLORSPACE     = 0x10;
 
+/**
+ * Indicates that the SwapChain should also contain a stencil component.
+ */
+static constexpr uint64_t SWAP_CHAIN_HAS_STENCIL_BUFFER         = 0x20;
+
 
 static constexpr size_t MAX_VERTEX_ATTRIBUTE_COUNT  = 16;   // This is guaranteed by OpenGL ES.
 static constexpr size_t MAX_SAMPLER_COUNT           = 62;   // Maximum needed at feature level 3.
@@ -138,6 +143,30 @@ static constexpr const char* backendToString(Backend backend) {
     }
 }
 
+/**
+ * Defines the shader language. Similar to the above backend enum, but the OpenGL backend can select
+ * between two shader languages: ESSL 1.0 and ESSL 3.0.
+ */
+enum class ShaderLanguage {
+    ESSL1 = 0,
+    ESSL3 = 1,
+    SPIRV = 2,
+    MSL = 3,
+};
+
+static constexpr const char* shaderLanguageToString(ShaderLanguage shaderLanguage) {
+    switch (shaderLanguage) {
+        case ShaderLanguage::ESSL1:
+            return "ESSL 1.0";
+        case ShaderLanguage::ESSL3:
+            return "ESSL 3.0";
+        case ShaderLanguage::SPIRV:
+            return "SPIR-V";
+        case ShaderLanguage::MSL:
+            return "MSL";
+    }
+}
+
 /**
  * Bitmask for selecting render buffers
  */
@@ -296,6 +325,14 @@ enum class Precision : uint8_t {
     DEFAULT
 };
 
+/**
+ * Shader compiler priority queue
+ */
+enum class CompilerPriorityQueue : uint8_t {
+    HIGH,
+    LOW
+};
+
 //! Texture sampler type
 enum class SamplerType : uint8_t {
     SAMPLER_2D,             //!< 2D texture
@@ -319,6 +356,13 @@ enum class SamplerFormat : uint8_t {
     SHADOW = 3      //!< shadow sampler (PCF)
 };
 
+//! Texture color space
+enum class SamplerTransferFunction : uint8_t {
+    UNDEFINED = 0,      //!< don't care
+    IDENTITY = 1,       //!< sampled as-is
+    SRGB_TO_LINEAR = 2, //!< sampled as sRGB and converted to linear
+};
+
 /**
  * Supported element types
  */
@@ -788,32 +832,54 @@ enum class SamplerCompareFunc : uint8_t {
 
 //! Sampler parameters
 struct SamplerParams { // NOLINT
-    union {
-        struct {
-            SamplerMagFilter filterMag      : 1;    //!< magnification filter (NEAREST)
-            SamplerMinFilter filterMin      : 3;    //!< minification filter  (NEAREST)
-            SamplerWrapMode wrapS           : 2;    //!< s-coordinate wrap mode (CLAMP_TO_EDGE)
-            SamplerWrapMode wrapT           : 2;    //!< t-coordinate wrap mode (CLAMP_TO_EDGE)
+    SamplerMagFilter filterMag      : 1;    //!< magnification filter (NEAREST)
+    SamplerMinFilter filterMin      : 3;    //!< minification filter  (NEAREST)
+    SamplerWrapMode wrapS           : 2;    //!< s-coordinate wrap mode (CLAMP_TO_EDGE)
+    SamplerWrapMode wrapT           : 2;    //!< t-coordinate wrap mode (CLAMP_TO_EDGE)
 
-            SamplerWrapMode wrapR           : 2;    //!< r-coordinate wrap mode (CLAMP_TO_EDGE)
-            uint8_t anisotropyLog2          : 3;    //!< anisotropy level (0)
-            SamplerCompareMode compareMode  : 1;    //!< sampler compare mode (NONE)
-            uint8_t padding0                : 2;    //!< reserved. must be 0.
+    SamplerWrapMode wrapR           : 2;    //!< r-coordinate wrap mode (CLAMP_TO_EDGE)
+    uint8_t anisotropyLog2          : 3;    //!< anisotropy level (0)
+    SamplerCompareMode compareMode  : 1;    //!< sampler compare mode (NONE)
+    uint8_t padding0                : 2;    //!< reserved. must be 0.
 
-            SamplerCompareFunc compareFunc  : 3;    //!< sampler comparison function (LE)
-            uint8_t padding1                : 5;    //!< reserved. must be 0.
+    SamplerCompareFunc compareFunc  : 3;    //!< sampler comparison function (LE)
+    uint8_t padding1                : 5;    //!< reserved. must be 0.
+    uint8_t padding2                : 8;    //!< reserved. must be 0.
 
-            uint8_t padding2                : 8;    //!< reserved. must be 0.
-        };
-        uint32_t u;
+    struct Hasher {
+        size_t operator()(SamplerParams 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()(SamplerParams lhs, SamplerParams rhs) const noexcept {
+            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()(SamplerParams lhs, SamplerParams rhs) const noexcept {
+            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 < (SamplerParams lhs, SamplerParams rhs) {
-        return lhs.u < rhs.u;
+    friend inline bool operator < (SamplerParams lhs, SamplerParams rhs) noexcept {
+        return SamplerParams::LessThan{}(lhs, rhs);
     }
 };
+static_assert(sizeof(SamplerParams) == 4);
 
-static_assert(sizeof(SamplerParams) == sizeof(uint32_t), "SamplerParams must be 32 bits");
+// The limitation to 64-bits max comes from how we store a SamplerParams in our JNI code
+// see android/.../TextureSampler.cpp
+static_assert(sizeof(SamplerParams) <= sizeof(uint64_t),
+        "SamplerParams must be no more than 64 bits");
 
 //! blending equation function
 enum class BlendEquation : uint8_t {
@@ -1118,8 +1184,6 @@ static_assert(sizeof(StencilState) == 12u,
 
 using FrameScheduledCallback = void(*)(PresentCallable callable, void* user);
 
-using FrameCompletedCallback = void(*)(void* user);
-
 enum class Workaround : uint16_t {
     // The EASU pass must split because shader compiler flattens early-exit branch
     SPLIT_EASU,
@@ -1130,7 +1194,14 @@ enum class Workaround : uint16_t {
     ADRENO_UNIFORM_ARRAY_CRASH,
     // Workaround a Metal pipeline compilation error with the message:
     // "Could not statically determine the target of a texture". See light_indirect.fs
-    A8X_STATIC_TEXTURE_TARGET_ERROR
+    A8X_STATIC_TEXTURE_TARGET_ERROR,
+    // Adreno drivers sometimes aren't able to blit into a layer of a texture array.
+    DISABLE_BLIT_INTO_TEXTURE_ARRAY,
+    // Multiple workarounds needed for PowerVR GPUs
+    POWER_VR_SHADER_WORKAROUNDS,
+    // The driver has some threads pinned, and we can't easily know on which core, it can hurt
+    // performance more if we end-up pinned on the same one.
+    DISABLE_THREAD_AFFINITY
 };
 
 } // namespace filament::backend

filament/backend/include/backend/Handle.h

@@ -39,7 +39,6 @@ struct HwRenderTarget;
 struct HwSamplerGroup;
 struct HwStream;
 struct HwSwapChain;
-struct HwSync;
 struct HwTexture;
 struct HwTimerQuery;
 struct HwVertexBuffer;
@@ -126,7 +125,6 @@ using RenderTargetHandle    = Handle<HwRenderTarget>;
 using SamplerGroupHandle    = Handle<HwSamplerGroup>;
 using StreamHandle          = Handle<HwStream>;
 using SwapChainHandle       = Handle<HwSwapChain>;
-using SyncHandle            = Handle<HwSync>;
 using TextureHandle         = Handle<HwTexture>;
 using TimerQueryHandle      = Handle<HwTimerQuery>;
 using VertexBufferHandle    = Handle<HwVertexBuffer>;

filament/backend/include/backend/Platform.h

@@ -22,6 +22,7 @@
 #include <backend/DriverEnums.h>
 
 #include <utils/compiler.h>
+#include <utils/Invocable.h>
 
 namespace filament::backend {
 
@@ -45,8 +46,17 @@ public:
          * Driver clamps to valid values.
          */
         size_t handleArenaSize = 0;
+
+        /*
+         * this number of most-recently destroyed textures will be tracked for use-after-free.
+         * Throws an exception when a texture is freed but still bound to a SamplerGroup and used in
+         * a draw call. 0 disables completely. Currently only respected by the Metal backend.
+         */
+        size_t textureUseAfterFreePoolSize = 0;
     };
 
+    Platform() noexcept;
+
     virtual ~Platform() noexcept;
 
     /**
@@ -79,6 +89,98 @@ public:
      * thread, or if the platform does not need to perform any special processing.
      */
     virtual bool pumpEvents() noexcept;
+
+    /**
+     * InsertBlobFunc is an Invocable to an application-provided function that a
+     * backend implementation may use to insert a key/value pair into the
+     * cache.
+     */
+    using InsertBlobFunc = utils::Invocable<
+            void(const void* key, size_t keySize, const void* value, size_t valueSize)>;
+
+    /*
+     * RetrieveBlobFunc is an Invocable to an application-provided function that a
+     * backend implementation may use to retrieve a cached value from the
+     * cache.
+     */
+    using RetrieveBlobFunc = utils::Invocable<
+            size_t(const void* key, size_t keySize, void* value, size_t valueSize)>;
+
+    /**
+     * Sets the callback functions that the backend can use to interact with caching functionality
+     * provided by the application.
+     *
+     * Cache functions may only be specified once during the lifetime of a
+     * Platform.  The <insert> and <retrieve> Invocables may be called at any time and
+     * from any thread from the time at which setBlobFunc is called until the time that Platform
+     * is destroyed. Concurrent calls to these functions from different threads is also allowed.
+     * Either function can be null.
+     *
+     * @param insertBlob    an Invocable that inserts a new value into the cache and associates
+     *                      it with the given key
+     * @param retrieveBlob  an Invocable that retrieves from the cache the value associated with a
+     *                      given key
+     */
+    void setBlobFunc(InsertBlobFunc&& insertBlob, RetrieveBlobFunc&& retrieveBlob) noexcept;
+
+    /**
+     * @return true if insertBlob is valid.
+     */
+    bool hasInsertBlobFunc() const noexcept;
+
+    /**
+     * @return true if retrieveBlob is valid.
+     */
+    bool hasRetrieveBlobFunc() const noexcept;
+
+    /**
+     * @return true if either of insertBlob or retrieveBlob are valid.
+     */
+    bool hasBlobFunc() const noexcept {
+        return hasInsertBlobFunc() || hasRetrieveBlobFunc();
+    }
+
+    /**
+     * To insert a new binary value into the cache and associate it with a given
+     * key, the backend implementation can call the application-provided callback
+     * function insertBlob.
+     *
+     * No guarantees are made as to whether a given key/value pair is present in
+     * the cache after the set call.  If a different value has been associated
+     * with the given key in the past then it is undefined which value, if any, is
+     * associated with the key after the set call.  Note that while there are no
+     * guarantees, the cache implementation should attempt to cache the most
+     * recently set value for a given key.
+     *
+     * @param key           pointer to the beginning of the key data that is to be inserted
+     * @param keySize       specifies the size in byte of the data pointed to by <key>
+     * @param value         pointer to the beginning of the value data that is to be inserted
+     * @param valueSize     specifies the size in byte of the data pointed to by <value>
+     */
+    void insertBlob(const void* key, size_t keySize, const void* value, size_t valueSize);
+
+    /**
+     * To retrieve the binary value associated with a given key from the cache, a
+     * the backend implementation can call the application-provided callback
+     * function retrieveBlob.
+     *
+     * If the cache contains a value for the given key and its size in bytes is
+     * less than or equal to <valueSize> then the value is written to the memory
+     * pointed to by <value>.  Otherwise nothing is written to the memory pointed
+     * to by <value>.
+     *
+     * @param key          pointer to the beginning of the key
+     * @param keySize      specifies the size in bytes of the binary key pointed to by <key>
+     * @param value        pointer to a buffer to receive the cached binary data, if it exists
+     * @param valueSize    specifies the size in bytes of the memory pointed to by <value>
+     * @return             If the cache contains a value associated with the given key then the
+     *                     size of that binary value in bytes is returned. Otherwise 0 is returned.
+     */
+    size_t retrieveBlob(const void* key, size_t keySize, void* value, size_t valueSize);
+
+private:
+    InsertBlobFunc mInsertBlob;
+    RetrieveBlobFunc mRetrieveBlob;
 };
 
 } // namespace filament

filament/backend/include/backend/Program.h

@@ -67,10 +67,12 @@ public:
     Program& operator=(const Program& rhs) = delete;
 
     Program(Program&& rhs) noexcept;
-    Program& operator=(Program&& rhs) noexcept;
+    Program& operator=(Program&& rhs) noexcept = delete;
 
     ~Program() noexcept;
 
+    Program& priorityQueue(CompilerPriorityQueue priorityQueue) noexcept;
+
     // sets the material name and variant for diagnostic purposes only
     Program& diagnostics(utils::CString const& name,
             utils::Invocable<utils::io::ostream&(utils::io::ostream& out)>&& logger);
@@ -102,13 +104,15 @@ public:
             Sampler const* samplers, size_t count) noexcept;
 
     struct SpecializationConstant {
+        using Type = std::variant<int32_t, float, bool>;
         uint32_t id;                                // id set in glsl
-        std::variant<int32_t, float, bool> value;   // value and type
+        Type value;                                 // value and type
     };
 
     Program& specializationConstants(
             utils::FixedCapacityVector<SpecializationConstant> specConstants) noexcept;
 
+    Program& cacheId(uint64_t cacheId) noexcept;
 
     ShaderSource const& getShadersSource() const noexcept { return mShadersSource; }
     ShaderSource& getShadersSource() noexcept { return mShadersSource; }
@@ -135,6 +139,10 @@ public:
         return mSpecializationConstants;
     }
 
+    uint64_t getCacheId() const noexcept { return mCacheId; }
+
+    CompilerPriorityQueue getPriorityQueue() const noexcept { return mPriorityQueue; }
+
 private:
     friend utils::io::ostream& operator<<(utils::io::ostream& out, const Program& builder);
 
@@ -142,10 +150,12 @@ private:
     SamplerGroupInfo mSamplerGroups = {};
     ShaderSource mShadersSource;
     utils::CString mName;
+    uint64_t mCacheId{};
     utils::Invocable<utils::io::ostream&(utils::io::ostream& out)> mLogger;
     utils::FixedCapacityVector<SpecializationConstant> mSpecializationConstants;
     utils::FixedCapacityVector<std::pair<utils::CString, uint8_t>> mAttributes;
     std::array<UniformInfo, Program::UNIFORM_BINDING_COUNT> mBindingUniformInfo;
+    CompilerPriorityQueue mPriorityQueue = CompilerPriorityQueue::HIGH;
 };
 
 } // namespace filament::backend

filament/backend/include/backend/platforms/OpenGLPlatform.h

@@ -267,6 +267,33 @@ public:
      * @return Transformed image.
      */
     virtual AcquiredImage transformAcquiredImage(AcquiredImage source) noexcept;
+
+    // --------------------------------------------------------------------------------------------
+
+    /**
+     * Returns true if additional OpenGL contexts can be created. Default: false.
+     * @return true if additional OpenGL contexts can be created.
+     * @see createContext
+     */
+    virtual bool isExtraContextSupported() const noexcept;
+
+    /**
+     * Creates an OpenGL context with the same configuration than the main context and makes it
+     * current to the current thread. Must not be called from the main driver thread.
+     * createContext() is only supported if isExtraContextSupported() returns true.
+     * These additional contexts will be automatically terminated in terminate.
+     *
+     * @param shared whether the new context is shared with the main context.
+     * @see isExtraContextSupported()
+     * @see terminate()
+     */
+    virtual void createContext(bool shared);
+
+    /**
+     * Detach and destroy the current context if any and releases all resources associated to
+     * this thread.
+     */
+    virtual void releaseContext() noexcept;
 };
 
 } // namespace filament