Skip to main content
Skip table of contents


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

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

To see how materials can be used to adjust the appearance of mannequins, have a look at this example babylon.js reference:

Fresnel Parameters

Encapsulates parameters to configure the fresnel effect.

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

babylon.js reference:

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

babylon.js reference:

Sub Surface

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

babylon.js reference:

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

babylon.js reference:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.