Drawing 2D Context on DynamicTexture

When using DynamicTexture on a Mesh to draw a CanvasImageSource or ImageBitmap via 2D-context, Babylon seems to flip UV-maps. Have a look at the following playground.

https://playground.babylonjs.com/#A9KVZT#3

The workaround will be to call

ctx.translate(0, 1024);
ctx.scale(1, -1);

on the context, which flips it back.

Pass false to update.
https://playground.babylonjs.com/#A9KVZT#4

Thank’s, that was simple. Never thought that this call inverts some coordinates. Is there a special reason for using true as default and flipping Y?

It’s probably because by default all regular WebGL textures are Y inverted.

HI @daniel_cyledge, sorry for my terse reply and welcome to the community.
[It was after midnight here and I am in the midst of flooding rains and couldn’t sleep so was just browsing the forums on my phone (with low battery), daytime now and I am back at my laptop :slight_smile: ]

As Evgeni said most WebGL textures are Y inverted. This has bgiven me a fair bit of grief but once you get onto it its not so bad. I found it was mostly when using direct drawing on the context and then needing to call update manually that I had issues. I also tried the ctx.scale(1,-1) trick which mostly worked for me but not when using Sliders - it would rgister the click but then because the value was scaled by -1 it was always outside the range and so would drop down to minimum and be stuck there. That took a while to figure out.

I have mostly been using Advanced Dynamic Textures in GUIs and with them it is possible to set ADT.applyYInversionOnUpdate = false after creation so then you can just call update() but there doesnot seem to be the same property for DynamicTextures.

I sometimes have to fiddle with things a bit to get the right combination of invert or not.

Hi @MarkM, no worries.
We are drawing rendered SVGs on a mesh, so I was not aware of that y-flipped textures are the default in the world out there. Thanks.