Combining two seperate metallic rougness textures into one

Hi All, I have two separate textures coming into babylon that I want to combine into one texture. Im not sure what is the best way to do it. So im using the PBRMetallicRougness which expects the metallic value in the B channel and the roughness value in the G channel to keep better precision. My incoming textures are two different textures that id like to combine into one at runtime. I would prefer not to have to force an artist to manually combine these textures during authoring. Any tips?

The fastest is probably to use a renderTarget and a custom shader to combine them in.

On the downside this approach does not scale as if you have a lot of textures, your load time will take a huge hit compared to creating those offline.

Going off of sebs idea I took one of our renderTarger Demos and changed it to do 2 PBR materials instead. :smiley: It shows the two different passes separately (left and middle) and then the combined one on the far right.

Check it out https://playground.babylonjs.com/#TG2B18#45

If you have a different texture you can just switch out the default environment to be your own.

1 Like

Thank you all, @msDestiny14 that is a super cool demo. Multiple renderpasses seems expensive for what I need. I found that it is possible to seperate metaliic/rougness , you can use a PBRMaterial shader and just set the metallicTexture and microSurface Texture value to have seperate metallic and roughness.

Also I did not know you can do this cool split screen effect in BJS, this would be very useful to visualize passes. I will have to play with this technique more. On that note, how does this split screen work? I looked at the code and its not clear to me how this is set up. Sorry for the noob questions. Thank you all.

1 Like