Update android build.gradle publishing instructions

.github/workflows/android-continuous.yml

@@ -14,10 +14,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3.3.0
-      - uses: actions/setup-java@v3
-        with:
-          distribution: 'temurin'
-          java-version: '17'
       - name: Run build script
         run: |
           cd build/android && printf "y" | ./build.sh continuous

.github/workflows/presubmit.yml

@@ -44,10 +44,6 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3.3.0
-      - uses: actions/setup-java@v3
-        with:
-          distribution: 'temurin'
-          java-version: '17'
       - name: Run build script
         run: |
           cd build/android && printf "y" | ./build.sh presubmit

.github/workflows/release.yml

@@ -112,10 +112,6 @@ jobs:
       - uses: actions/checkout@v3.3.0
         with:
           ref: ${{ steps.git_ref.outputs.ref }}
-      - uses: actions/setup-java@v3
-        with:
-          distribution: 'temurin'
-          java-version: '17'
       - name: Run build script
         env:
           TAG: ${{ steps.git_ref.outputs.tag }}

BUILDING.md

@@ -13,10 +13,9 @@ section below.
 
 To build Filament for Android you must also install the following:
 
-- Android Studio Flamingo or more recent
+- Android Studio Arctic Fox or more recent
 - Android SDK
 - Android NDK 25.1 or higher
-- Java 17
 
 ### Environment variables
 

CMakeLists.txt

@@ -124,16 +124,11 @@ if (LINUX)
             add_definitions(-DFILAMENT_SUPPORTS_XCB)
         endif()
 
-        # Default Swiftshader build does not enable the xlib extension
-        if (FILAMENT_SUPPORTS_XLIB AND FILAMENT_USE_SWIFTSHADER)
-            set(FILAMENT_SUPPORTS_XLIB OFF)
-        endif()
-
         if (FILAMENT_SUPPORTS_XLIB)
             add_definitions(-DFILAMENT_SUPPORTS_XLIB)
         endif()
 
-        if (FILAMENT_SUPPORTS_XCB OR FILAMENT_SUPPORTS_XLIB)
+        if (FILAMENT_SUPPORTS_XCB OR FILAMENT_SUPORTS_XLIB)
             add_definitions(-DFILAMENT_SUPPORTS_X11)
             set(FILAMENT_SUPPORTS_X11 TRUE)
         endif()

LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2023 The Android Open Source Project
+   Copyright [yyyy] [name of copyright owner]
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -31,7 +31,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.google.android.filament:filament-android:1.39.0'
+    implementation 'com.google.android.filament:filament-android:1.32.0'
 }
 ```
 
@@ -41,6 +41,7 @@ Here are all the libraries available in the group `com.google.android.filament`:
 | ------------- | ------------- |
 | [![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. |
 | [![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`. |
