Parallax Mapping

In Babylon.js, parallax mapping is a technique used to enhance the visual realism of surfaces by simulating depth through texture mapping. This method adds detail to materials without the need for additional geometry, making it a performance-friendly option for creating visually complex scenes.

To use parallax mapping in Babylon.js, you typically need to work with a material that supports this feature, such as the StandardMaterial or PBRMaterial. The process involves the following steps:

Height Map: create a height map that represents the elevation of the surface. This map is essential for defining how much displacement to apply when the viewer’s perspective changes.
Apply to Material: set the height map texture on the material and configure the parallax settings. This includes adjusting parameters like the parallax scale, which determines the intensity of the effect.
Render: when the scene is rendered, Babylon.js calculates the offsets for the texture coordinates based on the viewer’s position, resulting in the appearance of depth and relief on the material.

There are three properties to work with Parallax:

useParallax - enables parallax mapping over bump. This property won’t have any effect if you didn’t assigned a bumpTexture.
useParallaxOcclusion - enables parallax occlusion, when setting this property, you must also set useParallax to true.
parallaxScaleBias - apply a scaling factor that determine which “depth” the height map should represent. A value between 0.05 and 0.1 is reasonable in parallax, you can reach 0.2 using parallax occlusion.

<>
    <hemisphericLight name='light' direction={new Vector3(-1, 1, 0)} diffuse={Color3.White()} />
    <box name='box'>
        <standardMaterial name='material' useParallax useParallaxOcclusion parallaxScaleBias={0.1} specularPower={1000} specularColor={new Color3(0.5, 0.5, 0.5)}>
            <texture kind='diffuseTexture' url={wall.src} />
            <texture kind='bumpTexture' url={bumpWall.src} />
        </standardMaterial>
    </box>
</>

Learn More

For additional info, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/parallaxMapping.

Bump, Opacity, Tiling and Details maps Blend Modes