Add logo on shirt

Questions
1

Hi,
Once the fabric is applied to the avatar how can we add brand name/logo to the shirt.

I tried to make pocket as seperate mesh so that i can add the texture. But its not going thru…

https://playground.babylonjs.com/#JHRF6T#2
guys can u throw some ideas how to achieve this…

Thanks
vijay

2

Hi!
Try this:

2 Likes
3

Thanks roland…

I tried with your approach, its not updating on the shirt.
actiually trying to put some image as logo
Could you pls share your thoughts

https://playground.babylonjs.com/#JHRF6T#11

4

This doesn’t seem to work for animated meshes:
https://playground.babylonjs.com/#JHRF6T#14

But I have a solution in my mind. Let me try it :slight_smile: I’ll get back to you.

5

But this piece of your code will never work obviously:
image

position: new BABYLON.Vector3(12,12,12) When dealing with decals this must be a world position of the decal, so even with the correct syntax it doesn’t make sense to put it to 12,12,12.

6

Here is a working solution using DynamicTexture. Please read the docs for more information.

https://playground.babylonjs.com/#JHRF6T#16

1 Like
7

Dynamic Texture doc: Dynamic Textures | Babylon.js Documentation (babylonjs.com) :smiley:

1 Like
8

Thanks roland…

How can we add specific location like this as shown in the attachment
logo|231x165

Using

textureContext.drawImage.

am unable to change the location on tshirt

pls suggest!

9

@Roland, just to add

Asumming i keep the texture (image ) size fixed and i change the .glb file the logo shud be on selected location on the t-shirt

I tried by changing below parameters, still am unable to specify the location on the t shirt

var textureResolution = 1024;
var textureShirt = new BABYLON.DynamicTexture(“dynamic texture”, { width: 692, height: 656 }, scene);

10

Here is a working solution:
https://playground.babylonjs.com/#JHRF6T#20

The width and the height of the dynamic texture has nothing to do with the position of the image on the texture. You need to use x and y of the drawImage method.

var textureContext = textureShirt.getContext();
textureContext.drawImage(img, x, y);
1 Like
11

An important thing to remember is that the canvas’ coordinate system, which is used by drawImage, starts from the top left corner of the texture at (0,0) and increases to the right and down, like this:
image

1 Like
12

Thanks Roland

small help, i am trying to add texture(shirt design) but its not working can u pls look into this
https://playground.babylonjs.com/#JHRF6T#21

13

As another possible implementation. If we’re using a dynamic texture why not upgrade it to a advance dynamic texture. :wink: (Always love to throw in the Babylon GUI and GUI Editor plug).

I made another version of the demo but instead used a adt and loaded a texture made with the gui editor (lines 29-40) https://playground.babylonjs.com/#JHRF6T#23

Granted I don’t think this is perfect because now you have to deal with the UV wrapping. However, currently in development is a workflow that will allow you to open your GUI texture from the inspector into the editor and see changes in real time. I can definitely see this useful when trying to align your texture with the UV wrapping. Plus with the editor you will be able to layer dozens of images/designs on top of each other to get it how you would like. Stay tuned.

2 Likes
14

What do you mean by “not working”?

15

Inspite of applying the below texture(design) it is not getting applied to the model

const myTexture = new BABYLON.Texture(“https://i.ibb.co/PGnLX01/upgradeblue.png”, scene);
myTop.material.albedoTexture = myTexture;

can u pls check once

16

I mean once the dynamic texture is used, the image texture(design) is not getting applied to the model

17

But you can not apply both, you do:

myTop.material.albedoTexture = myTexture;

and

myTop.material = materialShirt;

so only the latest material will be used. if you want to mix them you need to do it in the canvas 2d.

2 Likes