KHR_materials_transmission: Fix transmission helper to generate a linear space opaque texture

loaders/src/glTF/2.0/Extensions/KHR_materials_transmission.ts

@@ -13,6 +13,7 @@ import { RenderTargetTexture } from "babylonjs/Materials/Textures/renderTargetTe
 import { Observable, Observer } from "babylonjs/Misc/observable";
 import { Constants } from "babylonjs/Engines/constants";
 import { Tools } from "babylonjs/Misc/tools";
+import { Color4 } from "babylonjs/Maths/math.color";
 
 interface ITransmissionHelperHolder {
     /**
@@ -46,6 +47,12 @@ interface ITransmissionHelperOptions {
      * Type of the refraction render target texture (default: TEXTURETYPE_UNSIGNED_INT)
      */
     renderTargetTextureType: number;
+
+    /**
+     * Clear color of the opaque texture. If not provided, use the scene clear color (which will be converted to linear space).
+     * If provided, should be in linear space
+     */
+    clearColor?: Color4;
 }
 
 /**
@@ -62,7 +69,7 @@ class TransmissionHelper {
             samples: 4,
             lodGenerationScale: 1,
             lodGenerationOffset: -4,
-            renderTargetTextureType: Constants.TEXTURETYPE_UNSIGNED_INT
+            renderTargetTextureType: Constants.TEXTURETYPE_HALF_FLOAT,
         };
     }
 
@@ -219,12 +226,27 @@ class TransmissionHelper {
         this._opaqueRenderTarget = new RenderTargetTexture("opaqueSceneTexture", this._options.renderSize, this._scene, true, undefined, this._options.renderTargetTextureType);
         this._opaqueRenderTarget.ignoreCameraViewport = true;
         this._opaqueRenderTarget.renderList = this._opaqueMeshesCache;
-        // this._opaqueRenderTarget.clearColor = new Color4(0.0, 0.0, 0.0, 0.0);
-        this._opaqueRenderTarget.gammaSpace = true;
+        this._opaqueRenderTarget.clearColor = this._options.clearColor?.clone() ?? this._scene.clearColor.clone();
+        this._opaqueRenderTarget.gammaSpace = false;
         this._opaqueRenderTarget.lodGenerationScale = this._options.lodGenerationScale;
         this._opaqueRenderTarget.lodGenerationOffset = this._options.lodGenerationOffset;
         this._opaqueRenderTarget.samples = this._options.samples;
 
+        let sceneImageProcessingapplyByPostProcess: boolean;
+
+        this._opaqueRenderTarget.onBeforeBindObservable.add((opaqueRenderTarget) => {
+            sceneImageProcessingapplyByPostProcess = this._scene.imageProcessingConfiguration.applyByPostProcess;
+            if (!this._options.clearColor) {
+                this._scene.clearColor.toLinearSpaceToRef(opaqueRenderTarget.clearColor);
+            } else {
+                opaqueRenderTarget.clearColor.copyFrom(this._options.clearColor);
+            }
+            this._scene.imageProcessingConfiguration.applyByPostProcess = true;
+        });
+        this._opaqueRenderTarget.onAfterUnbindObservable.add(() => {
+            this._scene.imageProcessingConfiguration.applyByPostProcess = sceneImageProcessingapplyByPostProcess;
+        });
+
         this._transparentMeshesCache.forEach((mesh: AbstractMesh) => {
             if (this.shouldRenderAsTransmission(mesh.material)) {
                 (mesh.material as PBRMaterial).refractionTexture = this._opaqueRenderTarget;

tests/validation/config.json

@@ -689,7 +689,8 @@
         {
             "title": "GLTF Extension KHR_materials_volume",
             "playgroundId": "#YG3BBF#16",
-            "referenceImage": "gltfExtensionKhrMaterialsVolume.png"
+            "referenceImage": "gltfExtensionKhrMaterialsVolume.png",
+            "renderCount": 5
         },
         {
             "title": "GLTF Extension KHR_materials_specular",