Blend Modes

Blend modes in Babylon.js are essential for controlling how different textures and materials interact visually when rendered in a scene. They determine how the colors and transparency of textures combine, allowing developers to create a variety of effects, from simple transparency to complex visual styles.

All the available blend modes are listed below:

MODE	EFFECT	ADDITIONAL INFO
`ALPHA_COMBINE`	This is the default blend mode for alpha-blended meshes. Blending is modulated by the alpha value of the pixel being drawn.	This is the default blend mode.
`ALPHA_ADD`	This blend mode will effectively add the new pixel and existing pixel values, giving off a ghost-like effect and brightening what’s behind the mesh.	/
`ALPHA_SUBTRACT`	The new pixel value is subtracted from the existing one, giving off an “inverted color” effect.	Blending is not modulated by alpha value.
`ALPHA_MULTIPLY`	The new and existing pixel values are multiplied, thus what’s behind the rendered mesh is darkened. This is more or less the opposite of the ALPHA_ADD effect.	Blending is not modulated by alpha value.
`ALPHA_MAXIMIZED`	This blend mode is similar to `ALPHA_ADD`, but gives off a less vibrant and saturated effect.	/
`ALPHA_ONEONE`	This blend mode is very similar to `ALPHA_ADD`, except that it is not modulated by alpha value. Used internally for various visual effects.	Blending is not modulated by alpha value.

Using blend modes is done by manipulating the alphaMode property of materials, setting it to one of the constants listed above. This property will only be used when the rendered mesh is alpha-blended. This is very important, because since the alphaMode property will have absolutely no effect on an opaque mesh, you will need to make sure your mesh is alpha-blended (alpha={0.999}) to use it.

const alphaModes = [Engine.ALPHA_COMBINE, Engine.ALPHA_ADD, Engine.ALPHA_SUBTRACT, Engine.ALPHA_MULTIPLY, Engine.ALPHA_MAXIMIZED];
 
// ...
 
<>
    <pointLight name='light' position={new Vector3(-60, 60, 80)} />
    {new Array(5).fill(null).map((_, index) => {
        return (
            <cylinder
                key={`cylinder-${index}`}
                name={`cylinder-${index}`}
                options={{ height: 12, diameterTop: 8, diameterBottom: 8, tessellation: 12, subdivisions: 1 }}
                positionX={-17 * (index + 0.5 - 5 / 2)}
                rotationY={8}>
                <standardMaterial name={`material-${index}`} alphaMode={alphaModes[index]} alpha={0.999} ambientColor={Color3.White()}>
                    <texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/misc.jpg`} />
                </standardMaterial>
            </cylinder>
        );
    })}
    <plane name='plane' options={{ size: 250 }} positionY={-8} rotationX={Tools.ToRadians(90)}>
        <standardMaterial name='plane-material' backFaceCulling={false}>
            <texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/grass.jpg`} uScale={5} vScale={5} />
        </standardMaterial>
    </plane>
</>

Learn More

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

Parallax Mapping Individual Faces