How to Color + Texture a Mesh

Hello, ive imported a model from blender with matieral (and a uv map) (.gltf file)
i can import the textures on it with albedotexture. when i do albedocolor to color in the transparent parts it doesn’t work. How would I do this?

Regards

Welcome aboard!

I think providing a PG (https://playground.babylonjs.com) would help.

Note that the albedoColor is not the color used to color the transparent colors: it is multiplied with the albedo texture, so even solid color will be tinted.

so what would be best for texture and coloring the mesh?

my code is very long but if you really need a PG i can try to cut it done

I’m not sure to understand clearly what you want to achieve.

Maybe you can try to use this PG to explain it:

https://playground.babylonjs.com/#220D1X

Yes like this but how would I color the mesh aswell? so the clouds are as they are but the mesh is yellow or red etc?

You can either modify your albedo texture to set the solid color where you want (the transparent parts) and set the alpha value to 1, or use a custom material to do it programmatically:

https://playground.babylonjs.com/#220D1X#1

How would I modify my albedo texture in babylon? quick question is there a hex value to vec4 convertor anywhere?

You would need to modify the texture outside Babylon, in an app like Photoshop or Paint.

You can use this syntax to create a color from an hex value: var color = BABYLON.Color4.FromHexString("#ff0000ff");

so there is no way to color a mesh and texture it at the same time?

Isn’t https://playground.babylonjs.com/#220D1X#1 what you mean when you say texturing and coloring?

You can also mix the red and green color based on the transparency, it that’s what you mean:

https://playground.babylonjs.com/#220D1X#2

https://playground.babylonjs.com/#220D1X#1
this is what i mean but how would i use a hex color instead? sorry for slow reply

You can do something like this:

https://playground.babylonjs.com/#220D1X#4

1 Like

thank you kind sir! just one more thing. how can I apply a UV map to the material?

The uv coords are set at the geometry level and are linked to the vertices.

The sphere has already uv coordinates set (that’s why you can apply a texture on it).

Maybe you mean something else by “uv map”?

as in, the texture i apply to the mesh knows where to place e.g. each face on a cube e.g. https://dev.voxbuild.com/storage/data/cube.png

You will need to create the cube and the uv coordinates in a tool like Blender, I think, to be able to use this texture.

You can check this doc if you want to texture each face of a cube with a different part of a texture, but the texture should be an atlas (see the doc), your texture won’t work in that case.