Add mixin for imageProcessing support in materials

Author: Mike Bond

packages/dev/core/src/Materials/Background/backgroundMaterial.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { serialize, serializeAsColor3, expandToProperty, serializeAsTexture, serializeAsVector3, serializeAsImageProcessingConfiguration } from "../../Misc/decorators";
+import { serialize, serializeAsColor3, expandToProperty, serializeAsTexture, serializeAsVector3 } from "../../Misc/decorators";
 import { SmartArray } from "../../Misc/smartArray";
-import type { Observer } from "../../Misc/observable";
 import { Logger } from "../../Misc/logger";
 import type { Nullable, int, float } from "../../types";
 import type { Scene } from "../../scene";
@@ -14,7 +13,6 @@ import type { Mesh } from "../../Meshes/mesh";
 import type { IEffectCreationOptions } from "../../Materials/effect";
 import { MaterialDefines } from "../../Materials/materialDefines";
 import { PushMaterial } from "../../Materials/pushMaterial";
-import type { ColorCurves } from "../../Materials/colorCurves";
 import { ImageProcessingDefinesMixin } from "../../Materials/imageProcessingConfiguration.defines";
 import { ImageProcessingConfiguration } from "../../Materials/imageProcessingConfiguration";
 import type { BaseTexture } from "../../Materials/Textures/baseTexture";
@@ -47,6 +45,7 @@ import {
 } from "../materialHelper.functions";
 import { SerializationHelper } from "../../Misc/decorators.serialization";
 import { ShaderLanguage } from "../shaderLanguage";
+import { ImageProcessingMixin } from "../imageProcessing";
 
 class BackgroundMaterialDefinesBase extends MaterialDefines {}
 
@@ -187,11 +186,12 @@ class BackgroundMaterialDefines extends ImageProcessingDefinesMixin(BackgroundMa
     }
 }
 
+class BackgroundMaterialBase extends ImageProcessingMixin(PushMaterial) {}
 /**
  * Background material used to create an efficient environment around your scene.
  * #157MGZ: simple test
  */
