# AdvancedDynamicTexture renders differently using parseFromSnippetAsync or parseFromURLAsync

**URL:** <https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169>\
**Category:** Bugs\
**Created:** [October 28, 2025, 9:30am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169 "2025-10-28T09:30:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 28, 2025, 9:30am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/1 "2025-10-28T09:30:53Z")

</div>

In this playground I create a simple mesh and load a GUI onto it using parseFromSnippetAsync, it works perfectly.

> **[Babylon.js Playground](https://playground.babylonjs.com/#O06SZ5%237)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Whereas in my real code I have to use parseFromURLAsync. Everything else is the same but it fails to work if I use .parseFromURLAsync(‘./assets/ui/MainMenu-guiTexture.json’, true) with an error saying it needs to be a POT texture.

If I use .parseFromURLAsync(‘./assets/ui/MainMenu-guiTexture.json’, false) then it loads but doesn’t render the layout correctly, see image below.

 ![Screenshot 2025-10-28 091513](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/d/cdfc584a3b09dfa51ba2b0bc127eb1b006876d0b.png)

What is going on here?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 28, 2025, 10:14am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/2 "2025-10-28T10:14:12Z")

</div>

Could you provide a PG where you use `parseFromURLAsync`?

It works for me in this PG:

> **[Babylon.js Playground](https://playground.babylonjs.com/#O06SZ5%238)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 28, 2025, 11:01am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/3 "2025-10-28T11:01:13Z")

</div>

As I said it works in the playground as that uses a snippet.

It’s the loading from a url that doesn’t work.

I’ll have to see if I can host my json file somewhere and read that in via a playground instead of using the snippet

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [October 28, 2025, 11:34am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/4 "2025-10-28T11:34:31Z")

</div>

> [@Si\_Barrick](#):
>
> I’ll have to see if I can host my json file somewhere and read that in via a playground

This link may help - [https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets/v](https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets/v)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 28, 2025, 1:25pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/5 "2025-10-28T13:25:59Z")

</div>

> [@Si\_Barrick](#):
>
> As I said it works in the playground as that uses a snippet.

My PG is using `parseFromURLAsync`:

```typescript
const guiSnippet = {
    "id": "9ZL1UP",
    "version": 0,
    "description": "",
    "jsonPayload": "A LOT OF CODE - SEE PG",
    "name": "",
    "snippetIdentifier": "9ZL1UP-0",
    "tags": "",
    "date": "2025-10-28T09:12:48.433Z"
};

vrTexture
    .parseFromURLAsync("data:text/plain;base64," + btoa(JSON.parse(guiSnippet.jsonPayload).gui), true)
    .then(() => {});

```

Passing a data uri is/should not be different from passing a “real” url.

---

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 28, 2025, 1:35pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/6 "2025-10-28T13:35:33Z")

</div>

Maybe your missing my point.  
It is parsing it from my url but it renders it differently. That’s the bug.  
It should be no different, yet it is.

[MainMenu-guiTexture.zip](https://forum.babylonjs.com/uploads/short-url/vfUsgoRZJMYntLFoim6pwGU9sKP.zip) (2.1 KB)

CORS policies seem to prevent me some exactly mirroring the code in a playground. So other than the screen shot I’m not sure how to show that it doesn’t work

If I set the gui editor size to 512 x 1024, a POT size, then it displays as it does in my application. So I’m guessing that is the error. It’s imposing a POT size whereas the playground does not.

---

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 28, 2025, 2:03pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/7 "2025-10-28T14:03:50Z")

</div>

So yes switch to a size of 512 x 1024 fixed all the layout issues. But it does mean the UI has to be a certain size only which is a bit limiting.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 28, 2025, 4:20pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/8 "2025-10-28T16:20:52Z")

</div>

I put your file in one of my github repo and it still works for me for a size of 500 x 800 (at least the display is the same than in [https://playground.babylonjs.com/#O06SZ5#12](https://playground.babylonjs.com/#O06SZ5#12)):

> **[Babylon.js Playground](https://playground.babylonjs.com/#O06SZ5%2313)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Do you pass `true` as the second parameter to `parseFromURLAsync` in your project?

---

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 28, 2025, 10:54pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/9 "2025-10-28T22:54:42Z")

</div>

If I pass true I get an error saying not POT and it doesn’t render.

So the screenshot is from passing false.

I’m testing in Chrome and running in a tethered Rift S

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 29, 2025, 9:02am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/10 "2025-10-29T09:02:29Z")

</div>

So, it looks like your system is running WebGL1, as non-POT support is a requirement of WebGL2. Can you check if my PG works for you (check which engine is being used by looking at the browser console)?

---

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 29, 2025, 10:03am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/11 "2025-10-29T10:03:39Z")

</div>

Ok yes that’s working for me too, and I can see my app is using webgl 1, so why is my application not using WebGL 2….

“dependencies”: {

```
"@babylonjs/core": "^8.25.1",

"@babylonjs/gui": "^8.25.1",

"@babylonjs/loaders": "^8.25.1",

"react": "^19.1.1",

"react-dom": "^19.1.1"

```

},

```
let engine;

try {

  engine = new Engine(canvasRef.current, true, { preserveDrawingBuffer: true, stencil: true });

  globalEngine = engine; *// Store globally*

  console.log('Babylon.js engine initialized');

}

```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 29, 2025, 10:15am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/12 "2025-10-29T10:15:52Z")

</div>

WebGL2 should be used by default if it is supported. Only if `disableWebGL2Support: true` is added to the options when building the engine will WebGL2 support not be tested.

So I don’t understand why it doesn’t work in your project if my PG works on your device… Or could it be that `canvasRef.current` does not support WebGL2 for some reasons?

Try logging `canvasRef.getContext(“webgl2”)` and see what value is returned (do this before calling `new Engine()`).

---

<div class="post-metadata">

**Author:** ![Si\_Barrick](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/si_barrick/32/47275_2.png) [@Si\_Barrick](https://forum.babylonjs.com/u/Si_Barrick)\
**Post date:** [October 29, 2025, 10:32am UTC](https://forum.babylonjs.com/t/advanceddynamictexture-renders-differently-using-parsefromsnippetasync-or-parsefromurlasync/61169/13 "2025-10-29T10:32:22Z")

</div>

I’ve added some stuff to force it to prefer webgl 2 and that now does seem to be working now. Thanks for all the help.