Dispatching of NgRx Action & Creating Screenshots


I’m experiencing a possible race condition with updating the Babylon render state and subsequently taking a screenshot of the render using CreateScreenshotUsingRenderTarget.

Output (Babylon JS 6.9.0)


Desired Output (Babylon JS 4.2.1)



let options: Options = { … };

BabylonTools.CreateScreenshotUsingRenderTarget(this.engine, this.camera, { height: 1200, width: 1400 }, (data: string) => {

  this.store.dispatch(SaveScreenshotAction(data.replace('data:image/png;base64,', '')));*



The dispatching of an action to update the Babylon render on line 2 is causing the display issue shown above. NgRx is used to dispatch the action. Note this action causes a re-draw of the entire scene.

Attempts to wrap this code into an NG Zone or Promise to ensure the action has completed before the screenshot is taken have failed.

I am using Babylon JS 6.9.0 with the latest versions of NgRx and AngularJS. Note that this issue was not present when using Babylon JS 4.X.X. A recent update to 6.X.X has caused this issue.

The text annotations are TextBlock objects, I have explored and exhausted issues relating to colour, alpha and transparency. Please note that other created objects, not shown in the screenshots, such as Lines and Boxes are not affected – it is just the TextBlock objects.

My question is, how do we ensure the render is ready for the screenshot to be taken ? Furthermore, why would only TextBlock objects be affected and not other object types ?

Many Thanks.


Are you able to share a small reproduction of your project?

The GUI has its own guiIsReady function: AdvancedDynamicTexture | Babylon.js Documentation (babylonjs.com), but the only case where it isn’t ready by default is the Image, so it shouldn’t change anything in your case. It will be easier to see with a repro.

Hi carolhmj,

Thanks for the reply.

Unfortunately not yet, this is in progress. Once I have the reproduction project repo I’ll post it.

I was making an initial post to see if there was anything obvious I was missing.

The AdvancedDynamicTexture’s are not images so yes this is not relevant in my case.

Hi @carolhmj,

To update you on this.

I was able to workaround the problem by changing to a Mesh object type when required - I found that this did not trigger the bug.

I also had to wrap my screenshot logic in an executeWhenReady check to ensure the scene was fully rendered. If this wasn’t in place the annotations were missing from the screenshot. Note using executeWhenReady with the TextBlock type still triggers the above bug.

This leads me to believe that the scene is not ready when taking the screenshots with the TextBlock type.

Does BabylonJS have the necessary logic in-place to ensure the TextBlock’s are fully rendered before the screenshot is taken ? It is interesting how executeWhenReady resolves the issue for Mesh object types but not TextBlock object types - maybe the problem lies here ?

I’ll be working on my reproduction project soon and I’ll keep you posted.