diff --git a/packages/postprocessing/src/lib/abstracts/pass.abstract.ts b/packages/postprocessing/src/lib/abstracts/pass.abstract.ts index 6512085e3..0333c8e9a 100644 --- a/packages/postprocessing/src/lib/abstracts/pass.abstract.ts +++ b/packages/postprocessing/src/lib/abstracts/pass.abstract.ts @@ -2,11 +2,15 @@ import { applyProps, CanvasStore } from '@angular-three/core'; import type { ThreeInstance } from '@angular-three/core/typings'; import { Directive, + EventEmitter, Input, NgZone, + OnChanges, OnDestroy, OnInit, Optional, + Output, + SimpleChanges, SkipSelf, } from '@angular/core'; import { Pass } from 'three/examples/jsm/postprocessing/Pass'; @@ -14,12 +18,14 @@ import { EffectComposerDirective } from '../effect-composer.directive'; @Directive() export abstract class ThreePass - implements OnInit, OnDestroy { + implements OnInit, OnDestroy, OnChanges { @Input() enabled?: boolean; @Input() needsSwap?: boolean; @Input() clear?: boolean; @Input() renderToScreen?: boolean; + @Output() ready = new EventEmitter(); + constructor( protected readonly ngZone: NgZone, @SkipSelf() protected readonly canvasStore: CanvasStore, @@ -37,18 +43,28 @@ export abstract class ThreePass private _pass!: TPass; + ngOnChanges(changes: SimpleChanges) { + this.ngZone.runOutsideAngular(() => { + if (this.pass) { + this.applyExtraInputs(changes); + } + }); + } + ngOnInit() { this.ngZone.runOutsideAngular(() => { if (this.useSceneAndCamera) { const { scene, camera } = this.canvasStore.getImperativeState(); - this._extraArgs[0] = scene; - this._extraArgs[1] = camera; + this._extraArgs = [scene, camera, ...this._extraArgs]; } this._pass = new this.passType(...this._extraArgs); this.applyExtraInputs(); if (this.composer) { this.composer.composer.addPass(this.pass); } + this.ngZone.run(() => { + this.ready.emit(this.pass); + }); }); } @@ -68,7 +84,7 @@ export abstract class ThreePass return false; } - private applyExtraInputs(): void { + private applyExtraInputs(inputChanges?: SimpleChanges): void { this.ngZone.runOutsideAngular(() => { const extraProps = [ 'enabled', @@ -77,12 +93,20 @@ export abstract class ThreePass 'renderToScreen', ...this.extraInputs, ].reduce((extraProps, extraInput) => { - const inputProp = ((this as unknown) as Record)[ + let inputProp = ((this as unknown) as Record)[ extraInput ]; - if (inputProp) { - extraProps[extraInput] = inputProp; + if (inputChanges) { + if (inputChanges[extraInput]) { + inputProp = inputChanges[extraInput].currentValue; + extraProps[extraInput] = inputProp; + } + } else { + if (inputProp) { + extraProps[extraInput] = inputProp; + } } + return extraProps; }, {} as Record); applyProps((this.pass as unknown) as ThreeInstance, extraProps);