UV position problem of Dynamic Texture

[Kayla_Man]

Hi guys.
I am new to js and babylonjs and working on shirt configurator. I am facing a little issue on UV as it seems that the UV of diffuse is totally off while other maps are working fine. I export the geometry from Marvelous Designer with unified UV and put it back to the blender to see if the UV is in the right spot. I export the geometry in gltf format and embed with babylonjs. (I also use jQuery and fabricjs in the script)

updated: I sorta figure out where the problem is and I try to use the wAng to rotate UV, and I need to do the filp horizontal to the UV. Is there any command to flip horizontal to the UV(I try to put uScale =-1 but not working)?

My code:
var canvasSecond = document.getElementById(“canvas2”);

        canvasSecond.width = 1024;

        canvasSecond.height = 1024;

        //canvas

        var canvasSec = new fabric.Canvas('canvas2');

        fabric.Image.fromURL("textures/shirt_diffuse.png", function(img2) {

            var img3 = img2.set({ selectable: false });

            canvasSec.add(img2).renderAll();

        });
.....//after so many lines
var texture = new BABYLON.DynamicTexture("texture", canvasSecond, scene,true,0,0,false);


        var nrmtexture = new BABYLON.Texture("textures/shirt_normal.png", scene, true, false);

        var spectexture = new BABYLON.Texture("textures/shirt_spec.png", scene, true, false);

        BABYLON.SceneLoader.ImportMesh("", "gltf/", "shirt.gltf", scene, function(mesh) {

            scene.createDefaultCameraOrLight(true, true, true);

            var material = new BABYLON.PBRMaterial("material", scene);

            material.albedoTexture = texture;

            material.reflectionTexture = new BABYLON.HDRCubeTexture("textures/abandoned_factory_canteen_02_2k.hdr", scene, 218, false, false, false, false);

            material.bumpTexture = nrmtexture;

            material.specularTexture = spectexture;

            material.metallic = 0;

            material.roughness = 1;

            // standardUV = options.standardUV;

            mesh[1].material = material;

        });

[Evgeni_Popov]

Have you tried to set scene.useRightHandedSystem = true just after scene creation?

[Kayla_Man]

@Evgeni_Popov

scene.useRightHandedSystem = true

I have tried to set scene.useRightHandedSystem to true but it’s not working.

[Evgeni_Popov]

So, uScale or vScale = -1 should do the flipping.

Are you able to setup a repro in the Playground?

[Kayla_Man]

I try to set up but fails as I need to include fabricjs or needs gltf import for that.

but I try to import gltf into sandbox

I find out that the option of invertY could be a cause of the UV issue.
I try to do set the invertY to false with new BABYLON.Texture, it works well but the parameter isn’t working with DynamicTexture.
i do something like this:
var texture = new BABYLON.DynamicTexture("texture", canvasSecond, scene, true, 0, 0, true, false);

Perhaps I send you some code so that you can dive into that?

[Evgeni_Popov]

You can inject your script in the PG using BABYLON.Tools.LoadScript or LoadScriptAsync.

Having a repro in the Playground would allow anybody willing to help.

[Kayla_Man]

@Evgeni_Popov

BABYLON.Tools.LoadScript

I try to put the code into the Playground but there is some error.
The Playground is here: https://playground.babylonjs.com/#IKJYCJ#1
I also put the code into the github: GitHub - moonyuet/shirtCongrJS

[Evgeni_Popov]

Here’s a modified PG that works: could you update it so that it shows the problem? For the time being it is very dark and it’s hard to see what’s going on.

https://playground.babylonjs.com/#IKJYCJ#4

[Kayla_Man]

https://playground.babylonjs.com/#IKJYCJ#10
I try to import the diffuse texture but it seems that the dynamic texture is not working as I expected. I try not using fabricjs to import the texture but it still looks really dark.
I also create JSFiddle for it but it seems that the dynamic texture is not really working.(this one I am still using fabricjs)

Edit fiddle - JSFiddle - Code Playground

[labris]

The dynamic texture is there, as shown in the Inspector:

Next step after you are sure that the texture is working is to find where is the error in the code, and it is not difficult: we need to change var meshOne = mesh[1]; into var meshOne = mesh[0]; and… miracle!
https://playground.babylonjs.com/#IKJYCJ#11

[Kayla_Man]

Hi labris.
Thanks for reply!
I want to show not only just base color but also the kenzo logo overlaying on top of the diffuse map by using dynamic texture but it seems it automatically sets InvertY to true and I am not sure how to fix it by loading command. I tried to dive into documentation and set the new BABYLON.DynamicTexture(“texture”, canvasSecond, scene, 0, 0, true, false) in order for converting the invertY to false. But it seems it doesn’t work.
I can do it with just diffuse map with BABYLON Texture but it seems dynamic texture is different case.

[labris]

I am not that I understood completely what do you mean by “overlaying” but you may try to use emissive texture for the logo and diffuse texture as usual.
As for Faces UV you may try to draw on canvas not the usual texture but sprite and then apply it to the mesh’ faces as you like.

[Kayla_Man]

I mean like assigning the logo on top of the diffuse map.
I try to write a script to allow users to put a custom pattern or text on the 2D layout of the map and they can save image to reload it in other platforms.

[labris]

Here is the demo showing that it is possible - | Camisa Dimona
More info here How to submit my page to the "made with" section?

As I see your question/problem should be solved in logical way.
Let’s do it in 2D canvas.
We have

1. Some image to be drawn on canvas

2. User input (text or image) which should be also drawn at canvas over the first image in some position.

3. The result = new image on canvas, nothing more
   If you can do it in 2D, there will be no problem to do it in 3D since all these images are actually just flat images (textures). The logic will be the same:

4. Some image to be drawn on canvas as diffuseTexture. This is flat image.

5. User input (text or image) which should be also drawn at canvas over the first image in some position. This is also flat image.

6. The result = new image on canvas, nothing more. This new image = new diffuseTexture which you need just to change after user input.

You can try just to edit your texture in Inspector to see the logo position in 3D and 2D simultaneously:

[Kayla_Man]

I can do it already with the default simple cube in babylonjs. I just dont know why I can’t do with the diffuse map in a fixed uv pattern when it assigns to my shirt.The only solution I can find is, I can remove the diffuse map and set the canvas all-the-way to just color and add texts and images. But this is not the initial propose to create the configurator for the users in my case. The diffuse map with the UV-layout pattern is important for the users to make a deal with their clients or factory people.

Perhaps it is some kind of bugs when the invertY attribute of dynamic texture cannot be set to false. When I assign the diffuse textures with UV back to the shirt by setting invertY to false, it works fine.

[labris]

So, as I understood you correctly, you have working example with the cube in Babylon JS.
The problem was how to get the diffuse texture (more correctly, since it is PBR material, albedoTexture) from your model. When you get it, you can draw upon it as you need.
Here it is - https://playground.babylonjs.com/#IKJYCJ#13
Just make myGoodTexture your dynamic texture and draw upon it.

[Kayla_Man]

I’ve tried, but still the diffuse texture is flipped while other maps are correct.

[labris]

Could you try to set uScale and Vscale texture parameters to -1?

[Pryme8]

texture.update(true)? Just flip the update?

[labris]

Let’s open again this example - https://playground.babylonjs.com/#IKJYCJ#11

Now change uScale and vScale to -1:

The dynamic texture is flipped and looks as in your flipped example.

As my logic tells me, if you flip with uScale and vScale your texture, which you receive flipped from some function, you should get the right texture in the correct UV position.