@needle-tools/engine 2.66.1-pre → 2.67.0-pre

package/src/engine-components/WebARCameraBackground.ts

@@ -0,0 +1,215 @@
+import { Behaviour } from "./Component";
+import { serializable } from "../engine/engine_serialization_decorator";
+import { RGBAColor } from "../engine-components/js-extensions/RGBAColor"
+import { WebXR } from "../engine-components/WebXR";
+import { 
+    Camera as ThreeCamera, 
+    Scene, 
+    Texture, 
+    Mesh, MeshBasicMaterial, 
+    UniformsUtils, 
+    PlaneGeometry, 
+    ShaderLib, 
+    ShaderMaterial,
+    DoubleSide
+} from "three";
+
+export class WebARCameraBackground extends Behaviour {
+
+    awake(): void {
+        WebXR.OptionalFeatures_AR.push('camera-access');
+    }
+
+    @serializable()
+    public backgroundTint: RGBAColor = new RGBAColor(1,1,1,1);
+
+    public get background() {
+        return this.backgroundPlane;
+    }
+
+    private _preRender;
+
+    onEnable(): void {
+        this._preRender = this.preRender.bind(this);
+        this.context.pre_render_callbacks.push(this._preRender);
+
+        if (this.backgroundPlane) {
+            this.gameObject.add(this.backgroundPlane);
+            this.backgroundPlane.visible = false;
+        }
+    }
+
+    onDisable(): void {
+        this.context.pre_render_callbacks = this.context.pre_render_callbacks.filter(cb => cb !== this._preRender);
+
+        if (this.backgroundPlane)
+            this.gameObject.remove(this.backgroundPlane);
+    }
+
+    private backgroundPlane?: Mesh;
+    private threeTexture?: Texture;
+    private forceTextureInitialization = function() {
+        const material = new MeshBasicMaterial();
+        const geometry = new PlaneGeometry();
+        const scene = new Scene();
+        scene.add(new Mesh(geometry, material));
+        const camera = new ThreeCamera();
+    
+        return function forceTextureInitialization(renderer, texture) {
+          material.map = texture;
+          renderer.render(scene, camera);
+        };
+    }();
+
+    // TODO should only attach on session start, and detach on session end
+    private preRender() {
+        if (!this || !this.gameObject) return;
+
+        const xr = this.context.renderer.xr;
+        const frame = xr.getFrame();
+
+        if (frame) {
+            
+            // We're generating a new texture here, and force three to initialize it
+            // from https://stackoverflow.com/a/55084367 to inject a custom texture into three.js
+            if (!this.threeTexture && this.context.renderer) {
+                this.threeTexture = new Texture();
+                // this.threeTexture.encoding = LinearEncoding;
+                this.forceTextureInitialization(this.context.renderer, this.threeTexture);
+            }
+
+            // simple mesh and fullscreen shader to display the camera texture
+            // from three: WebGLBackground
+            if (this.backgroundPlane === undefined) {
+                this.backgroundPlane = makeFullscreenPlane(this.backgroundTint);
+                this.gameObject.add(this.backgroundPlane);
+            }
+
+            // WebXR Raw Camera Access - 
+            // we composite the camera texture into the scene background by rendering it first.
+            this.updateFromFrame(frame);
+        }
+
+        /*
+        if (this.planeMesh) {
+            this.planeMesh.visible = frame != null;
+        }
+        */
+    }
+
+    onBeforeRender(frame: XRFrame | null) {
+        this.updateFromFrame(frame);
+    }
+
+    updateFromFrame(frame: XRFrame | null) {
+        if (!frame) return;
+
+        // https://chromium.googlesource.com/chromium/src/+/7c5ac3c0f95b97cf12be95a5c1c0a8ff163246d8/third_party/webxr_test_pages/webxr-samples/proposals/camera-access-barebones.html
+        const pose = frame.getViewerPose(this.context.renderer.xr.getReferenceSpace()!);
+        if (pose) { 
+            for( const view of pose.views) {
+                // @ts-ignore
+                if ('camera' in view && view.camera) {
+                    const xrManager = this.context.renderer.xr;
+                    let binding = xrManager.getBinding();
+                    // not sure how / why this can be null, but we can recreate it here
+                    if (!binding) binding = new XRWebGLBinding( frame.session, this.context.renderer.getContext() );
+                    
+                    if (binding) {
+                        let glImage: WebGLTexture | null = null;
+                        if ('getCameraImage' in binding) {
+                            // @ts-ignore
+                            glImage = binding.getCameraImage(view.camera);
+
+                            // discussion on exactly this:
+                            // https://discourse.threejs.org/t/using-a-webgltexture-as-texture-for-three-js/46245/8
+                            // HACK from https://stackoverflow.com/a/55084367 to inject a custom texture into three.js
+                            const texProps = this.context.renderer.properties.get(this.threeTexture);
+                            texProps.__webglTexture = glImage;
+
+                            if (this.backgroundPlane) {
+                                //@ts-ignore
+                                this.backgroundPlane.setTexture(this.threeTexture);
+                                this.backgroundPlane.visible = true;
+                            }
+                        }
+                    }
+                    else {
+                        // console.error(view.camera, xrManager)
+                    }
+                }
+                else {
+                    // console.error("NO CAMERA IN VIEW")
+                }
+            }
+        }
+        else {
+            // console.error(this.context.renderer.xr.getReferenceSpace(), frame);
+        }
+    }
+}
+// TODO tint could be an uniform
+let backgroundFragment: string = /* glsl */`
+uniform sampler2D t2D;
+
+varying vec2 vUv;
+
+void main() {
+
+    vec4 texColor = texture2D( t2D, vUv );
+    texColor.w = 1.0;
+
+    // inline sRGB decode
+    texColor = vec4( mix( pow( texColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), texColor.rgb * 0.0773993808, vec3( lessThanEqual( texColor.rgb, vec3( 0.04045 ) ) ) ), texColor.w );
+
+    gl_FragColor = texColor * <backgroundTint>;
+
+    #include <tonemapping_fragment>
+    #include <encodings_fragment>
+
+}
+`;
+
+// not sure where we want to move this and in which form is best (extends Object3D?)
+export function makeFullscreenPlane(tint: RGBAColor ) {
+    const replacementTint = "vec4(" + tint.r.toFixed(3) + "," + tint.g.toFixed(3) + "," + tint.b.toFixed(3) + "," + tint.a.toFixed(3) + ")";
+    console.log(replacementTint);
+    const planeMesh = new Mesh(
+        new PlaneGeometry(2, 2),
+        // @ts-ignore
+        new ShaderMaterial({
+            name: 'BackgroundMaterial',
+            uniforms: UniformsUtils.clone( ShaderLib.background.uniforms ),
+            vertexShader: ShaderLib.background.vertexShader,
+            fragmentShader: backgroundFragment.replace("<backgroundTint>", replacementTint), // ShaderLib.background.fragmentShader,
+            side: DoubleSide,
+            depthTest: false,
+            depthWrite: false,
+            fog: false
+        })
+    );
+
+    planeMesh.geometry.deleteAttribute( 'normal' );
+
+    // add "map" material property so the renderer can evaluate it like for built-in materials
+    Object.defineProperty( planeMesh.material, 'map', {
+        get: function () {
+            return this.threeTexture;
+        }
+    } );
+
+    // Option 1: add the planeMesh to our scene for rendering.
+    // This is useful for applying custom shader effects on the background (instead of using the system composite)
+    planeMesh.renderOrder = -10000; // render first
+    planeMesh.layers.disableAll();
+    planeMesh.layers.enable(2); // ignore raycasts
+    planeMesh.frustumCulled = false;
+
+    // should be a class, for now lets just define a method for the weird way the texture needs to be set
+    // @ts-ignore
+    planeMesh.setTexture = function(texture) {
+        planeMesh.material.uniforms.t2D.value = texture;
+    }
+
+    return planeMesh;
+}

