Enable transparencyAsCoverage in Babylon Viewer (google#4531)

cybmiper · Oct 27, 2023 · 49fd9e4 · 49fd9e4
1 parent df26025
commit 49fd9e4
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/packages/render-fidelity-tools/src/components/renderers/babylon-viewer.ts b/packages/render-fidelity-tools/src/components/renderers/babylon-viewer.ts
@@ -14,8 +14,8 @@
  */
 
 import '@babylonjs/loaders/glTF';
-
-import {ArcRotateCamera, Axis, Color4, Constants, Engine, HDRCubeTexture, ImageProcessingConfiguration, Material, Matrix, PBRMaterial, Scene, SceneLoader, Space, Tools, Vector3} from '@babylonjs/core';
+import { GLTFFileLoader } from '@babylonjs/loaders/glTF';
+import {ArcRotateCamera, Axis, Color4, Constants, Engine, HDRCubeTexture, ISceneLoaderPlugin, ISceneLoaderPluginAsync, ImageProcessingConfiguration, Material, Matrix, PBRMaterial, Scene, SceneLoader, Space, Tools, Vector3} from '@babylonjs/core';
 import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js'
 
@@ -116,6 +116,14 @@ export class BabylonViewer extends LitElement {
     // equal to vertical fov
     camera.fov = this[$degToRadians](verticalFoV);
 
+    // Enable `transparencyAsCoverage` to be spec-comformant.
+    SceneLoader.OnPluginActivatedObservable.addOnce((plugin: ISceneLoaderPlugin | ISceneLoaderPluginAsync) => {
+        if (plugin.name === "gltf") {
+            const loader = (plugin as GLTFFileLoader);
+            loader.transparencyAsCoverage = true;
+        }
+    });
+
     const lastSlashIndex = scenario.model.lastIndexOf('/');
     const modelRootPath = scenario.model.substring(0, lastSlashIndex + 1);
     const modelFileName =