Replace an existing texture using UV Map

[Iwaa-kun 5]

Hi,

 

I'm new to BabylonJS and 3D.

 

I created a scene in Blender with a character. It has a single material, UV Map and texture.

It works fine in BabylonJS but when I replace the texture with new BABYLON.Texture or new BABYLON.DynamicTexture (in my case), the new texture does not take into account the UV Map.

I think I forgot something, but I don't know where to watch.

 

(Sorry for my English ^^')

[Deltakosh 4315]

check if your original texture has some values for .uOffset, .vOffset, .uScale and .vScale

[Iwaa-kun 5]

The values ​​are the same unfortunately /':

 

Here I show you what I get :

http://captainngm.free.fr/bjstest/ (offline)

 

The first button recreates the texture but uses the same file (the eye is present under the right armpit). The second button reloads a clone of the initial texture.

You can turn on your console log to see objects.

[Dad72 916]

Try this:

scene.meshes[0].material.subMaterials[0].diffuseTexture = new BABYLON.Texture("./index.png", scene);

This works for me. UV are often subMaterials

[Iwaa-kun 5]

I can not find the property "subMaterials", it is undefined on "scene.meshes[0].material". I think that's for the MultiMaterial class but all my materials are StandardMaterial.

[Dad72 916]

You must reload the model after assigning the new textures. I do not think it can be dynamically changed.

[Deltakosh 4315]

You also have to set texture.hasAlpha = true 

[Iwaa-kun 5]

You must reload the model after assigning the new textures. I do not think it can be dynamically changed.

How can I do that?

Normally, there is no texture and diffuseTexture is undefined. What I wanted to do is to place a dynamic texture on the model and then I draw the character's face dynamically.

 

So I do this:

// mesh.material.diffuseTexture is undefined before thatvar skin = new BABYLON.DynamicTexture("Peau", 1024, newScene, true);skin.hasAlpha = true;skin.getContext().fillStyle = '#ff0000';skin.getContext().fillRect(0,0,1024,1024);skin.getContext().drawImage($('img.eye')[0],0,0,120,100,190,690,120,100); // There is an HTML Image Element loadedskin.update(false);mesh.material.diffuseTexture = skin;

But I find myself with the same problem: the texture does not take into account the UV and hasAlpha property changes nothing.

How do I reload the model after applying the dynamic texture?

[Dad72 916]

When you do a console.log (), you have diffuseTexture?

You must export your model with a default texture, even if it is transparent so you need to do with blender or 3ds max. diffuseTexture exist and you can modify with Babylon.

 

I think your problem is here. Babylon when exporting your model, it exports it finds as texture, if there is not, it does not create fields textures.

[Deltakosh 4315]

There is no need to reload your model.

 

You should compare property by property. You should miss one of them 

[Iwaa-kun 5]

Ok, I found the solution which was very very stupid ... Misuse method parameters ... Normal texture and dynamic texture.

For a normal texture :

// Wrong: mesh.material.diffuseTexture = new BABYLON.Texture("./index.png", scene, true, false);mesh.material.diffuseTexture = new BABYLON.Texture("./index.png", scene);

For a dynamic texture

// Wrong// mesh.material.diffuseTexture = new BABYLON.DynamicTexture("Skin", 1024, scene);// ---// mesh.material.diffuseTexture.update();mesh.material.diffuseTexture = new BABYLON.DynamicTexture("Skin", 1024, scene, true);// ---mesh.material.diffuseTexture.update(true);

I feel really stupid, but thank you very much for your help.

[efxlab 7]

Hello @Iwaa-kun I have the same job for replace texture dynamically but on PBR GlTF loader,

This my code: 

var meshes = scene.meshes;
for(var i=0, len=meshes.length; i < len; i++){
     if (meshes.material) {
          meshes.material.albedoTexture = new BABYLON.DynamicTexture('assets/JRO_Copper_02/lambert1_baseColor.jpg', 2048, scene);
          meshes.material.albedoTexture.update();
     }
}

It load fine, but the texture is has inversed RGB color, any idea @Pierre Glibert ?

thanks to babylonJS team and everyone for this thread.

[Deltakosh 4315]

Can you share the texture?

[efxlab 7]

here the albedo texture : http://host.electroheadfx.fr/efxbox/laurent/lambert1_baseColor.jpg.zip

edited : I verified in photoshop, its not an inversed color, sort of colorspace conversion issue ?

[efxlab 7]

It seem there is the same issue on this thread :

but I don't understand the trick !

[Deltakosh 4315]

Can you save the texture on github and use rawgit.com to load it from the playground? I could easily fix your issue from there

[efxlab 7]

its fixed with the help of the other post on false flipY texture for glTF model:

new BABYLON.Texture("assets/JRO_Metals_01/lambert1_baseColor.jpg", scene, true, false);

Thanks again Deltakosh

[rem 0]

I have a problem when I load the model gltf a first time and replace a texture it is well replaced but when I want to replace a second it is not taken into.

Could you help me please.