One Texture Image on a Mesh

[nali4214]

Hi again! Thanks to this community, I’m getting a lot of help from the other posts and docs.
Even though I tried so hard to find the right direction through the forum and docs, I still have a question regarding the texture or material.

(sorry for the massive data. The object in the PG should be shown when you zoom out a little bit )

I was trying to render an image on a roof (mesh) which was made of multiple roof polyhedrons here: PG.

To do so:

1. all individual roof polyhedrons are grouped together and merged.
2. created a new mesh from the grouped roof polyhedrons by using CSG class and recalculated and updated UVs.

Now I want to render just one image, which shape is exactly the same with the roof shape, on the roof .

1. I tried regular texture but it was pretty hard to make the image centered on the roof
2. I tried dynamic texture but cannot figure out how to set the proper size or coordinate of the image on the object
3. came across the Node Material and there was an example that it added the video texture at the center of the mesh (This is the similar one I want to do). but cannot understand how the node material works.

Which approach should I go to achieve it?
I tried to look for the similar question in the forum but couldn’t find one. If some of you can guide me, I’ll appreciate very much.

Thanks in advance!

=============================
UPDATE

Okay. Now I could use the dynamic texture to render the image on the roof here(PG) but still cannot understand exactly how the resolution and drawImage api works. and this is not exactly what I really want to render.

[carolhmj]

Hey there! The DynamicTexture uses the web Canvas API to draw images, you can see a more detailed explanation of the coordinate system used here: CanvasRenderingContext2D.drawImage() - Web APIs | MDN (mozilla.org)

[nali4214]

oh~ Thanks! I only read this page ICanvasRenderingContext | Babylon.js Documentation but it looks like the page you recommended is the one I need to read through. Thanks a lot!

[JCPalmer]

Maybe a Decal is an option.

[nali4214]

Thanks a lot! I’m trying to use decal right now. https://playground.babylonjs.com/#8JULEM#21

I’ll need to find out how I can get the right position of the roof to apply decal.

[nali4214]

@JCPalmer @carolhmj Would you mind letting me know where I can find more details on Texture?
I could create a decal on the object. but noticed the texture is the thing I need to solve.
but the image of the texture really depends on the image(some image works fine, some not) and I’m not sure how I can work with scale, and the decal size I spent pretty much time on this… but I’m lost…

[carolhmj]

You can take a look at the texture source code: Babylon.js/texture.ts at master · BabylonJS/Babylon.js (github.com). What do you mean with needing to “solve” the texture?

[nali4214]

@carolhmj Thanks! I couldn’t figure out how to align the texture in a way i want to render on the object. So I was meaning that I need to ‘solve’ the problem how to align the texture on the object sorry for the confusion

[carolhmj]

Oooooh, I see what you mean! So, just trying to understand your situation a little better, you have this “roof” mesh, and an image file, and you want to rotate and place this image so that it lays nicely on the roof? (bad diagram incoming)

[nali4214]

@carolhmj Thanks for your time! yeah~ I’m trying to rotate, scale, and place the image so that the image lays nicely on the roof. To be more specific, the actual image of the image file is not always centered and always have a wide big margin from/to the image edge as below.

Possible solutions I could think of/get an idea from here and tried:

1. Dynamic Texture
2. Decals
3. AdvancedDynamicTexture.ForMesh (I cannot remember the method name exactly)

For all three strategies, I faced the sizing, scaling, positioning issue of the texture.

[carolhmj]

@nali4214

To be more specific, the actual image of the image file is not always centered and always have a wide big margin from/to the image edge as below.

Ooooh, that is an important detail I reckon this makes things a bit more difficult, but of course certainly possible. Another idea that might give you some nice control is making a Node Material Node Material | Babylon.js Documentation (babylonjs.com). You can play with uvs extensively on it, translating, rotating, scaling them in any way you want: Babylon.js Node Material Editor (babylonjs.com)

[nali4214]

@carolhmj @JCPalmer sorry for being so late to respond this!
I got to implement it how I want by using Decal! https://playground.babylonjs.com/#8JULEM#29

I just didn’t know that how the decal worked. I’m so glad I got to know about it!!

Thanks for your help again!!

[carolhmj]

Glad you found a solution! Decals are awesome