Apply a texture mask onto PBR material

Questions
,
1

Heya!
I have a 3D model with PBR material that contains a few textures (emissive, albedo,…) and a black and white image that represents areas on the albedoTexture that can change color (white=color can change, black = transparent);
My goal is to find a way to apply this mask onto the material or texture in a way that doesn’t overwrite the original material.
That way one can obtain the same mesh with the same materials and textures, except some regions of the albedoTextures can have dynamic colors.

In Unreal there is the ability to multiply the textures together and allocate the result to the baseColor.

image
image1655×971 133 KB

With inspiration from Unreal I tried doing something similar in NME

(The result of this NME is at https://playground.babylonjs.com/#YI8A3U#5 )

As you can see from my test above, the issue here is that

  • it creates a new material that’s not PBR (duh… it’s a nodeMaterial)
  • and overwrites the original Material

And these essentially ruin the aesthetic of the model.

To create a PBR material that could support such mask using NME, one could use the docs at Node Material and PBR | Babylon.js Documentation but two things:

  • The level of complexity is way over my head :sweat:
  • I have a feeling I would be re-inventing the wheel

Would love some help on how to achieve this, and maybe even know if it’s been done before.

Cheers

2

Hello! You could try Material Plugins | Babylon.js Documentation (babylonjs.com) maybe? :smiley:

3

Cheers @carolhmj that’s helpful, although I’m not an expert in the field, might take me a while to understand what to do;

On similar topic, If I go with this route and ever decide to export the model using GLTFExporter, do you think the second color from the mask will export with it?

4

Heya, IDK any way to export this kind of custom behavior to GLTF, but here’s a simple material plugin you can play with that applies the mask while leveraging the existing PBR material. :slight_smile:

3 Likes
5

Crap that’s amazing! Thanks a lot Blake;
I was gonna spend the day on this and you saved me so much time.

Yeah I’m definitely not 100% sure how such custom behavior can be interpreted when exporting.
Cheers for the help!

Edit:
how would this work with a similar mask but made for Emissive? I have a similar mask and tried to apply the same process for the emissive layer: but I don’t see any of the white spots change color; Note that only some of the white spots should change color :stuck_out_tongue: https://playground.babylonjs.com/#YI8A3U#8

1 Like
6

The shader code for the emissive texture is a bit different, like below… And you could also apply both plugins to the material, but would have to change the uniform names, etc to be unique. :slight_smile:

PS I noticed you’re using the same texture for both emissive and mask so all the white parts are changing color, but if you copy the texture and blacken some of the white spots for the mask texture then they should stay white rather than being changed to the replacement color…

6 Likes
7

You’re a beast, thanks!

8

That’s amazing demo. I searched for a long time and finally got this. by the way, the gltf and image cdn url was accessdenied.

1 Like