How to replace a part of the texture dynamically in gltf jpg file

Need help to replace the ‘Your logo’ text with logo images and videos provide by us dynamically

Booth URL
https://cache.learnbrite.com/_assets_/models/exhibition_stands/stand_c/Stand_C_.gltf

Booth branding template

Hello and welcome!

First of all, the file which you provided cannot be opened since it misses some parts of the whole GLTF set, like 'Stand_C_.bin

The best way to get help would be to create and share here a Playground with your assets.
This may help in this regard - Using External Assets In the Playground | Babylon.js Documentation

3 Likes

Hi and Welcome to the Community.

As per your title, I’d say you are mixing things a little or taking a wrong approach.
I’m not gonna say: Literally, and only if absolutely necessary, you can indeed replace a portion of a texture. Or replace and update a texture. From what I see here, none of these should apply to your needs.

Let’s put this simple, will we? First things first, you need the background image without the logo square as a texture. To be honest, I didn’t check your file but I believe it’s likely to be embedded.
Step 2, for your dynamic logo or other content update, you have a number of options.
Obviously looking at this template, the easiest would be to create a new object like a plane on top of your background to display the logo, video or any other content. Then, there’s always the option of drawing a dynamicTexture on top of your texture.

Well, I guess this is mostly just ‘blah blah’ for you at this stage :wink:. I can understand that.
In order to let us really help you with this and SHOW how it can be done, best would be for you to set-up a playground and load your asset in it as explained here.

With this playground, we will be able to investigate the content and make instant changes to your scene/playground and share them with you.

Let us know when you have gone through this first step and we’ll certainly try to help you with it as good and fast as we can.

Meanwhile, again, welcome to the Community and have a great day :sunglasses:

2 Likes

You can load this asset in the sandbox by doing this:
https://sandbox.babylonjs.com/?assetUrl=https://cache.learnbrite.com/assets/models/exhibition_stands/stand_c/Stand_C_.gltf

This asset is already external. :slight_smile:

2 Likes

It is, but due to CORS it is not suitable for Playground setup.

It works with the sandbox, so it should work for PG also.

Good to know. I’ve thought the Sandbox is able to accept any URLs, like Viewer.

Anyway, here is the initial PG with GLTF model - Babylon.js Playground

image

3 Likes

With this done thanks @labris , you can see that the sample texture is a flat texture with the logo and background image. Now, I believe you don’t want to keep this background texture, yes? It’s just a sample design, who would want to use that anyways. But you can use this texture as a guide to layout your branding and design. Makes things easier. All you need to do now is some photoshoping and then replace your branding texture with the new one. For your video however, you will want to add a plane you can use for your videoTexture and eventually interact with. That’s it. Jobs done :smiley: Let us know if anything and meanwhile, have a great day :sunglasses:

Edit: You should check the downloaded package of the template. If the template is not just a piece of useless crap, you should have a texture folder with all passes of textures (a shadowmap, AO, diffuse or base, etc… May be even an edit file with all layered textures ready to be edited).

Thanks for the response. I have tried it by creating a new plane on top of background and displayed the logo but my requirement is from the above image we are having textures we need to replace your logo in the texture with whatever logo we have provided.
Can you please help me regarding
How to get the mesh names from gltf
How to get texture of the particular mesh
How to replace the textures on the meshes
Hope you will be helping me on this. Thanks in advance.

OK, let’s start in order:

  • What exactly do you want to achieve from this ‘template’ in terms of layout/3D/geometry? Are you going to keep everything the way it is, except the textures? Not moving or rescaling any element? I’m asking because the way this file is done, everything is merged AND the way the textures are done is relying on this exact merge of object. Change, scale, move any object in this prefab and the entire thing will break!

  • Next, as asked before, can you provide with either a screenshot of the unfolded downloaded package of this ‘template’ - - or - - can you give us the link for download? Either there’s more than just this file in the package or this pseudo-template is just not what I shall call ‘a template’.

  • As I said, replacing the logo (pseudo)-container on the texture is ez. Any junior graphic designer can achieve this in minutes (even from an all flat texture). Should I understand you do not have the skills or resources to make this edit?

  • Then, as per your questions regarding the structure and content of the file, the easiest is to use the Babylon Inspector. Here you can easily spot that there are only two merged meshes in this gltf file, each using a single material and a single wrapped texture.

Edit: Just realized, what is this picture you posted initially ‘booth_c_template.jpg’ It looks to me like an editable you can update and use to process and export a new file.

Edit 2: OK, just checked back and it is. So it is a template after all :smiley: All you have to do is to edit this file. Of course, it would be better without the backed shadows on it. Check the package, may be you have a PSD or a layered format in there? Else, it wouldn’t be dramatic. It can still be done in minutes.

Here’s to illustrate my point :smiley::


Hope this helps,

5 Likes