How to create a PBR from multiple images

Questions
21

Hi there, very useful thread.
I’m not so skilled in texturing so i try to figured out if i understand.
Referring to this thread Open Source Free Textures Library for Babylon and in particular referring to this material Free Mud Dirt Ground Texture Seamless Background PBR - 3Designer, what are the texture i’ve to use for PBRMaterial?
For albedoTexture and bump ok (color and normal GL). For Occlusion and ambient if i understand right i’ve to use the AO in the metallicTexture and then using Occlusion form Red and Roughness from Green. Is it right?
When am i supposed to use the other textures (ORM, spec, Detail)?

Thank’s in advance!

22

You can see what texture was used and toggle them on/off in the asset library like this screenshot:

Screen Shot 2022-04-22 at 1.57.16 PM
Screen Shot 2022-04-22 at 1.57.16 PM1744×976 302 KB
.

Here is the Texture mapping to Babylon:

// Texture Key Mapper to Babylon.js PBR Material Attributes
const textureKeyMap = {
  [_MATERIAL.KIND.PBR._]: {
    [_TEXTURE.KIND.BASE._]: 'albedoTexture', // i.e. 'color' in the library
    [_TEXTURE.KIND.BUMP._]: 'bumpTexture', // a combined normal + height texture for Babylon Parallax mapping, height map is stored in `a` channel https://doc.babylonjs.com/divingDeeper/materials/using/parallaxMapping
    [_TEXTURE.KIND.NORMAL._]: 'bumpTexture',
    [_TEXTURE.KIND.METAL._]: 'metallicTexture',
    [_TEXTURE.KIND.ROUGH._]: 'microSurfaceTexture',
    [_TEXTURE.KIND.AO._]: 'ambientTexture', // this is Occlusion
    [_TEXTURE.KIND.EMISSIVE._]: 'emissiveTexture',
  },
  [_MATERIAL.KIND.STANDARD._]: {
    [_TEXTURE.KIND.BASE._]: 'diffuseTexture',
    [_TEXTURE.KIND.BUMP._]: 'bumpTexture',
    [_TEXTURE.KIND.NORMAL._]: 'bumpTexture',
    [_TEXTURE.KIND.METAL._]: 'metallicTexture',
    [_TEXTURE.KIND.ROUGH._]: 'microSurfaceTexture',
    [_TEXTURE.KIND.AO._]: 'ambientTexture',
  },
}
// ORM: Red: AO, Green: Roughness, Blue: Metallic - https://playground.babylonjs.com/#7YE1UY#2

The library did not use ORM (AO + ROUGH + METALLIC) for toggability, but in a game, you might consider combining those into one texture for performance reasons.

1 Like
23

Thank you! Last question about the bump texture. I understand that Babylon.js supports only height map stored in alpha channel of the normal map. So, in this case, am i supposed to compose normal+heightMap by myself?

24

yes, you can probably automate it with sharp.js - a feature planned for the 3Designer.app → automatically combine HEIGHT + NORMAL textures into a bump map for Babylon.js on upload.

Please note, that in the traditional nomenclature, a “bump” texture actually refers to a detail map, which in the asset Library is labeled as “Detail”, and in Babylon.js, it’s material.detailMap.texture. I was confused myself in the beginning with this odd naming conventions, hence the mapping constant above.

But you can use Babylon’s bumpTexture without height map, just as normal map.

1 Like