+| [![gltfio-android-lite](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/gltfio-android-lite/badge.svg?subject=gltfio-android-lite)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/gltfio-android-lite) | Trimmed version of `gltfio` that does not support some glTF extensions. |
 | [![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. |
 | [![filamat-android-lite](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filamat-android-lite/badge.svg?subject=filamat-android-lite)](https://maven-badges.herokuapp.com/maven-central/com.google.android.filament/filamat-android-lite) | A much smaller alternative to `filamat-android` that can only generate OpenGL shaders. It does not provide validation or optimizations. |
@@ -50,7 +51,7 @@ Here are all the libraries available in the group `com.google.android.filament`:
 iOS projects can use CocoaPods to install the latest release:
 
 ```
-pod 'Filament', '~> 1.39.0'
+pod 'Filament', '~> 1.32.0'
 ```
 
 ### Snapshots

RELEASE_GUIDE.md

@@ -13,7 +13,22 @@ Before starting, ensure that each of these branches is up-to-date with origin:
 
 It should have the version corresponding to its name, $RELEASE.
 
-## 1. Bump versions on main to $RELEASE.
+## 1. Update RELEASE_NOTES.md on the rc branch.
+
+Checkout the rc/$RELEASE branch. In RELEASE_NOTES.md, locate the header corresponding to $RELEASE
+and write release notes. To see which commits make up the release, run:
+
+```
+build/common/release.sh -c rc/$RELEASE
+```
+
+Commit the changes to rc/$RELEASE with the title:
+
+```
+Update RELEASE_NOTES for $RELEASE
+```
+
+## 2. Bump versions on main to $RELEASE.
 
 Checkout main and run the following command to bump Filament's version to $RELEASE:
 
@@ -29,19 +44,49 @@ Release Filament $RELEASE
 
 Do not push to origin yet.
 
-## 2. Update RELEASE_NOTES.md on main.
+## 3. Cherry-pick RELEASE_NOTES change from rc branch to main.
 
-Create a new header in RELEASE_NOTES.md for $NEXT_RELEASE. Copy the release notes in
-NEW_RELEASE_NOTES.md to RELEASE_NOTES.md under the new header. Clear NEW_RELEASE_NOTES.md.
+```
+git cherry-pick rc/$RELEASE
+```
 
-Amend these changes to the "Release Filament $RELEASE" commit.
+Update the headers. The "main branch" header becomes a header for $NEXT_RELEASE, and a new "main
+branch" header is added.
+
+For example, this:
+
+```
+## main branch
+- foo
+- bar
+
+## v1.9.3
+- baz
+- bat
+```
+
+becomes:
+
+```
+## main branch
+
+## v1.9.4
+- foo
+- bar
+
+## v1.9.3
+- baz
+- bat
+```
+
+Ammend these changes to the cherry-picked change.
 
 ```
 git add -u
 git commit --amend --no-edit
 ```
 
-## 3. Run release script.
+## 4. Run release script.
 
 ```
 build/common/release.sh rc/$RELEASE rc/$NEXT_RELEASE
@@ -50,18 +95,18 @@ build/common/release.sh rc/$RELEASE rc/$NEXT_RELEASE
 This script will merge rc/$RELEASE into release, delete the rc branch, and create a new rc
 branch called rc/$NEXT_RELEASE. Verify that everything looks okay locally.
 
-## 4. Push the release branch.
+## 5. Push the release branch.
 
 ```
 git push origin release
 ```
 
-## 5. Create the GitHub release.
+## 6. Create the GitHub release.
 
 Use the GitHub UI to create a GitHub release corresponding to $RELEASE version.
 Make sure the target is set to the release branch.
 
-## 6. Delete the old rc branch (optional).
+## 7. Delete the old rc branch (optional).
 
 This step is optional. The old rc branch may be left alive for a few weeks for posterity.
 
@@ -69,7 +114,7 @@ This step is optional. The old rc branch may be left alive for a few weeks for p
 git push origin --delete rc/$RELEASE
 ```
 
-## 7. Bump the version on the new rc branch to $NEXT_RELEASE.
+## 8. Bump the version on the new rc branch to $NEXT_RELEASE.
 
 ```
 git checkout rc/$NEXT_RELEASE
@@ -82,19 +127,19 @@ Commit the changes to rc/$NEXT_RELEASE with the title:
 Bump version to $NEXT_RELEASE
 ```
 
-## 8. Push main.
+## 9. Push main.
 
 ```
 git push origin main
 ```
 
-## 9. Push the new rc branch.
+## 10. Push the new rc branch.
 
 ```
 git push origin -u rc/$NEXT_RELEASE
 ```
 
-## 10. Rebuild the GitHub release (if failed).
+## 11. Rebuild the GitHub release (if failed).
 
 Sometimes the GitHub release job will fail. In this case, you can manually re-run the release job.
 

RELEASE_NOTES.md

@@ -7,69 +7,6 @@ A new header is inserted each time a *tag* is created.
 Instead, if you are authoring a PR for the main branch, add your release note to
 [NEW_RELEASE_NOTES.md](./NEW_RELEASE_NOTES.md).
 
-## v1.39.0
-
-- matc: workaround a bug in spirv-tools causing vsm to fail [⚠️ **Recompile materials**]
-- UiHelper: fix jank when a `TextureView` is resized (fixes b\282220665)
-
-## 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**]
-- everything: Add limited support for OpenGL ES 2.0 devices. [⚠️ **Recompile Materials**]
-- platform: New virtual on `OpenGLPlatform` to preserve ancillary buffers
-
-## v1.35.0
-
-- materials: Materials can now access up to 4 global `vec4` visible by all materials [⚠️ **Recompile Materials**]
-
-## v1.34.0
-
-- materials: picking is done in float (prepare for ES2) [⚠️ **New Material Version**]
-- materials: postLightingBlending is now applied before the fog [⚠️ **Recompile materials**]
-- vulkan: fix adreno optimized material artifacts [⚠️ **Recompile Materials**]
-
-## v1.33.0
-
-- materials: prepare ES2 support [⚠️ **New Material Version**]
-
-## v1.32.4
-
-- engine: Add support for _constant parameters_, which are constants that can be specialized after material compilation.
-- materials: improved size reduction of OpenGL/Metal shaders by ~65% when compiling materials with
-             size optimizations (`matc -S`) [⚠️ **Recompile Materials**]
-- engine: fix potential crash on Metal devices with A8X GPU (iPad Air 2) [⚠️ **Recompile Materials**]
-- opengl: support the external image on macOS
-
-## v1.32.3
-
-- fog: added an option to disable the fog after a certain distance [⚠️ **Recompile Materials**].
-- fog: fog color now takes exposure and IBL intensity into account [⚠️ **Recompile Materials**].
-- materials: implement cascades debugging as a post-process [⚠️ **Recompile Materials**].
-- materials: use 9 digits or less for floats [⚠️ **Recompile Materials**].
-- gltfio: fix skinning when objects are far from the origin
-- materials: remove 4 unneeded variants from `unlit` materials [⚠️ **Recompile Materials**].
-
-## v1.32.2
-
-- lighting: the sun disc was computed in low/medium quality instead of high quality. This will
-  provide performance improvements to mobile devices [⚠️ **Recompile Materials**]
-
-## v1.32.1
-
 ## v1.32.0
 
 - fog: fixed fog height falloff and computation precision on mobile [⚠️ **Recompile Materials**]

android/build.gradle

@@ -34,6 +34,9 @@
 //   - Build and upload artifacts with ./gradlew publish
 //   - Close and release staging repo on Nexus with ./gradlew closeAndReleaseStagingRepository
 //
+//   These commands must both be run in the same Gradle invocation:
+//   ./gradlew publish closeAndReleaseStagingRepository
+//
 // The following is needed in ~/gradle/gradle.properties:
 //
 //     sonatypeUsername=nexus_user
@@ -79,15 +82,14 @@ buildscript {
     }
 
     ext.versions = [
-        'jdk': 17,
         'minSdk': 19,
         'targetSdk': 33,
         'compileSdk': 33,
-        'kotlin': '1.8.20',
-        'kotlin_coroutines': '1.7.1',
-        'buildTools': '33.0.2',
+        'kotlin': '1.8.0',
+        'kotlin_coroutines': '1.6.4',
+        'buildTools': '33.0.1',
         'ndk': '25.1.8937393',
-        'androidx_core': '1.10.0',
+        'androidx_core': '1.9.0',
         'androidx_annotations': '1.3.0'
     ]
 
@@ -104,7 +106,7 @@ buildscript {
     ]
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.2'
+        classpath 'com.android.tools.build:gradle:7.4.0'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${versions.kotlin}"
     }
 
@@ -127,7 +129,6 @@ buildscript {
         "-fno-asynchronous-unwind-tables",
         "-fno-rtti",
         "-ffast-math",
-        "-fno-finite-math-only",
         "-ffp-contract=fast",
         "-fvisibility-inlines-hidden",
         "-fvisibility=hidden",
@@ -195,7 +196,6 @@ subprojects {
                 }
 
                 ndk {
-                    //noinspection ChromeOsAbiSupport
                     abiFilters(*rootProject.ext.abis)
                 }
 
@@ -216,8 +216,8 @@ subprojects {
             }
 
             compileOptions {
-                sourceCompatibility versions.jdk
-                targetCompatibility versions.jdk
+                sourceCompatibility JavaVersion.VERSION_1_8
+                targetCompatibility JavaVersion.VERSION_1_8
             }
         }
     }

android/buildSrc/src/main/groovy/FilamentPlugin.groovy

@@ -142,14 +142,6 @@ abstract class MaterialCompiler extends TaskWithBinary {
                 if (!exclude_vulkan) {
                     matcArgs += ['-a', 'vulkan']
                 }
-
-                def mat_no_opt = providers
-                        .gradleProperty("com.google.android.filament.matnopt")
-                        .forUseAtConfigurationTime().present
-                if (mat_no_opt) {
-                    matcArgs += ['-g']
-                }
-
                 matcArgs += ['-a', 'opengl', '-p', 'mobile', '-o', getOutputFile(file), file]
 
                 exec.exec {

android/filamat-android/build.gradle

@@ -17,17 +17,6 @@ android {
             }
         }
     }
-
-    publishing {
-        singleVariant("fullRelease") {
-            withSourcesJar()
-            withJavadocJar()
-        }
-        singleVariant("liteRelease") {
-            withSourcesJar()
-            withJavadocJar()
-        }
-    }
 }
 
 dependencies {

android/filament-android/build.gradle

@@ -1,12 +1,5 @@
 android {
     namespace 'com.google.android.filament'
-
-    publishing {
-        singleVariant("release") {
-            withSourcesJar()
-            withJavadocJar()
-        }
-    }
 }
 
 dependencies {

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

@@ -201,19 +201,12 @@ Java_com_google_android_filament_RenderableManager_nBuilderSkinning(JNIEnv*, jcl
 }
 
 extern "C" JNIEXPORT void JNICALL
-Java_com_google_android_filament_RenderableManager_nBuilderEnableSkinningBuffers(JNIEnv*, jclass,
+Java_com_google_android_filament_RenderableManager_nEnableSkinningBuffers(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) {
@@ -367,20 +360,6 @@ 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/View.cpp

@@ -315,14 +315,12 @@ Java_com_google_android_filament_View_nSetBloomOptions(JNIEnv*, jclass,
 
 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, jlong skyColorNativeObject, jboolean enabled) {
+        jfloat distance, jfloat maximumOpacity, jfloat height, jfloat heightFalloff, jfloat r,
+        jfloat g, jfloat b, jfloat density, jfloat inScatteringStart,
+        jfloat inScatteringSize, jboolean fogColorFromIbl, jboolean enabled) {
     View* view = (View*) nativeView;
-    Texture* skyColor = (Texture*) skyColorNativeObject;
     View::FogOptions options = {
              .distance = distance,
-             .cutOffDistance = cutOffDistance,
              .maximumOpacity = maximumOpacity,
              .height = height,
              .heightFalloff = heightFalloff,
@@ -331,7 +329,6 @@ 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);
@@ -488,30 +485,3 @@ Java_com_google_android_filament_View_nSetGuardBandOptions(JNIEnv *, jclass,
     View* view = (View*) nativeView;
     view->setGuardBandOptions({ .enabled = (bool)enabled });
 }
-
-extern "C"
-JNIEXPORT void JNICALL
-Java_com_google_android_filament_View_nSetMaterialGlobal(JNIEnv * , jclass, jlong nativeView,
-        jint index, jfloat x, jfloat y, jfloat z, jfloat w) {
-    View *view = (View *) nativeView;
-    view->setMaterialGlobal((uint32_t)index, { x, y, z, w });
-}
-
-extern "C"
-JNIEXPORT void JNICALL
-Java_com_google_android_filament_View_nGetMaterialGlobal(JNIEnv *env, jclass clazz,
-        jlong nativeView, jint index, jfloatArray out_) {
-    jfloat* out = env->GetFloatArrayElements(out_, nullptr);
-    View *view = (View *) nativeView;
-    auto result = view->getMaterialGlobal(index);
-    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/ColorGrading.java

@@ -118,7 +118,6 @@ public class ColorGrading {
      *
      * @deprecated Use {@link ColorGrading.Builder#toneMapper(ToneMapper)}
      */
-    @Deprecated
     public enum ToneMapping {
         /** Linear tone mapping (i.e. no tone mapping). */
         LINEAR,
@@ -232,7 +231,6 @@ public class ColorGrading {
          *
          * @deprecated Use {@link #toneMapper(ToneMapper)}
          */
-        @Deprecated
         public Builder toneMapping(ToneMapping toneMapping) {
             nBuilderToneMapping(mNativeBuilder, toneMapping.ordinal());
             return this;

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

@@ -356,16 +356,16 @@ public class RenderableManager {
 
         /**
          * Specifies the number of draw instance of this renderable. The default is 1 instance and
-         * the maximum number of instances allowed is 32767. 0 is invalid.
+         * the maximum number of instances allowed is 65535. 0 is invalid.
          * All instances are culled using the same bounding box, so care must be taken to make
          * sure all instances render inside the specified bounding box.
          * The material can use getInstanceIndex() in the vertex shader to get the instance index and
          * possibly adjust the position or transform.
          *
-         * @param instanceCount the number of instances silently clamped between 1 and 32767.
+         * @param instanceCount the number of instances silently clamped between 1 and 65535.
          */
         @NonNull
-        public Builder instances(@IntRange(from = 1, to = 32767) int instanceCount) {
+        public Builder instances(@IntRange(from = 1, to = 65535) int instanceCount) {
             nBuilderInstances(mNativeBuilder, instanceCount);
             return this;
         }
@@ -417,19 +417,7 @@ public class RenderableManager {
          */
         @NonNull
         public Builder enableSkinningBuffers(boolean 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);
+            nEnableSkinningBuffers(mNativeBuilder, enabled);
             return this;
         }
 
@@ -741,23 +729,6 @@ 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.
@@ -980,8 +951,7 @@ 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 nBuilderEnableSkinningBuffers(long nativeBuilder, boolean enabled);
-    private static native void nBuilderFog(long nativeBuilder, boolean enabled);
+    private static native void nEnableSkinningBuffers(long nativeBuilder, boolean enabled);
     private static native void nBuilderLightChannel(long nativeRenderableManager, int channel, boolean enable);
     private static native void nBuilderInstances(long nativeRenderableManager, int instances);
 
@@ -996,8 +966,6 @@ 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/View.java

@@ -962,10 +962,9 @@ public class View {
         assertFloat3In(options.color);
         mFogOptions = options;
         nSetFogOptions(getNativeObject(), options.distance, options.maximumOpacity, options.height,
-                options.heightFalloff, options.cutOffDistance,
-                options.color[0], options.color[1], options.color[2],
+                options.heightFalloff, options.color[0], options.color[1], options.color[2],
                 options.density, options.inScatteringStart, options.inScatteringSize,
-                options.fogColorFromIbl, options.skyColor.getNativeObject(),
+                options.fogColorFromIbl,
                 options.enabled);
     }
 
@@ -1117,51 +1116,6 @@ public class View {
         float mFragCoordsZ;
     }
 
-    /**
-     * Set the value of material global variables. There are up-to four such variable each of
-     * type float4. These variables can be read in a user Material with
-     * `getMaterialGlobal{0|1|2|3}()`. All variable start with a default value of { 0, 0, 0, 1 }
-     *
-     * @param index index of the variable to set between 0 and 3.
-     * @param value new value for the variable.
-     * @see #getMaterialGlobal
-     */
-    public void setMaterialGlobal(int index, @NonNull @Size(min = 4) float[] value) {
-        Asserts.assertFloat4In(value);
-        nSetMaterialGlobal(getNativeObject(), index, value[0], value[1], value[2], value[3]);
-    }
-
-    /**
-     * Get the value of the material global variables.
-     * All variable start with a default value of { 0, 0, 0, 1 }
-     *
-     * @param index index of the variable to set between 0 and 3.
-     * @param out A 4-float array where the value will be stored, or null in which case the array is
-     *            allocated.
-     * @return A 4-float array containing the current value of the variable.
-     * @see #setMaterialGlobal
-     */
-    @NonNull @Size(min = 4)
-    public float[] getMaterialGlobal(int index, @Nullable @Size(min = 4) float[] out) {
-        out = Asserts.assertFloat4(out);
-        nGetMaterialGlobal(getNativeObject(), index, out);
-        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");
@@ -1203,7 +1157,7 @@ public class View {
     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,
             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, long skyColorNativeObject, boolean enabled);
+    private static native void nSetFogOptions(long nativeView, float distance, float maximumOpacity, float height, float heightFalloff, float v, float v1, float v2, float density, float inScatteringStart, float inScatteringSize, boolean fogColorFromIbl, 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);
@@ -1218,10 +1172,6 @@ public class View {
     private static native void nPick(long nativeView, int x, int y, Object handler, InternalOnPickCallback internalCallback);
     private static native void nSetStencilBufferEnabled(long nativeView, boolean enabled);
     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);
-
 
     /**
      * List of available ambient occlusion techniques.
@@ -1442,109 +1392,48 @@ public class View {
     }
 
     /**
-     * Options to control large-scale fog in the scene
+     * Options to control fog in the scene
      */
     public static class FogOptions {
         /**
-         * Distance in world units [m] from the camera to where the fog starts ( >= 0.0 )
+         * distance in world units from the camera where the fog starts ( >= 0.0 )
          */
         public float distance = 0.0f;
-        /**
-         * Distance in world units [m] after which the fog calculation is disabled.
-         * This can be used to exclude the skybox, which is desirable if it already contains clouds or
-         * fog. The default value is +infinity which applies the fog to everything.
-         *
-         * Note: The SkyBox is typically at a distance of 1e19 in world space (depending on the near
-         * plane distance and projection used though).
-         */
-        public float cutOffDistance = Float.POSITIVE_INFINITY;
         /**
          * fog's maximum opacity between 0 and 1
          */
         public float maximumOpacity = 1.0f;
         /**
-         * Fog's floor in world units [m]. This sets the "sea level".
+         * fog's floor in world units
          */
         public float height = 0.0f;
         /**
-         * How fast the fog dissipates with altitude. heightFalloff has a unit of [1/m].
-         * It can be expressed as 1/H, where H is the altitude change in world units [m] that causes a
-         * factor 2.78 (e) change in fog density.
-         *
-         * A falloff of 0 means the fog density is constant everywhere and may result is slightly
-         * faster computations.
+         * how fast fog dissipates with altitude
          */
         public float heightFalloff = 1.0f;
         /**
-         *  Fog's color is used for ambient light in-scattering, a good value is
-         *  to use the average of the ambient light, possibly tinted towards blue
-         *  for outdoors environments. Color component's values should be between 0 and 1, values
-         *  above one are allowed but could create a non energy-conservative fog (this is dependant
-         *  on the IBL's intensity as well).
-         *
-         *  We assume that our fog has no absorption and therefore all the light it scatters out
-         *  becomes ambient light in-scattering and has lost all directionality, i.e.: scattering is
-         *  isotropic. This somewhat simulates Rayleigh scattering.
-         *
-         *  This value is used as a tint instead, when fogColorFromIbl is enabled.
-         *
-         *  @see fogColorFromIbl
+         * fog's color (linear), see fogColorFromIbl
          */
         @NonNull @Size(min = 3)
-        public float[] color = {1.0f, 1.0f, 1.0f};
+        public float[] color = {0.5f, 0.5f, 0.5f};
         /**
-         * Extinction factor in [1/m] at altitude 'height'. The extinction factor controls how much
-         * light is absorbed and out-scattered per unit of distance. Each unit of extinction reduces
-         * the incoming light to 37% of its original value.
-         *
-         * Note: The extinction factor is related to the fog density, it's usually some constant K times
-         * the density at sea level (more specifically at fog height). The constant K depends on
-         * the composition of the fog/atmosphere.
-         *
-         * For historical reason this parameter is called `density`.
+         * fog's density at altitude given by 'height'
          */
         public float density = 0.1f;
         /**
-         * Distance in world units [m] from the camera where the Sun in-scattering starts.
+         * distance in world units from the camera where in-scattering starts
          */
         public float inScatteringStart = 0.0f;
         /**
-         * Very inaccurately simulates the Sun's in-scattering. That is, the light from the sun that
-         * is scattered (by the fog) towards the camera.
-         * Size of the Sun in-scattering (>0 to activate). Good values are >> 1 (e.g. ~10 - 100).
-         * Smaller values result is a larger scattering size.
+         * size of in-scattering (>0 to activate). Good values are >> 1 (e.g. ~10 - 100).
          */
         public float inScatteringSize = -1.0f;
         /**
-         * 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 simulates a more anisotropic phase-function.
-         *
-         * `fogColorFromIbl` is ignored when skyTexture is specified.
-         *
-         * @see skyColor
+         * Fog color will be modulated by the IBL color in the view direction.
          */
         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
+         * enable or disable fog
          */
         public boolean enabled = false;
     }

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

@@ -1,60 +0,0 @@
-/*
- * Copyright (C) 2023 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package com.google.android.filament.android;
-
-import com.google.android.filament.Engine;
-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.
-     * <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#onSizeChanged
-     */
-    static public void synchronizePendingFrames(Engine engine) {
-        Fence fence = engine.createFence();
-        fence.wait(Fence.Mode.FLUSH, Fence.WAIT_FOR_EVER);
-        engine.destroyFence(fence);
-    }
-}

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

@@ -84,14 +84,6 @@ import com.google.android.filament.SwapChain;
  *             // The native surface has changed size. This is always called at least once
  *             // after the surface is created (after onNativeWindowChanged() is invoked).
  *             public void onResized(int width, int height) {
- *
- *                 // 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.
- *                 Fence fence = mEngine.createFence();
- *                 fence.wait(Fence.Mode.FLUSH, Fence.WAIT_FOR_EVER);
- *                 mEngine.destroyFence(fence);
- *
  *                 // Compute camera projection and set the viewport on the view
  *             }
  *         });
@@ -183,7 +175,7 @@ public class UiHelper {
     }
 
     private static class SurfaceViewHandler implements RenderSurface {
-        private final SurfaceView mSurfaceView;
+        private SurfaceView mSurfaceView;
 
         SurfaceViewHandler(SurfaceView surface) {
             mSurfaceView = surface;
@@ -200,7 +192,7 @@ public class UiHelper {
     }
 
     private static class SurfaceHolderHandler implements RenderSurface {
-        private final SurfaceHolder mSurfaceHolder;
+        private SurfaceHolder mSurfaceHolder;
 
         SurfaceHolderHandler(SurfaceHolder surface) {
             mSurfaceHolder = surface;
@@ -217,7 +209,7 @@ public class UiHelper {
     }
 
     private class TextureViewHandler implements RenderSurface {
-        private final TextureView mTextureView;
+        private TextureView mTextureView;
         private Surface mSurface;
 
         TextureViewHandler(TextureView surface) { mTextureView = surface; }
@@ -244,10 +236,6 @@ public class UiHelper {
             }
             mSurface = surface;
         }
-
-        public Surface getSurface() {
-            return mSurface;
-        }
     }
 
     /**
@@ -493,14 +481,6 @@ public class UiHelper {
                     } 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

android/filament-utils-android/build.gradle

@@ -1,7 +1,4 @@
 apply plugin: 'kotlin-android'
-kotlin {
-    jvmToolchain(versions.jdk)
-}
 
 android {
     namespace 'com.google.android.filament.utils'
@@ -24,11 +21,16 @@ android {
             excludes += ['lib/*/libfilament-jni.so', 'lib/*/libgltfio-jni.so']
         }
     }
+}
 
-    publishing {
-        singleVariant("release") {
-            withSourcesJar()
-            withJavadocJar()
+configurations.all { config ->
+    // Hack to preserve the version of the dependencies
+    if (!config.name.endsWith('Publication')) {
+        resolutionStrategy {
+            dependencySubstitution {
+                substitute(module("com.google.android.filament:gltfio-android:${VERSION_NAME}")).with(project(":gltfio-android"))
+                substitute(module("com.google.android.filament:gltfio-android-lite:${VERSION_NAME}")).with(project(":gltfio-android"))
+            }
         }
     }
 }
@@ -41,7 +43,7 @@ dependencies {
     implementation deps.coroutines.android
 
     api project(':filament-android')
-    api project(':gltfio-android')
+    api module("com.google.android.filament:gltfio-android:${VERSION_NAME}")
 }
 
 apply from: rootProject.file('gradle/gradle-mvn-push.gradle')

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@file:Suppress("NOTHING_TO_INLINE", "unused")
+@file:Suppress("unused")
 
 package com.google.android.filament.utils
 
@@ -24,16 +24,8 @@ enum class MatrixColumn {
     X, Y, Z, W
 }
 
-enum class RotationsOrder(
-        val yaw: VectorComponent,
-        val pitch: VectorComponent,
-        val roll: VectorComponent) {
-    XYZ(VectorComponent.X, VectorComponent.Y, VectorComponent.Z),
-    XZY(VectorComponent.X, VectorComponent.Z, VectorComponent.Y),
-    YXZ(VectorComponent.Y, VectorComponent.X, VectorComponent.Z),
-    YZX(VectorComponent.Y, VectorComponent.Z, VectorComponent.X),
-    ZXY(VectorComponent.Z, VectorComponent.X, VectorComponent.Y),
-    ZYX(VectorComponent.Z, VectorComponent.Y, VectorComponent.X);
+enum class RotationsOrder {
+    XYZ, XZY, YXZ, YZX, ZXY, ZYX
 }
 
 data class Mat2(
@@ -85,12 +77,6 @@ data class Mat2(
     operator fun minus(v: Float) = Mat2(x - v, y - v)
     operator fun times(v: Float) = Mat2(x * v, y * v)
     operator fun div(v: Float) = Mat2(x / v, y / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Mat2(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) = x.equals(v, delta) && y.equals(v, delta)
 
     operator fun times(m: Mat2) = Mat2(
             Float2(
@@ -103,18 +89,12 @@ data class Mat2(
             )
     )
 
-    inline fun compareTo(m: Mat2, delta: Float = 0.0f) = Mat2(
-        x.compareTo(m.x, delta),
-        y.compareTo(m.y, delta)
-    )
-
-    inline fun equals(m: Mat2, delta: Float = 0.0f) = x.equals(m.x, delta) && y.equals(m.y, delta)
-
     operator fun times(v: Float2) = Float2(
             x.x * v.x + y.x * v.y,
             x.y * v.x + y.y * v.y,
     )
 
+
     fun toFloatArray() = floatArrayOf(
             x.x, y.x,
             x.y, y.y
@@ -126,6 +106,7 @@ data class Mat2(
             |${x.y} ${y.y}|
             """.trimIndent()
     }
+
 }
 
 data class Mat3(
@@ -181,14 +162,6 @@ data class Mat3(
     operator fun minus(v: Float) = Mat3(x - v, y - v, z - v)
     operator fun times(v: Float) = Mat3(x * v, y * v, z * v)
     operator fun div(v: Float) = Mat3(x / v, y / v, z / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Mat3(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta),
-        z.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) =
-        x.equals(v, delta) && y.equals(v, delta) && z.equals(v, delta)
 
     operator fun times(m: Mat3) = Mat3(
             Float3(
@@ -208,15 +181,6 @@ data class Mat3(
             )
     )
 
-    inline fun compareTo(m: Mat3, delta: Float = 0.0f) = Mat3(
-        x.compareTo(m.x, delta),
-        y.compareTo(m.y, delta),
-        z.compareTo(m.z, delta)
-    )
-
-    inline fun equals(m: Mat3, delta: Float = 0.0f) =
-        x.equals(m.x, delta) && y.equals(m.y, delta) && z.equals(m.z, delta)
-
     operator fun times(v: Float3) = Float3(
             x.x * v.x + y.x * v.y + z.x * v.z,
             x.y * v.x + y.y * v.y + z.y * v.z,
@@ -248,7 +212,6 @@ data class Mat4(
     constructor(m: Mat4) : this(m.x.copy(), m.y.copy(), m.z.copy(), m.w.copy())
 
     companion object {
-
         fun of(vararg a: Float): Mat4 {
             require(a.size >= 16)
             return Mat4(
@@ -339,15 +302,6 @@ data class Mat4(
     operator fun minus(v: Float) = Mat4(x - v, y - v, z - v, w - v)
     operator fun times(v: Float) = Mat4(x * v, y * v, z * v, w * v)
     operator fun div(v: Float) = Mat4(x / v, y / v, z / v, w / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Mat4(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta),
-        z.compareTo(v, delta),
-        w.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) =
-        x.equals(v, delta) && y.equals(v, delta) && z.equals(v, delta) && w.equals(v, delta)
 
     operator fun times(m: Mat4) = Mat4(
             Float4(
@@ -376,16 +330,6 @@ data class Mat4(
             )
     )
 
-    inline fun compareTo(m: Mat4, delta: Float = 0.0f) = Mat4(
-        x.compareTo(m.x, delta),
-        y.compareTo(m.y, delta),
-        z.compareTo(m.z, delta),
-        w.compareTo(m.w, delta)
-    )
-
-    inline fun equals(m: Mat4, delta: Float = 0.0f) =
-        x.equals(m.x, delta) && y.equals(m.y, delta) && z.equals(m.z, delta) && w.equals(m.w, delta)
-
     operator fun times(v: Float4) = Float4(
             x.x * v.x + y.x * v.y + z.x * v.z+ w.x * v.w,
             x.y * v.x + y.y * v.y + z.y * v.z+ w.y * v.w,
@@ -393,26 +337,6 @@ data class Mat4(
             x.w * v.x + y.w * v.y + z.w * v.z+ w.w * v.w
     )
 
-    /**
-     * Get the Euler angles in degrees from this rotation Matrix
-     *
-     * Don't forget to extract the rotation with [rotation] if this is a transposed matrix
-     *
-     * @param order The order in which to apply rotations.
-     * Default is [RotationsOrder.ZYX] which means that the object will first be rotated around its Z
-     * axis, then its Y axis and finally its X axis.
-     *
-     * @see eulerAngles
-     */
-    fun toEulerAngles(order: RotationsOrder = RotationsOrder.ZYX) = eulerAngles(this, order)
-
-    /**
-     * Get the [Quaternion] from this rotation Matrix
-     *
-     * Don't forget to extract the rotation with [rotation] if this is a transposed matrix
-     *
-     * @see quaternion
-     */
     fun toQuaternion() = quaternion(this)
 
     fun toFloatArray() = floatArrayOf(
@@ -432,78 +356,6 @@ data class Mat4(
     }
 }
 
-inline fun equal(a: Mat2, b: Float, delta: Float = 0.0f) = Bool2(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta)
-)
-
-inline fun equal(a: Mat2, b: Mat2, delta: Float = 0.0f) = Bool2(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta)
-)
-
-inline fun notEqual(a: Mat2, b: Float, delta: Float = 0.0f) = Bool2(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta)
-)
-
-inline fun notEqual(a: Mat2, b: Mat2, delta: Float = 0.0f) = Bool2(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta)
-)
-
-inline fun equal(a: Mat3, b: Float, delta: Float = 0.0f) = Bool3(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta),
-    a.z.equals(b, delta)
-)
-
-inline fun equal(a: Mat3, b: Mat3, delta: Float = 0.0f) = Bool3(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta),
-    a.z.equals(b.z, delta)
-)
-
-inline fun notEqual(a: Mat3, b: Float, delta: Float = 0.0f) = Bool3(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta),
-    !a.z.equals(b, delta)
-)
-
-inline fun notEqual(a: Mat3, b: Mat3, delta: Float = 0.0f) = Bool3(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta),
-    !a.z.equals(b.z, delta)
-)
-
-inline fun equal(a: Mat4, b: Float, delta: Float = 0.0f) = Bool4(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta),
-    a.z.equals(b, delta),
-    a.w.equals(b, delta)
-)
-
-inline fun equal(a: Mat4, b: Mat4, delta: Float = 0.0f) = Bool4(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta),
-    a.z.equals(b.z, delta),
-    a.w.equals(b.w, delta)
-)
-
-inline fun notEqual(a: Mat4, b: Float, delta: Float = 0.0f) = Bool4(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta),
-    !a.z.equals(b, delta),
-    !a.w.equals(b, delta)
-)
-
-inline fun notEqual(a: Mat4, b: Mat4, delta: Float = 0.0f) = Bool4(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta),
-    !a.z.equals(b.z, delta),
-    !a.w.equals(b.w, delta)
-)
-
 fun transpose(m: Mat2) = Mat2(
         Float2(m.x.x, m.y.x),
         Float2(m.x.y, m.y.y)
@@ -642,7 +494,14 @@ fun rotation(m: Mat4) = Mat4(normalize(m.right), normalize(m.up), normalize(m.fo
  */
 fun rotation(d: Float3, order: RotationsOrder = RotationsOrder.ZYX): Mat4 {
     val r = transform(d, ::radians)
-    return rotation(r[order.yaw], r[order.pitch], r[order.roll], order)
+    return when(order) {
+        RotationsOrder.XZY -> rotation(r.x, r.z, r.y)
+        RotationsOrder.XYZ -> rotation(r.x, r.y, r.z)
+        RotationsOrder.YXZ -> rotation(r.y, r.x, r.z)
+        RotationsOrder.YZX -> rotation(r.y, r.z, r.x)
+        RotationsOrder.ZYX -> rotation(r.z, r.y, r.x)
+        RotationsOrder.ZXY -> rotation(r.z, r.x, r.y)
+    }
 }
 
 /**
@@ -740,93 +599,13 @@ fun rotation(quaternion: Quaternion): Mat4 {
             Float4(
                 2.0f * (n.x * n.z + n.y * n.w),
                 2.0f * (n.y * n.z - n.x * n.w),
-                1.0f - 2.0f * (n.x * n.x + n.y * n.y)
+                1.0f - 2.0f * (n.x * n.x + n.y * n.y),
             )
     )
 }
 
 /**
- * Get the Euler angles in degrees from a rotation Matrix
- *
- * @param m The rotation matrix.
- * Don't forget to extract the rotation with [rotation] if it's transposed
- * @param order The order in which to apply rotations.
- * Default is [RotationsOrder.ZYX] which means that the object will first be rotated around its Z
- * axis, then its Y axis and finally its X axis.
- */
-fun eulerAngles(m: Mat4, order: RotationsOrder = RotationsOrder.ZYX): Float3 {
-    // We need to more simplify this with RotationsOrder VectorComponents mapped to MatrixColumn
-    return transform(Float3().apply {
-        when (order) {
-            RotationsOrder.XYZ -> {
-                this[order.pitch] = asin(clamp(m.z.x, -1.0f, 1.0f))
-                if (abs(m.z.x) < 0.9999999f) {
-                    this[order.yaw] = atan2(-m.z.y, m.z.z)
-                    this[order.roll] = atan2(-m.y.x, m.x.x)
-                } else {
-                    this[order.yaw] = atan2(m.y.z, m.y.y)
-                    this[order.roll] = 0.0f
-                }
-            }
-            RotationsOrder.XZY -> {
-                this[order.pitch] = asin(-clamp(m.y.x, -1.0f, 1.0f))
-                if (abs(m.y.x) < 0.9999999f) {
-                    this[order.yaw] = atan2(m.y.z, m.y.y)
-                    this[order.roll] = atan2(m.z.x, m.x.x)
-                } else {
-                    this[order.yaw] = atan2(-m.z.y, m.z.z)
-                    this[order.roll] = 0.0f
-                }
-            }
-            RotationsOrder.YXZ -> {
-                this[order.pitch] = asin(-clamp(m.z.y, -1.0f, 1.0f))
-                if (abs(m.z.y) < 0.9999999f) {
-                    this[order.yaw] = atan2(m.z.x, m.z.z)
-                    this[order.roll] = atan2(m.x.y, m.y.y)
-                } else {
-                    this[order.yaw] = atan2(-m.x.z, m.x.x)
-                    this[order.roll] = 0.0f
-                }
-            }
-            RotationsOrder.YZX -> {
-                this[order.pitch] = asin(clamp(m.x.y, -1.0f, 1.0f))
-                if (abs(m.x.y) < 0.9999999f) {
-                    this[order.roll] = atan2(-m.z.y, m.y.y)
-                    this[order.yaw] = atan2(-m.x.z, m.x.x)
-                } else {
-                    this[order.roll] = 0.0f
-                    this[order.yaw] = atan2(m.z.x, m.z.z)
-                }
-            }
-            RotationsOrder.ZXY -> {
-                this[order.pitch] = asin(clamp(m.y.z, -1.0f, 1.0f))
-                if (abs(m.y.z) < 0.9999999f) {
-                    this[order.roll] = atan2(-m.x.z, m.z.z)
-                    this[order.yaw] = atan2(-m.y.x, m.y.y)
-                } else {
-                    this[order.roll] = 0.0f
-                    this[order.yaw] = atan2(m.x.y, m.x.x)
-                }
-            }
-            RotationsOrder.ZYX -> {
-                this[order.pitch] = asin(-clamp(m.x.z, -1.0f, 1.0f))
-                if (abs(m.x.z) < 0.9999999f) {
-                    this[order.roll] = atan2(m.y.z, m.z.z)
-                    this[order.yaw] = atan2(m.x.y, m.x.x)
-                } else {
-                    this[order.roll] = 0.0f
-                    this[order.yaw] = atan2(-m.y.x, m.y.y)
-                }
-            }
-        }
-    }, ::degrees)
-}
-
-/**
- * Get the [Quaternion] from a rotation Matrix
- *
- * @param m The rotation matrix.
- * Don't forget to extract the rotation with [rotation] if it's transposed
+ * Extract Quaternion rotation from a Matrix
  */
 fun quaternion(m: Mat4): Quaternion {
     val trace = m.x.x + m.y.y + m.z.z
@@ -894,14 +673,9 @@ fun perspective(fov: Float, ratio: Float, near: Float, far: Float): Mat4 {
 }
 
 fun ortho(l: Float, r: Float, b: Float, t: Float, n: Float, f: Float) = Mat4(
-    Float4(x = 2.0f / (r - l)),
-    Float4(y = 2.0f / (t - b)),
-    Float4(z = -2.0f / (f - n)),
-    Float4(
-        -(r + l) / (r - l),
-        -(t + b) / (t - b),
-        -(f + n) / (f - n),
-        1.0f
-    )
+        Float4(x = 2.0f / (r - 1.0f)),
+        Float4(y = 2.0f / (t - b)),
+        Float4(z = -2.0f / (f - n)),
+        Float4(-(r + l) / (r - l), -(t + b) / (t - b), -(f + n) / (f - n), 1.0f)
 )
 

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

@@ -405,19 +405,9 @@ class ModelViewer(
             view.viewport = Viewport(0, 0, width, height)
             cameraManipulator.setViewport(width, height)
             updateCameraProjection()
-            synchronizePendingFrames(engine)
         }
     }
 
-    private fun synchronizePendingFrames(engine: Engine) {
-        // 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.
-        val fence = engine.createFence()
-        fence.wait(Fence.Mode.FLUSH, Fence.WAIT_FOR_EVER)
-        engine.destroyFence(fence)
-    }
-
     companion object {
         private val kDefaultObjectPosition = Float3(0.0f, 0.0f, -4.0f)
     }

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

@@ -33,9 +33,9 @@ data class Quaternion(
         var x: Float = 0.0f,
         var y: Float = 0.0f,
         var z: Float = 0.0f,
-        var w: Float = 1.0f) {
+        var w: Float = 0.0f) {
 
-    constructor(v: Float3, w: Float = 1.0f) : this(v.x, v.y, v.z, w)
+    constructor(v: Float3, w: Float = 0.0f) : this(v.x, v.y, v.z, w)
     constructor(v: Float4) : this(v.x, v.y, v.z, v.w)
     constructor(q: Quaternion) : this(q.x, q.y, q.z, q.w)
 
@@ -52,84 +52,42 @@ data class Quaternion(
         }
 
         /**
-         * Construct a Quaternion from Euler angles using YPR around a specified order
+         * Construct a Quaternion from Euler angles using YPR around ZYX respectively
          *
-         * Uses intrinsic Tait-Bryan angles. This means that rotations are performed with respect to
-         * the local coordinate system.
-         * That is, for order 'XYZ', the rotation is first around the X axis (which is the same as
-         * the world-X axis), then around local-Y (which may now be different from the world
-         * Y-axis), then local-Z (which may be different from the world Z-axis)
+         * The Euler angles are applied in ZYX order.
+         * i.e: a vector is first rotated about X (roll) then Y (pitch) and then Z (yaw).
          *
          * @param d Per axis Euler angles in degrees
-         * Yaw, pitch, roll (YPR) are taken accordingly to the rotations order input.
-         * @param order The order in which to apply rotations.
-         * Default is [RotationsOrder.ZYX] which means that the object will first be rotated around
-         * its Z axis, then its Y axis and finally its X axis.
          */
-        fun fromEuler(d: Float3, order: RotationsOrder = RotationsOrder.ZYX): Quaternion {
+        fun fromEuler(d: Float3): Quaternion {
             val r = transform(d, ::radians)
-            return fromEuler(r[order.yaw], r[order.pitch], r[order.roll], order)
+            return fromEulerZYX(r.z, r.y, r.x)
         }
 
         /**
-         * Construct a Quaternion from Euler yaw, pitch, roll around a specified order.
+         * Construct a Quaternion from Euler angles using YPR around ZYX respectively
          *
-         * @param roll about 1st rotation axis in radians. Z in case of ZYX order
-         * @param pitch about 2nd rotation axis in radians. Y in case of ZYX order
-         * @param yaw about 3rd rotation axis in radians. X in case of ZYX order
-         * @param order The order in which to apply rotations.
-         * Default is [RotationsOrder.ZYX] which means that the object will first be rotated around its Z
-         * axis, then its Y axis and finally its X axis.
+         * The Euler angles are applied in ZYX order.
+         * i.e: a vector is first rotated about X (roll) then Y (pitch) and then Z (yaw).
+         *
+         * @param roll about X axis in radians
+         * @param pitch about Y axis in radians
+         * @param yaw about Z axis in radians
          */
-        fun fromEuler(
-            yaw: Float = 0.0f,
-            pitch: Float = 0.0f,
-            roll: Float = 0.0f,
-            order: RotationsOrder = RotationsOrder.ZYX
-        ): Quaternion {
-            val c1 = cos(yaw * 0.5f)
-            val s1 = sin(yaw * 0.5f)
-            val c2 = cos(pitch * 0.5f)
-            val s2 = sin(pitch * 0.5f)
-            val c3 = cos(roll * 0.5f)
-            val s3 = sin(roll * 0.5f)
-            return when (order) {
-                RotationsOrder.XZY -> Quaternion(
-                        s1 * c2 * c3 - c1 * s2 * s3,
-                        c1 * c2 * s3 - s1 * s2 * c3,
-                        s1 * c2 * s3 + c1 * s2 * c3,
-                        s1 * s2 * s3 + c1 * c2 * c3)
-                RotationsOrder.XYZ -> Quaternion(
-                        s1 * c2 * c3 + s2 * s3 * c1,
-                        s2 * c1 * c3 - s1 * s3 * c2,
-                        s1 * s2 * c3 + s3 * c1 * c2,
-                        c1 * c2 * c3 - s1 * s2 * s3
-                )
-                RotationsOrder.YXZ -> Quaternion(
-                        s1 * c2 * s3 + c1 * s2 * c3,
-                        s1 * c2 * c3 - c1 * s2 * s3,
-                        c1 * c2 * s3 - s1 * s2 * c3,
-                        s1 * s2 * s3 + c1 * c2 * c3
-                )
-                RotationsOrder.YZX -> Quaternion(
-                        s1 * s2 * c3 + c1 * c2 * s3,
-                        s1 * c2 * c3 + c1 * s2 * s3,
-                        c1 * s2 * c3 - s1 * c2 * s3,
-                        c1 * c2 * c3 - s1 * s2 * s3
-                )
-                RotationsOrder.ZYX -> Quaternion(
-                        c1 * c2 * s3 - s1 * s2 * c3,
-                        s1 * c2 * s3 + c1 * s2 * c3,
-                        s1 * c2 * c3 - c1 * s2 * s3,
-                        s1 * s2 * s3 + c1 * c2 * c3
-                )
-                RotationsOrder.ZXY -> Quaternion(
-                        c1 * s2 * c3 - s1 * c2 * s3,
-                        s1 * s2 * c3 + c1 * c2 * s3,
-                        s1 * c2 * c3 + c1 * s2 * s3,
-                        c1 * c2 * c3 - s1 * s2 * s3
-                )
-            }
+        fun fromEulerZYX(yaw: Float = 0.0f, pitch: Float = 0.0f, roll: Float = 0.0f): Quaternion {
+            val cy = cos(yaw * 0.5f)
+            val sy = sin(yaw * 0.5f)
+            val cp = cos(pitch * 0.5f)
+            val sp = sin(pitch * 0.5f)
+            val cr = cos(roll * 0.5f)
+            val sr = sin(roll * 0.5f)
+
+            return Quaternion(
+                    sr * cp * cy - cr * sp * sy,
+                    cr * sp * cy + sr * cp * sy,
+                    cr * cp * sy - sr * sp * cy,
+                    cr * cp * cy + sr * sp * sy
+            )
         }
     }
 
@@ -264,44 +222,16 @@ data class Quaternion(
     inline operator fun minus(v: Float) = Quaternion(x - v, y - v, z - v, w - v)
     inline operator fun times(v: Float) = Quaternion(x * v, y * v, z * v, w * v)
     inline operator fun div(v: Float) = Quaternion(x / v, y / v, z / v, w / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Float4(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta),
-        z.compareTo(v, delta),
-        w.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) = Bool4(
-        x.equals(v, delta),
-        y.equals(v, delta),
-        z.equals(v, delta),
-        w.equals(v, delta)
-    )
 
     inline operator fun times(v: Float3) = (this * Quaternion(v, 0.0f) * inverse(this)).xyz
 
     inline operator fun plus(q: Quaternion) = Quaternion(x + q.x, y + q.y, z + q.z, w + q.w)
     inline operator fun minus(q: Quaternion) = Quaternion(x - q.x, y - q.y, z - q.z, w - q.w)
     inline operator fun times(q: Quaternion) = Quaternion(
-        w * q.x + x * q.w + y * q.z - z * q.y,
-        w * q.y - x * q.z + y * q.w + z * q.x,
-        w * q.z + x * q.y - y * q.x + z * q.w,
-        w * q.w - x * q.x - y * q.y - z * q.z
-    )
-
-    inline fun compareTo(v: Float4, delta: Float = 0.0f) = Float4(
-        x.compareTo(v.x, delta),
-        y.compareTo(v.y, delta),
-        z.compareTo(v.z, delta),
-        w.compareTo(v.w, delta)
-    )
-
-    inline fun equals(v: Float4, delta: Float = 0.0f) = Bool4(
-        x.equals(v.x, delta),
-        y.equals(v.y, delta),
-        z.equals(v.z, delta),
-        w.equals(v.w, delta)
-    )
+            w * q.x + x * q.w + y * q.z - z * q.y,
+            w * q.y - x * q.z + y * q.w + z * q.x,
+            w * q.z + x * q.y - y * q.x + z * q.w,
+            w * q.w - x * q.x - y * q.y - z * q.z)
 
     inline fun transform(block: (Float) -> Float): Quaternion {
         x = block(x)
@@ -323,103 +253,6 @@ inline operator fun Float.minus(q: Quaternion) = Quaternion(this - q.x, this - q
 inline operator fun Float.times(q: Quaternion) = Quaternion(this * q.x, this * q.y, this * q.z, this * q.w)
 inline operator fun Float.div(q: Quaternion) = Quaternion(this / q.x, this / q.y, this / q.z, this / q.w)
 
-inline fun lessThan(a: Quaternion, b: Float) = Bool4(
-    a.x < b,
-    a.y < b,
-    a.z < b,
-    a.w < b
-)
-
-inline fun lessThan(a: Quaternion, b: Quaternion) = Bool4(
-    a.x < b.x,
-    a.y < b.y,
-    a.z < b.z,
-    a.w < b.w
-)
-
-inline fun lessThanEqual(a: Quaternion, b: Float) = Bool4(
-    a.x <= b,
-    a.y <= b,
-    a.z <= b,
-    a.w <= b
-)
-
-inline fun lessThanEqual(a: Quaternion, b: Quaternion) = Bool4(
-    a.x <= b.x,
-    a.y <= b.y,
-    a.z <= b.z,
-    a.w <= b.w
-)
-
-inline fun greaterThan(a: Quaternion, b: Float) = Bool4(
-    a.x > b,
-    a.y > b,
-    a.z > b,
-    a.w > b
-)
-
-inline fun greaterThan(a: Quaternion, b: Quaternion) = Bool4(
-    a.x > b.y,
-    a.y > b.y,
-    a.z > b.z,
-    a.w > b.w
-)
-
-inline fun greaterThanEqual(a: Quaternion, b: Float) = Bool4(
-    a.x >= b,
-    a.y >= b,
-    a.z >= b,
-    a.w >= b
-)
-
-inline fun greaterThanEqual(a: Quaternion, b: Quaternion) = Bool4(
-    a.x >= b.x,
-    a.y >= b.y,
-    a.z >= b.z,
-    a.w >= b.w
-)
-
-inline fun equal(a: Quaternion, b: Float, delta: Float = 0.0f) = Bool4(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta),
-    a.z.equals(b, delta),
-    a.w.equals(b, delta)
-)
-
-inline fun equal(a: Quaternion, b: Quaternion, delta: Float = 0.0f) = Bool4(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta),
-    a.z.equals(b.z, delta),
-    a.w.equals(b.w, delta)
-)
-
-inline fun notEqual(a: Quaternion, b: Float, delta: Float = 0.0f) = Bool4(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta),
-    !a.z.equals(b, delta),
-    !a.w.equals(b, delta)
-)
-
-inline fun notEqual(a: Quaternion, b: Quaternion, delta: Float = 0.0f) = Bool4(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta),
-    !a.z.equals(b.z, delta),
-    !a.w.equals(b.w, delta)
-)
-
-inline infix fun Quaternion.lt(b: Float) = Bool4(x < b, y < b, z < b, w < b)
-inline infix fun Quaternion.lt(b: Float4) = Bool4(x < b.x, y < b.y, z < b.z, w < b.w)
-inline infix fun Quaternion.lte(b: Float) = Bool4(x <= b, y <= b, z <= b, w <= b)
-inline infix fun Quaternion.lte(b: Float4) = Bool4(x <= b.x, y <= b.y, z <= b.z, w <= b.w)
-inline infix fun Quaternion.gt(b: Float) = Bool4(x > b, y > b, z > b, w > b)
-inline infix fun Quaternion.gt(b: Float4) = Bool4(x > b.x, y > b.y, z > b.z, w > b.w)
-inline infix fun Quaternion.gte(b: Float) = Bool4(x >= b, y >= b, z >= b, w >= b)
-inline infix fun Quaternion.gte(b: Float4) = Bool4(x >= b.x, y >= b.y, z >= b.z, w >= b.w)
-inline infix fun Quaternion.eq(b: Float) = Bool4(x == b, y == b, z == b, w == b)
-inline infix fun Quaternion.eq(b: Float4) = Bool4(x == b.x, y == b.y, z == b.z, w == b.w)
-inline infix fun Quaternion.neq(b: Float) = Bool4(x != b, y != b, z != b, w != b)
-inline infix fun Quaternion.neq(b: Float4) = Bool4(x != b.x, y != b.y, z != b.z, w != b.w)
-
 inline fun abs(q: Quaternion) = Quaternion(abs(q.x), abs(q.y), abs(q.z), abs(q.w))
 inline fun length(q: Quaternion) = sqrt(q.x * q.x + q.y * q.y + q.z * q.z + q.w * q.w)
 inline fun length2(q: Quaternion) = q.x * q.x + q.y * q.y + q.z * q.z + q.w * q.w
@@ -445,10 +278,6 @@ fun cross(a: Quaternion, b: Quaternion): Quaternion {
     return Quaternion(m.x, m.y, m.z, 0.0f)
 }
 
-fun angle(a: Quaternion, b: Quaternion): Float {
-    return 2.0f * acos(abs(clamp(dot(a, b), -1.0f, 1.0f)))
-}
-
 /**
  * Spherical linear interpolation between two given orientations
  *
@@ -458,38 +287,36 @@ fun angle(a: Quaternion, b: Quaternion): Float {
  * @param a The beginning value
  * @param b The ending value
  * @param t The ratio between the two floats
- * @param dotThreshold If the quaternion dot product is greater than this value
- * (i.e. the quaternions are very close to each other), then the quaternions are
- * linearly interpolated instead of spherically interpolated.
+ * @param valueEps Prevent blowing up when slerping between two quaternions that are very near each
+ * other. Linear interpolation (lerp) is returned in this case.
  *
  * @return Interpolated value between the two floats
  */
-fun slerp(a: Quaternion, b: Quaternion, t: Float, dotThreshold: Float = 0.9995f): Quaternion {
+fun slerp(a: Quaternion, b: Quaternion, t: Float, valueEps: Float = 0.0000000001f): Quaternion {
     // could also be computed as: pow(q * inverse(p), t) * p;
-    var dot = dot(a, b)
-    var b1 = b
-
-    // If the dot product is negative, then the interpolation won't follow the shortest angular path
-    // between the two quaterions. In this case, invert the end quaternion to produce an equivalent
-    // rotation that will give us the path we want.
-    if (dot < 0.0f) {
-        dot = -dot
-        b1 = -b
-    }
-
+    val d = dot(a, b)
+    val absd = abs(d)
     // Prevent blowing up when slerping between two quaternions that are very near each other.
-    return if (dot < dotThreshold) {
-        val angle = acos(dot)
-        val s = sin(angle)
-        a * sin((1.0f - t) * angle) / s + b1 * sin(t * angle) / s
-    } else {
-        // If the angle is too small, use linear interpolation
-        nlerp(a, b1, t)
+    if ((1.0f - absd) < valueEps) {
+        return normalize(lerp(if (d < 0.0f) -a else a, b, t))
     }
+    val npq = sqrt(dot(a, a) * dot(b, b))  // ||p|| * ||q||
+    val acos = acos(clamp(absd / npq, -1.0f, 1.0f))
+    val acos0 = acos * (1.0f - t)
+    val acos1 = acos * t
+    val sina = sin(acos)
+    if (sina < valueEps) {
+        return normalize(lerp(a, b, t))
+    }
+    val isina = 1.0f / sina
+    val s0 = sin(acos0) * isina
+    val s1 = sin(acos1) * isina
+    // ensure we're taking the "short" side
+    return normalize(s0 * a + (if (d < 0.0f) -s1 else (s1)) * b)
 }
 
 fun lerp(a: Quaternion, b: Quaternion, t: Float): Quaternion {
-    return ((1.0f - t) * a) + (t * b)
+    return ((1 - t) * a) + (t * b)
 }
 
 fun nlerp(a: Quaternion, b: Quaternion, t: Float): Quaternion {
@@ -497,12 +324,19 @@ fun nlerp(a: Quaternion, b: Quaternion, t: Float): Quaternion {
 }
 
 /**
- * Convert a Quaternion to Euler angles
+ * Convert a Quaternion to Euler angles using YPR around ZYX respectively
  *
- * @param order The order in which to apply rotations.
- * Default is [RotationsOrder.ZYX] which means that the object will first be rotated around its Z
- * axis, then its Y axis and finally its X axis.
+ * The Euler angles are applied in ZYX order
  */
-fun eulerAngles(q: Quaternion, order: RotationsOrder = RotationsOrder.ZYX): Float3 {
-    return eulerAngles(rotation(q), order)
+fun eulerAngles(q: Quaternion): Float3 {
+    val nq = normalize(q)
+    return Float3(
+            // roll (x-axis rotation)
+            degrees(atan2(2.0f * (nq.y * nq.z + nq.w * nq.x),
+                    nq.w * nq.w - nq.x * nq.x - nq.y * nq.y + nq.z * nq.z)),
+            // pitch (y-axis rotation)
+            degrees(asin(-2.0f * (nq.x * nq.z - nq.w * nq.y))),
+            // yaw (z-axis rotation)
+            degrees(atan2(2.0f * (nq.x * nq.y + nq.w * nq.z),
+                    nq.w * nq.w + nq.x * nq.x - nq.y * nq.y - nq.z * nq.z)))
 }

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

@@ -28,21 +28,12 @@ const val INV_PI      = 1.0f / FPI
 const val INV_TWO_PI  = INV_PI * 0.5f
 const val INV_FOUR_PI = INV_PI * 0.25f
 
-val HALF_ONE = Half(0x3c00.toUShort())
-val HALF_TWO = Half(0x4000.toUShort())
-
-inline fun clamp(x: Float, min: Float, max: Float) = if (x < min) min else (if (x > max) max else x)
-
-inline fun clamp(x: Half, min: Half, max: Half) = if (x < min) min else (if (x > max) max else x)
+inline fun clamp(x: Float, min: Float, max: Float)= if (x < min) min else (if (x > max) max else x)
 
 inline fun saturate(x: Float) = clamp(x, 0.0f, 1.0f)
 
-inline fun saturate(x: Half) = clamp(x, Half.POSITIVE_ZERO, HALF_ONE)
-
 inline fun mix(a: Float, b: Float, x: Float) = a * (1.0f - x) + b * x
 
-inline fun mix(a: Half, b: Half, x: Half) = a * (HALF_ONE - x) + b * x
-
 inline fun degrees(v: Float) = v * (180.0f * INV_PI)
 
 inline fun radians(v: Float) = v * (FPI / 180.0f)
@@ -51,6 +42,4 @@ inline fun fract(v: Float) = v % 1
 
 inline fun sqr(v: Float) = v * v
 
-inline fun sqr(v: Half) = v * v
-
 inline fun pow(x: Float, y: Float) = (x.toDouble().pow(y.toDouble())).toFloat()

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package com.google.android.filament.utils
+package com.google.android.filament.textured
 
 import android.content.res.Resources
 import android.graphics.Bitmap

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

@@ -22,8 +22,6 @@ import kotlin.math.abs
 import kotlin.math.max
 import kotlin.math.min
 import kotlin.math.sqrt
-import kotlin.math.acos
-import kotlin.math.absoluteValue
 
 enum class VectorComponent {
     X, Y, Z, W,
@@ -126,23 +124,11 @@ data class Float2(var x: Float = 0.0f, var y: Float = 0.0f) {
     inline operator fun minus(v: Float) = Float2(x - v, y - v)
     inline operator fun times(v: Float) = Float2(x * v, y * v)
     inline operator fun div(v: Float) = Float2(x / v, y / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Float2(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) = x.equals(v, delta) && y.equals(v, delta)
 
     inline operator fun plus(v: Float2) = Float2(x + v.x, y + v.y)
     inline operator fun minus(v: Float2) = Float2(x - v.x, y - v.y)
     inline operator fun times(v: Float2) = Float2(x * v.x, y * v.y)
     inline operator fun div(v: Float2) = Float2(x / v.x, y / v.y)
-    inline fun compareTo(v: Float2, delta: Float = 0.0f) = Float2(
-        x.compareTo(v.x, delta),
-        y.compareTo(v.y, delta)
-    )
-
-    inline fun equals(v: Float2, delta: Float = 0.0f) = x.equals(v.x, delta) && y.equals(v.y, delta)
 
     inline fun transform(block: (Float) -> Float): Float2 {
         x = block(x)
@@ -305,14 +291,6 @@ data class Float3(var x: Float = 0.0f, var y: Float = 0.0f, var z: Float = 0.0f)
     inline operator fun minus(v: Float) = Float3(x - v, y - v, z - v)
     inline operator fun times(v: Float) = Float3(x * v, y * v, z * v)
     inline operator fun div(v: Float) = Float3(x / v, y / v, z / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Float3(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta),
-        z.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) =
-        x.equals(v, delta) && y.equals(v, delta) && z.equals(v, delta)
 
     inline operator fun plus(v: Float2) = Float3(x + v.x, y + v.y, z)
     inline operator fun minus(v: Float2) = Float3(x - v.x, y - v.y, z)
@@ -323,14 +301,6 @@ data class Float3(var x: Float = 0.0f, var y: Float = 0.0f, var z: Float = 0.0f)
     inline operator fun minus(v: Float3) = Float3(x - v.x, y - v.y, z - v.z)
     inline operator fun times(v: Float3) = Float3(x * v.x, y * v.y, z * v.z)
     inline operator fun div(v: Float3) = Float3(x / v.x, y / v.y, z / v.z)
-    inline fun compareTo(v: Float3, delta: Float = 0.0f) = Float3(
-        x.compareTo(v.x, delta),
-        y.compareTo(v.y, delta),
-        z.compareTo(v.z, delta)
-    )
-
-    inline fun equals(v: Float3, delta: Float = 0.0f) =
-        x.equals(v.x, delta) && y.equals(v.y, delta) && z.equals(v.z, delta)
 
     inline fun transform(block: (Float) -> Float): Float3 {
         x = block(x)
@@ -564,15 +534,6 @@ data class Float4(
     inline operator fun minus(v: Float) = Float4(x - v, y - v, z - v, w - v)
     inline operator fun times(v: Float) = Float4(x * v, y * v, z * v, w * v)
     inline operator fun div(v: Float) = Float4(x / v, y / v, z / v, w / v)
-    inline fun compareTo(v: Float, delta: Float = 0.0f) = Float4(
-        x.compareTo(v, delta),
-        y.compareTo(v, delta),
-        z.compareTo(v, delta),
-        w.compareTo(v, delta)
-    )
-
-    inline fun equals(v: Float, delta: Float = 0.0f) =
-        x.equals(v, delta) && y.equals(v, delta) && z.equals(v, delta) && w.equals(v, delta)
 
     inline operator fun plus(v: Float2) = Float4(x + v.x, y + v.y, z, w)
     inline operator fun minus(v: Float2) = Float4(x - v.x, y - v.y, z, w)
@@ -588,15 +549,6 @@ data class Float4(
     inline operator fun minus(v: Float4) = Float4(x - v.x, y - v.y, z - v.z, w - v.w)
     inline operator fun times(v: Float4) = Float4(x * v.x, y * v.y, z * v.z, w * v.w)
     inline operator fun div(v: Float4) = Float4(x / v.x, y / v.y, z / v.z, w / v.w)
-    inline fun compareTo(v: Float4, delta: Float = 0.0f) = Float4(
-        x.compareTo(v.x, delta),
-        y.compareTo(v.y, delta),
-        z.compareTo(v.z, delta),
-        w.compareTo(v.w, delta)
-    )
-
-    inline fun equals(v: Float4, delta: Float = 0.0f) =
-        x.equals(v.x, delta) && y.equals(v.y, delta) && z.equals(v.z, delta) && w.equals(v.w, delta)
 
     inline fun transform(block: (Float) -> Float): Float4 {
         x = block(x)
@@ -614,12 +566,6 @@ inline operator fun Float.minus(v: Float2) = Float2(this - v.x, this - v.y)
 inline operator fun Float.times(v: Float2) = Float2(this * v.x, this * v.y)
 inline operator fun Float.div(v: Float2) = Float2(this / v.x, this / v.y)
 
-inline fun Float.compareTo(v: Float, delta: Float): Float = when {
-    equals(v, delta) -> 0.0f
-    else -> compareTo(v).toFloat()
-}
-
-inline fun Float.equals(v: Float, delta: Float) = (this - v).absoluteValue < delta
 inline fun abs(v: Float2) = Float2(abs(v.x), abs(v.y))
 inline fun length(v: Float2) = sqrt(v.x * v.x + v.y * v.y)
 inline fun length2(v: Float2) = v.x * v.x + v.y * v.y
@@ -637,11 +583,6 @@ fun refract(i: Float2, n: Float2, eta: Float): Float2 {
     return if (k < 0.0f) Float2(0.0f) else eta * i - (eta * d + sqrt(k)) * n
 }
 
-inline fun angle(a: Float2, b: Float2): Float {
-    val l = length(a) * length(b)
-    return if (l == 0.0f) 0.0f else acos(clamp(dot(a, b) / l, -1.0f, 1.0f))
-}
-
 inline fun clamp(v: Float2, min: Float, max: Float): Float2 {
     return Float2(
             clamp(v.x, min, max),
@@ -685,25 +626,10 @@ inline fun greaterThan(a: Float2, b: Float) = Bool2(a.x > b, a.y > b)
 inline fun greaterThan(a: Float2, b: Float2) = Bool2(a.x > b.y, a.y > b.y)
 inline fun greaterThanEqual(a: Float2, b: Float) = Bool2(a.x >= b, a.y >= b)
 inline fun greaterThanEqual(a: Float2, b: Float2) = Bool2(a.x >= b.x, a.y >= b.y)
-inline fun equal(a: Float2, b: Float, delta: Float = 0.0f) = Bool2(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta)
-)
-
-inline fun equal(a: Float2, b: Float2, delta: Float = 0.0f) = Bool2(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta)
-)
-
-inline fun notEqual(a: Float2, b: Float, delta: Float = 0.0f) = Bool2(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta)
-)
-
-inline fun notEqual(a: Float2, b: Float2, delta: Float = 0.0f) = Bool2(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta)
-)
+inline fun equal(a: Float2, b: Float) = Bool2(a.x == b, a.y == b)
+inline fun equal(a: Float2, b: Float2) = Bool2(a.x == b.x, a.y == b.y)
+inline fun notEqual(a: Float2, b: Float) = Bool2(a.x != b, a.y != b)
+inline fun notEqual(a: Float2, b: Float2) = Bool2(a.x != b.x, a.y != b.y)
 
 inline infix fun Float2.lt(b: Float) = Bool2(x < b, y < b)
 inline infix fun Float2.lt(b: Float2) = Bool2(x < b.x, y < b.y)
@@ -749,11 +675,6 @@ fun refract(i: Float3, n: Float3, eta: Float): Float3 {
     return if (k < 0.0f) Float3(0.0f) else eta * i - (eta * d + sqrt(k)) * n
 }
 
-inline fun angle(a: Float3, b: Float3): Float {
-    val l = length(a) * length(b)
-    return if (l == 0.0f) 0.0f else acos(clamp(dot(a, b) / l, -1.0f, 1.0f))
-}
-
 inline fun clamp(v: Float3, min: Float, max: Float): Float3 {
     return Float3(
             clamp(v.x, min, max),
@@ -801,29 +722,10 @@ inline fun greaterThan(a: Float3, b: Float) = Bool3(a.x > b, a.y > b, a.z > b)
 inline fun greaterThan(a: Float3, b: Float3) = Bool3(a.x > b.y, a.y > b.y, a.z > b.z)
 inline fun greaterThanEqual(a: Float3, b: Float) = Bool3(a.x >= b, a.y >= b, a.z >= b)
 inline fun greaterThanEqual(a: Float3, b: Float3) = Bool3(a.x >= b.x, a.y >= b.y, a.z >= b.z)
-inline fun equal(a: Float3, b: Float, delta: Float = 0.0f) = Bool3(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta),
-    a.z.equals(b, delta)
-)
-
-inline fun equal(a: Float3, b: Float3, delta: Float = 0.0f) = Bool3(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta),
-    a.z.equals(b.z, delta)
-)
-
-inline fun notEqual(a: Float3, b: Float, delta: Float = 0.0f) = Bool3(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta),
-    !a.z.equals(b, delta)
-)
-
-inline fun notEqual(a: Float3, b: Float3, delta: Float = 0.0f) = Bool3(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta),
-    !a.z.equals(b.z, delta)
-)
+inline fun equal(a: Float3, b: Float) = Bool3(a.x == b, a.y == b, a.z == b)
+inline fun equal(a: Float3, b: Float3) = Bool3(a.x == b.x, a.y == b.y, a.z == b.z)
+inline fun notEqual(a: Float3, b: Float) = Bool3(a.x != b, a.y != b, a.z != b)
+inline fun notEqual(a: Float3, b: Float3) = Bool3(a.x != b.x, a.y != b.y, a.z != b.z)
 
 inline infix fun Float3.lt(b: Float) = Bool3(x < b, y < b, z < b)
 inline infix fun Float3.lt(b: Float3) = Bool3(x < b.x, y < b.y, z < b.z)
@@ -905,44 +807,17 @@ inline fun transform(v: Float4, block: (Float) -> Float) = v.copy().transform(bl
 inline fun lessThan(a: Float4, b: Float) = Bool4(a.x < b, a.y < b, a.z < b, a.w < b)
 inline fun lessThan(a: Float4, b: Float4) = Bool4(a.x < b.x, a.y < b.y, a.z < b.z, a.w < b.w)
 inline fun lessThanEqual(a: Float4, b: Float) = Bool4(a.x <= b, a.y <= b, a.z <= b, a.w <= b)
-inline fun lessThanEqual(a: Float4, b: Float4) =
-    Bool4(a.x <= b.x, a.y <= b.y, a.z <= b.z, a.w <= b.w)
-
+inline fun lessThanEqual(a: Float4, b: Float4) = Bool4(a.x <= b.x, a.y <= b.y, a.z <= b.z, a.w <= b.w)
 inline fun greaterThan(a: Float4, b: Float) = Bool4(a.x > b, a.y > b, a.z > b, a.w > b)
 inline fun greaterThan(a: Float4, b: Float4) = Bool4(a.x > b.y, a.y > b.y, a.z > b.z, a.w > b.w)
 inline fun greaterThanEqual(a: Float4, b: Float) = Bool4(a.x >= b, a.y >= b, a.z >= b, a.w >= b)
-inline fun greaterThanEqual(a: Float4, b: Float4) =
-    Bool4(a.x >= b.x, a.y >= b.y, a.z >= b.z, a.w >= b.w)
+inline fun greaterThanEqual(a: Float4, b: Float4) = Bool4(a.x >= b.x, a.y >= b.y, a.z >= b.z, a.w >= b.w)
+inline fun equal(a: Float4, b: Float) = Bool4(a.x == b, a.y == b, a.z == b, a.w == b)
+inline fun equal(a: Float4, b: Float4) = Bool4(a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w)
+inline fun notEqual(a: Float4, b: Float) = Bool4(a.x != b, a.y != b, a.z != b, a.w != b)
+inline fun notEqual(a: Float4, b: Float4) = Bool4(a.x != b.x, a.y != b.y, a.z != b.z, a.w != b.w)
 
-inline fun equal(a: Float4, b: Float, delta: Float = 0.0f) = Bool4(
-    a.x.equals(b, delta),
-    a.y.equals(b, delta),
-    a.z.equals(b, delta),
-    a.w.equals(b, delta)
-)
-
-inline fun equal(a: Float4, b: Float4, delta: Float = 0.0f) = Bool4(
-    a.x.equals(b.x, delta),
-    a.y.equals(b.y, delta),
-    a.z.equals(b.z, delta),
-    a.w.equals(b.w, delta)
-)
-
-inline fun notEqual(a: Float4, b: Float, delta: Float = 0.0f) = Bool4(
-    !a.x.equals(b, delta),
-    !a.y.equals(b, delta),
-    !a.z.equals(b, delta),
-    !a.w.equals(b, delta)
-)
-
-inline fun notEqual(a: Float4, b: Float4, delta: Float = 0.0f) = Bool4(
-    !a.x.equals(b.x, delta),
-    !a.y.equals(b.y, delta),
-    !a.z.equals(b.z, delta),
-    !a.w.equals(b.w, delta)
-)
-
-inline infix fun Float4.lt(b: Float) = Bool4(x < b, y < b, z < b, w < b)
+inline infix fun Float4.lt(b: Float) = Bool4(x < b, y < b, z < b, a < b)
 inline infix fun Float4.lt(b: Float4) = Bool4(x < b.x, y < b.y, z < b.z, w < b.w)
 inline infix fun Float4.lte(b: Float) = Bool4(x <= b, y <= b, z <= b, w <= b)
 inline infix fun Float4.lte(b: Float4) = Bool4(x <= b.x, y <= b.y, z <= b.z, w <= b.w)
@@ -1402,753 +1277,3 @@ data class Bool4(
         set(index4, v)
     }
 }
-
-data class Half2(var x: Half = Half.POSITIVE_ZERO, var y: Half = Half.POSITIVE_ZERO) {
-    constructor(v: Half) : this(v, v)
-    constructor(v: Half2) : this(v.x, v.y)
-
-    inline var r: Half
-        get() = x
-        set(value) {
-            x = value
-        }
-    inline var g: Half
-        get() = y
-        set(value) {
-            y = value
-        }
-
-    inline var s: Half
-        get() = x
-        set(value) {
-            x = value
-        }
-    inline var t: Half
-        get() = y
-        set(value) {
-            y = value
-        }
-
-    inline var xy: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-    inline var rg: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-    inline var st: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-
-    operator fun get(index: VectorComponent) = when (index) {
-        VectorComponent.X, VectorComponent.R, VectorComponent.S -> x
-        VectorComponent.Y, VectorComponent.G, VectorComponent.T -> y
-        else -> throw IllegalArgumentException("index must be X, Y, R, G, S or T")
-    }
-
-    operator fun get(index1: VectorComponent, index2: VectorComponent): Half2 {
-        return Half2(get(index1), get(index2))
-    }
-
-    operator fun get(index: Int) = when (index) {
-        0 -> x
-        1 -> y
-        else -> throw IllegalArgumentException("index must be in 0..1")
-    }
-
-    operator fun get(index1: Int, index2: Int) = Half2(get(index1), get(index2))
-
-    inline operator fun invoke(index: Int) = get(index - 1)
-
-    operator fun set(index: Int, v: Half) = when (index) {
-        0 -> x = v
-        1 -> y = v
-        else -> throw IllegalArgumentException("index must be in 0..1")
-    }
-
-    operator fun set(index1: Int, index2: Int, v: Half) {
-        set(index1, v)
-        set(index2, v)
-    }
-
-    operator fun set(index: VectorComponent, v: Half) = when (index) {
-        VectorComponent.X, VectorComponent.R, VectorComponent.S -> x = v
-        VectorComponent.Y, VectorComponent.G, VectorComponent.T -> y = v
-        else -> throw IllegalArgumentException("index must be X, Y, R, G, S or T")
-    }
-
-    operator fun set(index1: VectorComponent, index2: VectorComponent, v: Half) {
-        set(index1, v)
-        set(index2, v)
-    }
-
-    operator fun unaryMinus() = Half2(-x, -y)
-    operator fun inc() = Half2(x++, y++)
-    operator fun dec() = Half2(x--, y--)
-
-    inline operator fun plus(v: Half) = Half2(x + v, y + v)
-    inline operator fun minus(v: Half) = Half2(x - v, y - v)
-    inline operator fun times(v: Half) = Half2(x * v, y * v)
-    inline operator fun div(v: Half) = Half2(x / v, y / v)
-
-    inline operator fun plus(v: Half2) = Half2(x + v.x, y + v.y)
-    inline operator fun minus(v: Half2) = Half2(x - v.x, y - v.y)
-    inline operator fun times(v: Half2) = Half2(x * v.x, y * v.y)
-    inline operator fun div(v: Half2) = Half2(x / v.x, y / v.y)
-
-    inline fun transform(block: (Half) -> Half): Half2 {
-        x = block(x)
-        y = block(y)
-        return this
-    }
-
-    fun toFloatArray() = floatArrayOf(x.toFloat(), y.toFloat())
-}
-
-data class Half3(
-    var x: Half = Half.POSITIVE_ZERO,
-    var y: Half = Half.POSITIVE_ZERO,
-    var z: Half = Half.POSITIVE_ZERO
-) {
-    constructor(v: Half) : this(v, v, v)
-    constructor(v: Half2, z: Half = Half.POSITIVE_ZERO) : this(v.x, v.y, z)
-    constructor(v: Half3) : this(v.x, v.y, v.z)
-
-    inline var r: Half
-        get() = x
-        set(value) {
-            x = value
-        }
-    inline var g: Half
-        get() = y
-        set(value) {
-            y = value
-        }
-    inline var b: Half
-        get() = z
-        set(value) {
-            z = value
-        }
-
-    inline var s: Half
-        get() = x
-        set(value) {
-            x = value
-        }
-    inline var t: Half
-        get() = y
-        set(value) {
-            y = value
-        }
-    inline var p: Half
-        get() = z
-        set(value) {
-            z = value
-        }
-
-    inline var xy: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-    inline var rg: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-    inline var st: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-
-    inline var rgb: Half3
-        get() = Half3(x, y, z)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-        }
-    inline var xyz: Half3
-        get() = Half3(x, y, z)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-        }
-    inline var stp: Half3
-        get() = Half3(x, y, z)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-        }
-
-    operator fun get(index: VectorComponent) = when (index) {
-        VectorComponent.X, VectorComponent.R, VectorComponent.S -> x
-        VectorComponent.Y, VectorComponent.G, VectorComponent.T -> y
-        VectorComponent.Z, VectorComponent.B, VectorComponent.P -> z
-        else -> throw IllegalArgumentException("index must be X, Y, Z, R, G, B, S, T or P")
-    }
-
-    operator fun get(index1: VectorComponent, index2: VectorComponent): Half2 {
-        return Half2(get(index1), get(index2))
-    }
-    operator fun get(
-        index1: VectorComponent, index2: VectorComponent, index3: VectorComponent): Half3 {
-        return Half3(get(index1), get(index2), get(index3))
-    }
-
-    operator fun get(index: Int) = when (index) {
-        0 -> x
-        1 -> y
-        2 -> z
-        else -> throw IllegalArgumentException("index must be in 0..2")
-    }
-
-    operator fun get(index1: Int, index2: Int) = Half2(get(index1), get(index2))
-    operator fun get(index1: Int, index2: Int, index3: Int): Half3 {
-        return Half3(get(index1), get(index2), get(index3))
-    }
-
-    inline operator fun invoke(index: Int) = get(index - 1)
-
-    operator fun set(index: Int, v: Half) = when (index) {
-        0 -> x = v
-        1 -> y = v
-        2 -> z = v
-        else -> throw IllegalArgumentException("index must be in 0..2")
-    }
-
-    operator fun set(index1: Int, index2: Int, v: Half) {
-        set(index1, v)
-        set(index2, v)
-    }
-
-    operator fun set(index1: Int, index2: Int, index3: Int, v: Half) {
-        set(index1, v)
-        set(index2, v)
-        set(index3, v)
-    }
-
-    operator fun set(index: VectorComponent, v: Half) = when (index) {
-        VectorComponent.X, VectorComponent.R, VectorComponent.S -> x = v
-        VectorComponent.Y, VectorComponent.G, VectorComponent.T -> y = v
-        VectorComponent.Z, VectorComponent.B, VectorComponent.P -> z = v
-        else -> throw IllegalArgumentException("index must be X, Y, Z, R, G, B, S, T or P")
-    }
-
-    operator fun set(index1: VectorComponent, index2: VectorComponent, v: Half) {
-        set(index1, v)
-        set(index2, v)
-    }
-
-    operator fun set(
-        index1: VectorComponent, index2: VectorComponent, index3: VectorComponent, v: Half) {
-        set(index1, v)
-        set(index2, v)
-        set(index3, v)
-    }
-
-    operator fun unaryMinus() = Half3(-x, -y, -z)
-    operator fun inc() = Half3(x++, y++, z++)
-    operator fun dec() = Half3(x--, y--, z--)
-
-    inline operator fun plus(v: Half) = Half3(x + v, y + v, z + v)
-    inline operator fun minus(v: Half) = Half3(x - v, y - v, z - v)
-    inline operator fun times(v: Half) = Half3(x * v, y * v, z * v)
-    inline operator fun div(v: Half) = Half3(x / v, y / v, z / v)
-
-    inline operator fun plus(v: Half2) = Half3(x + v.x, y + v.y, z)
-    inline operator fun minus(v: Half2) = Half3(x - v.x, y - v.y, z)
-    inline operator fun times(v: Half2) = Half3(x * v.x, y * v.y, z)
-    inline operator fun div(v: Half2) = Half3(x / v.x, y / v.y, z)
-
-    inline operator fun plus(v: Half3) = Half3(x + v.x, y + v.y, z + v.z)
-    inline operator fun minus(v: Half3) = Half3(x - v.x, y - v.y, z - v.z)
-    inline operator fun times(v: Half3) = Half3(x * v.x, y * v.y, z * v.z)
-    inline operator fun div(v: Half3) = Half3(x / v.x, y / v.y, z / v.z)
-
-    inline fun transform(block: (Half) -> Half): Half3 {
-        x = block(x)
-        y = block(y)
-        z = block(z)
-        return this
-    }
-
-    fun toFloatArray() = floatArrayOf(x.toFloat(), y.toFloat(), z.toFloat())
-}
-
-data class Half4(
-    var x: Half = Half.POSITIVE_ZERO,
-    var y: Half = Half.POSITIVE_ZERO,
-    var z: Half = Half.POSITIVE_ZERO,
-    var w: Half = Half.POSITIVE_ZERO
-) {
-    constructor(v: Half) : this(v, v, v, v)
-    constructor(v: Half2, z: Half = Half.POSITIVE_ZERO, w: Half = Half.POSITIVE_ZERO) : this(v.x, v.y, z, w)
-    constructor(v: Half3, w: Half = Half.POSITIVE_ZERO) : this(v.x, v.y, v.z, w)
-    constructor(v: Half4) : this(v.x, v.y, v.z, v.w)
-
-    inline var r: Half
-        get() = x
-        set(value) {
-            x = value
-        }
-    inline var g: Half
-        get() = y
-        set(value) {
-            y = value
-        }
-    inline var b: Half
-        get() = z
-        set(value) {
-            z = value
-        }
-    inline var a: Half
-        get() = w
-        set(value) {
-            w = value
-        }
-
-    inline var s: Half
-        get() = x
-        set(value) {
-            x = value
-        }
-    inline var t: Half
-        get() = y
-        set(value) {
-            y = value
-        }
-    inline var p: Half
-        get() = z
-        set(value) {
-            z = value
-        }
-    inline var q: Half
-        get() = w
-        set(value) {
-            w = value
-        }
-
-    inline var xy: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-    inline var rg: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-    inline var st: Half2
-        get() = Half2(x, y)
-        set(value) {
-            x = value.x
-            y = value.y
-        }
-
-    inline var rgb: Half3
-        get() = Half3(x, y, z)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-        }
-    inline var xyz: Half3
-        get() = Half3(x, y, z)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-        }
-    inline var stp: Half3
-        get() = Half3(x, y, z)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-        }
-
-    inline var rgba: Half4
-        get() = Half4(x, y, z, w)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-            w = value.w
-        }
-    inline var xyzw: Half4
-        get() = Half4(x, y, z, w)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-            w = value.w
-        }
-    inline var stpq: Half4
-        get() = Half4(x, y, z, w)
-        set(value) {
-            x = value.x
-            y = value.y
-            z = value.z
-            w = value.w
-        }
-
-    operator fun get(index: VectorComponent) = when (index) {
-        VectorComponent.X, VectorComponent.R, VectorComponent.S -> x
-        VectorComponent.Y, VectorComponent.G, VectorComponent.T -> y
-        VectorComponent.Z, VectorComponent.B, VectorComponent.P -> z
-        VectorComponent.W, VectorComponent.A, VectorComponent.Q -> w
-    }
-
-    operator fun get(index1: VectorComponent, index2: VectorComponent): Half2 {
-        return Half2(get(index1), get(index2))
-    }
-    operator fun get(
-        index1: VectorComponent,
-        index2: VectorComponent,
-        index3: VectorComponent): Half3 {
-        return Half3(get(index1), get(index2), get(index3))
-    }
-    operator fun get(
-        index1: VectorComponent,
-        index2: VectorComponent,
-        index3: VectorComponent,
-        index4: VectorComponent): Half4 {
-        return Half4(get(index1), get(index2), get(index3), get(index4))
-    }
-
-    operator fun get(index: Int) = when (index) {
-        0 -> x
-        1 -> y
-        2 -> z
-        3 -> w
-        else -> throw IllegalArgumentException("index must be in 0..3")
-    }
-
-    operator fun get(index1: Int, index2: Int) = Half2(get(index1), get(index2))
-    operator fun get(index1: Int, index2: Int, index3: Int): Half3 {
-        return Half3(get(index1), get(index2), get(index3))
-    }
-    operator fun get(index1: Int, index2: Int, index3: Int, index4: Int): Half4 {
-        return Half4(get(index1), get(index2), get(index3), get(index4))
-    }
-
-    inline operator fun invoke(index: Int) = get(index - 1)
-
-    operator fun set(index: Int, v: Half) = when (index) {
-        0 -> x = v
-        1 -> y = v
-        2 -> z = v
-        3 -> w = v
-        else -> throw IllegalArgumentException("index must be in 0..3")
-    }
-
-    operator fun set(index1: Int, index2: Int, v: Half) {
-        set(index1, v)
-        set(index2, v)
-    }
-
-    operator fun set(index1: Int, index2: Int, index3: Int, v: Half) {
-        set(index1, v)
-        set(index2, v)
-        set(index3, v)
-    }
-
-    operator fun set(index1: Int, index2: Int, index3: Int, index4: Int, v: Half) {
-        set(index1, v)
-        set(index2, v)
-        set(index3, v)
-        set(index4, v)
-    }
-
-    operator fun set(index: VectorComponent, v: Half) = when (index) {
-        VectorComponent.X, VectorComponent.R, VectorComponent.S -> x = v
-        VectorComponent.Y, VectorComponent.G, VectorComponent.T -> y = v
-        VectorComponent.Z, VectorComponent.B, VectorComponent.P -> z = v
-        VectorComponent.W, VectorComponent.A, VectorComponent.Q -> w = v
-    }
-
-    operator fun set(index1: VectorComponent, index2: VectorComponent, v: Half) {
-        set(index1, v)
-        set(index2, v)
-    }
-
-    operator fun set(
-        index1: VectorComponent, index2: VectorComponent, index3: VectorComponent, v: Half) {
-        set(index1, v)
-        set(index2, v)
-        set(index3, v)
-    }
-
-    operator fun set(
-        index1: VectorComponent, index2: VectorComponent,
-        index3: VectorComponent, index4: VectorComponent, v: Half) {
-        set(index1, v)
-        set(index2, v)
-        set(index3, v)
-        set(index4, v)
-    }
-
-    operator fun unaryMinus() = Half4(-x, -y, -z, -w)
-    operator fun inc() = Half4(x++, y++, z++, w++)
-    operator fun dec() = Half4(x--, y--, z--, w--)
-
-    inline operator fun plus(v: Half) = Half4(x + v, y + v, z + v, w + v)
-    inline operator fun minus(v: Half) = Half4(x - v, y - v, z - v, w - v)
-    inline operator fun times(v: Half) = Half4(x * v, y * v, z * v, w * v)
-    inline operator fun div(v: Half) = Half4(x / v, y / v, z / v, w / v)
-
-    inline operator fun plus(v: Half2) = Half4(x + v.x, y + v.y, z, w)
-    inline operator fun minus(v: Half2) = Half4(x - v.x, y - v.y, z, w)
-    inline operator fun times(v: Half2) = Half4(x * v.x, y * v.y, z, w)
-    inline operator fun div(v: Half2) = Half4(x / v.x, y / v.y, z, w)
-
-    inline operator fun plus(v: Half3) = Half4(x + v.x, y + v.y, z + v.z, w)
-    inline operator fun minus(v: Half3) = Half4(x - v.x, y - v.y, z - v.z, w)
-    inline operator fun times(v: Half3) = Half4(x * v.x, y * v.y, z * v.z, w)
-    inline operator fun div(v: Half3) = Half4(x / v.x, y / v.y, z / v.z, w)
-
-    inline operator fun plus(v: Half4) = Half4(x + v.x, y + v.y, z + v.z, w + v.w)
-    inline operator fun minus(v: Half4) = Half4(x - v.x, y - v.y, z - v.z, w - v.w)
-    inline operator fun times(v: Half4) = Half4(x * v.x, y * v.y, z * v.z, w * v.w)
-    inline operator fun div(v: Half4) = Half4(x / v.x, y / v.y, z / v.z, w / v.w)
-
-    inline fun transform(block: (Half) -> Half): Half4 {
-        x = block(x)
-        y = block(y)
-        z = block(z)
-        w = block(w)
-        return this
-    }
-
-    fun toFloatArray() = floatArrayOf(x.toFloat(), y.toFloat(), z.toFloat(), w.toFloat())
-}
-
-inline fun min(v: Half2) = min(v.x, v.y)
-inline fun min(a: Half2, b: Half2) = Half2(min(a.x, b.x), min(a.y, b.y))
-inline fun max(v: Half2) = max(v.x, v.y)
-inline fun max(a: Half2, b: Half2) = Half2(max(a.x, b.x), max(a.y, b.y))
-
-inline fun transform(v: Half2, block: (Half) -> Half) = v.copy().transform(block)
-
-inline fun lessThan(a: Half2, b: Half) = Bool2(a.x < b, a.y < b)
-inline fun lessThan(a: Half2, b: Half2) = Bool2(a.x < b.x, a.y < b.y)
-inline fun lessThanEqual(a: Half2, b: Half) = Bool2(a.x <= b, a.y <= b)
-inline fun lessThanEqual(a: Half2, b: Half2) = Bool2(a.x <= b.x, a.y <= b.y)
-inline fun greaterThan(a: Half2, b: Half) = Bool2(a.x > b, a.y > b)
-inline fun greaterThan(a: Half2, b: Half2) = Bool2(a.x > b.y, a.y > b.y)
-inline fun greaterThanEqual(a: Half2, b: Half) = Bool2(a.x >= b, a.y >= b)
-inline fun greaterThanEqual(a: Half2, b: Half2) = Bool2(a.x >= b.x, a.y >= b.y)
-inline fun equal(a: Half2, b: Half) = Bool2(a.x == b, a.y == b)
-inline fun equal(a: Half2, b: Half2) = Bool2(a.x == b.x, a.y == b.y)
-inline fun notEqual(a: Half2, b: Half) = Bool2(a.x != b, a.y != b)
-inline fun notEqual(a: Half2, b: Half2) = Bool2(a.x != b.x, a.y != b.y)
-
-inline infix fun Half2.lt(b: Half) = Bool2(x < b, y < b)
-inline infix fun Half2.lt(b: Half2) = Bool2(x < b.x, y < b.y)
-inline infix fun Half2.lte(b: Half) = Bool2(x <= b, y <= b)
-inline infix fun Half2.lte(b: Half2) = Bool2(x <= b.x, y <= b.y)
-inline infix fun Half2.gt(b: Half) = Bool2(x > b, y > b)
-inline infix fun Half2.gt(b: Half2) = Bool2(x > b.x, y > b.y)
-inline infix fun Half2.gte(b: Half) = Bool2(x >= b, y >= b)
-inline infix fun Half2.gte(b: Half2) = Bool2(x >= b.x, y >= b.y)
-inline infix fun Half2.eq(b: Half) = Bool2(x == b, y == b)
-inline infix fun Half2.eq(b: Half2) = Bool2(x == b.x, y == b.y)
-inline infix fun Half2.neq(b: Half) = Bool2(x != b, y != b)
-inline infix fun Half2.neq(b: Half2) = Bool2(x != b.x, y != b.y)
-
-inline operator fun Half.plus(v: Half3) = Half3(this + v.x, this + v.y, this + v.z)
-inline operator fun Half.minus(v: Half3) = Half3(this - v.x, this - v.y, this - v.z)
-inline operator fun Half.times(v: Half3) = Half3(this * v.x, this * v.y, this * v.z)
-inline operator fun Half.div(v: Half3) = Half3(this / v.x, this / v.y, this / v.z)
-
-inline fun abs(v: Half3) = Half3(abs(v.x), abs(v.y), abs(v.z))
-inline fun length(v: Half3) = sqrt(v.x * v.x + v.y * v.y + v.z * v.z)
-inline fun length2(v: Half3) = v.x * v.x + v.y * v.y + v.z * v.z
-inline fun distance(a: Half3, b: Half3) = length(a - b)
-inline fun dot(a: Half3, b: Half3) = a.x * b.x + a.y * b.y + a.z * b.z
-inline fun cross(a: Half3, b: Half3): Half3 {
-    return Half3(a.y * b.z - a.z * b.y, a.z * b.x - a.x * b.z, a.x * b.y - a.y * b.x)
-}
-inline infix fun Half3.x(v: Half3): Half3 {
-    return Half3(y * v.z - z * v.y, z * v.x - x * v.z, x * v.y - y * v.x)
-}
-fun normalize(v: Half3): Half3 {
-    val l = HALF_ONE / length(v)
-    return Half3(v.x * l, v.y * l, v.z * l)
-}
-
-inline fun reflect(i: Half3, n: Half3) = i - HALF_TWO * dot(n, i) * n
-fun refract(i: Half3, n: Half3, eta: Half): Half3 {
-    val d = dot(n, i)
-    val k = HALF_ONE - eta * eta * (HALF_ONE - sqr(d))
-    return if (k < Half.POSITIVE_ZERO) Half3() else eta * i - (eta * d + sqrt(k)) * n
-}
-
-inline fun clamp(v: Half3, min: Half, max: Half): Half3 {
-    return Half3(
-        clamp(v.x, min, max),
-        clamp(v.y, min, max),
-        clamp(v.z, min, max)
-    )
-}
-
-inline fun clamp(v: Half3, min: Half3, max: Half3): Half3 {
-    return Half3(
-        clamp(v.x, min.x, max.x),
-        clamp(v.y, min.y, max.y),
-        clamp(v.z, min.z, max.z)
-    )
-}
-
-inline fun mix(a: Half3, b: Half3, x: Half): Half3 {
-    return Half3(
-        mix(a.x, b.x, x),
-        mix(a.y, b.y, x),
-        mix(a.z, b.z, x)
-    )
-}
-
-inline fun mix(a: Half3, b: Half3, x: Half3): Half3 {
-    return Half3(
-        mix(a.x, b.x, x.x),
-        mix(a.y, b.y, x.y),
-        mix(a.z, b.z, x.z)
-    )
-}
-
-inline fun min(v: Half3) = min(v.x, min(v.y, v.z))
-inline fun min(a: Half3, b: Half3) = Half3(min(a.x, b.x), min(a.y, b.y), min(a.z, b.z))
-inline fun max(v: Half3) = max(v.x, max(v.y, v.z))
-inline fun max(a: Half3, b: Half3) = Half3(max(a.x, b.x), max(a.y, b.y), max(a.z, b.z))
-
-inline fun transform(v: Half3, block: (Half) -> Half) = v.copy().transform(block)
-
-inline fun lessThan(a: Half3, b: Half) = Bool3(a.x < b, a.y < b, a.z < b)
-inline fun lessThan(a: Half3, b: Half3) = Bool3(a.x < b.x, a.y < b.y, a.z < b.z)
-inline fun lessThanEqual(a: Half3, b: Half) = Bool3(a.x <= b, a.y <= b, a.z <= b)
-inline fun lessThanEqual(a: Half3, b: Half3) = Bool3(a.x <= b.x, a.y <= b.y, a.z <= b.z)
-inline fun greaterThan(a: Half3, b: Half) = Bool3(a.x > b, a.y > b, a.z > b)
-inline fun greaterThan(a: Half3, b: Half3) = Bool3(a.x > b.y, a.y > b.y, a.z > b.z)
-inline fun greaterThanEqual(a: Half3, b: Half) = Bool3(a.x >= b, a.y >= b, a.z >= b)
-inline fun greaterThanEqual(a: Half3, b: Half3) = Bool3(a.x >= b.x, a.y >= b.y, a.z >= b.z)
-inline fun equal(a: Half3, b: Half) = Bool3(a.x == b, a.y == b, a.z == b)
-inline fun equal(a: Half3, b: Half3) = Bool3(a.x == b.x, a.y == b.y, a.z == b.z)
-inline fun notEqual(a: Half3, b: Half) = Bool3(a.x != b, a.y != b, a.z != b)
-inline fun notEqual(a: Half3, b: Half3) = Bool3(a.x != b.x, a.y != b.y, a.z != b.z)
-
-inline infix fun Half3.lt(b: Half) = Bool3(x < b, y < b, z < b)
-inline infix fun Half3.lt(b: Half3) = Bool3(x < b.x, y < b.y, z < b.z)
-inline infix fun Half3.lte(b: Half) = Bool3(x <= b, y <= b, z <= b)
-inline infix fun Half3.lte(b: Half3) = Bool3(x <= b.x, y <= b.y, z <= b.z)
-inline infix fun Half3.gt(b: Half) = Bool3(x > b, y > b, z > b)
-inline infix fun Half3.gt(b: Half3) = Bool3(x > b.x, y > b.y, z > b.z)
-inline infix fun Half3.gte(b: Half) = Bool3(x >= b, y >= b, z >= b)
-inline infix fun Half3.gte(b: Half3) = Bool3(x >= b.x, y >= b.y, z >= b.z)
-inline infix fun Half3.eq(b: Half) = Bool3(x == b, y == b, z == b)
-inline infix fun Half3.eq(b: Half3) = Bool3(x == b.x, y == b.y, z == b.z)
-inline infix fun Half3.neq(b: Half) = Bool3(x != b, y != b, z != b)
-inline infix fun Half3.neq(b: Half3) = Bool3(x != b.x, y != b.y, z != b.z)
-
-inline operator fun Half.plus(v: Half4) = Half4(this + v.x, this + v.y, this + v.z, this + v.w)
-inline operator fun Half.minus(v: Half4) = Half4(this - v.x, this - v.y, this - v.z, this - v.w)
-inline operator fun Half.times(v: Half4) = Half4(this * v.x, this * v.y, this * v.z, this * v.w)
-inline operator fun Half.div(v: Half4) = Half4(this / v.x, this / v.y, this / v.z, this / v.w)
-
-inline fun abs(v: Half4) = Half4(abs(v.x), abs(v.y), abs(v.z), abs(v.w))
-inline fun length(v: Half4) = sqrt(v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w)
-inline fun length2(v: Half4) = v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w
-inline fun distance(a: Half4, b: Half4) = length(a - b)
-inline fun dot(a: Half4, b: Half4) = a.x * b.x + a.y * b.y + a.z * b.z + a.w * b.w
-fun normalize(v: Half4): Half4 {
-    val l = HALF_ONE / length(v)
-    return Half4(v.x * l, v.y * l, v.z * l, v.w * l)
-}
-
-inline fun clamp(v: Half4, min: Half, max: Half): Half4 {
-    return Half4(
-        clamp(v.x, min, max),
-        clamp(v.y, min, max),
-        clamp(v.z, min, max),
-        clamp(v.w, min, max)
-    )
-}
-
-inline fun clamp(v: Half4, min: Half4, max: Half4): Half4 {
-    return Half4(
-        clamp(v.x, min.x, max.x),
-        clamp(v.y, min.y, max.y),
-        clamp(v.z, min.z, max.z),
-        clamp(v.w, min.z, max.w)
-    )
-}
-
-inline fun mix(a: Half4, b: Half4, x: Half): Half4 {
-    return Half4(
-        mix(a.x, b.x, x),
-        mix(a.y, b.y, x),
-        mix(a.z, b.z, x),
-        mix(a.w, b.w, x)
-    )
-}
-
-inline fun mix(a: Half4, b: Half4, x: Half4): Half4 {
-    return Half4(
-        mix(a.x, b.x, x.x),
-        mix(a.y, b.y, x.y),
-        mix(a.z, b.z, x.z),
-        mix(a.w, b.w, x.w))
-}
-
-inline fun min(v: Half4) = min(v.x, min(v.y, min(v.z, v.w)))
-inline fun min(a: Half4, b: Half4): Half4 {
-    return Half4(min(a.x, b.x), min(a.y, b.y), min(a.z, b.z), min(a.w, b.w))
-}
-inline fun max(v: Half4) = max(v.x, max(v.y, max(v.z, v.w)))
-inline fun max(a: Half4, b: Half4): Half4 {
-    return Half4(max(a.x, b.x), max(a.y, b.y), max(a.z, b.z), max(a.w, b.w))
-}
-
-inline fun transform(v: Half4, block: (Half) -> Half) = v.copy().transform(block)
-
-inline fun lessThan(a: Half4, b: Half) = Bool4(a.x < b, a.y < b, a.z < b, a.w < b)
-inline fun lessThan(a: Half4, b: Half4) = Bool4(a.x < b.x, a.y < b.y, a.z < b.z, a.w < b.w)
-inline fun lessThanEqual(a: Half4, b: Half) = Bool4(a.x <= b, a.y <= b, a.z <= b, a.w <= b)
-inline fun lessThanEqual(a: Half4, b: Half4) = Bool4(a.x <= b.x, a.y <= b.y, a.z <= b.z, a.w <= b.w)
-inline fun greaterThan(a: Half4, b: Half) = Bool4(a.x > b, a.y > b, a.z > b, a.w > b)
-inline fun greaterThan(a: Half4, b: Half4) = Bool4(a.x > b.y, a.y > b.y, a.z > b.z, a.w > b.w)
-inline fun greaterThanEqual(a: Half4, b: Half) = Bool4(a.x >= b, a.y >= b, a.z >= b, a.w >= b)
-inline fun greaterThanEqual(a: Half4, b: Half4) = Bool4(a.x >= b.x, a.y >= b.y, a.z >= b.z, a.w >= b.w)
-inline fun equal(a: Half4, b: Half) = Bool4(a.x == b, a.y == b, a.z == b, a.w == b)
-inline fun equal(a: Half4, b: Half4) = Bool4(a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w)
-inline fun notEqual(a: Half4, b: Half) = Bool4(a.x != b, a.y != b, a.z != b, a.w != b)
-inline fun notEqual(a: Half4, b: Half4) = Bool4(a.x != b.x, a.y != b.y, a.z != b.z, a.w != b.w)
-
-inline infix fun Half4.lt(b: Half) = Bool4(x < b, y < b, z < b, a < b)
-inline infix fun Half4.lt(b: Half4) = Bool4(x < b.x, y < b.y, z < b.z, w < b.w)
-inline infix fun Half4.lte(b: Half) = Bool4(x <= b, y <= b, z <= b, w <= b)
-inline infix fun Half4.lte(b: Half4) = Bool4(x <= b.x, y <= b.y, z <= b.z, w <= b.w)
-inline infix fun Half4.gt(b: Half) = Bool4(x > b, y > b, z > b, w > b)
-inline infix fun Half4.gt(b: Half4) = Bool4(x > b.x, y > b.y, z > b.z, w > b.w)
-inline infix fun Half4.gte(b: Half) = Bool4(x >= b, y >= b, z >= b, w >= b)
-inline infix fun Half4.gte(b: Half4) = Bool4(x >= b.x, y >= b.y, z >= b.z, w >= b.w)
-inline infix fun Half4.eq(b: Half) = Bool4(x == b, y == b, z == b, w == b)
-inline infix fun Half4.eq(b: Half4) = Bool4(x == b.x, y == b.y, z == b.z, w == b.w)
-inline infix fun Half4.neq(b: Half) = Bool4(x != b, y != b, z != b, w != b)
-inline infix fun Half4.neq(b: Half4) = Bool4(x != b.x, y != b.y, z != b.z, w != b.w)

android/gltfio-android/build.gradle

@@ -16,13 +16,6 @@ android {
             excludes += ['lib/*/libfilament-jni.so']
         }
     }
-
-    publishing {
-        singleVariant("fullRelease") {
-            withSourcesJar()
-            withJavadocJar()
-        }
-    }
 }
 
 dependencies {

android/gradle.properties

@@ -1,5 +1,5 @@
 GROUP=com.google.android.filament
-VERSION_NAME=1.39.0
+VERSION_NAME=1.32.0
 
 POM_DESCRIPTION=Real-time physically based rendering engine for Android.
 
@@ -18,9 +18,6 @@ POM_DEVELOPER_NAME=Filament Team
 org.gradle.jvmargs=-Xmx1536m
 
 android.useAndroidX=true
-android.defaults.buildfeatures.buildconfig=true
-android.nonTransitiveRClass=false
-android.nonFinalResIds=false
 
 com.google.android.filament.tools-dir=../../../out/release/filament
 com.google.android.filament.dist-dir=../out/android-release/filament

android/gradle/gradle-mvn-push.gradle

@@ -86,10 +86,63 @@ afterEvaluate { project ->
         }
     }
 
+    if (project.getPlugins().hasPlugin('com.android.application') ||
+            project.getPlugins().hasPlugin('com.android.library')) {
+
+        task androidJavadocs(type: Javadoc) {
+            source = android.sourceSets.main.java.source
+            classpath += project.files(android.getBootClasspath().join(File.pathSeparator))
+            excludes = ['**/*.kt']
+        }
+
+        task androidJavadocsJar(type: Jar, dependsOn: androidJavadocs) {
+            classifier = 'javadoc'
+            from androidJavadocs.destinationDir
+        }
+
+        task androidSourcesJar(type: Jar) {
+            classifier = 'sources'
+            from android.sourceSets.main.java.source
+        }
+    }
+
+    if (JavaVersion.current().isJava8Compatible()) {
+        allprojects {
+            tasks.withType(Javadoc) {
+                options.addStringOption('Xdoclint:none', '-quiet')
+            }
+        }
+    }
+
+    if (JavaVersion.current().isJava9Compatible()) {
+        allprojects {
+            tasks.withType(Javadoc) {
+                options.addBooleanOption('html5', true)
+            }
+        }
+    }
+
+    artifacts {
+        if (project.getPlugins().hasPlugin('com.android.application') ||
+                project.getPlugins().hasPlugin('com.android.library')) {
+            archives androidSourcesJar
+            archives androidJavadocsJar
+        }
+    }
+
+    android.libraryVariants.all { variant ->
+        tasks.androidJavadocs.doFirst {
+            classpath += files(variant.javaCompileProvider.get().classpath.files.join(File.pathSeparator))
+        }
+    }
+
     publishing.publications.all { publication ->
         publication.groupId = GROUP
         publication.version = VERSION_NAME
 
+        publication.artifact androidSourcesJar
+        publication.artifact androidJavadocsJar
+
         configurePom(publication.pom)
     }
 

android/gradle/wrapper/gradle-wrapper.properties

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

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

@@ -40,11 +40,6 @@ android {
     dependenciesInfo {
         includeInApk = false
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-hello-camera/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -40,11 +36,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-hello-camera/src/main/java/com/google/android/filament/hellocam/MainActivity.kt

@@ -30,7 +30,6 @@ import com.google.android.filament.*
 import com.google.android.filament.RenderableManager.*
 import com.google.android.filament.VertexBuffer.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 
 import java.nio.ByteBuffer
@@ -402,8 +401,6 @@ class MainActivity : Activity(), ActivityCompat.OnRequestPermissionsResultCallba
             camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

android/samples/sample-hello-triangle/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -40,11 +36,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-hello-triangle/src/main/AndroidManifest.xml

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
-  <uses-permission android:name="android.permission.INTERNET" />
-
   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"

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

@@ -29,7 +29,6 @@ import com.google.android.filament.RenderableManager.PrimitiveType
 import com.google.android.filament.VertexBuffer.AttributeType
 import com.google.android.filament.VertexBuffer.VertexAttribute
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 import java.nio.ByteBuffer
 import java.nio.ByteOrder
@@ -120,13 +119,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
-        }
+        // NOTE: Try to disable post-processing (tone-mapping, etc.) to see the difference
+        // view.isPostProcessingEnabled = false
 
         // Tell the view which camera we want to use
         view.camera = camera
@@ -160,11 +154,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)
         }
     }
@@ -314,17 +304,7 @@ class MainActivity : Activity() {
     inner class SurfaceCallback : UiHelper.RendererCallback {
         override fun onNativeWindowChanged(surface: Surface) {
             swapChain?.let { engine.destroySwapChain(it) }
-
-            // at feature level 0, we don't have post-processing, so we need to set
-            // the colorspace to sRGB (FIXME: it's not supported everywhere!)
-            var flags = uiHelper.swapChainFlags
-            if (engine.activeFeatureLevel == Engine.FeatureLevel.FEATURE_LEVEL_0) {
-                if (SwapChain.isSRGBSwapChainSupported(engine)) {
-                    flags = flags or SwapChain.CONFIG_SRGB_COLORSPACE
-                }
-            }
-
-            swapChain = engine.createSwapChain(surface, flags)
+            swapChain = engine.createSwapChain(surface, uiHelper.swapChainFlags)
             displayHelper.attach(renderer, surfaceView.display);
         }
 
@@ -347,8 +327,6 @@ class MainActivity : Activity() {
                     -aspect * zoom, aspect * zoom, -zoom, zoom, 0.0, 10.0)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

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

@@ -17,7 +17,7 @@ material {
     ],
 
     // This material disables all lighting
-    shadingModel : unlit
+    shadingModel : unlit,
 }
 
 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/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -46,11 +42,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

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

@@ -26,7 +26,6 @@ import android.view.animation.LinearInterpolator
 
 import com.google.android.filament.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 
 import java.nio.ByteBuffer
@@ -304,8 +303,6 @@ class MainActivity : Activity() {
             camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

android/samples/sample-lit-cube/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -39,11 +35,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-lit-cube/src/main/java/com/google/android/filament/litcube/MainActivity.kt

@@ -29,7 +29,6 @@ import com.google.android.filament.*
 import com.google.android.filament.RenderableManager.*
 import com.google.android.filament.VertexBuffer.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 
 import java.nio.ByteBuffer
@@ -414,8 +413,6 @@ class MainActivity : Activity() {
             camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

android/samples/sample-live-wallpaper/build.gradle

@@ -3,10 +3,6 @@ apply plugin: 'kotlin-android'
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 android {
     namespace 'com.google.android.filament.livewallpaper'
 
@@ -22,11 +18,6 @@ android {
     dependenciesInfo {
         includeInApk = false
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-live-wallpaper/src/main/java/com/google/android/filament/livewallpaper/Wallpaper.kt

@@ -31,7 +31,6 @@ import android.view.animation.LinearInterpolator
 import androidx.annotation.RequiresApi
 import com.google.android.filament.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 
 class FilamentLiveWallpaper : WallpaperService() {
@@ -227,8 +226,6 @@ class FilamentLiveWallpaper : WallpaperService() {
                 camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
                 view.viewport = Viewport(0, 0, width, height)
-
-                FilamentHelper.synchronizePendingFrames(engine)
             }
         }
     }

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

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     meshInputFile = project.layout.projectDirectory.file("../../../third_party/models/shader_ball/shader_ball.obj")
     meshOutputDir = project.layout.projectDirectory.dir("src/main/assets/models")
@@ -50,11 +46,6 @@ android {
     aaptOptions {
         noCompress 'filamat'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-material-builder/src/main/java/com/google/android/filament/material_builder/MainActivity.kt

@@ -26,7 +26,6 @@ import android.view.animation.LinearInterpolator
 
 import com.google.android.filament.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 import com.google.android.filament.filamat.MaterialBuilder
 
@@ -344,8 +343,6 @@ class MainActivity : Activity() {
             camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 }

android/samples/sample-multi-view/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -39,11 +35,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-multi-view/src/main/java/com/google/android/filament/multiview/MainActivity.kt

@@ -30,7 +30,6 @@ import com.google.android.filament.RenderableManager.*
 import com.google.android.filament.Renderer.ClearOptions
 import com.google.android.filament.VertexBuffer.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 
 import java.nio.ByteBuffer
@@ -459,8 +458,6 @@ class MainActivity : Activity() {
             view1.viewport = Viewport(width / 2, 0,          width / 2, height / 2)
             view2.viewport = Viewport(0,         height / 2, width / 2, height / 2)
             view4.viewport = Viewport(width / 4, height / 4, width / 2, height / 2)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

android/samples/sample-page-curl/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     iblInputFile = project.layout.projectDirectory.file("../../../third_party/environments/studio_small_02_2k.hdr")
     iblOutputDir = project.layout.projectDirectory.dir("src/main/assets/envs")
@@ -42,11 +38,6 @@ android {
     aaptOptions {
         noCompress 'filamat'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-page-curl/src/main/java/com/google/android/filament/pagecurl/MainActivity.java

@@ -37,7 +37,6 @@ import com.google.android.filament.Camera;
 import com.google.android.filament.Engine;
 import com.google.android.filament.Entity;
 import com.google.android.filament.EntityManager;
-import com.google.android.filament.Fence;
 import com.google.android.filament.Filament;
 import com.google.android.filament.IndirectLight;
 import com.google.android.filament.LightManager;
@@ -50,7 +49,6 @@ import com.google.android.filament.TransformManager;
 import com.google.android.filament.Viewport;
 
 import com.google.android.filament.android.DisplayHelper;
-import com.google.android.filament.android.FilamentHelper;
 import com.google.android.filament.android.TextureHelper;
 import com.google.android.filament.android.UiHelper;
 
@@ -109,7 +107,6 @@ public class MainActivity extends Activity
             mCamera.setProjection(60.0, aspect, 1.0, 2000.0, Camera.Fov.HORIZONTAL);
         }
         mView.setViewport(new Viewport(0, 0, width, height));
-        FilamentHelper.synchronizePendingFrames(mEngine);
     }
 
     @Override

android/samples/sample-stream-test/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -40,11 +36,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-stream-test/src/main/java/com/google/android/filament/streamtest/MainActivity.kt

@@ -38,7 +38,6 @@ import android.os.Build
 import android.view.MotionEvent
 import androidx.annotation.RequiresApi
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 
 
 class MainActivity : Activity(), ActivityCompat.OnRequestPermissionsResultCallback {
@@ -402,8 +401,6 @@ class MainActivity : Activity(), ActivityCompat.OnRequestPermissionsResultCallba
             camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

android/samples/sample-texture-view/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -40,11 +36,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

android/samples/sample-texture-view/src/main/java/com/google/android/filament/textureview/MainActivity.kt

@@ -29,7 +29,6 @@ import com.google.android.filament.RenderableManager.PrimitiveType
 import com.google.android.filament.VertexBuffer.AttributeType
 import com.google.android.filament.VertexBuffer.VertexAttribute
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 import java.nio.ByteBuffer
 import java.nio.ByteOrder
@@ -328,8 +327,6 @@ class MainActivity : Activity() {
                     -aspect * zoom, aspect * zoom, -zoom, zoom, 0.0, 10.0)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

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

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -47,11 +43,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

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

@@ -26,7 +26,6 @@ import android.view.animation.LinearInterpolator
 
 import com.google.android.filament.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.utils.*
 import com.google.android.filament.android.UiHelper
 
@@ -324,8 +323,6 @@ class MainActivity : Activity() {
             camera.setProjection(45.0, aspect, 0.1, 20.0, Camera.Fov.VERTICAL)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

android/samples/sample-transparent-view/build.gradle

@@ -6,10 +6,6 @@ plugins {
 
 project.ext.isSample = true
 
-kotlin {
-    jvmToolchain(versions.jdk)
-}
-
 filamentTools {
     materialInputDir = project.layout.projectDirectory.dir("src/main/materials")
     materialOutputDir = project.layout.projectDirectory.dir("src/main/assets/materials")
@@ -40,11 +36,6 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
-
-    compileOptions {
-        sourceCompatibility versions.jdk
-        targetCompatibility versions.jdk
-    }
 }
 
 dependencies {

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

@@ -33,7 +33,6 @@ import com.google.android.filament.*
 import com.google.android.filament.RenderableManager.*
 import com.google.android.filament.VertexBuffer.*
 import com.google.android.filament.android.DisplayHelper
-import com.google.android.filament.android.FilamentHelper
 import com.google.android.filament.android.UiHelper
 
 import java.nio.ByteBuffer
@@ -351,8 +350,6 @@ class MainActivity : Activity() {
                     -aspect * zoom, aspect * zoom, -zoom, zoom, 0.0, 10.0)
 
             view.viewport = Viewport(0, 0, width, height)
-
-            FilamentHelper.synchronizePendingFrames(engine)
         }
     }
 

build.sh

@@ -491,7 +491,6 @@ function build_android {
                 ./gradlew \
                     -Pcom.google.android.filament.dist-dir=../out/android-debug/filament \
                     -Pcom.google.android.filament.abis=${ABI_GRADLE_OPTION} \
-                    ${MATOPT_GRADLE_OPTION} \
                     :samples:${sample}:assembleDebug
             done
         fi
@@ -540,7 +539,6 @@ function build_android {
                 ./gradlew \
                     -Pcom.google.android.filament.dist-dir=../out/android-release/filament \
                     -Pcom.google.android.filament.abis=${ABI_GRADLE_OPTION} \
-                    ${MATOPT_GRADLE_OPTION} \
                     :samples:${sample}:assembleRelease
             done
         fi
@@ -758,7 +756,7 @@ function run_tests {
 
 pushd "$(dirname "$0")" > /dev/null
 
-while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
+while getopts ":hacCfijmp:q:uvslwtedk:b" opt; do
     case ${opt} in
         h)
             print_help

build/android/build.sh

@@ -44,20 +44,13 @@ elif [[ "$LC_UNAME" == "darwin" ]]; then
 fi
 source `dirname $0`/../common/build-common.sh
 
-if [[ "$GITHUB_WORKFLOW" ]]; then
-    java_version=$(java -version 2>&1 | head -1 | cut -d'"' -f2 | sed '/^1\./s///' | cut -d'.' -f1)
-    if [[ "$java_version" < 17 ]]; then
-        echo "Android builds require Java 17, found version ${java_version} instead"
-        exit 0
-    fi
-fi
-
 # Unless explicitly specified, NDK version will be set to match exactly the required one
 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
-    ${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager "ndk;$FILAMENT_NDK_VERSION" > /dev/null
+    # 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
 fi
 
 # Only build 1 64 bit target during presubmit to cut down build times during presubmit

build/common/bump-version.sh

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

build/common/ci-common.sh

@@ -3,4 +3,12 @@
 if [[ "$GITHUB_WORKFLOW" ]]; then
     echo "Running workflow $GITHUB_WORKFLOW (event: $GITHUB_EVENT_NAME, action: $GITHUB_ACTION)"
     CONTINUOUS_INTEGRATION=true
+
+    # Force Java to be Java 11 minimum, it defaults to 8 in GitHub runners for some platforms
+    export JAVA_HOME=${JAVA_HOME_11_X64}
+    java_version=$(java -version 2>&1 | head -1 | cut -d'"' -f2 | sed '/^1\./s///' | cut -d'.' -f1)
+    if [[ "$java_version" < 11 ]]; then
+        echo "Android builds require Java 11, found version ${java_version} instead"
+        exit 0
+    fi
 fi

docs/Filament.md.html

@@ -200,7 +200,7 @@ Energy conservation is one of the key components of a good BRDF for physically b
 
 ## Specular BRDF
 
-For the specular term, $f_r$ is a mirror BRDF that can be modeled with the Fresnel law, noted $F$ in the Cook-Torrance approximation of the microfacet model integration:
+For the specular term, $f_m$ is a mirror BRDF that can be modeled with the Fresnel law, noted $F$ in the Cook-Torrance approximation of the microfacet model integration:
 
 $$\begin{equation}
 f_r(v,l) = \frac{D(h, \alpha) G(v, l, \alpha) F(v, h, f0)}{4(\NoV)(\NoL)}
@@ -485,7 +485,7 @@ void BRDF(...) {
     // perceptually linear roughness to roughness (see parameterization)
     float roughness = perceptualRoughness * perceptualRoughness;
 
-    float D = D_GGX(NoH, roughness);
+    float D = D_GGX(NoH, a);
     vec3  F = F_Schlick(LoH, f0);
     float V = V_SmithGGXCorrelated(NoV, NoL, roughness);
 
@@ -2016,7 +2016,7 @@ I(f(n, v, \alpha))        \equiv \frac{1}{N}\sum_{\forall \, i \in image} f(l_i,
 \end{equation}$$
 
 However, in practice we're using _importance sampling_ which needs to take the $pdf$ of the distribution
-into account and adds a term $\frac{4\left<\VoH\right>}{D(h_i, \alpha)\left<\NoH\right>}$.
+into account and adds a term $\frac{\left<\VoH\right>}{D(h_i, \alpha)\left<\NoH\right>}$.
 See Importance Sampling For The IBL section:
 
 $$\begin{equation}\label{iblImportanceSampling}
@@ -3486,15 +3486,15 @@ The _important direction samples_ $l_i$ are calculated as the reflection of $v$
 **do not** have the same PDF as $h_i$. The PDF of a transformed distribution is given by:
 
 $$\begin{equation}
-p(T_r(x)) = p(x) |J(T_r)|^{-1}
+p(T_r(x)) = p(x) |J(T_r)|
 \end{equation}$$
 
 Where $|J(T_r)|$ is the determinant of the Jacobian of the transform. In our case we're considering
 the transform from $h_i$ to $l_i$ and the determinant of its Jacobian is given in \ref{iblPDF}.
 
 $$\begin{equation}\label{iblPDF}
-p(l,v,\Theta) = D(h,\alpha) \left< \NoH \right> |J_{h \rightarrow l}|^{-1} \\
-|J_{h \rightarrow l}| = 4 \left< \VoH \right>
+p(l,v,\Theta) = D(h,\alpha) \left< \NoH \right> |J_{h \rightarrow l}| \\
+|J_{h \rightarrow l}| = \frac{1}{4 \left< \VoH \right>}
 \end{equation}$$
 
 ### Choosing important directions

docs/Materials.md.html

@@ -1076,63 +1076,6 @@ fragment {
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-### General: constants
-
-Type
-:   array of constant objects
-
-Value
-:   Each entry is an object with the properties `name` and `type`, both of `string` type. The name
-    must be a valid GLSL identifier. Entries also have an optional `default`, which can either be a
-    `bool` or `number`, depending on the `type` of the constant. The type must be one of the types
-    described in table [materialConstantsTypes].
-
-         Type          |            Description                   |      Default
-:----------------------|:-----------------------------------------|:------------------
-int                    | A signed, 32 bit GLSL int                |         0
-float                  | A single-precision GLSL float            |         0.0
-bool                   | A GLSL bool                              |         false
-[Table [materialConstantsTypes]: Material constants types]
-
-Description
-:   Lists the constant parameters accepted by your material. These constants can be set, or
-    "specialized", at runtime when loading a material package. Multiple materials can be loaded from
-    the same material package with differing constant parameter specializations. Once a material is
-    loaded from a material package, its constant parameters cannot be changed. Compared to regular
-    parameters, constant parameters allow the compiler to generate more efficient code. Access
-    constant parameters from the shader by prefixing the name with `materialConstant_`. For example,
-    a constant parameter named `myConstant` is accessed in the shader as
-    `materialConstant_myConstant`. If a constant parameter is not set at runtime, the default is
-    used.
-
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ JSON
-material {
-    constants : [
-        {
-           name : overrideAlpha,
-           type : bool
-        },
-        {
-           name : customAlpha,
-           type : float,
-           default : 0.5
-        }
-    ],
-    shadingModel : lit,
-    blending : transparent,
-}
-
-fragment {
-    void material(inout MaterialInputs material) {
-        prepareMaterial(material);
-        if (materialConstants_overrideAlpha) {
-            material.baseColor.a = materialConstants_customAlpha;
-            material.baseColor.rgb *= material.baseColor.a;
-        }
-    }
-}
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 ### General: variantFilter
 
 Type
@@ -2363,7 +2306,7 @@ type aliases:
 **getUserWorldFromWorldMatrix()**   | float4x4 |  Matrix that converts from world space to API-level (user) world space.
 **getTime()**                       | float    |  Current time as a remainder of 1 second. Yields a value between 0 and 1
 **getUserTime()**                   | float4   |  Current time in seconds: `time`, `(double)time - time`, `0`, `0`
-**getUserTimeMod(float m)**         | float    |  Current time modulo m in seconds
+**getUserTimeMode(float m)**        | float    |  Current time modulo m in seconds
 **getExposure()**                   | float    |  Photometric exposure of the camera
 **getEV100()**                      | float    |  [Exposure value at ISO 100](https://en.wikipedia.org/wiki/Exposure_value) of the camera
 
@@ -2372,15 +2315,6 @@ type aliases:
     match the API-level world space. To obtain the position of the API-level camera, custom
     materials can use `getUserWorldFromWorldMatrix()` to transform `getWorldCameraPosition()`.
 
-### Material globals
-
-                 Name               |   Type   |            Description
-:-----------------------------------|:--------:|:------------------------------------
-**getMaterialGlobal0()**            | float4   | A vec4 visible by all materials, its value is set by `View::setMaterialGlobal(0, float4)`. Its default value is {0,0,0,1}.
-**getMaterialGlobal1()**            | float4   | A vec4 visible by all materials, its value is set by `View::setMaterialGlobal(1, float4)`. Its default value is {0,0,0,1}.
-**getMaterialGlobal2()**            | float4   | A vec4 visible by all materials, its value is set by `View::setMaterialGlobal(2, float4)`. Its default value is {0,0,0,1}.
-**getMaterialGlobal3()**            | float4   | A vec4 visible by all materials, its value is set by `View::setMaterialGlobal(3, float4)`. Its default value is {0,0,0,1}.
-
 ### Vertex only
 
 The following APIs are only available from the vertex block:
@@ -2593,26 +2527,4 @@ 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/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 -a opengl -p mobile -o plastic.filamat plastic.mat
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc<span style="color: #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
 </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 -x pillars_2k --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 pillars_2k.hdr
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen<span style="color: #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
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;plastic.filamat&#39;</span><span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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>
 
-Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>ibl_url,<span style="color: #bbbbbb"> </span>sky_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #3D7B7B; font-style: italic">// Create some global aliases to enums for convenience.</span><span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.AttributeType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer$AttributeType;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.PrimitiveType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.RenderableManager$PrimitiveType;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.IndexType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer$IndexType;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000">window</span>.LightType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.LightManager$Type;<span style="color: #bbbbbb"></span>
+Filament.init([<span style="color: #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;
 
-<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: #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: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createScene();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">class</span><span style="color: #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: #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: #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: #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><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>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>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>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>Fov.VERTICAL);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
-}<span style="color: #bbbbbb"></span>
+<span style="color: #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>}
+}
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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();
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>red<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0.8</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.0</span>];<span style="color: #bbbbbb"></span>
-matinstance.setColor3Parameter(<span style="color: #BA2121">&#39;baseColor&#39;</span>,<span style="color: #bbbbbb"> </span>Filament.RgbType.sRGB,<span style="color: #bbbbbb"> </span>red);<span style="color: #bbbbbb"></span>
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.5</span>);<span style="color: #bbbbbb"></span>
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoat&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>);<span style="color: #bbbbbb"></span>
-matinstance.setFloatParameter(<span style="color: #BA2121">&#39;clearCoatRoughness&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.3</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>);
 </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();<span style="color: #bbbbbb"></span>
-scene.addEntity(renderable);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 
-<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>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>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>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>ib<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndexBuffer.Builder()<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.indexCount(icosphere.triangles.length)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.bufferType(IndexType.USHORT)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 
-vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>icosphere.vertices);<span style="color: #bbbbbb"></span>
-vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>icosphere.tangents);<span style="color: #bbbbbb"></span>
-ib.setBuffer(engine,<span style="color: #bbbbbb"> </span>icosphere.triangles);<span style="color: #bbbbbb"></span>
+vb.setBufferAt(engine,<span style="color: #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);
 
-Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.boundingBox({<span style="color: #bbbbbb"> </span>center<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>],<span style="color: #bbbbbb"> </span>halfExtent<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]<span style="color: #bbbbbb"> </span>})<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinstance)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.geometry(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>PrimitiveType.TRIANGLES,<span style="color: #bbbbbb"> </span>vb,<span style="color: #bbbbbb"> </span>ib)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>renderable);<span style="color: #bbbbbb"></span>
+Filament.RenderableManager.Builder(<span style="color: #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);
 </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();<span style="color: #bbbbbb"></span>
-scene.addEntity(sunlight);<span style="color: #bbbbbb"></span>
-Filament.LightManager.Builder(LightType.SUN)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.color([<span style="color: #666666">0.98</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.92</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.89</span>])<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">110000.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.direction([<span style="color: #666666">0.6</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-0.8</span>])<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.sunAngularRadius(<span style="color: #666666">1.9</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.sunHaloSize(<span style="color: #666666">10.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.sunHaloFalloff(<span style="color: #666666">80.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.build(engine,<span style="color: #bbbbbb"> </span>sunlight);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>backlight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
-scene.addEntity(backlight);<span style="color: #bbbbbb"></span>
-Filament.LightManager.Builder(LightType.DIRECTIONAL)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span>.direction([<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>])<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span>.build(engine,<span style="color: #bbbbbb"> </span>backlight);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 </pre></div>
 
 <p>The <code>SUN</code> light source is similar to the <code>DIRECTIONAL</code> light source, but has some extra
 parameters because Filament will automatically draw a disk into the skybox.</p>
 <p>Next we need to create an <code>IndirectLight</code> object from the KTX IBL. One way of doing this is the
 following (don&#x27;t type this out, there&#x27;s an easier way).</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>format<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataFormat.RGB;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>datatype<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelDataType.UINT_10F_11F_11F_REV;<span style="color: #bbbbbb"></span>
+<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;
 
-<span style="color: #3D7B7B; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[ibl_url]);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>iblktx<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.Ktx1Bundle(ibl_package);<span style="color: #bbbbbb"></span>
+<span style="color: #3D7B7B; font-style: italic">// Create a Texture object for the mipmapped cubemap.</span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibltex<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Texture.Builder()<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.width(iblktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.height(iblktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.levels(iblktx.getNumMipLevels())<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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">for</span><span style="color: #bbbbbb"> </span>(<span style="color: #008000; font-weight: bold">let</span><span style="color: #bbbbbb"> </span>level<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>;<span style="color: #bbbbbb"> </span>level<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span>iblktx.getNumMipLevels();<span style="color: #bbbbbb"> </span><span style="color: #666666">++</span>level)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>uint8array<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>iblktx.getCubeBlob(level).getBytes();<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>pixelbuffer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelBuffer(uint8array,<span style="color: #bbbbbb"> </span>format,<span style="color: #bbbbbb"> </span>datatype);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>ibltex.setImageCube(engine,<span style="color: #bbbbbb"> </span>level,<span style="color: #bbbbbb"> </span>pixelbuffer);<span style="color: #bbbbbb"></span>
-}<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">for</span><span style="color: #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: #3D7B7B; font-style: italic">// Parse the spherical harmonics metadata.</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>shstring<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>iblktx.getMetadata(<span style="color: #BA2121">&#39;sh&#39;</span>);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>shfloats<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>shstring.split(<span style="color: #A45A77">/\s/</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">9</span><span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>).map(<span style="color: #008000">parseFloat</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #3D7B7B; font-style: italic">// Parse the spherical harmonics metadata.</span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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">// Build the IBL object and insert it into the scene.</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.IndirectLight.Builder()<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.reflections(ibltex)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.irradianceSh(<span style="color: #666666">3</span>,<span style="color: #bbbbbb"> </span>shfloats)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.intensity(<span style="color: #666666">50000.0</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
+<span style="color: #3D7B7B; font-style: italic">// Build the IBL object and insert it into the scene.</span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 
-scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
+scene.setIndirectLight(indirectLight);
 </pre></div>
 
 <p>Filament provides a JavaScript utility to make this simpler,
 simply replace the <strong>create IBL</strong> comment with the following snippet.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
-indirectLight.setIntensity(<span style="color: #666666">50000</span>);<span style="color: #bbbbbb"></span>
-scene.setIndirectLight(indirectLight);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 </pre></div>
 
 <h2>Add background</h2>
 <p>At this point you can run the demo and you should see a red plastic ball against a black background.
 Without a skybox, the reflections on the ball are not representative of its surroundings.
 Here&#x27;s one way to create a texture for the skybox:</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_package<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Buffer(Filament.assets[sky_url]);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skyktx<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.Ktx1Bundle(sky_package);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skytex<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Texture.Builder()<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.width(skyktx.info().pixelWidth)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.height(skyktx.info().pixelHeight)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.levels(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.sampler(Filament.Texture$Sampler.SAMPLER_CUBEMAP)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.format(Filament.Texture$InternalFormat.RGBA8)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>.build(engine);<span style="color: #bbbbbb"></span>
+<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);
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>uint8array<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>skyktx.getCubeBlob(<span style="color: #666666">0</span>).getBytes();<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>pixelbuffer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.PixelBuffer(uint8array,<span style="color: #bbbbbb"> </span>format,<span style="color: #bbbbbb"> </span>datatype);<span style="color: #bbbbbb"></span>
-skytex.setImageCube(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>pixelbuffer);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 </pre></div>
 
 <p>Filament provides a Javascript utility to make this easier.
 Replace <strong>create skybox</strong> with the following.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createSkyFromKtx1(sky_url);<span style="color: #bbbbbb"></span>
-scene.setSkybox(skybox);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 </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,7 +15,7 @@ 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 --compress monkey.obj suzanne.filamesh
+<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
 </pre></div>
 
 <h2>Create mipmapped textures</h2>
@@ -23,26 +23,26 @@ converting <a href="https://github.com/google/filament/blob/main/assets/models/m
 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 albedo.png albedo.ktx
-mipgen --compression<span style="color: #666666">=</span>astc_fast_ldr_4x4 albedo.png albedo_astc.ktx
-mipgen --compression<span style="color: #666666">=</span>s3tc_rgb_dxt1 albedo.png albedo_s3tc_srgb.ktx
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the normal map and a compressed variant.</span>
-mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear normal.png normal.ktx
-mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear --compression<span style="color: #666666">=</span>etc_rgb8_normalxyz_40 <span style="color: #AA5D1F; font-weight: bold">\</span>
-    normal.png normal_etc.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>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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component roughness map and a compressed variant.</span>
-mipgen --grayscale roughness.png roughness.ktx
-mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_numeric_40 roughness.png roughness_etc.ktx
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component metallic map and a compressed variant.</span>
-mipgen --grayscale metallic.png metallic.ktx
-mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_numeric_40 metallic.png metallic_etc.ktx
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component occlusion map and a compressed variant.</span>
-mipgen --grayscale ao.png ao.ktx
-mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_numeric_40 ao.png ao_etc.ktx
+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
 </pre></div>
 
 <p>For more information on mipgen&#x27;s arguments and supported formats, do <code>mipgen --help</code>.</p>
@@ -50,12 +50,12 @@ mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_num
 <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 -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=64</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
-<span style="color: #008000">cd</span> venetian* ; mv venetian*_ibl.ktx venetian_crossroads_2k_skybox_tiny.ktx ; <span style="color: #008000">cd</span> -
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen<span style="color: #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>-
 
-cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
-cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
-cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen<span style="color: #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
 </pre></div>
 
 <h2>Define textured material</h2>
@@ -91,7 +91,7 @@ fragment {
 </pre></div>
 
 <p>Next, invoke <code>matc</code> as follows.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc -a opengl -p mobile -o textured.filamat textured.mat
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc<span style="color: #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
 </pre></div>
 
 <p>You should now have a material archive in your working directory. For the suzanne asset, the normal
@@ -101,62 +101,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><span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// TODO: declare asset URLs</span>
 
-Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>filamesh_url,<span style="color: #bbbbbb"> </span>sky_small_url,<span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);<span style="color: #bbbbbb"></span>
-});<span style="color: #bbbbbb"></span>
+Filament.init([<span style="color: #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>]);
+});
 
-<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">class</span><span style="color: #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: #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>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>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: #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: #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: #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: #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">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">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">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">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><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: #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>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>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>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">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov,<span style="color: #bbbbbb"> </span>fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1</span><span style="color: #bbbbbb"> </span><span style="color: #666666">?</span><span style="color: #bbbbbb"> </span>Fov.HORIZONTAL<span style="color: #bbbbbb"> </span><span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>Fov.VERTICAL;<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>fov);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
-}<span style="color: #bbbbbb"></span>
+<span style="color: #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>}
+}
 </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 +172,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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>texture_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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>);
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_small_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox_tiny.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_large_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`albedo</span><span style="color: #A45A77; font-weight: bold">${</span>albedo_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`ao</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`metallic</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`normal</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`roughness</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;textured.filamat&#39;</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;suzanne.filamesh&#39;</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>;
 </pre></div>
 
 <h2>Create skybox and IBL</h2>
 <p>Next, let&#x27;s create the low-resolution skybox and IBL in the <code>App</code> constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666666">100000</span>);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);<span style="color: #bbbbbb"></span>
+<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);
 </pre></div>
 
 <p>This allows users to see a reasonable background fairly quickly, before larger assets have finished
@@ -206,31 +206,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: #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: #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: #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: #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: #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);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>Filament.fetch([sky_large_url,<span style="color: #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);
 
-<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">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">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: #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: #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: #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: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
-});<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.suzanne);
+});
 </pre></div>
 
 <h2>Introduce trackball rotation</h2>
@@ -241,13 +241,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>});<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball<span style="color: #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>});
 </pre></div>
 
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
-tcm.setTransform(inst,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());<span style="color: #bbbbbb"></span>
-inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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>();
 </pre></div>
 
 <p>That&#x27;s it, we now have a fast-loading interactive demo. The complete JavaScript file is available

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: #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>
+    &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>}
 <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: #bbbbbb">  </span><span style="color: #008000; font-weight: bold">constructor</span>()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: create entities</span><span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span><span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: adjust viewport and canvas</span><span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">  </span>}<span style="color: #bbbbbb"></span>
-}<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">class</span><span style="color: #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>}
+}
 
-Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App()<span style="color: #bbbbbb"> </span>}<span style="color: #bbbbbb"> </span>);<span style="color: #bbbbbb"></span>
+Filament.init([<span style="color: #BA2121">&#39;triangle.filamat&#39;</span>],<span style="color: #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>);
 </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 -m http.server     <span style="color: #3D7B7B; font-style: italic"># Python 3</span>
-python -m SimpleHTTPServer <span style="color: #3D7B7B; font-style: italic"># Python 2.7</span>
-npx http-server -p <span style="color: #666666">8000</span>    <span style="color: #3D7B7B; font-style: italic"># nodejs</span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>python3<span style="color: #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>
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(<span style="color: #008000; font-weight: bold">this</span>.canvas);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #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);
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.triangle<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.EntityManager.get().create();<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #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);
 </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: #bbbbbb">    </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">2</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">2</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">Math</span>.cos(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">4</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"> </span><span style="color: #008000">Math</span>.sin(<span style="color: #008000">Math</span>.PI<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span><span style="color: #666666">4</span><span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">3</span>),<span style="color: #bbbbbb"></span>
-]);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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>),
+]);
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>TRIANGLE_COLORS<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Uint32Array</span>([<span style="color: #666666">0xffff0000</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0xff00ff00</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0xff0000ff</span>]);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>]);
 </pre></div>
 
 <p>Next we&#x27;ll use the positions and colors buffers to create a single <code>VertexBuffer</code> object.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>VertexAttribute<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexAttribute;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>AttributeType<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer$AttributeType;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.vb<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.VertexBuffer.Builder()<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.vertexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.bufferCount(<span style="color: #666666">2</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.attribute(VertexAttribute.POSITION,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>AttributeType.FLOAT2,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">8</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.attribute(VertexAttribute.COLOR,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>AttributeType.UBYTE4,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.normalized(VertexAttribute.COLOR)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.build(engine);<span style="color: #bbbbbb"></span>
+<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);
 
-<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_POSITIONS);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span>TRIANGLE_COLORS);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.vb.setBufferAt(engine,<span style="color: #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);
 </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>
-<span style="color: #bbbbbb">    </span>.indexCount(<span style="color: #666666">3</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.bufferType(Filament.IndexBuffer$IndexType.USHORT)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.build(engine);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.ib<span style="color: #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);
 
-<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine,<span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Uint16Array</span>([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">2</span>]));<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.ib.setBuffer(engine,<span style="color: #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>]));
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>matinst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>mat.getDefaultInstance();<span style="color: #bbbbbb"></span>
-Filament.RenderableManager.Builder(<span style="color: #666666">1</span>)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.boundingBox({<span style="color: #bbbbbb"> </span>center<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>],<span style="color: #bbbbbb"> </span>halfExtent<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]<span style="color: #bbbbbb"> </span>})<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.material(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>matinst)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.geometry(<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>Filament.RenderableManager$PrimitiveType.TRIANGLES,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.vb,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.ib)<span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span>.build(engine,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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);
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createRenderer();<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>engine.createView();<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #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);
 
-<span style="color: #3D7B7B; font-style: italic">// Set up a blue-green background:</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0.2</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>],<span style="color: #bbbbbb"> </span>clear<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">true</span>});<span style="color: #bbbbbb"></span>
+<span style="color: #3D7B7B; font-style: italic">// Set up a blue-green background:</span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer.setClearOptions({clearColor<span style="color: #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">// Adjust the initial viewport:</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
+<span style="color: #3D7B7B; font-style: italic">// Adjust the initial viewport:</span>
+<span style="color: #008000; font-weight: bold">this</span>.resize();
 </pre></div>
 
 <p>At this point, we&#x27;re done creating all Filament entities, and the code should run without errors.
@@ -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: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// TODO: render scene</span><span style="color: #bbbbbb"></span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
-}<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>render()<span style="color: #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);
+}
 </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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>radians<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">Date</span>.now()<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1000</span>;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>transform<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>mat4.fromRotation(mat4.create(),<span style="color: #bbbbbb"> </span>radians,<span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>]);<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.triangle);<span style="color: #bbbbbb"></span>
-tcm.setTransform(inst,<span style="color: #bbbbbb"> </span>transform);<span style="color: #bbbbbb"></span>
-inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// Rotate the triangle.</span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>();
 
-<span style="color: #3D7B7B; font-style: italic">// Render the frame.</span><span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
+<span style="color: #3D7B7B; font-style: italic">// Render the frame.</span>
+<span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
 </pre></div>
 
 <p>The first half of our render method obtains the transform component of the triangle entity and uses
@@ -225,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: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #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]);
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Projection<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Projection;<span style="color: #bbbbbb"></span>
-<span style="color: #008000; font-weight: bold">this</span>.camera.setProjection(Projection.ORTHO,<span style="color: #bbbbbb"> </span><span style="color: #666666">-</span>aspect,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">-1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #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>);
 </pre></div>
 
 <p>You should now have a spinning triangle! The completed JavaScript is available

filament/CMakeLists.txt

@@ -26,7 +26,6 @@ set(PUBLIC_HDRS
         include/filament/Frustum.h
         include/filament/IndexBuffer.h
         include/filament/IndirectLight.h
-        include/filament/InstanceBuffer.h
         include/filament/LightManager.h
         include/filament/Material.h
         include/filament/MaterialInstance.h
@@ -68,7 +67,6 @@ set(SRCS
         src/HwRenderPrimitiveFactory.cpp
         src/IndexBuffer.cpp
         src/IndirectLight.cpp
-        src/InstanceBuffer.cpp
         src/LightManager.cpp
         src/Material.cpp
         src/MaterialInstance.cpp
@@ -110,7 +108,6 @@ set(SRCS
         src/details/Fence.cpp
         src/details/IndexBuffer.cpp
         src/details/IndirectLight.cpp
-        src/details/InstanceBuffer.cpp
         src/details/Material.cpp
         src/details/MaterialInstance.cpp
         src/details/MorphTargetBuffer.cpp
@@ -174,7 +171,6 @@ set(PRIVATE_HDRS
         src/details/Fence.h
         src/details/IndexBuffer.h
         src/details/IndirectLight.h
-        src/details/InstanceBuffer.h
         src/details/Material.h
         src/details/MaterialInstance.h
         src/details/MorphTargetBuffer.h
@@ -216,7 +212,6 @@ set(MATERIAL_SRCS
         src/materials/colorGrading/colorGrading.mat
         src/materials/colorGrading/colorGradingAsSubpass.mat
         src/materials/colorGrading/customResolveAsSubpass.mat
-        src/materials/debugShadowCascades.mat
         src/materials/defaultMaterial.mat
         src/materials/dof/dof.mat
         src/materials/dof/dofCoc.mat
@@ -237,17 +232,19 @@ set(MATERIAL_SRCS
         src/materials/skybox.mat
         src/materials/ssao/sao.mat
         src/materials/ssao/saoBentNormals.mat
-        src/materials/separableGaussianBlur.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/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})
@@ -313,23 +310,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(
@@ -394,8 +374,8 @@ add_custom_command(
         OUTPUT "${MATERIAL_DIR}/sao.filamat"
         DEPENDS src/materials/ssao/ssaoUtils.fs
         DEPENDS src/materials/ssao/ssct.fs
-        DEPENDS src/materials/utils/depthUtils.fs
-        DEPENDS src/materials/utils/geometry.fs
+        DEPENDS src/materials/ssao/depthUtils.fs
+        DEPENDS src/materials/ssao/geometry.fs
         DEPENDS src/materials/ssao/saoImpl.fs
         DEPENDS src/materials/ssao/ssctImpl.fs
         APPEND
@@ -405,8 +385,8 @@ add_custom_command(
         OUTPUT "${MATERIAL_DIR}/saoBentNormals.filamat"
         DEPENDS src/materials/ssao/ssaoUtils.fs
         DEPENDS src/materials/ssao/ssct.fs
-        DEPENDS src/materials/utils/depthUtils.fs
-        DEPENDS src/materials/utils/geometry.fs
+        DEPENDS src/materials/ssao/depthUtils.fs
+        DEPENDS src/materials/ssao/geometry.fs
         DEPENDS src/materials/ssao/saoImpl.fs
         DEPENDS src/materials/ssao/ssctImpl.fs
         APPEND
@@ -455,7 +435,56 @@ add_custom_command(
 )
 
 add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur.filamat"
+        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"
         DEPENDS src/materials/separableGaussianBlur.vs
         DEPENDS src/materials/separableGaussianBlur.fs
         APPEND
@@ -535,7 +564,6 @@ elseif(WEBGL)
 else()
     set(OPTIMIZATION_FLAGS
         -ffast-math
-        -fno-finite-math-only
         -ffp-contract=fast
         # TODO: aggressive vectorization is currently broken on Android
         #        -fslp-vectorize-aggressive

filament/backend/CMakeLists.txt

@@ -25,7 +25,6 @@ set(PUBLIC_HDRS
 
 set(SRCS
         src/BackendUtils.cpp
-        src/BlobCacheKey.cpp
         src/Callable.cpp
         src/CallbackHandler.cpp
         src/CircularBuffer.cpp
@@ -70,8 +69,6 @@ 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
@@ -99,7 +96,6 @@ if (FILAMENT_SUPPORTS_OPENGL AND NOT FILAMENT_USE_EXTERNAL_GLES3 AND NOT FILAMEN
         list(APPEND SRCS src/opengl/platforms/CocoaTouchExternalImage.mm)
     elseif (APPLE)
         list(APPEND SRCS src/opengl/platforms/PlatformCocoaGL.mm)
-        list(APPEND SRCS src/opengl/platforms/CocoaExternalImage.mm)
     elseif (WEBGL)
         list(APPEND SRCS src/opengl/platforms/PlatformWebGL.cpp)
     elseif (LINUX)
@@ -160,9 +156,6 @@ 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
@@ -181,27 +174,39 @@ if (FILAMENT_SUPPORTS_VULKAN)
             src/vulkan/VulkanFboCache.h
             src/vulkan/VulkanHandles.cpp
             src/vulkan/VulkanHandles.h
-            src/vulkan/VulkanImageUtility.cpp
-            src/vulkan/VulkanImageUtility.h
             src/vulkan/VulkanMemory.h
             src/vulkan/VulkanMemory.cpp
             src/vulkan/VulkanPipelineCache.cpp
             src/vulkan/VulkanPipelineCache.h
+            src/vulkan/VulkanPlatform.cpp
+            src/vulkan/VulkanReadPixels.cpp
+            src/vulkan/VulkanReadPixels.h
             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/VulkanTaskHandler.h
             src/vulkan/VulkanTexture.cpp
             src/vulkan/VulkanTexture.h
             src/vulkan/VulkanUtility.cpp
             src/vulkan/VulkanUtility.h
     )
-    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)
+    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)
     endif()
 endif()
 
@@ -330,7 +335,6 @@ elseif(WEBGL)
 else()
     set(OPTIMIZATION_FLAGS
         -ffast-math
-        -fno-finite-math-only
         -ffp-contract=fast
         # TODO: aggressive vectorization is currently broken on Android
         #        -fslp-vectorize-aggressive

filament/backend/include/backend/DriverEnums.h

@@ -106,8 +106,7 @@ static constexpr size_t CONFIG_SAMPLER_BINDING_COUNT = 4;   // This is guarantee
  * Defines the backend's feature levels.
  */
 enum class FeatureLevel : uint8_t {
-    FEATURE_LEVEL_0 = 0,  //!< OpenGL ES 2.0 features
-    FEATURE_LEVEL_1,      //!< OpenGL ES 3.0 features (default)
+    FEATURE_LEVEL_1 = 1,  //!< OpenGL ES 3.0 features (default)
     FEATURE_LEVEL_2,      //!< OpenGL ES 3.1 features + 16 textures units + cubemap arrays
     FEATURE_LEVEL_3       //!< OpenGL ES 3.1 features + 31 textures units + cubemap arrays
 };
@@ -280,15 +279,6 @@ enum class UniformType : uint8_t {
     STRUCT
 };
 
-/**
- * Supported constant parameter types
- */
- enum class ConstantType : uint8_t {
-  INT,
-  FLOAT,
-  BOOL
-};
-
 enum class Precision : uint8_t {
     LOW,
     MEDIUM,
@@ -1127,12 +1117,7 @@ enum class Workaround : uint16_t {
     // the whole render pass.
     ALLOW_READ_ONLY_ANCILLARY_FEEDBACK_LOOP,
     // for some uniform arrays, it's needed to do an initialization to avoid crash on adreno gpu
-    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,
-    // Adreno drivers sometimes aren't able to blit into a layer of a texture array.
-    DISABLE_BLIT_INTO_TEXTURE_ARRAY,
+    ADRENO_UNIFORM_ARRAY_CRASH
 };
 
 } // namespace filament::backend

filament/backend/include/backend/Platform.h

@@ -22,7 +22,6 @@
 #include <backend/DriverEnums.h>
 
 #include <utils/compiler.h>
-#include <utils/Invocable.h>
 
 namespace filament::backend {
 
@@ -48,8 +47,6 @@ public:
         size_t handleArenaSize = 0;
     };
 
-    Platform() noexcept;
-
     virtual ~Platform() noexcept;
 
     /**
@@ -82,85 +79,6 @@ 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.
-     *
-     * @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 setBlobFunc was called.
-     */
-    bool hasBlobFunc() const noexcept;
-
-    /**
-     * 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

@@ -48,15 +48,7 @@ public:
         ShaderStageFlags stageFlags = ShaderStageFlags::ALL_SHADER_STAGE_FLAGS;
     };
 
-    struct Uniform {
-        utils::CString name;    // full qualified name of the uniform field
-        uint16_t offset;        // offset in 'uint32_t' into the uniform buffer
-        uint8_t size;           // >1 for arrays
-        UniformType type;       // uniform type
-    };
-
     using UniformBlockInfo = std::array<utils::CString, UNIFORM_BINDING_COUNT>;
-    using UniformInfo = utils::FixedCapacityVector<Uniform>;
     using SamplerGroupInfo = std::array<SamplerGroupData, SAMPLER_BINDING_COUNT>;
     using ShaderBlob = utils::FixedCapacityVector<uint8_t>;
     using ShaderSource = std::array<ShaderBlob, SHADER_TYPE_COUNT>;
@@ -86,14 +78,6 @@ public:
     Program& uniformBlockBindings(
             utils::FixedCapacityVector<std::pair<utils::CString, uint8_t>> const& uniformBlockBindings) noexcept;
 
-    // Note: This is only needed for GLES2.0, this is used to emulate UBO. This function tells
-    // the program everything it needs to know about the uniforms at a given binding
-    Program& uniforms(uint32_t index, UniformInfo const& uniforms) noexcept;
-
-    // Note: This is only needed for GLES2.0.
-    Program& attributes(
-            utils::FixedCapacityVector<std::pair<utils::CString, uint8_t>> attributes) noexcept;
-
     // sets the 'bindingPoint' sampler group descriptor for this program.
     // 'samplers' can be destroyed after this call.
     // This effectively associates a set of (BindingPoints, index) to a texture unit in the shader.
@@ -109,7 +93,6 @@ public:
     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; }
@@ -120,12 +103,6 @@ public:
     SamplerGroupInfo const& getSamplerGroupInfo() const { return mSamplerGroups; }
     SamplerGroupInfo& getSamplerGroupInfo() { return mSamplerGroups; }
 
-    auto const& getBindingUniformInfo() const { return mBindingUniformInfo; }
-    auto& getBindingUniformInfo() { return mBindingUniformInfo; }
-
-    auto const& getAttributes() const { return mAttributes; }
-    auto& getAttributes() { return mAttributes; }
-
     utils::CString const& getName() const noexcept { return mName; }
     utils::CString& getName() noexcept { return mName; }
 
@@ -136,8 +113,6 @@ public:
         return mSpecializationConstants;
     }
 
-    uint64_t getCacheId() const noexcept { return mCacheId; }
-
 private:
     friend utils::io::ostream& operator<<(utils::io::ostream& out, const Program& builder);
 
@@ -145,11 +120,8 @@ 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;
 };
 
 } // namespace filament::backend

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

@@ -95,19 +95,6 @@ public:
      */
     virtual void destroySwapChain(SwapChain* swapChain) noexcept = 0;
 
-    /**
-     * Returns the set of buffers that must be preserved up to the call to commit().
-     * The default value is TargetBufferFlags::NONE.
-     * The color buffer is always preserved, however ancillary buffers, such as the depth buffer
-     * are generally discarded. The preserve flags can be used to make sure those ancillary
-     * buffers are preserved until the call to commit.
-     *
-     * @param swapChain
-     * @return buffer that must be preserved
-     * @see commit()
-     */
-    virtual TargetBufferFlags getPreservedFlags(SwapChain* swapChain) noexcept;
-
     /**
      * Called by the driver to establish the default FBO. The default implementation returns 0.
       * @return a GLuint casted to a uint32_t that is an OpenGL framebuffer object.

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

@@ -57,10 +57,6 @@ protected:
     void destroySwapChain(SwapChain* swapChain) noexcept override;
     void makeCurrent(SwapChain* drawSwapChain, SwapChain* readSwapChain) noexcept override;
     void commit(SwapChain* swapChain) noexcept override;
-    OpenGLPlatform::ExternalTexture* createExternalImageTexture() noexcept override;
-    void destroyExternalImage(ExternalTexture* texture) noexcept override;
-    void retainExternalImage(void* externalImage) noexcept override;
-    bool setExternalImage(void* externalImage, ExternalTexture* texture) noexcept override;
 
 private:
     PlatformCocoaGLImpl* pImpl = nullptr;

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

@@ -26,9 +26,6 @@
 
 #include <backend/DriverEnums.h>
 
-#include <utility>
-#include <vector>
-
 namespace filament::backend {
 
 /**
@@ -40,27 +37,6 @@ public:
     PlatformEGL() noexcept;
 
 protected:
-
-    // --------------------------------------------------------------------------------------------
-    // Helper for EGL configs and attributes parameters
-
-    class Config {
-    public:
-        Config();
-        Config(std::initializer_list<std::pair<EGLint, EGLint>> list);
-        EGLint& operator[](EGLint name);
-        EGLint operator[](EGLint name) const;
-        void erase(EGLint name) noexcept;
-        EGLint const* data() const noexcept {
-            return reinterpret_cast<EGLint const*>(mConfig.data());
-        }
-        size_t size() const noexcept {
-            return mConfig.size();
-        }
-    private:
-        std::vector<std::pair<EGLint, EGLint>> mConfig = {{ EGL_NONE, EGL_NONE }};
-    };
-
     // --------------------------------------------------------------------------------------------
     // Platform Interface
 
@@ -103,8 +79,6 @@ protected:
      * @param name a string giving some context on the error. Typically __func__.
      */
     static void logEglError(const char* name) noexcept;
-    static void logEglError(const char* name, EGLint error) noexcept;
-    static const char* getEglErrorName(EGLint error) noexcept;
 
     /**
      * Calls glGetError() to clear the current error flags. logs a warning to log.w if
@@ -131,10 +105,8 @@ protected:
             bool OES_EGL_image_external_essl3 = false;
         } gl;
         struct {
-            bool ANDROID_recordable = false;
-            bool KHR_create_context = false;
-            bool KHR_gl_colorspace = false;
             bool KHR_no_config_context = false;
+            bool KHR_gl_colorspace = false;
         } egl;
     } ext;
 

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

@@ -19,211 +19,31 @@
 
 #include <backend/Platform.h>
 
-#include <bluevk/BlueVK.h>
-#include <utils/FixedCapacityVector.h>
-#include <utils/PrivateImplementation.h>
-
-#include <tuple>
-#include <unordered_set>
-
 namespace filament::backend {
 
-using SwapChain = Platform::SwapChain;
-
-/**
- * Private implementation details for the provided vulkan platform.
- */
-struct VulkanPlatformPrivate;
-
 /**
  * A Platform interface that creates a Vulkan backend.
  */
-class VulkanPlatform : public Platform, utils::PrivateImplementation<VulkanPlatformPrivate> {
+
+class VulkanPlatform : public Platform {
 public:
-
-    /**
-     * A collection of handles to objects and metadata that comprises a Vulkan context. The client
-     * can instantiate this struct and pass to Engine::Builder::sharedContext if they wishes to
-     * share their vulkan context. This is specifically necessary if the client wishes to override
-     * the swapchain API.
-     */
-    struct VulkanSharedContext {
-        VkInstance instance = VK_NULL_HANDLE;
-        VkPhysicalDevice physicalDevice = VK_NULL_HANDLE;
-        VkDevice logicalDevice = VK_NULL_HANDLE;
-        uint32_t graphicsQueueFamilyIndex = 0xFFFFFFFF;
-        // In the usual case, the client needs to allocate at least one more graphics queue
-        // for Filament, and this index is the param to pass into vkGetDeviceQueue. In the case
-        // where the gpu only has one graphics queue. Then the client needs to ensure that no
-        // concurrent access can occur.
-        uint32_t graphicsQueueIndex = 0xFFFFFFFF;
+    struct SurfaceBundle {
+        void* surface;
+        // On certain platforms, the extent of the surface cannot be queried from Vulkan. In those
+        // situations, we allow the frontend to pass in the extent to use in creating the swap
+        // chains. Platform implementation should set extent to 0 if they do not expect to set the
+        // swap chain extent.
+        uint32_t width;
+        uint32_t height;
     };
 
-    /**
-     * Shorthand for the pointer to the Platform SwapChain struct, we use it also as a handle (i.e.
-     * identifier for the swapchain).
-     */
-    using SwapChainPtr = Platform::SwapChain*;
+    // Given a Vulkan instance and native window handle, creates the platform-specific surface.
+    virtual SurfaceBundle createVkSurfaceKHR(void* nativeWindow, void* instance,
+        uint64_t flags) noexcept = 0;
 
-    /**
-     * Collection of images, formats, and extent (width/height) that defines the swapchain.
-     */
-    struct SwapChainBundle {
-        utils::FixedCapacityVector<VkImage> colors;
-        VkImage depth = VK_NULL_HANDLE;
-        VkFormat colorFormat = VK_FORMAT_UNDEFINED;
-        VkFormat depthFormat = VK_FORMAT_UNDEFINED;
-        VkExtent2D extent = {0, 0};
-    };
-
-    VulkanPlatform();
-
-    ~VulkanPlatform() override;
-
-    Driver* createDriver(void* sharedContext,
-            Platform::DriverConfig const& driverConfig) noexcept override;
-
-    int getOSVersion() const noexcept override {
-        return 0;
-    }
-
-    // ----------------------------------------------------
-    // ---------- Platform Customization options ----------
-    /**
-     * The client preference can be stored within the struct.  We allow for two specification of
-     * preference:
-     *     1) A substring to match against `VkPhysicalDeviceProperties.deviceName`.
-     *     2) Index of the device in the list as returned by vkEnumeratePhysicalDevices.
-     */
-    struct GPUPreference {
-        std::string deviceName;
-        int8_t index = -1;
-    };
-
-    /**
-     * Client can provide a preference over the GPU to use in the vulkan instance
-     * @return            `GPUPreference` struct that indicates the client's preference
-     */
-    virtual GPUPreference getPreferredGPU() noexcept {
-        return {};
-    }
-    // -------- End platform customization options --------
-    // ----------------------------------------------------
-
-    /**
-     * Get the images handles and format of the memory backing the swapchain. This should be called
-     * after createSwapChain() or after recreateIfResized().
-     * @param swapchain   The handle returned by createSwapChain()
-     * @return            An array of VkImages
-     */
-    virtual SwapChainBundle getSwapChainBundle(SwapChainPtr handle);
-
-    /**
-     * Acquire the next image for rendering. The `index` will be written with an non-negative
-     * integer that the backend can use to index into the `SwapChainBundle.colors` array. The
-     * corresponding VkImage will be used as the output color attachment. The client should signal
-     * the `clientSignal` semaphore when the image is ready to be used by the backend.
-     * @param handle         The handle returned by createSwapChain()
-     * @param clientSignal   The semaphore that the client will signal to indicate that the backend
-     *                       may render into the image.
-     * @param index          Pointer to memory that will be filled with the index that corresponding
-     *                       to an image in the `SwapChainBundle.colors` array.
-     * @return               Result of acquire
-     */
-    virtual VkResult acquire(SwapChainPtr handle, VkSemaphore clientSignal, uint32_t* index);
-
-    /**
-     * Present the image corresponding to `index` to the display. The client should wait on
-     * `finishedDrawing` before presenting.
-     * @param handle             The handle returned by createSwapChain()
-     * @param index              Index that corresponding to an image in the
-     *                           `SwapChainBundle.colors` array.
-     * @param finishedDrawing    Backend passes in a semaphore that the client will signal to
-     *                           indicate that the client may render into the image.
-     * @return                   Result of present
-     */
-    virtual VkResult present(SwapChainPtr handle, uint32_t index, VkSemaphore finishedDrawing);
-
-    /**
-     * Check if the surface size has changed.
-     * @param handle             The handle returned by createSwapChain()
-     * @return                   Whether the swapchain has been resized
-     */
-    virtual bool hasResized(SwapChainPtr handle);
-
-    /**
-     * Carry out a recreation of the swapchain.
-     * @param handle             The handle returned by createSwapChain()
-     * @return                   Result of the recreation
-     */
-    virtual VkResult recreate(SwapChainPtr handle);
-
-    /**
-     * Create a swapchain given a platform window, or if given a null `nativeWindow`, then we
-     * try to create a headless swapchain with the given `extent`.
-     * @param flags     Optional parameters passed to the client as defined in
-     *                  Filament::SwapChain.h.
-     * @param extent    Optional width and height that indicates the size of the headless swapchain.
-     * @return          Result of the operation
-     */
-    virtual SwapChainPtr createSwapChain(void* nativeWindow, uint64_t flags = 0,
-            VkExtent2D extent = {0, 0});
-
-    /**
-     * Destroy the swapchain.
-     * @param handle    The handle returned by createSwapChain()
-     */
-    virtual void destroy(SwapChainPtr handle);
-
-    /**
-     * Clean up any resources owned by the Platform. For example, if the Vulkan instance handle was
-     * generated by the platform, we need to clean it up in this method.
-     */
-    virtual void terminate();
-
-    /**
-     * @return The instance (VkInstance) for the Vulkan backend.
-     */
-    VkInstance getInstance() const noexcept;
-
-    /**
-     * @return The logical device (VkDevice) that was selected as the backend device.
-     */
-    VkDevice getDevice() const noexcept;
-
-    /**
-     * @return The physical device (i.e gpu) that was selected as the backend physical device.
-     */
-    VkPhysicalDevice getPhysicalDevice() const noexcept;
-
-    /**
-     * @return The family index of the graphics queue selected for the Vulkan backend.
-     */
-    uint32_t getGraphicsQueueFamilyIndex() const noexcept;
-
-    /**
-     * @return The index of the graphics queue (if there are multiple graphics queues)
-     *         selected for the Vulkan backend.
-     */
-    uint32_t getGraphicsQueueIndex() const noexcept;
-
-    /**
-     * @return The queue that was selected for the Vulkan backend.
-     */
-    VkQueue getGraphicsQueue() const noexcept;
-
-private:
-    // Platform dependent helper methods
-    using ExtensionSet = std::unordered_set<std::string_view>;
-    static ExtensionSet getRequiredInstanceExtensions();
-
-    using SurfaceBundle = std::tuple<VkSurfaceKHR, VkExtent2D>;
-    static SurfaceBundle createVkSurfaceKHR(void* nativeWindow, VkInstance instance,
-            uint64_t flags) noexcept;
-
-    friend struct VulkanPlatformPrivate;
+   ~VulkanPlatform() override;
 };
 
-}// namespace filament::backend
+} // namespace filament::backend
 
-#endif// TNT_FILAMENT_BACKEND_PLATFORMS_VULKANPLATFORM_H
+#endif //TNT_FILAMENT_BACKEND_PLATFORMS_VULKANPLATFORM_H

filament/backend/include/private/backend/CircularBuffer.h

@@ -26,6 +26,11 @@ namespace filament::backend {
 
 class CircularBuffer {
 public:
+// all allocations are at least one page
+    static constexpr size_t BLOCK_BITS = 12;    // 4KB
+    static constexpr size_t BLOCK_SIZE = 1 << BLOCK_BITS;
+    static constexpr size_t BLOCK_MASK = BLOCK_SIZE - 1;
+
     // bufferSize: total buffer size.
     //      This must be at least 2*requiredSize to avoid blocking on flush, however
     //      because sometimes the display can get ahead of the render() thread, it's good
@@ -61,8 +66,6 @@ public:
     // call at least once every getRequiredSize() bytes allocated from the buffer
     void circularize() noexcept;
 
-    static size_t getBlockSize() noexcept { return sPageSize; }
-
 private:
     void* alloc(size_t size) noexcept;
     void dealloc() noexcept;
@@ -79,9 +82,6 @@ private:
 
     // pointer to the next available command
     void* mHead = nullptr;
-
-    // system page size
-    static size_t sPageSize;
 };
 
 } // namespace filament::backend

filament/backend/include/private/backend/CommandBufferQueue.h

@@ -25,7 +25,8 @@
 
 #include <vector>
 
-namespace filament::backend {
+namespace filament {
+namespace backend {
 
 /*
  * A producer-consumer command queue that uses a CircularBuffer as main storage
@@ -78,6 +79,7 @@ public:
     bool isExitRequested() const;
 };
 
-} // namespace filament::backend
+} // namespace backend
+} // namespace filament
 
 #endif // TNT_FILAMENT_BACKEND_PRIVATE_COMMANDBUFFERQUEUE_H

filament/backend/include/private/backend/CommandStream.h

@@ -22,7 +22,6 @@
 #include "private/backend/Driver.h"
 
 #include <backend/BufferDescriptor.h>
-#include <backend/CallbackHandler.h>
 #include <backend/DriverEnums.h>
 #include <backend/Handle.h>
 #include <backend/PipelineState.h>

filament/backend/include/private/backend/Driver.h

@@ -17,7 +17,6 @@
 #ifndef TNT_FILAMENT_BACKEND_PRIVATE_DRIVER_H
 #define TNT_FILAMENT_BACKEND_PRIVATE_DRIVER_H
 
-#include <backend/CallbackHandler.h>
 #include <backend/DriverApiForward.h>
 #include <backend/DriverEnums.h>
 #include <backend/Handle.h>