package/src/engine-components/WebXR.ts

@@ -78,6 +78,11 @@ export class WebXR extends Behaviour {
     public static get IsARSupported(): boolean { return arSupported; }
     public static get IsVRSupported(): boolean { return vrSupported; }
 
+    private static _optionalFeatures_VR: string[] = ['local-floor', 'bounded-floor', 'hand-tracking', 'high-fixed-foveation-level', 'layers'];
+    private static _optionalFeatures_AR: string[] = ['plane-detection', 'anchors', 'local-floor', 'hand-tracking', 'layers'];
+    public static get OptionalFeatures_VR(): string[] { return this._optionalFeatures_VR; }
+    public static get OptionalFeatures_AR(): string[] { return this._optionalFeatures_AR; }
+
     public static addEventListener(type: string, listener: any): any {
         this.events.addEventListener(type, listener);
         return listener;
@@ -93,7 +98,8 @@ export class WebXR extends Behaviour {
         }
         else
             webXR.__internalAwake();
-        const vrButton = VRButton.createButton(webXR.context.renderer);
+        const options = { optionalFeatures: WebXR.OptionalFeatures_VR };
+        const vrButton = VRButton.createButton(webXR.context.renderer, options);
         vrButton.classList.add('webxr-ar-button');
         vrButton.classList.add('webxr-button');
         this.resetButtonStyles(vrButton);
@@ -106,19 +112,17 @@ export class WebXR extends Behaviour {
     public static createARButton(webXR: WebXR, opts?: CreateButtonOptions): HTMLButtonElement | HTMLAnchorElement {
         webXR.__internalAwake();
         const domOverlayRoot = webXR.webAR?.getAROverlayContainer();
-        const features: any = {};
+        const options: any = { optionalFeatures: [...this.OptionalFeatures_AR] };
         if (domOverlayRoot) {
-            features.domOverlay = { root: domOverlayRoot };
-            features.optionalFeatures = ['hit-test', 'dom-overlay'];
+            options.domOverlay = { root: domOverlayRoot };
+            options.optionalFeatures.push('dom-overlay')
+            options.optionalFeatures.push('hit-test');
         }
         else {
             console.warn("No dom overlay root found, HTML overlays on top of screen-based AR will not work.");
         }
-        features.optionalFeatures.push('plane-detection');
-        // features.optionalFeatures.push('light-estimation');
-        features.optionalFeatures.push('anchors');
 
-        const arButton = ARButton.createButton(webXR.context.renderer, features);
+        const arButton = ARButton.createButton(webXR.context.renderer, options);
         arButton.classList.add('webxr-ar-button');
         arButton.classList.add('webxr-button');
         WebXR.resetButtonStyles(arButton);

package/src/engine-components/WebXRAvatar.ts

@@ -331,6 +331,7 @@ export class WebXRAvatar {
             if (this.flags.length <= 0) {
                 if (this.head) {
                     const flag = GameObject.addNewComponent(this.head, XRFlag) as XRFlag;
+                    // TODO: the defaults are wrong? should be Desktop | ThirdPerson ?
                     flag.visibleIn = XRStateFlag.ThirdPerson | XRStateFlag.VR;
                     this.flags.push(flag);
                     if (debug)

package/src/engine-components/codegen/components.ts

@@ -7,6 +7,7 @@ export { AnimationExtension } from "../export/usdz/extensions/Animation";
 export { AnimationTrackHandler } from "../timeline/TimelineTracks";
 export { Animator } from "../Animator";
 export { AnimatorController } from "../AnimatorController";
+export { Antialiasing } from "../postprocessing/Effects/Antialiasing";
 export { AttachedObject } from "../WebXRController";
 export { AudioListener } from "../AudioListener";
 export { AudioSource } from "../AudioSource";
@@ -23,6 +24,7 @@ export { AvatarModel } from "../AvatarLoader";
 export { AxesHelper } from "../AxesHelper";
 export { BaseUIComponent } from "../ui/BaseUIComponent";
 export { BasicIKConstraint } from "../BasicIKConstraint";
+export { Bloom } from "../postprocessing/Effects/Bloom";
 export { BoxCollider } from "../Collider";
 export { BoxGizmo } from "../Gizmos";
 export { BoxHelperComponent } from "../BoxHelperComponent";
@@ -34,13 +36,15 @@ export { CanvasGroup } from "../ui/CanvasGroup";
 export { CapsuleCollider } from "../Collider";
 export { CharacterController } from "../CharacterController";
 export { CharacterControllerInput } from "../CharacterController";
+export { ChromaticAberration } from "../postprocessing/Effects/ChromaticAberration";
 export { Collider } from "../Collider";
-export { ColorAdjustments } from "../Volume";
+export { ColorAdjustments } from "../postprocessing/Effects/ColorAdjustments";
 export { ColorBySpeedModule } from "../ParticleSystemModules";
 export { ColorOverLifetimeModule } from "../ParticleSystemModules";
 export { ControlTrackHandler } from "../timeline/TimelineTracks";
 export { Deletable } from "../DeleteBox";
 export { DeleteBox } from "../DeleteBox";
+export { DepthOfField } from "../postprocessing/Effects/DepthOfField";
 export { DeviceFlag } from "../DeviceFlag";
 export { DragControls } from "../DragControls";
 export { DropListener } from "../DropListener";
@@ -92,9 +96,11 @@ export { ParticleBurst } from "../ParticleSystemModules";
 export { ParticleSubEmitter } from "../ParticleSystemSubEmitter";
 export { ParticleSystem } from "../ParticleSystem";
 export { ParticleSystemRenderer } from "../ParticleSystem";
+export { PixelationEffect } from "../postprocessing/Effects/Pixelation";
 export { PlayableDirector } from "../timeline/PlayableDirector";
 export { PlayerColor } from "../PlayerColor";
 export { PointerEventData } from "../ui/PointerEvents";
+export { PostProcessingHandler } from "../postprocessing/PostProcessingHandler";
 export { RawImage } from "../ui/Image";
 export { Raycaster } from "../ui/Raycaster";
 export { Rect } from "../ui/RectTransform";
@@ -109,6 +115,7 @@ export { Rigidbody } from "../RigidBody";
 export { RotationBySpeedModule } from "../ParticleSystemModules";
 export { RotationOverLifetimeModule } from "../ParticleSystemModules";
 export { ScreenCapture } from "../ScreenCapture";
+export { ScreenSpaceAmbientOcclusion } from "../postprocessing/Effects/ScreenspaceAmbientOcclusion";
 export { ShadowCatcher } from "../ShadowCatcher";
 export { ShapeModule } from "../ParticleSystemModules";
 export { SignalAsset } from "../timeline/SignalAsset";
@@ -137,7 +144,7 @@ export { TestRunner } from "../TestRunner";
 export { TestSimulateUserData } from "../TestRunner";
 export { Text } from "../ui/Text";
 export { TextureSheetAnimationModule } from "../ParticleSystemModules";
-export { ToneMapping } from "../Volume";
+export { ToneMapping } from "../postprocessing/Effects/Tonemapping";
 export { TrailModule } from "../ParticleSystemModules";
 export { TransformData } from "../export/usdz/extensions/Animation";
 export { TransformGizmo } from "../TransformGizmo";
@@ -148,13 +155,14 @@ export { USDZExporter } from "../export/usdz/USDZExporter";
 export { VelocityOverLifetimeModule } from "../ParticleSystemModules";
 export { VerticalLayoutGroup } from "../ui/Layout";
 export { VideoPlayer } from "../VideoPlayer";
+export { Vignette } from "../postprocessing/Effects/Vignette";
 export { Voip } from "../Voip";
-export { Volume } from "../Volume";
-export { VolumeComponent } from "../Volume";
-export { VolumeParameter } from "../Volume";
-export { VolumeProfile } from "../Volume";
+export { Volume } from "../postprocessing/Volume";
+export { VolumeParameter } from "../postprocessing/VolumeParameter";
+export { VolumeProfile } from "../postprocessing/VolumeProfile";
 export { VRUserState } from "../WebXRSync";
 export { WebAR } from "../WebXR";
+export { WebARCameraBackground } from "../WebARCameraBackground";
 export { WebARSessionRoot } from "../WebARSessionRoot";
 export { WebXR } from "../WebXR";
 export { WebXRAvatar } from "../WebXRAvatar";

package/src/engine-components/js-extensions/Object3D.ts

@@ -3,7 +3,7 @@ import { Object3D } from "three";
 import { Constructor, ConstructorConcrete, IComponent } from "../../engine/engine_types"
 import { IComponent as Component } from "../../engine/engine_types";
 import { addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
-import { isActiveSelf, setActive } from "../../engine/engine_gameobject";
+import { isActiveSelf, setActive, destroy } from "../../engine/engine_gameobject";
 
 // used to decorate cloned object3D objects with the same added components defined above
 export function apply(object: Object3D) {
@@ -20,6 +20,10 @@ Object3D.prototype["setActive"] = function (active: boolean) {
     this.visible = active;
 }
 
+Object3D.prototype["destroy"] = function () {
+    destroy(this);
+}
+
 Object3D.prototype["addNewComponent"] = function <T extends Component>(type: ConstructorConcrete<T>) {
     return addNewComponent(this, new type());
 }
@@ -78,5 +82,6 @@ if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "transform")) {
 
 
 
+
 // do this after adding the component extensions
 registerPrototypeExtensions(Object3D);

package/src/engine-components/postprocessing/Effects/Antialiasing.ts

@@ -0,0 +1,52 @@
+import { EdgeDetectionMode, SMAAEffect, SMAAPreset } from "postprocessing";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+
+
+export enum QualityLevel {
+    LOW = 0,
+    MEDIUM = 1,
+    HIGH = 2,
+    ULTRA = 3
+}
+
+
+export class Antialiasing extends PostProcessingEffect {
+    get typeName(): string {
+        return "Antialiasing";
+    }
+
+    // @serializable(VolumeParameter)
+    // edgeDetectionThreshold!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    preset!: VolumeParameter;
+
+
+    onCreateEffect(): EffectProviderResult {
+        const effect = new SMAAEffect({
+            preset: SMAAPreset.HIGH,
+            edgeDetectionMode: EdgeDetectionMode.DEPTH
+        });
+
+        this.preset.onValueChanged = (newValue) => {
+            effect.applyPreset(newValue);
+        };
+
+        // effect.edgeDetectionMaterial.edgeDetectionThreshold = .01;
+
+        // this.edgeDetectionThreshold.onValueChanged = (newValue) => {
+        //     console.log(newValue);
+        //     effect.edgeDetectionMaterial.edgeDetectionThreshold = newValue;
+        // }
+
+        return effect;
+    }
+
+
+}
+
+registerCustomEffectType("Antialiasing", Antialiasing)

package/src/engine-components/postprocessing/Effects/Bloom.ts

@@ -0,0 +1,75 @@
+import { BloomEffect, SelectiveBloomEffect } from "postprocessing";
+import { serializable } from "../../../engine/engine_serialization";
+import { PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+export class Bloom extends PostProcessingEffect {
+
+    get typeName() {
+        return "Bloom";
+    }
+
+    @serializable(VolumeParameter)
+    threshold!: VolumeParameter;
+    @serializable(VolumeParameter)
+    intensity!: VolumeParameter;
+    @serializable(VolumeParameter)
+    scatter!: VolumeParameter;
+
+    selectiveBloom = true;
+
+    init() {
+        this.threshold.defaultValue = 1;
+        this.intensity.defaultValue = 0;
+        this.scatter.defaultValue = .2;
+
+        if (this.selectiveBloom) {
+            this.threshold.valueProcessor = (v: number) => v * .5;// / (Math.PI * 2);
+            this.intensity.valueProcessor = (v: number) => v * Math.PI * 2;
+            this.scatter.valueProcessor = (v: number) => .2 + Math.pow((1 - v), 2);
+        }
+        else {
+            this.threshold.valueProcessor = (v: number) => v / (Math.PI * 2);
+            this.intensity.valueProcessor = (v: number) => v;// * 2.2;
+            this.scatter.valueProcessor = (v: number) => (1 - v);
+        }
+    }
+
+    onCreateEffect() {
+        let bloom: BloomEffect;
+        if (this.selectiveBloom) {
+            // https://github.com/pmndrs/postprocessing/blob/64d2829f014cfec97a46bf3c109f3abc55af0715/demo/src/demos/BloomDemo.js#L265
+            const selectiveBloom = bloom = new SelectiveBloomEffect(this.context.scene, this.context.mainCamera!, {
+                luminanceThreshold: this.threshold.value,
+                luminanceSmoothing: this.scatter.value,
+                intensity: this.intensity.value,
+                mipmapBlur: false,
+            });
+            selectiveBloom.inverted = true;
+        }
+        else {
+            bloom = new BloomEffect();
+        }
+
+
+        const blur = bloom["mipmapBlurPass"];
+        if (typeof blur === "object") {
+            blur.radius = this.scatter.value;
+        }
+
+        this.intensity.onValueChanged = newValue => {
+            bloom!.intensity = newValue;
+        };
+        this.threshold.onValueChanged = newValue => {
+            bloom!.luminanceMaterial.threshold = newValue;
+        };
+        this.scatter.onValueChanged = newValue => {
+            bloom!.luminanceMaterial.smoothing = newValue;
+        };
+
+        return bloom;
+    }
+
+}
+registerCustomEffectType("Bloom", Bloom);

package/src/engine-components/postprocessing/Effects/ChromaticAberration.ts

@@ -0,0 +1,36 @@
+import { ChromaticAberrationEffect } from "postprocessing";
+import { Vector2 } from "three";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType, VolumeProfile } from "../VolumeProfile";
+
+export class ChromaticAberration extends PostProcessingEffect {
+
+    get typeName() {
+        return "ChromaticAberration";
+    }
+
+    @serializable(VolumeParameter)
+    intensity!: VolumeParameter;
+
+    init() {
+        this.intensity.defaultValue = 0;
+    }
+
+    onCreateEffect(): EffectProviderResult {
+        const chromatic = new ChromaticAberrationEffect();
+        chromatic.offset = new Vector2(0, 0)
+        chromatic.radialModulation = true;
+        chromatic.modulationOffset = .15;
+        this.intensity.valueProcessor = v => v * .02;
+        this.intensity.onValueChanged = v => {
+            chromatic.offset.x = -v;
+            chromatic.offset.y = v;
+        }
+        return chromatic;
+    }
+
+};
+
+registerCustomEffectType("ChromaticAberration", ChromaticAberration);

package/src/engine-components/postprocessing/Effects/ColorAdjustments.ts

@@ -0,0 +1,114 @@
+import { BrightnessContrastEffect, HueSaturationEffect } from "postprocessing";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+import { NoToneMapping } from "three";
+
+
+export class ColorAdjustments extends PostProcessingEffect {
+
+    get typeName() {
+        return "ColorAdjustments";
+    }
+
+    @serializable(VolumeParameter)
+    postExposure!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    contrast!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    hueShift!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    saturation!: VolumeParameter;
+
+    init() {
+        this.postExposure!.valueProcessor = v => {
+            // when using tone mapping, the exposure will just be set to the renderer
+            if (this.context.renderer.toneMapping !== NoToneMapping && v > 0) {
+                return Math.pow(2, v);
+            }
+            // Custom effects need modification
+            else {
+                return v / (2 * Math.PI);
+            }
+        }
+        this.postExposure.defaultValue = 0;
+
+        this.contrast.valueProcessor = (v: number) => {
+            let divisor = 100;
+            if (v > 0) divisor *= Math.PI * 2;
+            const val = v / divisor;
+            return val;
+        };
+        this.contrast.defaultValue = 0;
+
+        this.hueShift.valueProcessor = (v: number) => Math.PI * v / 180;
+        this.hueShift.defaultValue = 0;
+
+        this.saturation.valueProcessor = (v: number) => {
+            return (v / 180);
+        }
+        this.saturation.defaultValue = 0;
+    }
+
+    unapply() {
+        this.context.renderer.toneMappingExposure = 1;
+    }
+
+
+    onCreateEffect(): EffectProviderResult {
+
+        const brightnesscontrast = new BrightnessContrastEffect();
+        // TODO: darkening etc doesnt really work well in all cases right now
+        this.postExposure!.onValueChanged = v => {
+            // We can use the builtin exposure when tonemapping is set
+            if (this.context.renderer.toneMapping !== NoToneMapping) {
+                if (v === 0) {
+                    this.context.renderer.toneMappingExposure = 1;
+                    brightnesscontrast.brightness = 0;
+                }
+                else if (v > 0) {
+                    this.context.renderer.toneMappingExposure = v;
+                    brightnesscontrast.brightness = 0;
+                }
+                else {
+                    this.context.renderer.toneMappingExposure = v;
+                    brightnesscontrast.brightness = 0;
+                }
+            }
+            // Otherwise use the effect (they look sligthly different/behave different unfortunately)
+            else {
+                this.context.renderer.toneMappingExposure = 0;
+                brightnesscontrast.brightness = v;
+            }
+        }
+        this.contrast!.onValueChanged = v => brightnesscontrast.contrast = v;
+
+
+        const hueSaturationEffect = new HueSaturationEffect();
+        this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
+        this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;
+
+        return [brightnesscontrast, hueSaturationEffect];
+    }
+
+    // apply() {
+    //     this.postExposure!.onValueChanged = () => {
+    //         this.setExposure();
+    //     };
+
+    //     // unity range goes from -15..15
+    //     // three.js range goes from 0..inf
+    //     if (this.postExposure?.overrideState) {
+    //         this.setExposure();
+    //     }
+    // }
+    // private setExposure() {
+    //     const exposure = Math.pow(2, this.postExposure?.value ?? 0);
+    //     this.context.renderer.toneMappingExposure = exposure;
+    // }
+}
+registerCustomEffectType("ColorAdjustments", ColorAdjustments);