Data verification before server upload (#6518)

Data verification before server upload

.github/workflows/android-continuous.yml

@@ -14,6 +14,10 @@ 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,6 +44,10 @@ 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,6 +112,10 @@ 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,9 +13,10 @@ section below.
 
 To build Filament for Android you must also install the following:
 
-- Android Studio Arctic Fox or more recent
+- Android Studio Flamingo or more recent
 - Android SDK
 - Android NDK 25.1 or higher
+- Java 17
 
 ### Environment variables
 

CMakeLists.txt

@@ -479,6 +479,13 @@ else()
     option(FILAMENT_ENABLE_MATDBG "Enable the material debugger" OFF)
 endif()
 
+# By default, link in fgdbg for Desktop + Debug
+if (CMAKE_BUILD_TYPE STREQUAL "Debug" AND IS_HOST_PLATFORM)
+    option(FILAMENT_ENABLE_FGDBG "Enable the framegraph debugger" ON)
+else()
+    option(FILAMENT_ENABLE_FGDBG "Enable the framegraph debugger" OFF)
+endif()
+
 # Only optimize materials in Release mode (so error message lines match the source code)
 if (CMAKE_BUILD_TYPE MATCHES Release)
     option(FILAMENT_DISABLE_MATOPT "Disable material optimizations" OFF)
@@ -711,6 +718,10 @@ if (FILAMENT_BUILD_FILAMAT OR IS_HOST_PLATFORM)
     if (FILAMENT_ENABLE_MATDBG OR IS_HOST_PLATFORM)
         add_subdirectory(${LIBRARIES}/matdbg)
     endif()
+
+    if (FILAMENT_ENABLE_FGDBG OR IS_HOST_PLATFORM)
+        add_subdirectory(${LIBRARIES}/fgdbg)
+    endif()
 endif()
 
 if (FILAMENT_SUPPORTS_VULKAN)

NEW_RELEASE_NOTES.md

@@ -7,3 +7,6 @@ for next branch cut* header.
 appropriate header in [RELEASE_NOTES.md](./RELEASE_NOTES.md).
 
 ## Release notes for next branch cut
+
+- 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

README.md

@@ -31,7 +31,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.google.android.filament:filament-android:1.32.4'
+    implementation 'com.google.android.filament:filament-android:1.36.0'
 }
 ```
 
@@ -50,7 +50,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.32.4'
+pod 'Filament', '~> 1.36.0'
 ```
 
 ### Snapshots
@@ -312,6 +312,7 @@ and tools.
   - `bluegl`:                 OpenGL bindings for macOS, Linux and Windows
   - `bluevk`:                 Vulkan bindings for macOS, Linux, Windows and Android
   - `camutils`:               Camera manipulation utilities
+  - `fgdbg`:                  Frame Graph inspector and debugger (debug builds only)
   - `filabridge`:             Library shared by the Filament engine and host tools
   - `filaflat`:               Serialization/deserialization library used for materials
   - `filagui`:                Helper library for [Dear ImGui](https://github.com/ocornut/imgui)

RELEASE_NOTES.md

@@ -7,6 +7,26 @@ 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.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**]

android/build.gradle

@@ -79,14 +79,15 @@ buildscript {
     }
 
     ext.versions = [
+        'jdk': 17,
         'minSdk': 19,
         'targetSdk': 33,
         'compileSdk': 33,
-        'kotlin': '1.8.0',
+        'kotlin': '1.8.20',
         'kotlin_coroutines': '1.6.4',
-        'buildTools': '33.0.1',
+        'buildTools': '33.0.2',
         'ndk': '25.1.8937393',
-        'androidx_core': '1.9.0',
+        'androidx_core': '1.10.0',
         'androidx_annotations': '1.3.0'
     ]
 
@@ -103,7 +104,7 @@ buildscript {
     ]
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.4.0'
+        classpath 'com.android.tools.build:gradle:8.0.0'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${versions.kotlin}"
     }
 
@@ -194,6 +195,7 @@ subprojects {
                 }
 
                 ndk {
+                    //noinspection ChromeOsAbiSupport
                     abiFilters(*rootProject.ext.abis)
                 }
 
@@ -214,8 +216,8 @@ subprojects {
             }
 
             compileOptions {
-                sourceCompatibility JavaVersion.VERSION_1_8
-                targetCompatibility JavaVersion.VERSION_1_8
+                sourceCompatibility versions.jdk
+                targetCompatibility versions.jdk
             }
         }
     }

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

@@ -142,6 +142,14 @@ 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,6 +17,17 @@ android {
             }
         }
     }
