A material defines the appearance of a model. Currently, we support the StandardMaterial, PBRMaterial and PBRMetallicRoughnessMaterial from babylon.js but more will follow in the future. Materials can be defined in the material section of the scene object or inline as property of a mesh. Defining them in the material sections ensures that they are parsed before any scene element and therefore you can reference and use them from any mesh in your scene.

To see the different materials in action, please check out our material editor sample.

Material Editor Sample

  • Material (abstract)

    • StandardMaterial

    • PBRMaterial

    • PBRMetallicRoughnessMaterial

Material (absract)

{
    "type" : "Material",
    "name" : string,
    "backFaceCulling" : boolean,
    "wireframe" : boolean,
    "pointsCloud" : boolean,
    "pointSize" : number,
    "alpha" : number
}
JSON

Standard Material

{
    "type" : "StandardMaterial",
    "diffuseTexture" : Texture,
    "specularTexture" : Texture,
    "opacityTexture" : Texture,
    "bumpTexture" : Texture,
    "reflectionTexture" : CubeTexture,
    "invertNormalMapX" : boolean,
    "invertNormalMapY" : boolean,
    "diffuseColor" : [ number, number, number ],
    "specularColor" : [ number, number, number ],
    "emissiveColor" : [ number, number, number ],
    "specularPower" : number,
    "disableLighting" : boolean,
    "reflectionFresnelParameters" : FresnelParameters,
    "emissiveFresnelParameters" : FresnelParameters,
    "opacityFresnelParameters" : FresnelParameters,
    "diffuseFresnelParameters" : FresnelParameters
}
JSON

To see how materials can be used to adjust the appearance of mannequins, have a look at this example babylon.js reference: https://doc.babylonjs.com/typedoc/classes/babylon.standardmaterial

Fresnel Parameters

Encapsulates parameters to configure the fresnel effect.

{
    "type" : "FresnelParameters",
    "bias" : number,
    "power" : number,
    "leftColor" : [ number, number, number],
    "rightColor" : [ number, number, number]
}
JSON

babylon.js reference: https://doc.babylonjs.com/typedoc/classes/babylon.fresnelparameters

PBR Material

{
    "type" : "PBRMaterial",
    "albedoColor" : [ number, number, number],
    "albedoTexture" : Texture,
    "metallic" : number,
    "roughness" : number,
    "metallicTexture" : Texture,
    "reflectionTexture" : Texture | CubeTexture,
    "reflectivityColor" : [ number, number, number],
    "refractionTexture" : Texture | CubeTexture,
    "microSurface" : number,
    "indexOfRefraction" : number,
    "directIntensity" : number,
    "environmentIntensity" : number,
    "subsurface" : SubSurface
}
JSON

babylon.js reference: https://doc.babylonjs.com/typedoc/classes/babylon.pbrmaterial

Sub Surface

{
    "type" : "SubSurface",
    "isRefractionEnabled" : boolean,
    "indexOfRefraction" : number,
    "refractionIntensity" : number,
    "isTranslucencyEnabled" : boolean,
    "translucencyIntensity" : number
}
JSON

babylon.js reference: https://doc.babylonjs.com/typedoc/classes/babylon.pbrsubsurfaceconfiguration

PBR Metallic Roughness Material

This is a simpler version of the PBRMaterial with limited options. Usually this is more then enough and performance-wise it makes sense to use this limited version if you don’t need any of the features of the more sofisticated version.

{
    "type" : "PBRMetallicRoughnessMaterial",
    "baseColor" : [ number, number, number],
    "baseTexture" : Texture,
    "metallic" : number,
    "roughness" : number,
    "metallicRoughnessTexture" : Texture,
    "environmentTexture" : Texture | CubeTexture
}
JSON

babylon.js reference: https://doc.babylonjs.com/typedoc/classes/babylon.pbrmetallicroughnessmaterial