Skip to main content

Materials, textures and decals

A material says how light meets a surface. Materials and the look of a model explains the idea and shows a physically based material on a sphere; this page lists what bitbybit.babylon adds to it.

  • Materials (babylon.material): physically based materials with a base colour, how metallic and how rough a surface is, emission, transparency and its blending, both sides or one, and wireframe. A material is given to a drawn shape through the drawing options' face material, or applied to a mesh with babylon.mesh.
  • Textures (babylon.texture): an image from a URL, tiled, scaled and offset, for a material's colour, roughness, normals or emission.
  • Decals (babylon.decal): an image stuck onto a mesh where you point, the way a label sits on a product.

Every function​

Materials​

FunctionWhat it does
pbrMetallicRoughness.createCreates a metallic-roughness material with the given color, metallic and roughness values, opacity, back-face culling and optional emissive color.
pbrMetallicRoughness.getAlphaReads the opacity of a material, from 0 to 1.
pbrMetallicRoughness.getBackFaceCullingReads whether a material skips the back of each face when drawing.
pbrMetallicRoughness.getBaseColorReads the base color of a material as a hex string.
pbrMetallicRoughness.getBaseTextureReads the image texture a material uses in place of its base color, if it has one.
pbrMetallicRoughness.getMetallicReads how metallic a material is, from 0 to 1.
pbrMetallicRoughness.getRoughnessReads how rough a material's surface is, from 0 to 1.
pbrMetallicRoughness.setAlphaChanges the opacity of a material, from 0 for invisible to 1 for solid; values between make the surface see-through.
pbrMetallicRoughness.setBackFaceCullingSets whether the back of each face is skipped when drawing; culling is faster, while drawing both sides shows the inside of open or single-sided meshes.
pbrMetallicRoughness.setBaseColorChanges the base color of a material, the color its surface has under white light, from a hex string.
pbrMetallicRoughness.setBaseTextureGives a material an image texture that replaces its base color across the surface, as texture.createSimple makes one.
pbrMetallicRoughness.setMetallicChanges how metallic a material looks, from 0 for paint or plastic to 1 for bare metal.
pbrMetallicRoughness.setRoughnessChanges how rough a material's surface is, from 0 for a mirror finish to 1 for fully matte.
skyMaterial.createCreates a sky material from atmosphere settings; only the values you give are applied over the defaults.
skyMaterial.getAzimuthReads where around the horizon the sun stands in a sky material, from 0 to 1.
skyMaterial.getCameraOffsetReads the horizon offset vector of a sky material.
skyMaterial.getDistanceReads how far the sky dome sits from the camera in a sky material.
skyMaterial.getDitheringReads whether a sky material dithers its gradients to hide color banding.
skyMaterial.getInclinationReads how high the sun stands in a sky material, from -0.5 to 0.5.
skyMaterial.getLuminanceReads the overall brightness of a sky material.
skyMaterial.getMieCoefficientReads how much haze a sky material has around the sun.
skyMaterial.getMieDirectionalGReads how tightly a sky material's haze glow gathers around the sun.
skyMaterial.getRayleighReads the Rayleigh scattering strength of a sky material, the setting behind its blue.
skyMaterial.getSunPositionReads the sun direction of a sky material; when useSunPosition is off it reflects the inclination and azimuth.
skyMaterial.getTurbidityReads how hazy a sky material's air is.
skyMaterial.getUpReads the direction a sky material treats as up.
skyMaterial.getUseSunPositionReads whether a sky material places the sun from sunPosition rather than from inclination and azimuth.
skyMaterial.setAzimuthChanges where around the horizon the sun stands in a sky material, from 0 to 1 for a full turn; ignored while useSunPosition is on.
skyMaterial.setCameraOffsetShifts the horizon of a sky material by an offset vector, so the sky can sit higher or lower relative to the camera.
skyMaterial.setDistanceChanges how far the sky dome sits from the camera in a sky material, which changes how the horizon reads.
skyMaterial.setDitheringTurns dithering on or off for a sky material; on, it adds fine noise that hides color banding in smooth gradients.
skyMaterial.setInclinationChanges how high the sun stands in a sky material, from -0.5 below the horizon through 0 at the horizon to 0.5 overhead; ignored while useSunPosition is on.
skyMaterial.setLuminanceChanges the overall brightness of a sky material, between 0 and 1.
skyMaterial.setMieCoefficientChanges how much haze a sky material has around the sun, between 0 and 0.1; more makes a wider, whiter glow.
skyMaterial.setMieDirectionalGChanges how tightly a sky material's haze glow gathers around the sun; values near 1 make a small bright halo, lower values spread it.
skyMaterial.setRayleighChanges how strongly a sky material scatters light in the way that makes a clear sky blue; higher is a deeper, brighter blue.
skyMaterial.setSunPositionPlaces the sun of a sky material at an explicit direction vector; it takes effect only while useSunPosition is on, otherwise inclination and azimuth decide.
skyMaterial.setTurbidityChanges how hazy a sky material's air is; more haze whitens the sky and spreads the sun's glow.
skyMaterial.setUpChanges which direction a sky material treats as up, normally [0, 1, 0]; change it for scenes that use another axis as up.
skyMaterial.setUseSunPositionChooses whether a sky material places the sun from sunPosition, when true, or from inclination and azimuth, when false.

Textures​

FunctionWhat it does
createImageCreates an image texture intended for decals and projections.
createSimpleCreates texture from URL from a few basic options.

Decals​

FunctionWhat it does
clearDecalMapClears all projected decals from a decal map, resetting it to empty.
createMeshDecalCreates a geometry decal that projects an image onto a mesh.
enableDecalMapEnables a UV-space decal map on a mesh and turns on the decal map plugin of its material.
projectDecalProjects an image into a decal map.