+
+    publishing {
+        singleVariant("fullRelease") {
+            withSourcesJar()
+            withJavadocJar()
+        }
+        singleVariant("liteRelease") {
+            withSourcesJar()
+            withJavadocJar()
+        }
+    }
 }
 
 dependencies {

android/filament-android/build.gradle

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

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

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

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

@@ -486,3 +486,30 @@ 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,6 +118,7 @@ public class ColorGrading {
      *
      * @deprecated Use {@link ColorGrading.Builder#toneMapper(ToneMapper)}
      */
+    @Deprecated
     public enum ToneMapping {
         /** Linear tone mapping (i.e. no tone mapping). */
         LINEAR,
@@ -231,6 +232,7 @@ 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

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

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

@@ -1117,6 +1117,51 @@ 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");
@@ -1173,6 +1218,10 @@ 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.

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

@@ -0,0 +1,42 @@
+/*
+ * 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. This is typically called from {@link UiHelper.RendererCallback#onResized},
+     * {@link android.view.SurfaceHolder.Callback#surfaceChanged} or
+     * {@link android.view.TextureView.SurfaceTextureListener#onSurfaceTextureSizeChanged}.
+     *
+     * @param engine Filament engine to synchronize
+     *
+     * @see UiHelper.RendererCallback#onResized
+     * @see android.view.SurfaceHolder.Callback#surfaceChanged
+     * @see android.view.TextureView.SurfaceTextureListener#onSurfaceTextureSizeChanged
+     */
+    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,6 +84,14 @@ 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
  *             }
  *         });
@@ -175,7 +183,7 @@ public class UiHelper {
     }
 
     private static class SurfaceViewHandler implements RenderSurface {
-        private SurfaceView mSurfaceView;
+        private final SurfaceView mSurfaceView;
 
         SurfaceViewHandler(SurfaceView surface) {
             mSurfaceView = surface;
@@ -192,7 +200,7 @@ public class UiHelper {
     }
 
     private static class SurfaceHolderHandler implements RenderSurface {
-        private SurfaceHolder mSurfaceHolder;
+        private final SurfaceHolder mSurfaceHolder;
 
         SurfaceHolderHandler(SurfaceHolder surface) {
             mSurfaceHolder = surface;
@@ -209,7 +217,7 @@ public class UiHelper {
     }
 
     private class TextureViewHandler implements RenderSurface {
-        private TextureView mTextureView;
+        private final TextureView mTextureView;
         private Surface mSurface;
 
         TextureViewHandler(TextureView surface) { mTextureView = surface; }

android/filament-utils-android/build.gradle

@@ -1,4 +1,7 @@
 apply plugin: 'kotlin-android'
+kotlin {
+    jvmToolchain(versions.jdk)
+}
 
 android {
     namespace 'com.google.android.filament.utils'
@@ -21,16 +24,11 @@ android {
             excludes += ['lib/*/libfilament-jni.so', 'lib/*/libgltfio-jni.so']
         }
     }
-}
 
-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"))
-            }
+    publishing {
+        singleVariant("release") {
+            withSourcesJar()
+            withJavadocJar()
         }
     }
 }
@@ -43,7 +41,7 @@ dependencies {
     implementation deps.coroutines.android
 
     api project(':filament-android')
-    api module("com.google.android.filament:gltfio-android:${VERSION_NAME}")
+    api project(':gltfio-android')
 }
 
 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("unused")
+@file:Suppress("NOTHING_TO_INLINE", "unused")
 
 package com.google.android.filament.utils
 
@@ -24,8 +24,16 @@ enum class MatrixColumn {
     X, Y, Z, W
 }
 
-enum class RotationsOrder {
-    XYZ, XZY, YXZ, YZX, ZXY, ZYX
+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);
 }
 
 data class Mat2(
@@ -77,6 +85,12 @@ 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(
@@ -89,12 +103,18 @@ 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
@@ -106,7 +126,6 @@ data class Mat2(
             |${x.y} ${y.y}|
             """.trimIndent()
     }
-
 }
 
 data class Mat3(
@@ -162,6 +181,14 @@ 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(
@@ -181,6 +208,15 @@ 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,
@@ -212,6 +248,7 @@ 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(
@@ -302,6 +339,15 @@ 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(
@@ -330,6 +376,16 @@ 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,
@@ -337,6 +393,26 @@ 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(
@@ -356,6 +432,78 @@ 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)
@@ -494,14 +642,7 @@ 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 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)
-    }
+    return rotation(r[order.yaw], r[order.pitch], r[order.roll], order)
 }
 
 /**
@@ -599,13 +740,93 @@ 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)
             )
     )
 }
 
 /**
- * Extract Quaternion rotation from a Matrix
+ * 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
  */
 fun quaternion(m: Mat4): Quaternion {
     val trace = m.x.x + m.y.y + m.z.z
@@ -673,9 +894,14 @@ 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 - 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)
+    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
+    )
 )
 

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

@@ -405,9 +405,19 @@ 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 = 0.0f) {
+        var w: Float = 1.0f) {
 
-    constructor(v: Float3, w: Float = 0.0f) : this(v.x, v.y, v.z, w)
+    constructor(v: Float3, w: Float = 1.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,42 +52,84 @@ data class Quaternion(
         }
 
         /**
-         * Construct a Quaternion from Euler angles using YPR around ZYX respectively
+         * Construct a Quaternion from Euler angles using YPR around a specified order
          *
-         * 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).
+         * 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)
          *
          * @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): Quaternion {
+        fun fromEuler(d: Float3, order: RotationsOrder = RotationsOrder.ZYX): Quaternion {
             val r = transform(d, ::radians)
-            return fromEulerZYX(r.z, r.y, r.x)
+            return fromEuler(r[order.yaw], r[order.pitch], r[order.roll], order)
         }
 
         /**
-         * Construct a Quaternion from Euler angles using YPR around ZYX respectively
+         * Construct a Quaternion from Euler yaw, pitch, roll around a specified order.
          *
-         * 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
+         * @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.
          */
-        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
-            )
+        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
+                )
+            }
         }
     }
 
@@ -222,16 +264,44 @@ 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)
+        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)
+    )
 
     inline fun transform(block: (Float) -> Float): Quaternion {
         x = block(x)
@@ -253,6 +323,103 @@ 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
@@ -278,6 +445,10 @@ 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
  *
@@ -287,36 +458,38 @@ fun cross(a: Quaternion, b: Quaternion): Quaternion {
  * @param a The beginning value
  * @param b The ending value
  * @param t The ratio between the two floats
- * @param valueEps Prevent blowing up when slerping between two quaternions that are very near each
- * other. Linear interpolation (lerp) is returned in this case.
+ * @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.
  *
  * @return Interpolated value between the two floats
  */
-fun slerp(a: Quaternion, b: Quaternion, t: Float, valueEps: Float = 0.0000000001f): Quaternion {
+fun slerp(a: Quaternion, b: Quaternion, t: Float, dotThreshold: Float = 0.9995f): Quaternion {
     // could also be computed as: pow(q * inverse(p), t) * p;
-    val d = dot(a, b)
-    val absd = abs(d)
+    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
+    }
+
     // Prevent blowing up when slerping between two quaternions that are very near each other.
-    if ((1.0f - absd) < valueEps) {
-        return normalize(lerp(if (d < 0.0f) -a else a, b, t))
+    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)
     }
-    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 - t) * a) + (t * b)
+    return ((1.0f - t) * a) + (t * b)
 }
 
 fun nlerp(a: Quaternion, b: Quaternion, t: Float): Quaternion {
@@ -324,19 +497,12 @@ fun nlerp(a: Quaternion, b: Quaternion, t: Float): Quaternion {
 }
 
 /**
- * Convert a Quaternion to Euler angles using YPR around ZYX respectively
+ * Convert a Quaternion to Euler angles
  *
- * The Euler angles are applied in 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.
  */
-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)))
+fun eulerAngles(q: Quaternion, order: RotationsOrder = RotationsOrder.ZYX): Float3 {
+    return eulerAngles(rotation(q), order)
 }

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

@@ -28,12 +28,21 @@ 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
 
-inline fun clamp(x: Float, min: Float, max: Float)= if (x < min) min else (if (x > max) max else x)
+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 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)
@@ -42,4 +51,6 @@ 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/Vector.kt

@@ -22,6 +22,8 @@ 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,
@@ -124,11 +126,23 @@ 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)
@@ -291,6 +305,14 @@ 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)
@@ -301,6 +323,14 @@ 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)
@@ -534,6 +564,15 @@ 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)
@@ -549,6 +588,15 @@ 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)
@@ -566,6 +614,12 @@ 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
@@ -583,6 +637,11 @@ 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),
@@ -626,10 +685,25 @@ 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) = 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 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 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)
@@ -675,6 +749,11 @@ 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),
@@ -722,10 +801,29 @@ 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) = 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 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 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)
@@ -807,17 +905,44 @@ 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 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 greaterThanEqual(a: Float4, b: Float4) =
+    Bool4(a.x >= b.x, a.y >= b.y, a.z >= b.z, a.w >= b.w)
 
-inline infix fun Float4.lt(b: Float) = Bool4(x < b, y < b, z < b, a < b)
+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: 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)
@@ -1277,3 +1402,753 @@ 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,6 +16,13 @@ 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.32.4
+VERSION_NAME=1.36.0
 
 POM_DESCRIPTION=Real-time physically based rendering engine for Android.
 
@@ -18,6 +18,9 @@ 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,63 +86,10 @@ 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-7.5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

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

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

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

@@ -6,6 +6,10 @@ 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")
@@ -36,6 +40,11 @@ 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,6 +30,7 @@ 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
@@ -401,6 +402,8 @@ 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,6 +6,10 @@ 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")
@@ -36,6 +40,11 @@ android {
     aaptOptions {
         noCompress 'filamat', 'ktx'
     }
+
+    compileOptions {
+        sourceCompatibility versions.jdk
+        targetCompatibility versions.jdk
+    }
 }
 
 dependencies {

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

@@ -1,6 +1,8 @@
 <?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,6 +29,7 @@ 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
@@ -119,8 +120,13 @@ class MainActivity : Activity() {
     private fun setupView() {
         scene.skybox = Skybox.Builder().color(0.035f, 0.035f, 0.035f, 1.0f).build(engine)
 
-        // NOTE: Try to disable post-processing (tone-mapping, etc.) to see the difference
-        // view.isPostProcessingEnabled = false
+        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
+        }
 
         // Tell the view which camera we want to use
         view.camera = camera
@@ -154,7 +160,11 @@ class MainActivity : Activity() {
     }
 
     private fun loadMaterial() {
-        readUncompressedAsset("materials/baked_color.filamat").let {
+        var name = "materials/baked_color.filamat"
+        if (engine.activeFeatureLevel == Engine.FeatureLevel.FEATURE_LEVEL_0) {
+            name = "materials/baked_color_es2.filamat"
+        }
+        readUncompressedAsset(name).let {
             material = Material.Builder().payload(it, it.remaining()).build(engine)
         }
     }
@@ -304,7 +314,17 @@ class MainActivity : Activity() {
     inner class SurfaceCallback : UiHelper.RendererCallback {
         override fun onNativeWindowChanged(surface: Surface) {
             swapChain?.let { engine.destroySwapChain(it) }
-            swapChain = engine.createSwapChain(surface, uiHelper.swapChainFlags)
+
+            // 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)
             displayHelper.attach(renderer, surfaceView.display);
         }
 
@@ -327,6 +347,8 @@ 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

@@ -0,0 +1,33 @@
+// 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,6 +6,10 @@ 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")
@@ -42,6 +46,11 @@ 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,6 +26,7 @@ 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
@@ -303,6 +304,8 @@ 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,6 +6,10 @@ 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")
@@ -35,6 +39,11 @@ 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,6 +29,7 @@ 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
@@ -413,6 +414,8 @@ 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,6 +3,10 @@ apply plugin: 'kotlin-android'
 
 project.ext.isSample = true
 
+kotlin {
+    jvmToolchain(versions.jdk)
+}
+
 android {
     namespace 'com.google.android.filament.livewallpaper'
 
@@ -18,6 +22,11 @@ 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,6 +31,7 @@ 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() {
@@ -226,6 +227,8 @@ 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,6 +6,10 @@ 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")
@@ -46,6 +50,11 @@ 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,6 +26,7 @@ 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
 
@@ -343,6 +344,8 @@ 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,6 +6,10 @@ 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")
@@ -35,6 +39,11 @@ 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,6 +30,7 @@ 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
@@ -458,6 +459,8 @@ 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,6 +6,10 @@ 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")
@@ -38,6 +42,11 @@ 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,6 +37,7 @@ 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;
@@ -49,6 +50,7 @@ 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;
 
@@ -107,6 +109,7 @@ 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,6 +6,10 @@ 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")
@@ -36,6 +40,11 @@ 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,6 +38,7 @@ 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 {
@@ -401,6 +402,8 @@ 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,6 +6,10 @@ 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")
@@ -36,6 +40,11 @@ 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,6 +29,7 @@ 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
@@ -327,6 +328,8 @@ 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,6 +6,10 @@ 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")
@@ -43,6 +47,11 @@ 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,6 +26,7 @@ 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
 
@@ -323,6 +324,8 @@ 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,6 +6,10 @@ 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")
@@ -36,6 +40,11 @@ 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,6 +33,7 @@ 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
@@ -350,6 +351,8 @@ 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

@@ -172,6 +172,8 @@ MATOPT_GRADLE_OPTION=""
 
 ASAN_UBSAN_OPTION=""
 
+FGDBG_OPTION="-DFILAMENT_ENABLE_FGDBG=OFF"
+
 IOS_BUILD_SIMULATOR=false
 BUILD_UNIVERSAL_LIBRARIES=false
 
@@ -233,6 +235,7 @@ function build_desktop_target {
             ${MATDBG_OPTION} \
             ${MATOPT_OPTION} \
             ${ASAN_UBSAN_OPTION} \
+            ${FGDBG_OPTION} \
             ${deployment_target} \
             ${architectures} \
             ../..
@@ -360,6 +363,7 @@ function build_android_target {
             -DCMAKE_TOOLCHAIN_FILE="../../build/toolchain-${arch}-linux-android.cmake" \
             ${MATDBG_OPTION} \
             ${MATOPT_OPTION} \
+            ${FGDBG_OPTION} \
             ${VULKAN_ANDROID_OPTION} \
             ../..
     fi
@@ -491,6 +495,7 @@ 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
@@ -539,6 +544,7 @@ 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
@@ -592,6 +598,7 @@ function build_ios_target {
             -DCMAKE_TOOLCHAIN_FILE=../../third_party/clang/iOS.cmake \
             ${MATDBG_OPTION} \
             ${MATOPT_OPTION} \
+            ${FGDBG_OPTION} \
             ../..
     fi
 
@@ -756,7 +763,7 @@ function run_tests {
 
 pushd "$(dirname "$0")" > /dev/null
 
-while getopts ":hacCfijmp:q:uvslwtedk:b" opt; do
+while getopts ":hacCfgijmp:q:uvslwtedk:b" opt; do
     case ${opt} in
         h)
             print_help
@@ -776,6 +783,7 @@ while getopts ":hacCfijmp:q:uvslwtedk:b" opt; do
             PRINT_MATDBG_HELP=true
             MATDBG_OPTION="-DFILAMENT_ENABLE_MATDBG=ON, -DFILAMENT_BUILD_FILAMAT=ON"
             MATDBG_GRADLE_OPTION="-Pcom.google.android.filament.matdbg"
+            FGDBG_OPTION="-DFILAMENT_ENABLE_FGDBG=ON"
             ;;
         f)
             ISSUE_CMAKE_ALWAYS=true

build/android/build.sh

@@ -44,13 +44,20 @@ 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
-    # NOTE: We MUST use Java 1.8 to run sdkmanager currently, it fails starting with Java 11
-    JAVA_HOME=${JAVA_HOME_8_X64} ${ANDROID_HOME}/tools/bin/sdkmanager "ndk;$FILAMENT_NDK_VERSION" > /dev/null
+    ${ANDROID_HOME}/cmdline-tools/latest/bin/sdkmanager "ndk;$FILAMENT_NDK_VERSION" > /dev/null
 fi
 
 # Only build 1 64 bit target during presubmit to cut down build times during presubmit

build/common/ci-common.sh

@@ -3,12 +3,4 @@
 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/Materials.md.html

@@ -2372,6 +2372,15 @@ 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:

docs/webgl/tutorial_redball.html

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

docs/webgl/tutorial_suzanne.html

@@ -15,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<span style="color: #bbbbbb"> </span>--compress<span style="color: #bbbbbb"> </span>monkey.obj<span style="color: #bbbbbb"> </span>suzanne.filamesh
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>filamesh --compress monkey.obj suzanne.filamesh
 </pre></div>
 
 <h2>Create mipmapped textures</h2>
@@ -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<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
+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
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the normal map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--strip-alpha<span style="color: #bbbbbb"> </span>--kernel<span style="color: #666666">=</span>NORMALS<span style="color: #bbbbbb"> </span>--linear<span style="color: #bbbbbb"> </span>normal.png<span style="color: #bbbbbb"> </span>normal.ktx
-mipgen<span style="color: #bbbbbb"> </span>--strip-alpha<span style="color: #bbbbbb"> </span>--kernel<span style="color: #666666">=</span>NORMALS<span style="color: #bbbbbb"> </span>--linear<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_rgb8_normalxyz_40<span style="color: #bbbbbb"> </span><span style="color: #AA5D1F; font-weight: bold">\</span>
-<span style="color: #bbbbbb">    </span>normal.png<span style="color: #bbbbbb"> </span>normal_etc.ktx
+mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear normal.png normal.ktx
+mipgen --strip-alpha --kernel<span style="color: #666666">=</span>NORMALS --linear --compression<span style="color: #666666">=</span>etc_rgb8_normalxyz_40 <span style="color: #AA5D1F; font-weight: bold">\</span>
+    normal.png normal_etc.ktx
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component roughness map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>roughness.png<span style="color: #bbbbbb"> </span>roughness.ktx
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_r11_numeric_40<span style="color: #bbbbbb"> </span>roughness.png<span style="color: #bbbbbb"> </span>roughness_etc.ktx
+mipgen --grayscale roughness.png roughness.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_numeric_40 roughness.png roughness_etc.ktx
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component metallic map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>metallic.png<span style="color: #bbbbbb"> </span>metallic.ktx
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_r11_numeric_40<span style="color: #bbbbbb"> </span>metallic.png<span style="color: #bbbbbb"> </span>metallic_etc.ktx
+mipgen --grayscale metallic.png metallic.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_numeric_40 metallic.png metallic_etc.ktx
 
 <span style="color: #3D7B7B; font-style: italic"># Create mipmaps for the single-component occlusion map and a compressed variant.</span>
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>ao.png<span style="color: #bbbbbb"> </span>ao.ktx
-mipgen<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbbb"> </span>--compression<span style="color: #666666">=</span>etc_r11_numeric_40<span style="color: #bbbbbb"> </span>ao.png<span style="color: #bbbbbb"> </span>ao_etc.ktx
+mipgen --grayscale ao.png ao.ktx
+mipgen --grayscale --compression<span style="color: #666666">=</span>etc_r11_numeric_40 ao.png 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<span style="color: #bbbbbb"> </span>--grayscale<span style="color: #bbbbb
 <h2>Bake environment map</h2>
 <p>Much like the <a href="tutorial_redball.html">previous tutorial</a> we need to use Filament&#x27;s <code>cmgen</code> tool to produce cubemap files.</p>
 <p>Download <a href="//github.com/google/filament/blob/main/third_party/environments/venetian_crossroads_2k.hdr">venetian_crossroads_2k.hdr</a>, then invoke the following commands in your terminal.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=64</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
-<span style="color: #008000">cd</span><span style="color: #bbbbbb"> </span>venetian*<span style="color: #bbbbbb"> </span>;<span style="color: #bbbbbb"> </span>mv<span style="color: #bbbbbb"> </span>venetian*_ibl.ktx<span style="color: #bbbbbb"> </span>venetian_crossroads_2k_skybox_tiny.ktx<span style="color: #bbbbbb"> </span>;<span style="color: #bbbbbb"> </span><span style="color: #008000">cd</span><span style="color: #bbbbbb"> </span>-
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=64</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+<span style="color: #008000">cd</span> venetian* ; mv venetian*_ibl.ktx venetian_crossroads_2k_skybox_tiny.ktx ; <span style="color: #008000">cd</span> -
 
-cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
-cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
-cmgen<span style="color: #bbbbbb"> </span>-x<span style="color: #bbbbbb"> </span>.<span style="color: #bbbbbb"> </span>--format<span style="color: #666666">=</span>ktx<span style="color: #bbbbbb"> </span>--size<span style="color: #666666">=256</span><span style="color: #bbbbbb"> </span>--extract-blur<span style="color: #666666">=0</span>.1<span style="color: #bbbbbb"> </span>venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
+cmgen -x . --format<span style="color: #666666">=</span>ktx --size<span style="color: #666666">=256</span> --extract-blur<span style="color: #666666">=0</span>.1 venetian_crossroads_2k.hdr
 </pre></div>
 
 <h2>Define textured material</h2>
@@ -91,7 +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<span style="color: #bbbbbb"> </span>-a<span style="color: #bbbbbb"> </span>opengl<span style="color: #bbbbbb"> </span>-p<span style="color: #bbbbbb"> </span>mobile<span style="color: #bbbbbb"> </span>-o<span style="color: #bbbbbb"> </span>textured.filamat<span style="color: #bbbbbb"> </span>textured.mat
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>matc -a opengl -p mobile -o textured.filamat textured.mat
 </pre></div>
 
 <p>You should now have a material archive in your working directory. For the suzanne asset, the normal
@@ -101,62 +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>
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #3D7B7B; font-style: italic">// TODO: declare asset URLs</span><span style="color: #bbbbbb"></span>
 
-Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>filamesh_url,<span style="color: #bbbbbb"> </span>sky_small_url,<span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);
-});
+Filament.init([<span style="color: #bbbbbb"> </span>filamat_url,<span style="color: #bbbbbb"> </span>filamesh_url,<span style="color: #bbbbbb"> </span>sky_small_url,<span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span>],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000">window</span>.app<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>App(<span style="color: #008000">document</span>.getElementsByTagName(<span style="color: #BA2121">&#39;canvas&#39;</span>)[<span style="color: #666666">0</span>]);<span style="color: #bbbbbb"></span>
+});<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();
+<span style="color: #008000; font-weight: bold">class</span><span style="color: #bbbbbb"> </span>App<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">constructor</span>(canvas)<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.canvas<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>canvas;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.engine<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Engine.create(canvas);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.scene<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createScene();<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>material<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createMaterial(filamat_url);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>material<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createMaterial(filamat_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.matinstance<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>material.createInstance();<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.loadFilamesh(filamesh_url,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.matinstance);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.suzanne<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>filamesh.renderable;
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.loadFilamesh(filamesh_url,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.matinstance);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.suzanne<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>filamesh.renderable;<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sky box and IBL</span>
-<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: initialize gltumble</span>
-<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: fetch larger assets</span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: create sky box and IBL</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: initialize gltumble</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: fetch larger assets</span><span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSwapChain();
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createRenderer();
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createCamera(Filament.EntityManager.get().create());
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createView();
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);
-<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.swapChain<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSwapChain();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createRenderer();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createCamera(Filament.EntityManager.get().create());<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createView();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setCamera(<span style="color: #008000; font-weight: bold">this</span>.camera);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setScene(<span style="color: #008000; font-weight: bold">this</span>.scene);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.render<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.render.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize.bind(<span style="color: #008000; font-weight: bold">this</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.addEventListener(<span style="color: #BA2121">&#39;resize&#39;</span>,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.resize);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>up);
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>eye<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">4</span>],<span style="color: #bbbbbb"> </span>center<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>],<span style="color: #bbbbbb"> </span>up<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>[<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">1</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>];<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.lookAt(eye,<span style="color: #bbbbbb"> </span>center,<span style="color: #bbbbbb"> </span>up);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize();
-<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">    </span>}
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.resize();<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span>render()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</span>
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);
-<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);
-<span style="color: #bbbbbb">    </span>}
+<span style="color: #bbbbbb">    </span>render()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #3D7B7B; font-style: italic">// TODO: apply gltumble matrix</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.renderer.render(<span style="color: #008000; font-weight: bold">this</span>.swapChain,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.view);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000">window</span>.requestAnimationFrame(<span style="color: #008000; font-weight: bold">this</span>.render);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span>resize()<span style="color: #bbbbbb"> </span>{
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);
+<span style="color: #bbbbbb">    </span>resize()<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>dpr<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.devicePixelRatio;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.width<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerWidth<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.canvas.height<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000">window</span>.innerHeight<span style="color: #bbbbbb"> </span><span style="color: #666666">*</span><span style="color: #bbbbbb"> </span>dpr;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.view.setViewport([<span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">0</span>,<span style="color: #bbbbbb"> </span>width,<span style="color: #bbbbbb"> </span>height]);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov,<span style="color: #bbbbbb"> </span>fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1</span><span style="color: #bbbbbb"> </span><span style="color: #666666">?</span><span style="color: #bbbbbb"> </span>Fov.HORIZONTAL<span style="color: #bbbbbb"> </span><span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>Fov.VERTICAL;
-<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>fov);
-<span style="color: #bbbbbb">    </span>}
-}
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>width<span style="color: #bbbbbb"> </span><span style="color: #666666">/</span><span style="color: #bbbbbb"> </span>height;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>Fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.Camera$Fov,<span style="color: #bbbbbb"> </span>fov<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>aspect<span style="color: #bbbbbb"> </span><span style="color: #666666">&lt;</span><span style="color: #bbbbbb"> </span><span style="color: #666666">1</span><span style="color: #bbbbbb"> </span><span style="color: #666666">?</span><span style="color: #bbbbbb"> </span>Fov.HORIZONTAL<span style="color: #bbbbbb"> </span><span style="color: #666666">:</span><span style="color: #bbbbbb"> </span>Fov.VERTICAL;<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span><span style="color: #008000; font-weight: bold">this</span>.camera.setProjectionFov(<span style="color: #666666">45</span>,<span style="color: #bbbbbb"> </span>aspect,<span style="color: #bbbbbb"> </span><span style="color: #666666">1.0</span>,<span style="color: #bbbbbb"> </span><span style="color: #666666">10.0</span>,<span style="color: #bbbbbb"> </span>fov);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span>}<span style="color: #bbbbbb"></span>
+}<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>Our app will only require a subset of assets to be present for <code>App</code> construction. We&#x27;ll download
@@ -172,29 +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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>texture_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;astc s3tc_srgb&#39;</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>texture_suffix<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>Filament.getSupportedFormatSuffix(<span style="color: #BA2121">&#39;etc&#39;</span>);<span style="color: #bbbbbb"></span>
 
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span>
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_small_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox_tiny.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_large_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`albedo</span><span style="color: #A45A77; font-weight: bold">${</span>albedo_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`ao</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`metallic</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`normal</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`roughness</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;textured.filamat&#39;</span>;
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;suzanne.filamesh&#39;</span>;
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>environ<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;venetian_crossroads_2k&#39;</span><span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ibl_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_ibl.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_small_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox_tiny.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sky_large_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">/</span><span style="color: #A45A77; font-weight: bold">${</span>environ<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">_skybox.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`albedo</span><span style="color: #A45A77; font-weight: bold">${</span>albedo_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`ao</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`metallic</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`normal</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">`roughness</span><span style="color: #A45A77; font-weight: bold">${</span>texture_suffix<span style="color: #A45A77; font-weight: bold">}</span><span style="color: #BA2121">.ktx`</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamat_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;textured.filamat&#39;</span>;<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>filamesh_url<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #BA2121">&#39;suzanne.filamesh&#39;</span>;<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Create skybox and IBL</h2>
 <p>Next, let&#x27;s create the low-resolution skybox and IBL in the <code>App</code> constructor.</p>
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);
-<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createIblFromKtx1(ibl_url);
-<span style="color: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666666">100000</span>);
-<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_small_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.indirectLight<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createIblFromKtx1(ibl_url);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.indirectLight.setIntensity(<span style="color: #666666">100000</span>);<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">this</span>.scene.setIndirectLight(<span style="color: #008000; font-weight: bold">this</span>.indirectLight);<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>This allows users to see a reasonable background fairly quickly, before larger assets have finished
@@ -206,31 +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: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx1(albedo_url,<span style="color: #bbbbbb"> </span>{srgb<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">true</span>});
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>roughness<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx1(roughness_url);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>metallic<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx1(metallic_url);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>normal<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx1(normal_url);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>ao<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createTextureFromKtx1(ao_url);
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span>Filament.fetch([sky_large_url,<span style="color: #bbbbbb"> </span>albedo_url,<span style="color: #bbbbbb"> </span>roughness_url,<span style="color: #bbbbbb"> </span>metallic_url,<span style="color: #bbbbbb"> </span>normal_url,<span style="color: #bbbbbb"> </span>ao_url],<span style="color: #bbbbbb"> </span>()<span style="color: #bbbbbb"> </span>=&gt;<span style="color: #bbbbbb"> </span>{<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>albedo<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.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>
 
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sampler<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.TextureSampler(
-<span style="color: #bbbbbb">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,
-<span style="color: #bbbbbb">        </span>Filament.MagFilter.LINEAR,
-<span style="color: #bbbbbb">        </span>Filament.WrapMode.CLAMP_TO_EDGE);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>sampler<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Filament.TextureSampler(<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.MinFilter.LINEAR_MIPMAP_LINEAR,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.MagFilter.LINEAR,<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">        </span>Filament.WrapMode.CLAMP_TO_EDGE);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;albedo&#39;</span>,<span style="color: #bbbbbb"> </span>albedo,<span style="color: #bbbbbb"> </span>sampler);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span>roughness,<span style="color: #bbbbbb"> </span>sampler);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;metallic&#39;</span>,<span style="color: #bbbbbb"> </span>metallic,<span style="color: #bbbbbb"> </span>sampler);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;normal&#39;</span>,<span style="color: #bbbbbb"> </span>normal,<span style="color: #bbbbbb"> </span>sampler);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;ao&#39;</span>,<span style="color: #bbbbbb"> </span>ao,<span style="color: #bbbbbb"> </span>sampler);
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;albedo&#39;</span>,<span style="color: #bbbbbb"> </span>albedo,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;roughness&#39;</span>,<span style="color: #bbbbbb"> </span>roughness,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;metallic&#39;</span>,<span style="color: #bbbbbb"> </span>metallic,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;normal&#39;</span>,<span style="color: #bbbbbb"> </span>normal,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.matinstance.setTextureParameter(<span style="color: #BA2121">&#39;ao&#39;</span>,<span style="color: #bbbbbb"> </span>ao,<span style="color: #bbbbbb"> </span>sampler);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// Replace low-res skybox with high-res skybox.</span>
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.engine.destroySkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_large_url);
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);
+<span style="color: #bbbbbb">    </span><span style="color: #3D7B7B; font-style: italic">// Replace low-res skybox with high-res skybox.</span><span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.engine.destroySkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.skybox<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.createSkyFromKtx1(sky_large_url);<span style="color: #bbbbbb"></span>
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.setSkybox(<span style="color: #008000; font-weight: bold">this</span>.skybox);<span style="color: #bbbbbb"></span>
 
-<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.suzanne);
-});
+<span style="color: #bbbbbb">    </span><span style="color: #008000; font-weight: bold">this</span>.scene.addEntity(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
+});<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <h2>Introduce trackball rotation</h2>
@@ -241,13 +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>});
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">this</span>.trackball<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #AA22FF; font-weight: bold">new</span><span style="color: #bbbbbb"> </span>Trackball(canvas,<span style="color: #bbbbbb"> </span>{startSpin<span style="color: #666666">:</span><span style="color: #bbbbbb"> </span><span style="color: #666666">0.035</span>});<span style="color: #bbbbbb"></span>
 </pre></div>
 
-<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();
-<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);
-tcm.setTransform(inst,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());
-inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();
+<div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%;"><span></span><span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>tcm<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.engine.getTransformManager();<span style="color: #bbbbbb"></span>
+<span style="color: #008000; font-weight: bold">const</span><span style="color: #bbbbbb"> </span>inst<span style="color: #bbbbbb"> </span><span style="color: #666666">=</span><span style="color: #bbbbbb"> </span>tcm.getInstance(<span style="color: #008000; font-weight: bold">this</span>.suzanne);<span style="color: #bbbbbb"></span>
+tcm.setTransform(inst,<span style="color: #bbbbbb"> </span><span style="color: #008000; font-weight: bold">this</span>.trackball.getMatrix());<span style="color: #bbbbbb"></span>
+inst.<span style="color: #AA22FF; font-weight: bold">delete</span>();<span style="color: #bbbbbb"></span>
 </pre></div>
 
 <p>That&#x27;s it, we now have a fast-loading interactive demo. The complete JavaScript file is available

docs/webgl/tutorial_triangle.html

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

filament/CMakeLists.txt

@@ -26,6 +26,7 @@ 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
@@ -67,6 +68,7 @@ set(SRCS
         src/HwRenderPrimitiveFactory.cpp
         src/IndexBuffer.cpp
         src/IndirectLight.cpp
+        src/InstanceBuffer.cpp
         src/LightManager.cpp
         src/Material.cpp
         src/MaterialInstance.cpp
@@ -108,6 +110,7 @@ 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
@@ -171,6 +174,7 @@ 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
@@ -233,19 +237,17 @@ set(MATERIAL_SRCS
         src/materials/skybox.mat
         src/materials/ssao/sao.mat
         src/materials/ssao/saoBentNormals.mat
-        src/materials/separableGaussianBlur1.mat
-        src/materials/separableGaussianBlur2.mat
-        src/materials/separableGaussianBlur3.mat
-        src/materials/separableGaussianBlur4.mat
-        src/materials/separableGaussianBlur1L.mat
-        src/materials/separableGaussianBlur2L.mat
-        src/materials/separableGaussianBlur3L.mat
-        src/materials/separableGaussianBlur4L.mat
+        src/materials/separableGaussianBlur.mat
         src/materials/antiAliasing/fxaa.mat
         src/materials/antiAliasing/taa.mat
         src/materials/vsmMipmap.mat
 )
 
+set(MATERIAL_ES2_SRCS
+        src/materials/defaultMaterial0.mat
+        src/materials/skybox0.mat
+)
+
 # Embed the binary resource blob for materials.
 get_resgen_vars(${RESOURCE_DIR} materials)
 list(APPEND PRIVATE_HDRS ${RESGEN_HEADER})
@@ -311,6 +313,23 @@ 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(
@@ -436,56 +455,7 @@ add_custom_command(
 )
 
 add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur1.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur2.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur3.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur4.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur1L.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur2L.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur3L.filamat"
-        DEPENDS src/materials/separableGaussianBlur.vs
-        DEPENDS src/materials/separableGaussianBlur.fs
-        APPEND
-)
-
-add_custom_command(
-        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur4L.filamat"
+        OUTPUT "${MATERIAL_DIR}/separableGaussianBlur.filamat"
         DEPENDS src/materials/separableGaussianBlur.vs
         DEPENDS src/materials/separableGaussianBlur.fs
         APPEND
@@ -541,6 +511,13 @@ target_link_libraries(${TARGET} PUBLIC filaflat)
 target_link_libraries(${TARGET} PUBLIC filabridge)
 target_link_libraries(${TARGET} PUBLIC ibl-lite)
 
+if (FILAMENT_ENABLE_FGDBG)
+    target_link_libraries(${TARGET} PUBLIC fgdbg)
+    add_definitions(-DFILAMENT_ENABLE_FGDBG=1)
+else()
+    add_definitions(-DFILAMENT_ENABLE_FGDBG=0)
+endif()
+
 if (FILAMENT_ENABLE_MATDBG)
     target_link_libraries(${TARGET} PUBLIC matdbg)
     add_definitions(-DFILAMENT_ENABLE_MATDBG=1)

filament/backend/CMakeLists.txt

@@ -25,6 +25,7 @@ set(PUBLIC_HDRS
 
 set(SRCS
         src/BackendUtils.cpp
+        src/BlobCacheKey.cpp
         src/Callable.cpp
         src/CallbackHandler.cpp
         src/CircularBuffer.cpp
@@ -69,6 +70,8 @@ if (FILAMENT_SUPPORTS_OPENGL AND NOT FILAMENT_USE_EXTERNAL_GLES3 AND NOT FILAMEN
             src/opengl/gl_headers.h
             src/opengl/GLUtils.cpp
             src/opengl/GLUtils.h
+            src/opengl/OpenGLBlobCache.cpp
+            src/opengl/OpenGLBlobCache.h
             src/opengl/OpenGLContext.cpp
             src/opengl/OpenGLContext.h
             src/opengl/OpenGLDriver.cpp
@@ -193,20 +196,10 @@ if (FILAMENT_SUPPORTS_VULKAN)
             src/vulkan/VulkanUtility.cpp
             src/vulkan/VulkanUtility.h
     )
-    if (LINUX)
-        if (FILAMENT_SUPPORTS_WAYLAND)
-            list(APPEND SRCS src/vulkan/PlatformVkLinuxWayland.cpp)
-        elseif (FILAMENT_SUPPORTS_X11)
-            list(APPEND SRCS src/vulkan/PlatformVkLinuxX11.cpp)
-        endif()
-    elseif (APPLE AND NOT IOS)
-        list(APPEND SRCS src/vulkan/PlatformVkCocoa.mm)
-    elseif (IOS)
-        list(APPEND SRCS src/vulkan/PlatformVkCocoaTouch.mm)
-    elseif (ANDROID)
-        list(APPEND SRCS src/vulkan/PlatformVkAndroid.cpp)
-    elseif (WIN32)
-        list(APPEND SRCS src/vulkan/PlatformVkWindows.cpp)
+    if (ANDROID OR LINUX OR WIN32)
+        list(APPEND SRCS src/vulkan/platform/PlatformVulkanAndroidLinuxWindows.cpp)
+    elseif (APPLE OR IOS)
+        list(APPEND SRCS src/vulkan/platform/PlatformVulkanApple.mm)
     endif()
 endif()
 

filament/backend/include/backend/DriverEnums.h

@@ -106,7 +106,8 @@ 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_1 = 1,  //!< OpenGL ES 3.0 features (default)
+    FEATURE_LEVEL_0 = 0,  //!< OpenGL ES 2.0 features
+    FEATURE_LEVEL_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
 };

filament/backend/include/backend/Platform.h

@@ -22,6 +22,7 @@
 #include <backend/DriverEnums.h>
 
 #include <utils/compiler.h>
+#include <utils/Invocable.h>
 
 namespace filament::backend {
 
@@ -47,6 +48,8 @@ public:
         size_t handleArenaSize = 0;
     };
 
+    Platform() noexcept;
+
     virtual ~Platform() noexcept;
 
     /**
@@ -79,6 +82,85 @@ 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,7 +48,15 @@ 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>;
@@ -78,6 +86,14 @@ 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.
@@ -93,6 +109,7 @@ 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; }
@@ -103,6 +120,12 @@ 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; }
 
@@ -113,6 +136,8 @@ public:
         return mSpecializationConstants;
     }
 
+    uint64_t getCacheId() const noexcept { return mCacheId; }
+
 private:
     friend utils::io::ostream& operator<<(utils::io::ostream& out, const Program& builder);
 
@@ -120,8 +145,11 @@ 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,6 +95,19 @@ 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/PlatformEGL.h

@@ -26,6 +26,9 @@
 
 #include <backend/DriverEnums.h>
 
+#include <utility>
+#include <vector>
+
 namespace filament::backend {
 
 /**
@@ -37,6 +40,27 @@ 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
 
@@ -79,6 +103,8 @@ 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
@@ -105,8 +131,10 @@ protected:
             bool OES_EGL_image_external_essl3 = false;
         } gl;
         struct {
-            bool KHR_no_config_context = false;
+            bool ANDROID_recordable = false;
+            bool KHR_create_context = false;
             bool KHR_gl_colorspace = false;
+            bool KHR_no_config_context = false;
         } egl;
     } ext;
 

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

@@ -27,19 +27,10 @@ namespace filament::backend {
 
 class VulkanPlatform : public Platform {
 public:
-    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;
-    };
+    Driver* createDriver(void* const sharedContext,
+	Platform::DriverConfig const& driverConfig) noexcept override;
 
-    // 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;
+    int getOSVersion() const noexcept override { return 0; }
 
    ~VulkanPlatform() override;
 };

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

@@ -22,6 +22,7 @@
 #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,6 +17,7 @@
 #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>

filament/backend/include/private/backend/DriverAPI.inc

@@ -387,6 +387,10 @@ DECL_DRIVER_API_N(beginTimerQuery,
 DECL_DRIVER_API_N(endTimerQuery,
         backend::TimerQueryHandle, query)
 
+DECL_DRIVER_API_N(compilePrograms,
+        backend::CallbackHandler*, handler,
+        backend::CallbackHandler::Callback, callback,
+        void*, user)
 
 /*
  * Swap chain

filament/backend/src/BlobCacheKey.cpp

@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+#include "BlobCacheKey.h"
+
+#include <memory>
+
+namespace filament::backend {
+
+struct BlobCacheKey::Key {
+    uint64_t id;
+    Program::SpecializationConstant constants[];
+};
+
+BlobCacheKey::BlobCacheKey() noexcept = default;
+
+BlobCacheKey::BlobCacheKey(uint64_t id,
+        BlobCacheKey::SpecializationConstants const& specConstants) {
+    mSize = sizeof(Key) + sizeof(Key::constants[0]) * specConstants.size();
+
+    Key* const pKey = (Key *)malloc(mSize);
+    memset(pKey, 0, mSize);
+    mData.reset(pKey, ::free);
+
+    mData->id = id;
+    for (size_t i = 0; i < specConstants.size(); i++) {
+        mData->constants[i] = specConstants[i];
+    }
+}
+
+BlobCacheKey::BlobCacheKey(BlobCacheKey&& rhs) noexcept
+        : mData(std::move(rhs.mData)), mSize(rhs.mSize) {
+    rhs.mSize = 0;
+}
+
+BlobCacheKey& BlobCacheKey::operator=(BlobCacheKey&& rhs) noexcept {
+    if (this != &rhs) {
+        using std::swap;
+        swap(mData, rhs.mData);
+        swap(mSize, rhs.mSize);
+    }
+    return *this;
+}
+
+} // namespace filament::backend

filament/backend/src/BlobCacheKey.h

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+#ifndef TNT_FILAMENT_BACKEND_PRIVATE_BLOBCACHEKEY_H
+#define TNT_FILAMENT_BACKEND_PRIVATE_BLOBCACHEKEY_H
+
+#include <backend/Program.h>
+
+namespace filament::backend {
+
+class BlobCacheKey {
+public:
+    using SpecializationConstants = utils::FixedCapacityVector<Program::SpecializationConstant>;
+
+    BlobCacheKey() noexcept;
+    BlobCacheKey(uint64_t id, SpecializationConstants const& specConstants);
+
+    BlobCacheKey(BlobCacheKey const& rhs) = default;
+    BlobCacheKey& operator=(BlobCacheKey const& rhs) = default;
+
+    BlobCacheKey(BlobCacheKey&& rhs) noexcept;
+    BlobCacheKey& operator=(BlobCacheKey&& rhs) noexcept;
+
+    void const* data() const noexcept {
+        return mData.get();
+    }
+
+    size_t size() const noexcept {
+        return mSize;
+    }
+
+    explicit operator bool() const noexcept { return mSize > 0; }
+
+    void swap(BlobCacheKey& other) noexcept {
+        using std::swap;
+        swap(other.mSize, mSize);
+        swap(other.mData, mData);
+    }
+
+private:
+    struct Key;
+
+    friend void swap(BlobCacheKey& lhs, BlobCacheKey& rhs) noexcept {
+        lhs.swap(rhs);
+    }
+
+    // we use a shared_ptr to play nice with std::function<>, it works because the buffer is const
+    std::shared_ptr<Key> mData{};
+    size_t mSize{};
+};
+
+} // namespace filament::backend
+
+#endif // TNT_FILAMENT_BACKEND_PRIVATE_BLOBCACHEKEY_H

filament/backend/src/Driver.cpp

@@ -95,11 +95,11 @@ void DriverBase::CallbackData::release(CallbackData* data) {
 
 void DriverBase::scheduleCallback(CallbackHandler* handler, void* user, CallbackHandler::Callback callback) {
     if (handler && UTILS_HAS_THREADING) {
-        std::lock_guard<std::mutex> lock(mServiceThreadLock);
+        std::lock_guard<std::mutex> const lock(mServiceThreadLock);
         mServiceThreadCallbackQueue.emplace_back(handler, callback, user);
         mServiceThreadCondition.notify_one();
     } else {
-        std::lock_guard<std::mutex> lock(mPurgeLock);
+        std::lock_guard<std::mutex> const lock(mPurgeLock);
         mCallbacks.emplace_back(user, callback);
     }
 }

filament/backend/src/Platform.cpp

@@ -18,6 +18,8 @@
 
 namespace filament::backend {
 
+Platform::Platform() noexcept = default;
+
 // this generates the vtable in this translation unit
 Platform::~Platform() noexcept = default;
 
@@ -25,4 +27,28 @@ bool Platform::pumpEvents() noexcept {
     return false;
 }
 
+void Platform::setBlobFunc(InsertBlobFunc&& insertBlob, RetrieveBlobFunc&& retrieveBlob) noexcept {
+    if (!mInsertBlob && !mRetrieveBlob) {
+        mInsertBlob = std::move(insertBlob);
+        mRetrieveBlob = std::move(retrieveBlob);
+    }
+}
+
+bool Platform::hasBlobFunc() const noexcept {
+    return mInsertBlob && mRetrieveBlob;
+}
+
+void Platform::insertBlob(void const* key, size_t keySize, void const* value, size_t valueSize) {
+    if (mInsertBlob) {
+        mInsertBlob(key, keySize, value, valueSize);
+    }
+}
+
+size_t Platform::retrieveBlob(void const* key, size_t keySize, void* value, size_t valueSize) {
+    if (mRetrieveBlob) {
+        return mRetrieveBlob(key, keySize, value, valueSize);
+    }
+    return 0;
+}
+
 } // namespace filament::backend

filament/backend/src/PlatformFactory.cpp

@@ -24,37 +24,19 @@
     #if defined(FILAMENT_SUPPORTS_OPENGL) && !defined(FILAMENT_USE_EXTERNAL_GLES3)
         #include "backend/platforms/PlatformEGLAndroid.h"
     #endif
-    #if defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
-        #include "vulkan/PlatformVkAndroid.h"
-    #endif
 #elif defined(IOS)
     #if defined(FILAMENT_SUPPORTS_OPENGL) && !defined(FILAMENT_USE_EXTERNAL_GLES3)
         #include "backend/platforms/PlatformCocoaTouchGL.h"
     #endif
-    #if defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
-        #include "vulkan/PlatformVkCocoaTouch.h"
-    #endif
 #elif defined(__APPLE__)
     #if defined(FILAMENT_SUPPORTS_OPENGL) && !defined(FILAMENT_USE_EXTERNAL_GLES3) && !defined(FILAMENT_USE_SWIFTSHADER)
         #include <backend/platforms/PlatformCocoaGL.h>
     #endif
-    #if defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
-        #include "vulkan/PlatformVkCocoa.h"
-    #endif
 #elif defined(__linux__)
-    #if defined(FILAMENT_SUPPORTS_GGP)
-        #include "vulkan/PlatformVkLinuxGGP.h"
-    #elif defined(FILAMENT_SUPPORTS_WAYLAND)
-        #if defined (FILAMENT_DRIVER_SUPPORTS_VULKAN)
-            #include "vulkan/PlatformVkLinuxWayland.h"
-        #endif
-    #elif defined(FILAMENT_SUPPORTS_X11)
+    #if defined(FILAMENT_SUPPORTS_X11)
         #if defined(FILAMENT_SUPPORTS_OPENGL) && !defined(FILAMENT_USE_EXTERNAL_GLES3) && !defined(FILAMENT_USE_SWIFTSHADER)
             #include "backend/platforms/PlatformGLX.h"
         #endif
-        #if defined (FILAMENT_DRIVER_SUPPORTS_VULKAN)
-            #include "vulkan/PlatformVkLinuxX11.h"
-        #endif
     #elif defined(FILAMENT_SUPPORTS_EGL_ON_LINUX)
         #if defined(FILAMENT_SUPPORTS_OPENGL) && !defined(FILAMENT_USE_EXTERNAL_GLES3) && !defined(FILAMENT_USE_SWIFTSHADER)
             #include "backend/platforms/PlatformEGLHeadless.h"
@@ -64,13 +46,14 @@
     #if defined(FILAMENT_SUPPORTS_OPENGL) && !defined(FILAMENT_USE_EXTERNAL_GLES3) && !defined(FILAMENT_USE_SWIFTSHADER)
         #include "backend/platforms/PlatformWGL.h"
     #endif
-    #if defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
-        #include "vulkan/PlatformVkWindows.h"
-    #endif
 #elif defined(__EMSCRIPTEN__)
     #include "backend/platforms/PlatformWebGL.h"
 #endif
 
+#if defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
+    #include "vulkan/platform/PlatformVulkan.h"
+#endif
+
 #if defined (FILAMENT_SUPPORTS_METAL)
 namespace filament::backend {
 filament::backend::Platform* createDefaultMetalPlatform();
@@ -106,7 +89,7 @@ Platform* PlatformFactory::create(Backend* backend) noexcept {
 #elif defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
         *backend = Backend::VULKAN;
 #else
-        * backend = Backend::OPENGL;
+        *backend = Backend::OPENGL;
 #endif
     }
     if (*backend == Backend::NOOP) {
@@ -114,25 +97,7 @@ Platform* PlatformFactory::create(Backend* backend) noexcept {
     }
     if (*backend == Backend::VULKAN) {
         #if defined(FILAMENT_DRIVER_SUPPORTS_VULKAN)
-            #if defined(__ANDROID__)
-                return new PlatformVkAndroid();
-            #elif defined(IOS)
-                return new PlatformVkCocoaTouch();
-            #elif defined(__linux__)
-                #if defined(FILAMENT_SUPPORTS_GGP)
-                    return new PlatformVkLinuxGGP();
-                #elif defined(FILAMENT_SUPPORTS_WAYLAND)
-                    return new PlatformVkLinuxWayland();
-                #elif defined(FILAMENT_SUPPORTS_X11)
-                    return new PlatformVkLinuxX11();
-                #endif
-            #elif defined(__APPLE__)
-                return new PlatformVkCocoa();
-            #elif defined(WIN32)
-                return new PlatformVkWindows();
-            #else
-                return nullptr;
-            #endif
+            return new PlatformVulkan();
         #else
             return nullptr;
         #endif
@@ -160,6 +125,8 @@ Platform* PlatformFactory::create(Backend* backend) noexcept {
                 return new PlatformGLX();
             #elif defined(FILAMENT_SUPPORTS_EGL_ON_LINUX)
                 return new PlatformEGLHeadless();
+            #else
+                return nullptr;
             #endif
         #elif defined(WIN32)
             return new PlatformWGL();

filament/backend/src/Program.cpp

@@ -32,6 +32,8 @@ Program& Program::operator=(Program&& rhs) noexcept {
     mShadersSource.operator=(std::move(rhs.mShadersSource));
     mName.operator=(std::move(rhs.mName));
     mLogger.operator=(std::move(rhs.mLogger));
+    mSpecializationConstants.operator=(std::move(rhs.mSpecializationConstants));
+    mBindingUniformInfo.operator=(std::move(rhs.mBindingUniformInfo));
     return *this;
 }
 
@@ -60,6 +62,19 @@ Program& Program::uniformBlockBindings(
     return *this;
 }
 
+Program& Program::uniforms(uint32_t index, UniformInfo const& uniforms) noexcept {
+    assert_invariant(index < UNIFORM_BINDING_COUNT);
+    mBindingUniformInfo[index] = uniforms;
+    return *this;
+}
+
+
+Program& Program::attributes(
+        utils::FixedCapacityVector<std::pair<utils::CString, uint8_t>> attributes) noexcept {
+    mAttributes = std::move(attributes);
+    return *this;
+}
+
 Program& Program::setSamplerGroup(size_t bindingPoint, ShaderStageFlags stageFlags,
         const Program::Sampler* samplers, size_t count) noexcept {
     auto& groupData = mSamplerGroups[bindingPoint];
@@ -77,6 +92,11 @@ Program& Program::specializationConstants(
     return *this;
 }
 
+Program& Program::cacheId(uint64_t cacheId) noexcept {
+    mCacheId = cacheId;
+    return *this;
+}
+
 io::ostream& operator<<(io::ostream& out, const Program& builder) {
     out << "Program{";
     builder.mLogger(out);
@@ -84,5 +104,4 @@ io::ostream& operator<<(io::ostream& out, const Program& builder) {
     return out;
 }
 
-
 } // namespace filament::backend

filament/backend/src/metal/MetalDriver.mm

@@ -969,6 +969,11 @@ void MetalDriver::updateSamplerGroup(Handle<HwSamplerGroup> sbh, BufferDescripto
     scheduleDestroy(std::move(data));
 }
 
+void MetalDriver::compilePrograms(CallbackHandler* handler,
+        CallbackHandler::Callback callback, void* user) {
+    scheduleCallback(handler, user, callback);
+}
+
 void MetalDriver::beginRenderPass(Handle<HwRenderTarget> rth,
         const RenderPassParams& params) {
 

filament/backend/src/noop/NoopDriver.cpp

@@ -256,6 +256,11 @@ void NoopDriver::updateSamplerGroup(Handle<HwSamplerGroup> sbh,
     scheduleDestroy(std::move(data));
 }
 
+void NoopDriver::compilePrograms(CallbackHandler* handler,
+        CallbackHandler::Callback callback, void* user) {
+    scheduleCallback(handler, user, callback);
+}
+
 void NoopDriver::beginRenderPass(Handle<HwRenderTarget> rth, const RenderPassParams& params) {
 }
 

filament/backend/src/opengl/GLUtils.cpp

@@ -81,9 +81,6 @@ const char* getFramebufferStatus(GLenum status) noexcept {
         case GL_FRAMEBUFFER_COMPLETE:
             string = "GL_FRAMEBUFFER_COMPLETE";
             break;
-        case GL_FRAMEBUFFER_UNDEFINED:
-            string = "GL_FRAMEBUFFER_UNDEFINED";
-            break;
         case GL_FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
             string = "GL_FRAMEBUFFER_INCOMPLETE_ATTACHMENT";
             break;
@@ -93,9 +90,14 @@ const char* getFramebufferStatus(GLenum status) noexcept {
         case GL_FRAMEBUFFER_UNSUPPORTED:
             string = "GL_FRAMEBUFFER_UNSUPPORTED";
             break;
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        case GL_FRAMEBUFFER_UNDEFINED:
+            string = "GL_FRAMEBUFFER_UNDEFINED";
+            break;
         case GL_FRAMEBUFFER_INCOMPLETE_MULTISAMPLE:
             string = "GL_FRAMEBUFFER_INCOMPLETE_MULTISAMPLE";
             break;
+#endif
         default:
             break;
     }

filament/backend/src/opengl/GLUtils.h

@@ -118,9 +118,14 @@ constexpr inline GLenum getBufferBindingType(BufferObjectBinding bindingType) no
         case BufferObjectBinding::VERTEX:
             return GL_ARRAY_BUFFER;
         case BufferObjectBinding::UNIFORM:
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
             return GL_UNIFORM_BUFFER;
+#else
+            utils::panic(__func__, __FILE__, __LINE__, "UNIFORM not supported");
+            return 0x8A11;
+#endif
         case BufferObjectBinding::SHADER_STORAGE:
-#if defined(BACKEND_OPENGL_LEVEL_GLES31)
+#ifdef BACKEND_OPENGL_LEVEL_GLES31
             return GL_SHADER_STORAGE_BUFFER;
 #else
             utils::panic(__func__, __FILE__, __LINE__, "SHADER_STORAGE not supported");
@@ -169,7 +174,12 @@ constexpr inline GLenum getComponentType(ElementType type) noexcept {
         case ElementType::HALF2:
         case ElementType::HALF3:
         case ElementType::HALF4:
+            // on ES2 we should never end-up here
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
             return GL_HALF_FLOAT;
+#else
+            return GL_HALF_FLOAT_OES;
+#endif
     }
 }
 
@@ -238,13 +248,7 @@ constexpr inline GLenum getBlendFunctionMode(BlendFunction mode) noexcept {
     }
 }
 
-constexpr inline GLenum getTextureCompareMode(SamplerCompareMode mode) noexcept {
-    return mode == SamplerCompareMode::NONE ?
-           GL_NONE : GL_COMPARE_REF_TO_TEXTURE;
-}
-
-constexpr inline GLenum getTextureCompareFunc(SamplerCompareFunc func) noexcept {
-    using SamplerCompareFunc = SamplerCompareFunc;
+constexpr inline GLenum getCompareFunc(SamplerCompareFunc func) noexcept {
     switch (func) {
         case SamplerCompareFunc::LE:    return GL_LEQUAL;
         case SamplerCompareFunc::GE:    return GL_GEQUAL;
@@ -257,12 +261,23 @@ constexpr inline GLenum getTextureCompareFunc(SamplerCompareFunc func) noexcept
     }
 }
 
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+constexpr inline GLenum getTextureCompareMode(SamplerCompareMode mode) noexcept {
+    return mode == SamplerCompareMode::NONE ?
+           GL_NONE : GL_COMPARE_REF_TO_TEXTURE;
+}
+
+constexpr inline GLenum getTextureCompareFunc(SamplerCompareFunc func) noexcept {
+    return getCompareFunc(func);
+}
+#endif
+
 constexpr inline GLenum getDepthFunc(SamplerCompareFunc func) noexcept {
-    return getTextureCompareFunc(func);
+    return getCompareFunc(func);
 }
 
 constexpr inline GLenum getStencilFunc(SamplerCompareFunc func) noexcept {
-    return getTextureCompareFunc(func);
+    return getCompareFunc(func);
 }
 
 constexpr inline GLenum getStencilOp(StencilOperation op) noexcept {
@@ -281,18 +296,24 @@ constexpr inline GLenum getStencilOp(StencilOperation op) noexcept {
 constexpr inline GLenum getFormat(PixelDataFormat format) noexcept {
     using PixelDataFormat = PixelDataFormat;
     switch (format) {
+        case PixelDataFormat::RGB:              return GL_RGB;
+        case PixelDataFormat::RGBA:             return GL_RGBA;
+        case PixelDataFormat::UNUSED:           return GL_RGBA; // should never happen (used to be rgbm)
+        case PixelDataFormat::DEPTH_COMPONENT:  return GL_DEPTH_COMPONENT;
+        case PixelDataFormat::ALPHA:            return GL_ALPHA;
+        case PixelDataFormat::DEPTH_STENCIL:    return GL_DEPTH_STENCIL;
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        // when context is ES2 we should never end-up here
         case PixelDataFormat::R:                return GL_RED;
         case PixelDataFormat::R_INTEGER:        return GL_RED_INTEGER;
         case PixelDataFormat::RG:               return GL_RG;
         case PixelDataFormat::RG_INTEGER:       return GL_RG_INTEGER;
-        case PixelDataFormat::RGB:              return GL_RGB;
         case PixelDataFormat::RGB_INTEGER:      return GL_RGB_INTEGER;
-        case PixelDataFormat::RGBA:             return GL_RGBA;
         case PixelDataFormat::RGBA_INTEGER:     return GL_RGBA_INTEGER;
-        case PixelDataFormat::UNUSED:           return GL_RGBA; // should never happen (used to be rgbm)
-        case PixelDataFormat::DEPTH_COMPONENT:  return GL_DEPTH_COMPONENT;
-        case PixelDataFormat::DEPTH_STENCIL:    return GL_DEPTH_STENCIL;
-        case PixelDataFormat::ALPHA:            return GL_ALPHA;
+#else
+        // silence compiler warning in ES2 headers mode
+        default: return GL_NONE;
+#endif
     }
 }
 
@@ -305,32 +326,34 @@ constexpr inline GLenum getType(PixelDataType type) noexcept {
         case PixelDataType::SHORT:                return GL_SHORT;
         case PixelDataType::UINT:                 return GL_UNSIGNED_INT;
         case PixelDataType::INT:                  return GL_INT;
-        case PixelDataType::HALF:                 return GL_HALF_FLOAT;
         case PixelDataType::FLOAT:                return GL_FLOAT;
-        case PixelDataType::UINT_10F_11F_11F_REV: return GL_UNSIGNED_INT_10F_11F_11F_REV;
         case PixelDataType::USHORT_565:           return GL_UNSIGNED_SHORT_5_6_5;
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        // when context is ES2 we should never end-up here
+        case PixelDataType::HALF:                 return GL_HALF_FLOAT;
+        case PixelDataType::UINT_10F_11F_11F_REV: return GL_UNSIGNED_INT_10F_11F_11F_REV;
         case PixelDataType::UINT_2_10_10_10_REV:  return GL_UNSIGNED_INT_2_10_10_10_REV;
         case PixelDataType::COMPRESSED:           return 0; // should never happen
+#else
+        // silence compiler warning in ES2 headers mode
+        default: return GL_NONE;
+#endif
     }
 }
 
+#if !defined(__EMSCRIPTEN__)  && !defined(FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2)
 constexpr inline GLenum getSwizzleChannel(TextureSwizzle c) noexcept {
     using TextureSwizzle = TextureSwizzle;
     switch (c) {
-        case TextureSwizzle::SUBSTITUTE_ZERO:
-            return GL_ZERO;
-        case TextureSwizzle::SUBSTITUTE_ONE:
-            return GL_ONE;
-        case TextureSwizzle::CHANNEL_0:
-            return GL_RED;
-        case TextureSwizzle::CHANNEL_1:
-            return GL_GREEN;
-        case TextureSwizzle::CHANNEL_2:
-            return GL_BLUE;
-        case TextureSwizzle::CHANNEL_3:
-            return GL_ALPHA;
+        case TextureSwizzle::SUBSTITUTE_ZERO:   return GL_ZERO;
+        case TextureSwizzle::SUBSTITUTE_ONE:    return GL_ONE;
+        case TextureSwizzle::CHANNEL_0:         return GL_RED;
+        case TextureSwizzle::CHANNEL_1:         return GL_GREEN;
+        case TextureSwizzle::CHANNEL_2:         return GL_BLUE;
+        case TextureSwizzle::CHANNEL_3:         return GL_ALPHA;
     }
 }
+#endif
 
 constexpr inline GLenum getCullingMode(CullingMode mode) noexcept {
     switch (mode) {
@@ -346,18 +369,56 @@ constexpr inline GLenum getCullingMode(CullingMode mode) noexcept {
     }
 }
 
-// clang looses it on this one, and generates a huge jump table when
+// ES2 supported internal formats for texturing and how they  map to a format/type
+constexpr inline std::pair<GLenum, GLenum> textureFormatToFormatAndType(
+        TextureFormat format) noexcept {
+    switch (format) {
+        case TextureFormat::RGB8:       return { GL_RGB,                GL_UNSIGNED_BYTE };
+        case TextureFormat::RGBA8:      return { GL_RGBA,               GL_UNSIGNED_BYTE };
+        case TextureFormat::RGB565:     return { GL_RGB,                GL_UNSIGNED_SHORT_5_6_5 };
+        case TextureFormat::RGB5_A1:    return { GL_RGBA,               GL_UNSIGNED_SHORT_5_5_5_1 };
+        case TextureFormat::RGBA4:      return { GL_RGBA,               GL_UNSIGNED_SHORT_4_4_4_4 };
+        case TextureFormat::DEPTH16:    return { GL_DEPTH_COMPONENT,    GL_UNSIGNED_SHORT };
+        case TextureFormat::DEPTH24:    return { GL_DEPTH_COMPONENT,    GL_UNSIGNED_INT };
+        case TextureFormat::DEPTH24_STENCIL8:
+                                        return { GL_DEPTH24_STENCIL8,   GL_UNSIGNED_INT_24_8 };
+        default:                        return { GL_NONE,               GL_NONE };
+    }
+}
+
+// clang loses it on this one, and generates a huge jump table when
 // inlined. So we don't  mark it as inline (only constexpr) which solves the problem,
 // strangely, when not inlined, clang simply generates an array lookup.
 constexpr /* inline */ GLenum getInternalFormat(TextureFormat format) noexcept {
-    using TextureFormat = TextureFormat;
     switch (format) {
+
+        /* Formats supported by our ES2 implementations */
+
+        // 8-bits per element
+        case TextureFormat::STENCIL8:          return GL_STENCIL_INDEX8;
+
+        // 16-bits per element
+        case TextureFormat::RGB565:            return GL_RGB565;
+        case TextureFormat::RGB5_A1:           return GL_RGB5_A1;
+        case TextureFormat::RGBA4:             return GL_RGBA4;
+        case TextureFormat::DEPTH16:           return GL_DEPTH_COMPONENT16;
+
+        // 24-bits per element
+        case TextureFormat::RGB8:              return GL_RGB8;
+        case TextureFormat::DEPTH24:           return GL_DEPTH_COMPONENT24;
+
+        // 32-bits per element
+        case TextureFormat::RGBA8:             return GL_RGBA8;
+        case TextureFormat::DEPTH24_STENCIL8:  return GL_DEPTH24_STENCIL8;
+
+        /* Formats not supported by our ES2 implementations */
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
         // 8-bits per element
         case TextureFormat::R8:                return GL_R8;
         case TextureFormat::R8_SNORM:          return GL_R8_SNORM;
         case TextureFormat::R8UI:              return GL_R8UI;
         case TextureFormat::R8I:               return GL_R8I;
-        case TextureFormat::STENCIL8:          return GL_STENCIL_INDEX8;
 
         // 16-bits per element
         case TextureFormat::R16F:              return GL_R16F;
@@ -367,18 +428,12 @@ constexpr /* inline */ GLenum getInternalFormat(TextureFormat format) noexcept {
         case TextureFormat::RG8_SNORM:         return GL_RG8_SNORM;
         case TextureFormat::RG8UI:             return GL_RG8UI;
         case TextureFormat::RG8I:              return GL_RG8I;
-        case TextureFormat::RGB565:            return GL_RGB565;
-        case TextureFormat::RGB5_A1:           return GL_RGB5_A1;
-        case TextureFormat::RGBA4:             return GL_RGBA4;
-        case TextureFormat::DEPTH16:           return GL_DEPTH_COMPONENT16;
 
         // 24-bits per element
-        case TextureFormat::RGB8:              return GL_RGB8;
         case TextureFormat::SRGB8:             return GL_SRGB8;
         case TextureFormat::RGB8_SNORM:        return GL_RGB8_SNORM;
         case TextureFormat::RGB8UI:            return GL_RGB8UI;
         case TextureFormat::RGB8I:             return GL_RGB8I;
-        case TextureFormat::DEPTH24:           return GL_DEPTH_COMPONENT24;
 
         // 32-bits per element
         case TextureFormat::R32F:              return GL_R32F;
@@ -389,14 +444,12 @@ constexpr /* inline */ GLenum getInternalFormat(TextureFormat format) noexcept {
         case TextureFormat::RG16I:             return GL_RG16I;
         case TextureFormat::R11F_G11F_B10F:    return GL_R11F_G11F_B10F;
         case TextureFormat::RGB9_E5:           return GL_RGB9_E5;
-        case TextureFormat::RGBA8:             return GL_RGBA8;
         case TextureFormat::SRGB8_A8:          return GL_SRGB8_ALPHA8;
         case TextureFormat::RGBA8_SNORM:       return GL_RGBA8_SNORM;
         case TextureFormat::RGB10_A2:          return GL_RGB10_A2;
         case TextureFormat::RGBA8UI:           return GL_RGBA8UI;
         case TextureFormat::RGBA8I:            return GL_RGBA8I;
         case TextureFormat::DEPTH32F:          return GL_DEPTH_COMPONENT32F;
-        case TextureFormat::DEPTH24_STENCIL8:  return GL_DEPTH24_STENCIL8;
         case TextureFormat::DEPTH32F_STENCIL8: return GL_DEPTH32F_STENCIL8;
 
         // 48-bits per element
@@ -421,6 +474,12 @@ constexpr /* inline */ GLenum getInternalFormat(TextureFormat format) noexcept {
         case TextureFormat::RGBA32F:           return GL_RGBA32F;
         case TextureFormat::RGBA32UI:          return GL_RGBA32UI;
         case TextureFormat::RGBA32I:           return GL_RGBA32I;
+#else
+        default:
+            // this is just to squash the IDE warning about not having all cases when in
+            // ES2 header mode.
+            return 0;
+#endif
 
         // compressed formats
 #if defined(GL_ES_VERSION_3_0) || defined(BACKEND_OPENGL_VERSION_GL) || defined(GL_ARB_ES3_compatibility)

filament/backend/src/opengl/OpenGLBlobCache.cpp

@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+
+#include "OpenGLBlobCache.h"
+
+#include <backend/Platform.h>
+#include <backend/Program.h>
+
+#include <utils/Systrace.h>
+
+namespace filament::backend {
+
+struct OpenGLBlobCache::Blob {
+    GLenum format;
+    char data[];
+};
+
+GLuint OpenGLBlobCache::retrieve(BlobCacheKey* outKey, Platform& platform,
+        Program const& program) noexcept {
+    SYSTRACE_CALL();
+
+    if (!platform.hasBlobFunc()) {
+        // the key is never updated in that case
+        return 0;
+    }
+
+    SYSTRACE_CONTEXT();
+
+    GLuint programId = 0;
+
+    BlobCacheKey key{ program.getCacheId(), program.getSpecializationConstants() };
+
+    // FIXME: use a static buffer to avoid systematic allocation
+    // always attempt with 64 KiB
+    constexpr size_t DEFAULT_BLOB_SIZE = 65536;
+    std::unique_ptr<Blob, decltype(&::free)> blob{ (Blob*)malloc(DEFAULT_BLOB_SIZE), &::free };
+
+    size_t const blobSize = platform.retrieveBlob(
+            key.data(), key.size(), blob.get(), DEFAULT_BLOB_SIZE);
+
+    if (blobSize > 0) {
+        if (blobSize > DEFAULT_BLOB_SIZE) {
+            // our buffer was too small, retry with the correct size
+            blob.reset((Blob*)malloc(blobSize));
+            platform.retrieveBlob(
+                    key.data(), key.size(), blob.get(), blobSize);
+        }
+
+        GLsizei const programBinarySize = GLsizei(blobSize - sizeof(Blob));
+
+        programId = glCreateProgram();
+
+        SYSTRACE_NAME("glProgramBinary");
+        glProgramBinary(programId, blob->format, blob->data, programBinarySize);
+
+        if (UTILS_UNLIKELY(glGetError() != GL_NO_ERROR)) {
+            // glProgramBinary can fail if for instance the driver has been updated
+            glDeleteProgram(programId);
+            programId = 0;
+        }
+    }
+
+    if (UTILS_LIKELY(outKey)) {
+        using std::swap;
+        swap(*outKey, key);
+    }
+
+    return programId;
+}
+
+void OpenGLBlobCache::insert(Platform& platform,
+        BlobCacheKey const& key, GLuint program) noexcept {
+    SYSTRACE_CALL();
+    if (platform.hasBlobFunc()) {
+        SYSTRACE_CONTEXT();
+        GLenum format;
+        GLint programBinarySize;
+        SYSTRACE_NAME("glGetProgramiv");
+        glGetProgramiv(program, GL_PROGRAM_BINARY_LENGTH, &programBinarySize);
+        if (programBinarySize) {
+            size_t const size = sizeof(Blob) + programBinarySize;
+            std::unique_ptr<Blob, decltype(&::free)> blob{ (Blob*)malloc(size), &::free };
+            SYSTRACE_NAME("glGetProgramBinary");
+            glGetProgramBinary(program, programBinarySize, &programBinarySize, &format, blob->data);
+            GLenum const error = glGetError();
+            if (error == GL_NO_ERROR) {
+                blob->format = format;
+                platform.insertBlob(key.data(), key.size(), blob.get(), size);
+            }
+        }
+    }
+}
+
+} // namespace filament::backend

filament/backend/src/opengl/OpenGLBlobCache.h

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+#ifndef TNT_FILAMENT_BACKEND_OPENGLBLOBCACHE_H
+#define TNT_FILAMENT_BACKEND_OPENGLBLOBCACHE_H
+
+#include "gl_headers.h"
+
+#include "BlobCacheKey.h"
+
+namespace filament::backend {
+
+class Platform;
+class Program;
+
+class OpenGLBlobCache {
+public:
+    static GLuint retrieve(BlobCacheKey* key, Platform& platform,
+            Program const& program) noexcept;
+
+    static void insert(Platform& platform,
+            BlobCacheKey const& key, GLuint program) noexcept;
+
+private:
+    struct Blob;
+};
+
+} // namespace filament::backend
+
+#endif // TNT_FILAMENT_BACKEND_OPENGLBLOBCACHE_H

filament/backend/src/opengl/OpenGLContext.cpp

@@ -29,10 +29,17 @@ namespace filament::backend {
 
 bool OpenGLContext::queryOpenGLVersion(GLint* major, GLint* minor) noexcept {
 #ifdef BACKEND_OPENGL_VERSION_GLES
+#   ifdef BACKEND_OPENGL_LEVEL_GLES30
     char const* version = (char const*)glGetString(GL_VERSION);
     // This works on all versions of GLES
     int const n = version ? sscanf(version, "OpenGL ES %d.%d", major, minor) : 0;
     return n == 2;
+#   else
+    // when we compile with GLES2.0 only, we force the context version to 2.0
+    *major = 2;
+    *minor = 0;
+    return true;
+#   endif
 #else
     // OpenGL version
     glGetIntegerv(GL_MAJOR_VERSION, major);
@@ -60,19 +67,54 @@ OpenGLContext::OpenGLContext() noexcept {
     queryOpenGLVersion(&state.major, &state.minor);
 
     glGetIntegerv(GL_MAX_RENDERBUFFER_SIZE, &gets.max_renderbuffer_size);
-    glGetIntegerv(GL_MAX_UNIFORM_BLOCK_SIZE, &gets.max_uniform_block_size);
-    glGetIntegerv(GL_MAX_SAMPLES, &gets.max_samples);
-    glGetIntegerv(GL_MAX_DRAW_BUFFERS, &gets.max_draw_buffers);
     glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS, &gets.max_texture_image_units);
     glGetIntegerv(GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS, &gets.max_combined_texture_image_units);
-    glGetIntegerv(GL_MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS, &gets.max_transform_feedback_separate_attribs);
-    glGetIntegerv(GL_MAX_UNIFORM_BUFFER_BINDINGS, &gets.max_uniform_buffer_bindings);
-    glGetIntegerv(GL_UNIFORM_BUFFER_OFFSET_ALIGNMENT, &gets.uniform_buffer_offset_alignment);
+
+    if (state.major > 2) { // this check works for both GL and GLES, but is intended for GLES
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        glGetIntegerv(GL_MAX_UNIFORM_BLOCK_SIZE, &gets.max_uniform_block_size);
+        glGetIntegerv(GL_MAX_UNIFORM_BUFFER_BINDINGS, &gets.max_uniform_buffer_bindings);
+        glGetIntegerv(GL_UNIFORM_BUFFER_OFFSET_ALIGNMENT, &gets.uniform_buffer_offset_alignment);
+        glGetIntegerv(GL_MAX_SAMPLES, &gets.max_samples);
+        glGetIntegerv(GL_MAX_DRAW_BUFFERS, &gets.max_draw_buffers);
+        glGetIntegerv(GL_MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS,
+                &gets.max_transform_feedback_separate_attribs);
+#endif
+    } else {
+        gets.max_uniform_block_size = 0;
+        gets.max_uniform_buffer_bindings = 0;
+        gets.uniform_buffer_offset_alignment = 0;
+        gets.max_samples = 1;
+        gets.max_draw_buffers = 1;
+        gets.max_transform_feedback_separate_attribs = 0;
+    }
 
     constexpr auto const caps3 = FEATURE_LEVEL_CAPS[+FeatureLevel::FEATURE_LEVEL_3];
     constexpr GLint MAX_VERTEX_SAMPLER_COUNT = caps3.MAX_VERTEX_SAMPLER_COUNT;
     constexpr GLint MAX_FRAGMENT_SAMPLER_COUNT = caps3.MAX_FRAGMENT_SAMPLER_COUNT;
 
+    // default procs that can be overridden based on runtime version
+#ifdef BACKEND_OPENGL_LEVEL_GLES30
+    procs.genVertexArrays = glGenVertexArrays;
+    procs.bindVertexArray = glBindVertexArray;
+    procs.deleteVertexArrays = glDeleteVertexArrays;
+
+    // these are core in GL and GLES 3.x
+    procs.genQueries = glGenQueries;
+    procs.deleteQueries = glDeleteQueries;
+    procs.beginQuery = glBeginQuery;
+    procs.endQuery = glEndQuery;
+    procs.getQueryObjectuiv = glGetQueryObjectuiv;
+#   ifdef BACKEND_OPENGL_VERSION_GL
+        procs.getQueryObjectui64v = glGetQueryObjectui64v; // only core in GL
+#   elif defined(GL_EXT_disjoint_timer_query)
+        procs.getQueryObjectui64v = glGetQueryObjectui64vEXT;
+#   endif // BACKEND_OPENGL_VERSION_GL
+
+     // core in ES 3.0 and GL 4.3
+    procs.invalidateFramebuffer = glInvalidateFramebuffer;
+#endif // BACKEND_OPENGL_LEVEL_GLES30
+
 #ifdef BACKEND_OPENGL_VERSION_GLES
     initExtensionsGLES();
     if (state.major == 3) {
@@ -92,6 +134,48 @@ OpenGLContext::OpenGLContext() noexcept {
             }
         }
     }
+#ifndef IOS // IOS is guaranteed to have ES3.x
+    else if (UTILS_UNLIKELY(state.major == 2)) {
+        // Runtime OpenGL version is ES 2.x
+
+#if defined(BACKEND_OPENGL_LEVEL_GLES30)
+        // mandatory extensions (all supported by Mali-400 and Adreno 304)
+        assert_invariant(ext.OES_depth_texture);
+        assert_invariant(ext.OES_depth24);
+        assert_invariant(ext.OES_packed_depth_stencil);
+        assert_invariant(ext.OES_rgb8_rgba8);
+        assert_invariant(ext.OES_standard_derivatives);
+        assert_invariant(ext.OES_texture_npot);
+#endif
+
+        if (UTILS_LIKELY(ext.OES_vertex_array_object)) {
+            procs.genVertexArrays = glGenVertexArraysOES;
+            procs.bindVertexArray = glBindVertexArrayOES;
+            procs.deleteVertexArrays = glDeleteVertexArraysOES;
+        } else {
+            // if we don't have OES_vertex_array_object, just don't do anything with real VAOs,
+            // we'll just rebind everything each time. Most Mali-400 support this extension, but
+            // a few don't.
+            procs.genVertexArrays = +[](GLsizei, GLuint*) {};
+            procs.bindVertexArray = +[](GLuint) {};
+            procs.deleteVertexArrays = +[](GLsizei, GLuint const*) {};
+            // we activate this workaround path, which does the reset of array buffer
+            bugs.vao_doesnt_store_element_array_buffer_binding = true;
+        }
+
+        // EXT_disjoint_timer_query is optional -- pointers will be null if not available
+        procs.genQueries = glGenQueriesEXT;
+        procs.deleteQueries = glDeleteQueriesEXT;
+        procs.beginQuery = glBeginQueryEXT;
+        procs.endQuery = glEndQueryEXT;
+        procs.getQueryObjectuiv = glGetQueryObjectuivEXT;
+        procs.getQueryObjectui64v = glGetQueryObjectui64vEXT;
+
+        procs.invalidateFramebuffer = glDiscardFramebufferEXT;
+
+        mFeatureLevel = FeatureLevel::FEATURE_LEVEL_0;
+    }
+#endif // IOS
 #else
     initExtensionsGL();
     if (state.major == 4) {
@@ -239,8 +323,6 @@ OpenGLContext::OpenGLContext() noexcept {
     }
     flush(slog.v);
 
-    assert_invariant(gets.max_draw_buffers >= 4); // minspec
-
 #ifndef NDEBUG
     // this is useful for development
     slog.v  << "GL_MAX_DRAW_BUFFERS = " << gets.max_draw_buffers << '\n'
@@ -254,10 +336,15 @@ OpenGLContext::OpenGLContext() noexcept {
     flush(slog.v);
 #endif
 
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+    assert_invariant(state.major <= 2 || gets.max_draw_buffers >= 4); // minspec
+#endif
+
     setDefaultState();
 
 #ifdef GL_EXT_texture_filter_anisotropic
-    if (ext.EXT_texture_filter_anisotropic) {
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+    if (state.major > 2 && ext.EXT_texture_filter_anisotropic) {
         // make sure we don't have any error flag
         while (glGetError() != GL_NO_ERROR) { }
 
@@ -271,6 +358,7 @@ OpenGLContext::OpenGLContext() noexcept {
         }
         glDeleteSamplers(1, &s);
     }
+#endif
 #endif
 
     // in practice KHR_Debug has never been useful, and actually is confusing. We keep this
@@ -377,6 +465,7 @@ void OpenGLContext::initExtensionsGLES() noexcept {
     ext.EXT_color_buffer_float = exts.has("GL_EXT_color_buffer_float"sv);
     ext.EXT_color_buffer_half_float = exts.has("GL_EXT_color_buffer_half_float"sv);
     ext.EXT_debug_marker = exts.has("GL_EXT_debug_marker"sv);
+    ext.EXT_discard_framebuffer = exts.has("GL_EXT_discard_framebuffer"sv);
     ext.EXT_disjoint_timer_query = exts.has("GL_EXT_disjoint_timer_query"sv);
     ext.EXT_multisampled_render_to_texture = exts.has("GL_EXT_multisampled_render_to_texture"sv);
     ext.EXT_multisampled_render_to_texture2 = exts.has("GL_EXT_multisampled_render_to_texture2"sv);
@@ -393,14 +482,28 @@ void OpenGLContext::initExtensionsGLES() noexcept {
     ext.KHR_debug = exts.has("GL_KHR_debug"sv);
     ext.KHR_texture_compression_astc_hdr = exts.has("GL_KHR_texture_compression_astc_hdr"sv);
     ext.KHR_texture_compression_astc_ldr = exts.has("GL_KHR_texture_compression_astc_ldr"sv);
+    ext.OES_depth_texture = exts.has("GL_OES_depth_texture"sv);
+    ext.OES_depth24 = exts.has("GL_OES_depth24"sv);
+    ext.OES_packed_depth_stencil = exts.has("GL_OES_packed_depth_stencil"sv);
     ext.OES_EGL_image_external_essl3 = exts.has("GL_OES_EGL_image_external_essl3"sv);
+    ext.OES_rgb8_rgba8 = exts.has("GL_OES_rgb8_rgba8"sv);
+    ext.OES_standard_derivatives = exts.has("GL_OES_standard_derivatives"sv);
+    ext.OES_texture_npot = exts.has("GL_OES_texture_npot"sv);
+    ext.OES_vertex_array_object = exts.has("GL_OES_vertex_array_object"sv);
     ext.WEBGL_compressed_texture_etc = exts.has("WEBGL_compressed_texture_etc"sv);
     ext.WEBGL_compressed_texture_s3tc = exts.has("WEBGL_compressed_texture_s3tc"sv);
     ext.WEBGL_compressed_texture_s3tc_srgb = exts.has("WEBGL_compressed_texture_s3tc_srgb"sv);
+
     // ES 3.2 implies EXT_color_buffer_float
-    if (state.major >= 3 && state.minor >= 2) {
+    if (state.major > 3 || (state.major == 3 && state.minor >= 2)) {
         ext.EXT_color_buffer_float = true;
     }
+
+    // ES 3.x implies EXT_discard_framebuffer and OES_vertex_array_object
+    if (state.major >= 3) {
+        ext.EXT_color_buffer_float = true;
+        ext.OES_vertex_array_object = true;
+    }
 }
 
 #endif // BACKEND_OPENGL_VERSION_GLES
@@ -422,14 +525,12 @@ void OpenGLContext::initExtensionsGL() noexcept {
     }
 
     using namespace std::literals;
-    auto major = state.major;
-    auto minor = state.minor;
     ext.APPLE_color_buffer_packed_float = true;  // Assumes core profile.
-    ext.ARB_shading_language_packing = exts.has("GL_ARB_shading_language_packing"sv) || (major == 4 && minor >= 2);
-    ext.EXT_clip_control = (major == 4 && minor >= 5);
+    ext.ARB_shading_language_packing = exts.has("GL_ARB_shading_language_packing"sv);
     ext.EXT_color_buffer_float = true;  // Assumes core profile.
     ext.EXT_color_buffer_half_float = true;  // Assumes core profile.
     ext.EXT_debug_marker = exts.has("GL_EXT_debug_marker"sv);
+    ext.EXT_discard_framebuffer = false;
     ext.EXT_disjoint_timer_query = true;
     ext.EXT_multisampled_render_to_texture = false;
     ext.EXT_multisampled_render_to_texture2 = false;
@@ -443,13 +544,35 @@ void OpenGLContext::initExtensionsGL() noexcept {
     ext.EXT_texture_filter_anisotropic = exts.has("GL_EXT_texture_filter_anisotropic"sv);
     ext.EXT_texture_sRGB = exts.has("GL_EXT_texture_sRGB"sv);
     ext.GOOGLE_cpp_style_line_directive = exts.has("GL_GOOGLE_cpp_style_line_directive"sv);
-    ext.KHR_debug = major >= 4 && minor >= 3;
     ext.KHR_texture_compression_astc_hdr = exts.has("GL_KHR_texture_compression_astc_hdr"sv);
     ext.KHR_texture_compression_astc_ldr = exts.has("GL_KHR_texture_compression_astc_ldr"sv);
+    ext.OES_depth_texture = true;
+    ext.OES_depth24 = true;
     ext.OES_EGL_image_external_essl3 = false;
+    ext.OES_rgb8_rgba8 = true;
+    ext.OES_standard_derivatives = true;
+    ext.OES_texture_npot = true;
+    ext.OES_vertex_array_object = true;
     ext.WEBGL_compressed_texture_etc = false;
     ext.WEBGL_compressed_texture_s3tc = false;
     ext.WEBGL_compressed_texture_s3tc_srgb = false;
+
+    auto const major = state.major;
+    auto const minor = state.minor;
+
+    // OpenGL 4.2 implies ARB_shading_language_packing
+    if (major > 4 || (major == 4 && minor >= 2)) {
+        ext.ARB_shading_language_packing = true;
+    }
+    // OpenGL 4.3 implies EXT_discard_framebuffer
+    if (major > 4 || (major == 4 && minor >= 3)) {
+        ext.EXT_discard_framebuffer = true;
+        ext.KHR_debug = true;
+    }
+    // OpenGL 4.5 implies EXT_clip_control
+    if (major > 4 || (major == 4 && minor >= 5)) {
+        ext.EXT_clip_control = true;
+    }
 }
 
 #endif // BACKEND_OPENGL_VERSION_GL
@@ -485,9 +608,18 @@ void OpenGLContext::pixelStore(GLenum pname, GLint param) noexcept {
     // that cannot be duplicated at the call site (e.g. glTexImage2D or glReadPixels)
 
     switch (pname) {
-        case GL_PACK_ALIGNMENT:     pcur = &state.pack.alignment;       break;
-        case GL_UNPACK_ALIGNMENT:   pcur = &state.unpack.alignment;     break;
-        case GL_UNPACK_ROW_LENGTH:  pcur = &state.unpack.row_length;    break;
+        case GL_PACK_ALIGNMENT:
+            pcur = &state.pack.alignment;
+            break;
+        case GL_UNPACK_ALIGNMENT:
+            pcur = &state.unpack.alignment;
+            break;
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        case GL_UNPACK_ROW_LENGTH:
+            assert_invariant(state.major > 2);
+            pcur = &state.unpack.row_length;
+            break;
+#endif
         default:
             goto default_case;
     }
@@ -533,6 +665,11 @@ void OpenGLContext::deleteBuffers(GLsizei n, const GLuint* buffers, GLenum targe
             genericBuffer = 0;
         }
     }
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+    assert_invariant(state.major > 2 ||
+            (target != GL_UNIFORM_BUFFER && target != GL_TRANSFORM_FEEDBACK_BUFFER));
+
     if (target == GL_UNIFORM_BUFFER || target == GL_TRANSFORM_FEEDBACK_BUFFER) {
         auto& indexedBuffer = state.buffers.targets[targetIndex];
         UTILS_NOUNROLL // clang generates >1 KiB of code!!
@@ -547,29 +684,40 @@ void OpenGLContext::deleteBuffers(GLsizei n, const GLuint* buffers, GLenum targe
             }
         }
     }
+#endif
 }
 
 void OpenGLContext::deleteVertexArrays(GLsizei n, const GLuint* arrays) noexcept {
-    glDeleteVertexArrays(1, arrays);
-    // binding of a bound VAO is reset to 0
+    procs.deleteVertexArrays(n, arrays);
+    // if one of the destroyed VAO is bound, clear the binding.
     for (GLsizei i = 0; i < n; ++i) {
         if (state.vao.p->vao == arrays[i]) {
             bindVertexArray(nullptr);
+            break;
         }
     }
 }
 
 void OpenGLContext::resetState() noexcept {
     // Force GL state to match the Filament state
-    glBindFramebuffer(GL_DRAW_FRAMEBUFFER, state.draw_fbo);
-    glBindFramebuffer(GL_READ_FRAMEBUFFER, state.read_fbo);
+    if (state.major > 2) {
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        glBindFramebuffer(GL_DRAW_FRAMEBUFFER, state.draw_fbo);
+        glBindFramebuffer(GL_READ_FRAMEBUFFER, state.read_fbo);
+#endif
+    } else {
+        assert_invariant(state.read_fbo == state.draw_fbo);
+        glBindFramebuffer(GL_FRAMEBUFFER, state.draw_fbo);
+        state.read_fbo = state.draw_fbo;
+    }
+
 
     // state.program
     glUseProgram(state.program.use);
 
     // state.vao
     if (state.vao.p) {
-        glBindVertexArray(state.vao.p->vao);
+        procs.bindVertexArray(state.vao.p->vao);
     } else {
         bindVertexArray(nullptr);
     }
@@ -631,29 +779,34 @@ void OpenGLContext::resetState() noexcept {
     // Reset state.buffers to its default state to avoid the complexity and error-prone
     // nature of resetting the GL state to its existing state
     state.buffers = {};
-    GLenum const bufferTargets[] = {
-        GL_UNIFORM_BUFFER,
-        GL_TRANSFORM_FEEDBACK_BUFFER,
+
+    glBindBuffer(GL_ARRAY_BUFFER, 0);
+    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
+
+    if (state.major > 2) {
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        for (auto const target: {
+                GL_UNIFORM_BUFFER,
+                GL_TRANSFORM_FEEDBACK_BUFFER,
 #if defined(BACKEND_OPENGL_LEVEL_GLES31)
-        GL_SHADER_STORAGE_BUFFER,
+                GL_SHADER_STORAGE_BUFFER,
 #endif
-        GL_ARRAY_BUFFER,
-        GL_ELEMENT_ARRAY_BUFFER,
-        GL_PIXEL_PACK_BUFFER,
-        GL_PIXEL_UNPACK_BUFFER,
-    };
-    for (auto const target : bufferTargets) {
-        glBindBuffer(target, 0);
-    }
-
-    for (size_t bufferIndex = 0; bufferIndex < MAX_BUFFER_BINDINGS; ++bufferIndex) {
-        if (bufferIndex < (size_t)gets.max_uniform_buffer_bindings) {
-            glBindBufferBase(GL_UNIFORM_BUFFER, bufferIndex, 0);
+                GL_PIXEL_PACK_BUFFER,
+                GL_PIXEL_UNPACK_BUFFER,
+        }) {
+            glBindBuffer(target, 0);
         }
 
-        if (bufferIndex < (size_t)gets.max_transform_feedback_separate_attribs) {
-            glBindBufferBase(GL_TRANSFORM_FEEDBACK_BUFFER, bufferIndex, 0);
+        for (size_t bufferIndex = 0; bufferIndex < MAX_BUFFER_BINDINGS; ++bufferIndex) {
+            if (bufferIndex < (size_t)gets.max_uniform_buffer_bindings) {
+                glBindBufferBase(GL_UNIFORM_BUFFER, bufferIndex, 0);
+            }
+
+            if (bufferIndex < (size_t)gets.max_transform_feedback_separate_attribs) {
+                glBindBufferBase(GL_TRANSFORM_FEEDBACK_BUFFER, bufferIndex, 0);
+            }
         }
+#endif
     }
 
     // state.textures
@@ -679,7 +832,11 @@ void OpenGLContext::resetState() noexcept {
     };
     for (GLint unit = 0; unit < gets.max_combined_texture_image_units; ++unit) {
         glActiveTexture(GL_TEXTURE0 + unit);
-        glBindSampler(unit, 0);
+        if (state.major > 2) {
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+            glBindSampler(unit, 0);
+#endif
+        }
         for (auto [target, available] : textureTargets) {
             if (available) {
                 glBindTexture(target, 0);
@@ -690,11 +847,20 @@ void OpenGLContext::resetState() noexcept {
 
     // state.unpack
     glPixelStorei(GL_UNPACK_ALIGNMENT, state.unpack.alignment);
-    glPixelStorei(GL_UNPACK_ROW_LENGTH, state.unpack.row_length);
+    if (state.major > 2) {
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        glPixelStorei(GL_UNPACK_ROW_LENGTH, state.unpack.row_length);
+#endif
+    }
+
 
     // state.pack
     glPixelStorei(GL_PACK_ALIGNMENT, state.pack.alignment);
-    glPixelStorei(GL_PACK_ROW_LENGTH, 0); // we rely on GL_PACK_ROW_LENGTH being zero
+    if (state.major > 2) {
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+        glPixelStorei(GL_PACK_ROW_LENGTH, 0); // we rely on GL_PACK_ROW_LENGTH being zero
+#endif
+    }
 
     // state.window
     glScissor(
@@ -714,20 +880,50 @@ void OpenGLContext::resetState() noexcept {
 }
 
 OpenGLContext::FenceSync OpenGLContext::createFenceSync(
-        OpenGLPlatform&) noexcept {
+        OpenGLPlatform& platform) noexcept {
+
+    if (UTILS_UNLIKELY(isES2())) {
+        assert_invariant(platform.canCreateFence());
+        return { .fence = platform.createFence() };
+    }
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
     auto sync = glFenceSync(GL_SYNC_GPU_COMMANDS_COMPLETE, 0);
     CHECK_GL_ERROR(utils::slog.e)
     return { .sync = sync };
+#else
+    return {};
+#endif
 }
 
 void OpenGLContext::destroyFenceSync(
-        OpenGLPlatform&, FenceSync sync) noexcept {
+        OpenGLPlatform& platform, FenceSync sync) noexcept {
+
+    if (UTILS_UNLIKELY(isES2())) {
+        platform.destroyFence(static_cast<Platform::Fence*>(sync.fence));
+        return;
+    }
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
     glDeleteSync(sync.sync);
     CHECK_GL_ERROR(utils::slog.e)
+#endif
 }
 
 OpenGLContext::FenceSync::Status OpenGLContext::clientWaitSync(
-        OpenGLPlatform&, FenceSync sync) const noexcept {
+        OpenGLPlatform& platform, FenceSync sync) const noexcept {
+
+    if (UTILS_UNLIKELY(isES2())) {
+        using Status = OpenGLContext::FenceSync::Status;
+        auto const status = platform.waitFence(static_cast<Platform::Fence*>(sync.fence), 0u);
+        switch (status) {
+            case FenceStatus::ERROR:                return Status::FAILURE;
+            case FenceStatus::CONDITION_SATISFIED:  return Status::CONDITION_SATISFIED;
+            case FenceStatus::TIMEOUT_EXPIRED:      return Status ::TIMEOUT_EXPIRED;
+        }
+    }
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
     GLenum const status = glClientWaitSync(sync.sync, 0, 0u);
     CHECK_GL_ERROR(utils::slog.e)
     using Status = OpenGLContext::FenceSync::Status;
@@ -737,6 +933,9 @@ OpenGLContext::FenceSync::Status OpenGLContext::clientWaitSync(
         case GL_CONDITION_SATISFIED:    return Status::CONDITION_SATISFIED;
         default:                        return Status::FAILURE;
     }
+#else
+    return FenceSync::Status::FAILURE;
+#endif
 }
 
 } // namesapce filament

filament/backend/src/opengl/OpenGLContext.h

@@ -38,7 +38,7 @@ class OpenGLPlatform;
 class OpenGLContext {
 public:
     static constexpr const size_t MAX_TEXTURE_UNIT_COUNT = MAX_SAMPLER_COUNT;
-    static constexpr const size_t DUMMY_TEXTURE_BINDING = 31; // highest binding less than 32
+    static constexpr const size_t DUMMY_TEXTURE_BINDING = 7; // highest binding guaranteed to work with ES2
     static constexpr const size_t MAX_BUFFER_BINDINGS = 32;
     typedef math::details::TVec4<GLint> vec4gli;
     typedef math::details::TVec2<GLclampf> vec2glf;
@@ -69,20 +69,32 @@ public:
 
     OpenGLContext() noexcept;
 
-    constexpr bool isAtLeastGL(int major, int minor) const noexcept {
+    template<int MAJOR, int MINOR>
+    inline bool isAtLeastGL() const noexcept {
 #ifdef BACKEND_OPENGL_VERSION_GL
-        return state.major > major || (state.major == major && state.minor >= minor);
+        return state.major > MAJOR || (state.major == MAJOR && state.minor >= MINOR);
 #else
-        (void)major, (void)minor;
         return false;
 #endif
     }
 
-    constexpr bool isAtLeastGLES(int major, int minor) const noexcept {
+    template<int MAJOR, int MINOR>
+    inline bool isAtLeastGLES() const noexcept {
 #ifdef BACKEND_OPENGL_VERSION_GLES
-        return state.major > major || (state.major == major && state.minor >= minor);
+        return state.major > MAJOR || (state.major == MAJOR && state.minor >= MINOR);
+#else
+        return false;
+#endif
+    }
+
+    inline bool isES2() const noexcept {
+#if defined(BACKEND_OPENGL_VERSION_GLES) && !defined(IOS)
+#   ifndef BACKEND_OPENGL_LEVEL_GLES30
+            return true;
+#   else
+            return state.major == 2;
+#   endif
 #else
-        (void)major, (void)minor;
         return false;
 #endif
     }
@@ -186,6 +198,7 @@ public:
         bool EXT_color_buffer_half_float;
         bool EXT_debug_marker;
         bool EXT_disjoint_timer_query;
+        bool EXT_discard_framebuffer;
         bool EXT_multisampled_render_to_texture2;
         bool EXT_multisampled_render_to_texture;
         bool EXT_shader_framebuffer_fetch;
@@ -201,7 +214,14 @@ public:
         bool KHR_debug;
         bool KHR_texture_compression_astc_hdr;
         bool KHR_texture_compression_astc_ldr;
+        bool OES_depth_texture;
+        bool OES_depth24;
+        bool OES_packed_depth_stencil;
         bool OES_EGL_image_external_essl3;
+        bool OES_rgb8_rgba8;
+        bool OES_standard_derivatives;
+        bool OES_texture_npot;
+        bool OES_vertex_array_object;
         bool WEBGL_compressed_texture_etc;
         bool WEBGL_compressed_texture_s3tc;
         bool WEBGL_compressed_texture_s3tc_srgb;
@@ -381,6 +401,21 @@ public:
         } window;
     } state;
 
+    struct {
+        void (* bindVertexArray)(GLuint array);
+        void (* deleteVertexArrays)(GLsizei n, const GLuint* arrays);
+        void (* genVertexArrays)(GLsizei n, GLuint* arrays);
+
+        void (* genQueries)(GLsizei n, GLuint* ids);
+        void (* deleteQueries)(GLsizei n, const GLuint* ids);
+        void (* beginQuery)(GLenum target, GLuint id);
+        void (* endQuery)(GLenum target);
+        void (* getQueryObjectuiv)(GLuint id, GLenum pname, GLuint* params);
+        void (* getQueryObjectui64v)(GLuint id, GLenum pname, GLuint64* params);
+
+        void (* invalidateFramebuffer)(GLenum target, GLsizei numAttachments, const GLenum *attachments);
+    } procs{};
+
 private:
     ShaderModel mShaderModel = ShaderModel::MOBILE;
     FeatureLevel mFeatureLevel = FeatureLevel::FEATURE_LEVEL_1;
@@ -499,15 +534,19 @@ constexpr size_t OpenGLContext::getIndexForBufferTarget(GLenum target) noexcept
     size_t index = 0;
     switch (target) {
         // The indexed buffers MUST be first in this list (those usable with bindBufferRange)
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
         case GL_UNIFORM_BUFFER:             index = 0; break;
         case GL_TRANSFORM_FEEDBACK_BUFFER:  index = 1; break;
 #if defined(BACKEND_OPENGL_LEVEL_GLES31)
         case GL_SHADER_STORAGE_BUFFER:      index = 2; break;
+#endif
 #endif
         case GL_ARRAY_BUFFER:               index = 3; break;
         case GL_ELEMENT_ARRAY_BUFFER:       index = 4; break;
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
         case GL_PIXEL_PACK_BUFFER:          index = 5; break;
         case GL_PIXEL_UNPACK_BUFFER:        index = 6; break;
+#endif
         default: break;
     }
     assert_invariant(index < sizeof(state.buffers.genericBinding)/sizeof(state.buffers.genericBinding[0])); // NOLINT(misc-redundant-expression)
@@ -525,9 +564,12 @@ void OpenGLContext::activeTexture(GLuint unit) noexcept {
 
 void OpenGLContext::bindSampler(GLuint unit, GLuint sampler) noexcept {
     assert_invariant(unit < MAX_TEXTURE_UNIT_COUNT);
+    assert_invariant(state.major > 2);
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
     update_state(state.textures.units[unit].sampler, sampler, [&]() {
         glBindSampler(unit, sampler);
     });
+#endif
 }
 
 void OpenGLContext::setScissor(GLint left, GLint bottom, GLsizei width, GLsizei height) noexcept {
@@ -554,7 +596,7 @@ void OpenGLContext::depthRange(GLclampf near, GLclampf far) noexcept {
 void OpenGLContext::bindVertexArray(RenderPrimitive const* p) noexcept {
     RenderPrimitive* vao = p ? const_cast<RenderPrimitive *>(p) : &mDefaultVAO;
     update_state(state.vao.p, vao, [&]() {
-        glBindVertexArray(vao->vao);
+        procs.bindVertexArray(vao->vao);
         // update GL_ELEMENT_ARRAY_BUFFER, which is updated by glBindVertexArray
         size_t const targetIndex = getIndexForBufferTarget(GL_ELEMENT_ARRAY_BUFFER);
         state.buffers.genericBinding[targetIndex] = vao->elementArray;
@@ -568,12 +610,22 @@ void OpenGLContext::bindVertexArray(RenderPrimitive const* p) noexcept {
 
 void OpenGLContext::bindBufferRange(GLenum target, GLuint index, GLuint buffer,
         GLintptr offset, GLsizeiptr size) noexcept {
+    assert_invariant(state.major > 2);
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+#   ifdef BACKEND_OPENGL_LEVEL_GLES31
+        assert_invariant(false
+                 || target == GL_UNIFORM_BUFFER
+                 || target == GL_TRANSFORM_FEEDBACK_BUFFER
+                 || target == GL_SHADER_STORAGE_BUFFER);
+#   else
+        assert_invariant(false
+                || target == GL_UNIFORM_BUFFER
+                || target == GL_TRANSFORM_FEEDBACK_BUFFER);
+#   endif
     size_t const targetIndex = getIndexForBufferTarget(target);
-
-    // validity check
-    assert_invariant(targetIndex < sizeof(state.buffers.targets) / sizeof(*state.buffers.targets));
-
     // this ALSO sets the generic binding
+    assert_invariant(targetIndex < sizeof(state.buffers.targets) / sizeof(*state.buffers.targets));
     if (   state.buffers.targets[targetIndex].buffers[index].name != buffer
            || state.buffers.targets[targetIndex].buffers[index].offset != offset
            || state.buffers.targets[targetIndex].buffers[index].size != size) {
@@ -583,6 +635,7 @@ void OpenGLContext::bindBufferRange(GLenum target, GLuint index, GLuint buffer,
         state.buffers.genericBinding[targetIndex] = buffer;
         glBindBufferRange(target, index, buffer, offset, size);
     }
+#endif
 }
 
 void OpenGLContext::bindFramebuffer(GLenum target, GLuint buffer) noexcept {
@@ -593,6 +646,7 @@ void OpenGLContext::bindFramebuffer(GLenum target, GLuint buffer) noexcept {
                 glBindFramebuffer(target, buffer);
             }
             break;
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
         case GL_DRAW_FRAMEBUFFER:
             if (state.draw_fbo != buffer) {
                 state.draw_fbo = buffer;
@@ -605,6 +659,7 @@ void OpenGLContext::bindFramebuffer(GLenum target, GLuint buffer) noexcept {
                 glBindFramebuffer(target, buffer);
             }
             break;
+#endif
         default:
             break;
     }

filament/backend/src/opengl/OpenGLDriver.h

@@ -69,18 +69,30 @@ public:
 
     // OpenGLDriver specific fields
 
+    struct GLSwapChain : public HwSwapChain {
+        using HwSwapChain::HwSwapChain;
+        bool rec709 = false;
+    };
+
     struct GLBufferObject : public HwBufferObject {
         using HwBufferObject::HwBufferObject;
         GLBufferObject(uint32_t size,
                 BufferObjectBinding bindingType, BufferUsage usage) noexcept
-                : HwBufferObject(size), usage(usage) {
-            gl.binding = GLUtils::getBufferBindingType(bindingType);
+                : HwBufferObject(size), usage(usage), bindingType(bindingType) {
         }
+
         struct {
-            GLuint id = 0;
-            GLenum binding = 0;
+            union {
+                struct {
+                    GLuint id;
+                    GLenum binding;
+                };
+                void* buffer;
+            };
         } gl;
-        BufferUsage usage = {};
+        BufferUsage usage;
+        BufferObjectBinding bindingType;
+        uint16_t age = 0;
     };
 
     struct GLVertexBuffer : public HwVertexBuffer {
@@ -178,6 +190,7 @@ public:
             mutable GLuint fbo_read = 0;
             mutable TargetBufferFlags resolve = TargetBufferFlags::NONE; // attachments in fbo_draw to resolve
             uint8_t samples = 1;
+            bool isDefault = false;
         } gl;
         TargetBufferFlags targets = {};
     };
@@ -306,6 +319,7 @@ private:
     void resolvePass(ResolveAction action, GLRenderTarget const* rt,
             TargetBufferFlags discardFlags) noexcept;
 
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
     GLuint getSamplerSlow(SamplerParams sp) const noexcept;
 
     inline GLuint getSampler(SamplerParams sp) const noexcept {
@@ -319,6 +333,7 @@ private:
         }
         return pos->second;
     }
+#endif
 
     const std::array<GLSamplerGroup*, Program::SAMPLER_BINDING_COUNT>& getSamplerBindings() const {
         return mSamplerBindings;
@@ -340,6 +355,9 @@ private:
 
     void setScissor(Viewport const& scissor) noexcept;
 
+    // ES2 only. Uniform buffer emulation binding points
+    std::array<std::pair<void const*, uint16_t>, Program::UNIFORM_BINDING_COUNT> mUniformBindings = {};
+
     // sampler buffer binding points (nullptr if not used)
     std::array<GLSamplerGroup*, Program::SAMPLER_BINDING_COUNT> mSamplerBindings = {};   // 4 pointers
 
@@ -377,6 +395,10 @@ private:
     // timer query implementation
     OpenGLTimerQueryInterface* mTimerQueryImpl = nullptr;
     bool mFrameTimeSupported = false;
+
+    // for ES2 sRGB support
+    GLSwapChain* mCurrentDrawSwapChain = nullptr;
+    bool mRec709OutputColorspace = false;
 };
 
 // ------------------------------------------------------------------------------------------------

filament/backend/src/opengl/OpenGLPlatform.cpp

@@ -105,5 +105,8 @@ AcquiredImage OpenGLPlatform::transformAcquiredImage(AcquiredImage source) noexc
     return source;
 }
 
+TargetBufferFlags OpenGLPlatform::getPreservedFlags(UTILS_UNUSED SwapChain* swapChain) noexcept {
+    return TargetBufferFlags::NONE;
+}
 
 } // namespace filament::backend

filament/backend/src/opengl/OpenGLProgram.cpp

@@ -16,12 +16,16 @@
 
 #include "OpenGLProgram.h"
 
+#include "OpenGLBlobCache.h"
 #include "OpenGLDriver.h"
 
-#include <utils/Log.h>
-#include <utils/compiler.h>
-#include <utils/Panic.h>
+#include "BlobCacheKey.h"
+
 #include <utils/debug.h>
+#include <utils/compiler.h>
+#include <utils/Log.h>
+#include <utils/Panic.h>
+#include <utils/Systrace.h>
 
 #include <private/backend/BackendUtils.h>
 
@@ -63,27 +67,42 @@ OpenGLProgram::OpenGLProgram(OpenGLDriver& gld, Program&& program) noexcept
 
     OpenGLContext& context = gld.getContext();
 
-    mLazyInitializationData->uniformBlockInfo = std::move(program.getUniformBlockBindings());
     mLazyInitializationData->samplerGroupInfo = std::move(program.getSamplerGroupInfo());
+    if (UTILS_UNLIKELY(gld.getContext().isES2())) {
+        mLazyInitializationData->bindingUniformInfo = std::move(program.getBindingUniformInfo());
+        mLazyInitializationData->attributes = std::move(program.getAttributes());
+    } else {
+        mLazyInitializationData->uniformBlockInfo = std::move(program.getUniformBlockBindings());
+    }
 
-    // this cannot fail because we check compilation status after linking the program
-    // shaders[] is filled with id of shader stages present.
-    OpenGLProgram::compileShaders(context,
-            std::move(program.getShadersSource()),
-            program.getSpecializationConstants(),
-            gl.shaders,
-            mLazyInitializationData->shaderSourceCode);
+    BlobCacheKey key;
+    gl.program = OpenGLBlobCache::retrieve(&key, gld.mPlatform, program);
+    if (!gl.program) {
+        // this cannot fail because we check compilation status after linking the program
+        // shaders[] is filled with id of shader stages present.
+        OpenGLProgram::compileShaders(context,
+                std::move(program.getShadersSource()),
+                program.getSpecializationConstants(),
+                gl.shaders,
+                mLazyInitializationData->shaderSourceCode);
 
-    gld.runAtNextRenderPass(this, [this]() {
-        // by this point we must not have a GL program
-        assert_invariant(!gl.program);
-        // we also can't be in the initialized state
-        assert_invariant(!mInitialized);
-        // we must have our lazy initialization data
-        assert_invariant(mLazyInitializationData);
-        // link the program, this also cannot fail because status is checked later.
-        gl.program = OpenGLProgram::linkProgram(gl.shaders);
-    });
+        gld.runAtNextRenderPass(this, [this, &gld, &context, key = std::move(key)]() {
+            // by this point we must not have a GL program
+            assert_invariant(!gl.program);
+            // we also can't be in the initialized state
+            assert_invariant(!mInitialized);
+            // we must have our lazy initialization data
+            assert_invariant(mLazyInitializationData);
+            // link the program, this also cannot fail because status is checked later.
+            gl.program = OpenGLProgram::linkProgram(context,
+                    mLazyInitializationData, gl.shaders);
+
+            if (key) {
+                // attempt to cache
+                OpenGLBlobCache::insert(gld.mPlatform, key, gl.program);
+            }
+        });
+    }
 }
 
 OpenGLProgram::~OpenGLProgram() noexcept {
@@ -91,6 +110,7 @@ OpenGLProgram::~OpenGLProgram() noexcept {
         // mLazyInitializationData is aliased with mIndicesRuns
         delete mLazyInitializationData;
     }
+    delete [] mUniformsRecords;
     const GLuint program = gl.program;
     UTILS_NOUNROLL
     for (GLuint const shader: gl.shaders) {
@@ -117,13 +137,18 @@ void OpenGLProgram::compileShaders(OpenGLContext& context,
         GLuint shaderIds[Program::SHADER_TYPE_COUNT],
         UTILS_UNUSED_IN_RELEASE std::array<CString, Program::SHADER_TYPE_COUNT>& outShaderSourceCode) noexcept {
 
+    SYSTRACE_CALL();
+
+    auto appendSpecConstantString = +[](std::string& s, Program::SpecializationConstant const& sc) {
+        s += "#define SPIRV_CROSS_CONSTANT_ID_" + std::to_string(sc.id) + ' ';
+        s += std::visit([](auto&& arg) { return to_string(arg); }, sc.value);
+        s += '\n';
+        return s;
+    };
+
     std::string specializationConstantString;
     for (auto const& sc : specializationConstants) {
-        specializationConstantString += "#define SPIRV_CROSS_CONSTANT_ID_" + std::to_string(sc.id) + ' ';
-        specializationConstantString += std::visit([](auto&& arg) {
-            return to_string(arg);
-        }, sc.value);
-        specializationConstantString += '\n';
+        appendSpecConstantString(specializationConstantString, sc);
     }
     if (!specializationConstantString.empty()) {
         specializationConstantString += '\n';
@@ -209,7 +234,7 @@ std::string_view OpenGLProgram::process_GOOGLE_cpp_style_line_directive(OpenGLCo
 std::string_view OpenGLProgram::process_ARB_shading_language_packing(OpenGLContext& context) noexcept {
     using namespace std::literals;
 #ifdef BACKEND_OPENGL_VERSION_GL
-        if (!context.isAtLeastGL(4, 2) && !context.ext.ARB_shading_language_packing) {
+        if (!context.isAtLeastGL<4, 2>() && !context.ext.ARB_shading_language_packing) {
             return R"(
 
 // these don't handle denormals, NaNs or inf
@@ -277,13 +302,25 @@ std::array<std::string_view, 2> OpenGLProgram::splitShaderSource(std::string_vie
  * are checked later. This always returns a valid GL program ID (which doesn't mean the
  * program itself is valid).
  */
-GLuint OpenGLProgram::linkProgram(const GLuint shaderIds[Program::SHADER_TYPE_COUNT]) noexcept {
+GLuint OpenGLProgram::linkProgram(OpenGLContext& context,
+        LazyInitializationData* const lazyInitializationData,
+        const GLuint shaderIds[Program::SHADER_TYPE_COUNT]) noexcept {
+
+    SYSTRACE_CALL();
+
     GLuint const program = glCreateProgram();
     for (size_t i = 0; i < Program::SHADER_TYPE_COUNT; i++) {
         if (shaderIds[i]) {
             glAttachShader(program, shaderIds[i]);
         }
     }
+
+    if (UTILS_UNLIKELY(context.isES2())) {
+        for (auto const& [ name, loc ] : lazyInitializationData->attributes) {
+            glBindAttribLocation(program, loc, name.c_str());
+        }
+    }
+
     glLinkProgram(program);
     return program;
 }
@@ -296,6 +333,8 @@ bool OpenGLProgram::checkProgramStatus(const char* name,
         GLuint& program, GLuint shaderIds[Program::SHADER_TYPE_COUNT],
         std::array<CString, Program::SHADER_TYPE_COUNT> const& shaderSourceCode) noexcept {
 
+    SYSTRACE_CALL();
+
     GLint status;
     glGetProgramiv(program, GL_LINK_STATUS, &status);
     if (UTILS_LIKELY(status == GL_TRUE)) {
@@ -333,19 +372,19 @@ void OpenGLProgram::initialize(OpenGLContext& context) {
     assert_invariant(mLazyInitializationData);
 
     // we must copy mLazyInitializationData locally because it is aliased with mIndicesRuns
-    auto* const initializationData = mLazyInitializationData;
+    auto* const pInitializationData = mLazyInitializationData;
 
     // check status of program linking and shader compilation, logs error and free all resources
     // in case of error.
     mValid = OpenGLProgram::checkProgramStatus(name.c_str_safe(),
-            gl.program, gl.shaders, initializationData->shaderSourceCode);
+            gl.program, gl.shaders, pInitializationData->shaderSourceCode);
 
     if (UTILS_LIKELY(mValid)) {
-        initializeProgramState(context, gl.program, *initializationData);
+        initializeProgramState(context, gl.program, *pInitializationData);
     }
 
     // and destroy all temporary init data
-    delete initializationData;
+    delete pInitializationData;
     // mInitialized means mLazyInitializationData is no more valid
     mInitialized = true;
 }
@@ -355,20 +394,54 @@ void OpenGLProgram::initialize(OpenGLContext& context) {
  * checkProgramStatus() has been successfully called.
  */
 void OpenGLProgram::initializeProgramState(OpenGLContext& context, GLuint program,
-        LazyInitializationData const& lazyInitializationData) noexcept {
+        LazyInitializationData& lazyInitializationData) noexcept {
 
-    // Note: This is only needed, because the layout(binding=) syntax is not permitted in glsl
-    // (ES3.0 and GL4.1). The backend needs a way to associate a uniform block to a binding point.
-    UTILS_NOUNROLL
-    for (GLuint binding = 0, n = lazyInitializationData.uniformBlockInfo.size(); binding < n; binding++) {
-        auto const& name = lazyInitializationData.uniformBlockInfo[binding];
-        if (!name.empty()) {
-            GLuint const index = glGetUniformBlockIndex(program, name.c_str());
-            if (index != GL_INVALID_INDEX) {
-                glUniformBlockBinding(program, index, binding);
+    SYSTRACE_CALL();
+
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+    if (!context.isES2()) {
+        // Note: This is only needed, because the layout(binding=) syntax is not permitted in glsl
+        // (ES3.0 and GL4.1). The backend needs a way to associate a uniform block to a binding point.
+        UTILS_NOUNROLL
+        for (GLuint binding = 0, n = lazyInitializationData.uniformBlockInfo.size();
+                binding < n; binding++) {
+            auto const& name = lazyInitializationData.uniformBlockInfo[binding];
+            if (!name.empty()) {
+                GLuint const index = glGetUniformBlockIndex(program, name.c_str());
+                if (index != GL_INVALID_INDEX) {
+                    glUniformBlockBinding(program, index, binding);
+                }
+                CHECK_GL_ERROR(utils::slog.e)
             }
-            CHECK_GL_ERROR(utils::slog.e)
         }
+    } else
+#endif
+    {
+        // ES2 initialization of (fake) UBOs
+        UniformsRecord* const uniformsRecords = new UniformsRecord[Program::UNIFORM_BINDING_COUNT];
+        UTILS_NOUNROLL
+        for (GLuint binding = 0, n = Program::UNIFORM_BINDING_COUNT; binding < n; binding++) {
+            Program::UniformInfo& uniforms = lazyInitializationData.bindingUniformInfo[binding];
+            uniformsRecords[binding].locations.reserve(uniforms.size());
+            uniformsRecords[binding].locations.resize(uniforms.size());
+            for (size_t j = 0, c = uniforms.size(); j < c; j++) {
+                GLint const loc = glGetUniformLocation(program, uniforms[j].name.c_str());
+                uniformsRecords[binding].locations[j] = loc;
+                if (UTILS_UNLIKELY(binding == 0)) {
+                    // This is a bit of a gross hack here, we stash the location of
+                    // "frameUniforms.rec709", which obviously the backend shouldn't know about,
+                    // which is used for emulating the "rec709" colorspace in the shader.
+                    // The backend also shouldn't know that binding 0 is where frameUniform is.
+                    std::string_view const uniformName{
+                            uniforms[j].name.data(), uniforms[j].name.size() };
+                    if (uniformName == "frameUniforms.rec709") {
+                        mRec709Location = loc;
+                    }
+                }
+            }
+            uniformsRecords[binding].uniforms = std::move(uniforms);
+        }
+        mUniformsRecords = uniformsRecords;
     }
 
     uint8_t usedBindingCount = 0;
@@ -412,9 +485,13 @@ void OpenGLProgram::initializeProgramState(OpenGLContext& context, GLuint progra
     mUsedBindingsCount = usedBindingCount;
 }
 
-void OpenGLProgram::updateSamplers(OpenGLDriver* gld) const noexcept {
+void OpenGLProgram::updateSamplers(OpenGLDriver* const gld) const noexcept {
     using GLTexture = OpenGLDriver::GLTexture;
 
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+    bool const es2 = gld->getContext().isES2();
+#endif
+
     // cache a few member variable locally, outside the loop
     auto const& UTILS_RESTRICT samplerBindings = gld->getSamplerBindings();
     auto const& UTILS_RESTRICT usedBindingPoints = mUsedSamplerBindingPoints;
@@ -425,16 +502,96 @@ void OpenGLProgram::updateSamplers(OpenGLDriver* gld) const noexcept {
         assert_invariant(sb);
         for (uint8_t j = 0, m = sb->textureUnitEntries.size(); j < m; ++j, ++tmu) { // "<=" on purpose here
             const GLTexture* const t = sb->textureUnitEntries[j].texture;
-            GLuint const s = sb->textureUnitEntries[j].sampler;
             if (t) { // program may not use all samplers of sampler group
                 gld->bindTexture(tmu, t);
-                gld->bindSampler(tmu, s);
+#ifndef FILAMENT_SILENCE_NOT_SUPPORTED_BY_ES2
+                if (UTILS_LIKELY(!es2)) {
+                    GLuint const s = sb->textureUnitEntries[j].sampler;
+                    gld->bindSampler(tmu, s);
+                }
+#endif
             }
         }
     }
     CHECK_GL_ERROR(utils::slog.e)
 }
 
+void OpenGLProgram::updateUniforms(uint32_t index, void const* buffer, uint16_t age) noexcept {
+    assert_invariant(mUniformsRecords);
+    assert_invariant(buffer);
+
+    // only update the uniforms if the UBO has changed since last time we updated
+    UniformsRecord const& records = mUniformsRecords[index];
+    if (records.age == age) {
+        return;
+    }
+    records.age = age;
+
+    assert_invariant(records.uniforms.size() == records.locations.size());
+
+    for (size_t i = 0, c = records.uniforms.size(); i < c; i++) {
+        Program::Uniform const& u = records.uniforms[i];
+        GLint const loc = records.locations[i];
+        if (loc < 0) {
+            continue;
+        }
+        // u.offset is in 'uint32_t' units
+        GLfloat const* const bf = reinterpret_cast<GLfloat const*>(buffer) + u.offset;
+        GLint const* const bi = reinterpret_cast<GLint const*>(buffer) + u.offset;
+
+        switch(u.type) {
+            case UniformType::FLOAT:
+                glUniform1fv(loc, u.size, bf);
+                break;
+            case UniformType::FLOAT2:
+                glUniform2fv(loc, u.size, bf);
+                break;
+            case UniformType::FLOAT3:
+                glUniform3fv(loc, u.size, bf);
+                break;
+            case UniformType::FLOAT4:
+                glUniform4fv(loc, u.size, bf);
+                break;
+
+            case UniformType::BOOL:
+            case UniformType::INT:
+            case UniformType::UINT:
+                glUniform1iv(loc, u.size, bi);
+                break;
+            case UniformType::BOOL2:
+            case UniformType::INT2:
+            case UniformType::UINT2:
+                glUniform2iv(loc, u.size, bi);
+                break;
+            case UniformType::BOOL3:
+            case UniformType::INT3:
+            case UniformType::UINT3:
+                glUniform3iv(loc, u.size, bi);
+                break;
+            case UniformType::BOOL4:
+            case UniformType::INT4:
+            case UniformType::UINT4:
+                glUniform4iv(loc, u.size, bi);
+                break;
+
+            case UniformType::MAT3:
+                glUniformMatrix3fv(loc, u.size, GL_FALSE, bf);
+                break;
+            case UniformType::MAT4:
+                glUniformMatrix4fv(loc, u.size, GL_FALSE, bf);
+                break;
+
+            case UniformType::STRUCT:
+                // not supported
+                break;
+        }
+    }
+}
+
+void OpenGLProgram::setRec709ColorSpace(bool rec709) const noexcept {
+    glUniform1i(mRec709Location, rec709);
+}
+
 UTILS_NOINLINE
 void logCompilationError(io::ostream& out, ShaderStage shaderType,
         const char* name, GLuint shaderId,
@@ -461,12 +618,12 @@ void logCompilationError(io::ostream& out, ShaderStage shaderType,
     }
 
 #ifndef NDEBUG
-    std::string_view shader{ sourceCode.data(), sourceCode.size() };
+    std::string_view const shader{ sourceCode.data(), sourceCode.size() };
     size_t lc = 1;
     size_t start = 0;
     std::string line;
     while (true) {
-        size_t end = shader.find('\n', start);
+        size_t const end = shader.find('\n', start);
         if (end == std::string::npos) {
             line = shader.substr(start);
         } else {