-export class BackgroundMaterial extends PushMaterial {
+export class BackgroundMaterial extends BackgroundMaterialBase {
     /**
      * Standard reflectance value at parallel view angle.
      */
@@ -439,168 +439,6 @@ export class BackgroundMaterial extends PushMaterial {
     @expandToProperty("_markAllSubMeshesAsLightsDirty")
     public shadowOnly: boolean = false;
 
-    /**
-     * Default configuration related to image processing available in the Background Material.
-     */
-    @serializeAsImageProcessingConfiguration()
-    protected _imageProcessingConfiguration: ImageProcessingConfiguration;
-
-    /**
-     * Keep track of the image processing observer to allow dispose and replace.
-     */
-    private _imageProcessingObserver: Nullable<Observer<ImageProcessingConfiguration>> = null;
-
-    /**
-     * Attaches a new image processing configuration to the PBR Material.
-     * @param configuration (if null the scene configuration will be use)
-     */
-    protected _attachImageProcessingConfiguration(configuration: Nullable<ImageProcessingConfiguration>): void {
-        if (configuration === this._imageProcessingConfiguration) {
-            return;
-        }
-
-        // Detaches observer.
-        if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
-            this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
-        }
-
-        // Pick the scene configuration if needed.
-        if (!configuration) {
-            this._imageProcessingConfiguration = this.getScene().imageProcessingConfiguration;
-        } else {
-            this._imageProcessingConfiguration = configuration;
-        }
-
-        // Attaches observer.
-        if (this._imageProcessingConfiguration) {
-            this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(() => {
-                this._computePrimaryColorFromPerceptualColor();
-                this._markAllSubMeshesAsImageProcessingDirty();
-            });
-        }
-    }
-
-    /**
-     * Gets the image processing configuration used either in this material.
-     */
-    public get imageProcessingConfiguration(): Nullable<ImageProcessingConfiguration> {
-        return this._imageProcessingConfiguration;
-    }
-
-    /**
-     * Sets the Default image processing configuration used either in the this material.
-     *
-     * If sets to null, the scene one is in use.
-     */
-    public set imageProcessingConfiguration(value: Nullable<ImageProcessingConfiguration>) {
-        this._attachImageProcessingConfiguration(value);
-
-        // Ensure the effect will be rebuilt.
-        this._markAllSubMeshesAsTexturesDirty();
-    }
-
-    /**
-     * Gets whether the color curves effect is enabled.
-     */
-    public get cameraColorCurvesEnabled(): boolean {
-        return (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorCurvesEnabled;
-    }
-    /**
-     * Sets whether the color curves effect is enabled.
-     */
-    public set cameraColorCurvesEnabled(value: boolean) {
-        (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorCurvesEnabled = value;
-    }
-
-    /**
-     * Gets whether the color grading effect is enabled.
-     */
-    public get cameraColorGradingEnabled(): boolean {
-        return (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorGradingEnabled;
-    }
-    /**
-     * Gets whether the color grading effect is enabled.
-     */
-    public set cameraColorGradingEnabled(value: boolean) {
-        (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorGradingEnabled = value;
-    }
-
-    /**
-     * Gets whether tonemapping is enabled or not.
-     */
-    public get cameraToneMappingEnabled(): boolean {
-        return this._imageProcessingConfiguration.toneMappingEnabled;
-    }
-    /**
-     * Sets whether tonemapping is enabled or not
-     */
-    public set cameraToneMappingEnabled(value: boolean) {
-        this._imageProcessingConfiguration.toneMappingEnabled = value;
-    }
-
-    /**
-     * The camera exposure used on this material.
-     * This property is here and not in the camera to allow controlling exposure without full screen post process.
-     * This corresponds to a photographic exposure.
-     */
-    public get cameraExposure(): float {
-        return this._imageProcessingConfiguration.exposure;
-    }
-    /**
-     * The camera exposure used on this material.
-     * This property is here and not in the camera to allow controlling exposure without full screen post process.
-     * This corresponds to a photographic exposure.
-     */
-    public set cameraExposure(value: float) {
-        this._imageProcessingConfiguration.exposure = value;
-    }
-
-    /**
-     * Gets The camera contrast used on this material.
-     */
-    public get cameraContrast(): float {
-        return this._imageProcessingConfiguration.contrast;
-    }
-
-    /**
-     * Sets The camera contrast used on this material.
-     */
-    public set cameraContrast(value: float) {
-        this._imageProcessingConfiguration.contrast = value;
-    }
-
-    /**
-     * Gets the Color Grading 2D Lookup Texture.
-     */
-    public get cameraColorGradingTexture(): Nullable<BaseTexture> {
-        return this._imageProcessingConfiguration.colorGradingTexture;
-    }
-    /**
-     * Sets the Color Grading 2D Lookup Texture.
-     */
-    public set cameraColorGradingTexture(value: Nullable<BaseTexture>) {
-        (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorGradingTexture = value;
-    }
-
-    /**
-     * The color grading curves provide additional color adjustment that is applied after any color grading transform (3D LUT).
-     * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
-     * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image;
-     * corresponding to low luminance, medium luminance, and high luminance areas respectively.
-     */
-    public get cameraColorCurves(): Nullable<ColorCurves> {
-        return (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorCurves;
-    }
-    /**
-     * The color grading curves provide additional color adjustment that is applied after any color grading transform (3D LUT).
-     * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
-     * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image;
-     * corresponding to low luminance, medium luminance, and high luminance areas respectively.
-     */
-    public set cameraColorCurves(value: Nullable<ColorCurves>) {
-        (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorCurves = value;
-    }
-
     /**
      * Due to a bug in iOS10, video tags (which are using the background material) are in BGR and not RGB.
      * Setting this flag to true (not done automatically!) will convert it back to RGB.

packages/dev/core/src/Materials/PBR/index.ts

@@ -5,7 +5,7 @@ export * from "./pbrBRDFConfiguration";
 export * from "./pbrClearCoatConfiguration";
 export * from "./pbrIridescenceConfiguration";
 export * from "./pbrMaterial";
-export * from "./pbrMaterial2";
+export * from "./pbr2Material";
 export * from "./pbrMetallicRoughnessMaterial";
 export * from "./pbrSpecularGlossinessMaterial";
 export * from "./pbrSheenConfiguration";