Materials

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 (abstract)
- StandardMaterial
- PBRMaterial
- PBRMetallicRoughnessMaterial

Material (absract)

JSON

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

Standard Material

JSON

{
    "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
}

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.

JSON

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

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

PBR Material

JSON

{
    "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
}

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

Sub Surface

JSON

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

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.

JSON

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

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