Move screenshot code to DumpFramebuffer

src/Engines/thinEngine.ts

@@ -527,12 +527,6 @@ export class ThinEngine {
     }
 
     /**
-     * Observable raised when a screenshot has been taken
-     * Note that a screenshot will be taken only if the observable is not empty!
-     */
-    public onScreenshotObservable = new Observable<Uint8Array>();
-
-    /**
      * Creates a new engine
      * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
      * @param antialias defines enable antialiasing (default: false)
@@ -1334,31 +1328,6 @@ export class ThinEngine {
         if (this._badOS) {
             this.flushFramebuffer();
         }
-
-        if (this.onScreenshotObservable.hasObservers()) {
-            const observers = this.onScreenshotObservable.observers;
-            for (const observer of observers) {
-                let width: Nullable<number> = observer.customData?.width,
-                    height: Nullable<number> = observer.customData?.height;
-
-                if (width === null) {
-                    width = this.getRenderWidth();
-                }
-                if (height === null) {
-                    height = this.getRenderHeight();
-                }
-
-                let data = this.readPixels(0, 0, width, height);
-
-                if ((data as Uint8Array).byteLength !== undefined) {
-                    this.onScreenshotObservable.notifyObserver(observer, data as Uint8Array);
-                } else {
-                    (data as Promise<Uint8Array>).then((data) => {
-                        this.onScreenshotObservable.notifyObserver(observer, data);
-                    });
-                }
-            }
-        }
     }
 
     /**

src/Misc/observable.ts

@@ -88,11 +88,7 @@ export class Observer<T> {
         /**
          * Defines the current scope used to restore the JS context
          */
-        public scope: any = null,
-        /**
-         * Defines custom data attached to this observer
-         */
-        public customData: any = null) {
+        public scope: any = null) {
     }
 }
 
@@ -185,12 +181,12 @@ export class Observable<T> {
      * @param unregisterOnFirstCall defines if the observer as to be unregistered after the next notification
      * @returns the new observer created for the callback
      */
-    public add(callback: (eventData: T, eventState: EventState) => void, mask: number = -1, insertFirst = false, scope: any = null, unregisterOnFirstCall = false, customData: any = null): Nullable<Observer<T>> {
+    public add(callback: (eventData: T, eventState: EventState) => void, mask: number = -1, insertFirst = false, scope: any = null, unregisterOnFirstCall = false): Nullable<Observer<T>> {
         if (!callback) {
             return null;
         }
 
-        var observer = new Observer(callback, mask, scope, customData);
+        var observer = new Observer(callback, mask, scope);
         observer.unregisterOnNextCall = unregisterOnFirstCall;
 
         if (insertFirst) {
@@ -211,8 +207,8 @@ export class Observable<T> {
      * @param callback the callback that will be executed for that Observer
      * @returns the new observer created for the callback
      */
-    public addOnce(callback: (eventData: T, eventState: EventState) => void, customData: any = null): Nullable<Observer<T>> {
-        return this.add(callback, undefined, undefined, undefined, true, customData);
+    public addOnce(callback: (eventData: T, eventState: EventState) => void): Nullable<Observer<T>> {
+        return this.add(callback, undefined, undefined, undefined, true);
     }
 
     /**

src/Misc/tools.ts

@@ -579,7 +579,15 @@ export class Tools {
         var numberOfChannelsByLine = width * 4;
         var halfHeight = height / 2;
 
-        engine.onScreenshotObservable.addOnce((data) => {
+        engine.onEndFrameObservable.addOnce(async () => {
+            let data = engine.readPixels(0, 0, width, height);
+
+            if ((data as Uint8Array).byteLength === undefined) {
+                data = await data;
+            }
+
+            data = data as Uint8Array;
+
             // TODO WEBGPU Would be better to test ThinEngine.Features.framebuffersHaveYTopToBottom than engine.isWebGPU...
             if (!engine.isWebGPU) {
                 // To flip image on Y axis.
@@ -621,8 +629,6 @@ export class Tools {
 
                 Tools.EncodeScreenshotCanvasData(successCallback, mimeType, fileName);
             }
-        }, {
-            width, height
         });
     }