Reflection and Refraction
In Babylon.js, reflection and refraction are essential techniques that enhance realism in 3D scenes. They simulate how light interacts with surfaces, allowing for effects like mirrors, glass, and other reflective materials.
Cube
Cube reflections use a cubemap texture that captures the surrounding environment from six directions (up, down, left, right, front, back). This technique creates a realistic reflection on surfaces like shiny metals or water. In Babylon.js, you can apply a cubemap to materials to achieve this effect, allowing the material to reflect its environment realistically.
<>
<box name='sky' options={{ size: 1000 }}>
<standardMaterial name='sky-material' backFaceCulling={false} diffuseColor={Color3.Black()} specularColor={Color3.Black()}>
<cubeTexture
sceneOrEngine={scene}
rootUrl={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/skybox`}
kind='reflectionTexture'
coordinatesMode={Texture.SKYBOX_MODE}
/>
</standardMaterial>
</box>
<box name='box' rotation={new Vector3(Tools.ToRadians(-45), Tools.ToRadians(45))}>
<standardMaterial name='box-material' backFaceCulling={true} diffuseColor={Color3.Black()} specularColor={Color3.Black()}>
<cubeTexture
sceneOrEngine={scene}
rootUrl={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/skybox`}
kind='reflectionTexture'
coordinatesMode={Texture.CUBIC_MODE}
/>
</standardMaterial>
</box>
</>
Equirectangular Cube
An equirectangular cube texture is a 2D image format that represents a 360-degree view of the environment, often used for skyboxes or background images. Babylon.js can convert these equirectangular images into cubemaps, allowing them to be used for reflections on 3D objects.
HDR Cube
High Dynamic Range (HDR) cubemaps provide a wider range of color and brightness, resulting in more realistic lighting and reflections. These textures capture environments with greater detail and contrast. In Babylon.js, HDR textures can be used for reflections, enhancing the visual quality of materials in your scene.
const scene = useScene();
// ...
<>
<pointLight name='light' position={new Vector3(20, 20, 10)} />
<box name='sky' options={{ size: 1000 }}>
<standardMaterial name='sky-material' backFaceCulling={false}>
<hDRCubeTexture
sceneOrEngine={scene}
url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/room.hdr`}
size={512}
kind='reflectionTexture'
coordinatesMode={Texture.SKYBOX_MODE}
/>
</standardMaterial>
</box>
</>Reflection Probes
Reflection probes are used to capture the environment at specific points in your scene. They create a local reflection map that can be applied to nearby objects. This method is particularly useful for objects that require localized reflections, improving performance and visual fidelity without needing a full cubemap.
const scene = useScene();
const handleSphereCreate = (x: number, y: number, z: number) => (sphere: Mesh) => {
sphere.setPivotMatrix(Matrix.Translation(x, y, z), false);
};
useEffect(() => {
const createProbe = (mesh: Mesh, color: Color3) => {
const name = mesh.name;
const probe = new ReflectionProbe('satellite-probe' + name, 512, scene);
probe.renderList = scene.meshes.filter(mesh => mesh.name !== name);
const material = new StandardMaterial(`${name}-mat`, scene);
material.reflectionFresnelParameters = new FresnelParameters({ bias: 0.02 });
material.diffuseColor = color;
material.reflectionTexture = probe.cubeTexture;
mesh.material = material;
probe.attachToMesh(mesh);
};
createProbe(sphere1Ref.current!, Color3.Yellow());
createProbe(sphere2Ref.current!, Color3.Blue());
createProbe(sphere3Ref.current!, Color3.Green());
createProbe(knotRef.current!, Color3.Magenta());
function rotation() {
sphere1Ref.current!.rotation.y += 0.01 * scene.getAnimationRatio();
sphere2Ref.current!.rotation.y += 0.01 * scene.getAnimationRatio();
sphere3Ref.current!.rotation.y += 0.01 * scene.getAnimationRatio();
}
scene.registerBeforeRender(rotation);
return () => {
scene.unregisterBeforeRender(rotation);
};
}, []);
// ...
<>
<hemisphericLight name='light' direction={new Vector3(0, 1, 0)} intensity={0.7} />
<torusKnot ref={knotRef} name='torus-knot' options={{ radius: 1, tube: 0.4, radialSegments: 128, tubularSegments: 64, p: 2, q: 3 }} />
<sphere ref={sphere1Ref} name='sphere-1' onCreate={handleSphereCreate(3, 0, 0)} />
<sphere ref={sphere2Ref} name='sphere-2' onCreate={handleSphereCreate(-1, 3, 0)} />
<sphere ref={sphere3Ref} name='sphere-3' onCreate={handleSphereCreate(0, 0, 3)} />
<box name='mirror' options={{ size: 1 }} positionY={-2} scaling={new Vector3(100.0, 0.01, 100.0)}>
<standardMaterial name='mirror-mat'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/amiga.jpg`} uScale={10} vScale={10} />
<mirrorTexture
onCreate={mesh => {
mesh.renderList = scene.meshes.filter(mesh => mesh.name !== 'mirror');
}}
name='mirror-texture'
kind='reflectionTexture'
size={1024}
generateMipMaps
mirrorPlane={new Plane(0, -1, 0, -2)}
level={0.5}
/>
</standardMaterial>
</box>
</>Mirror Texture
A mirror texture is a specific type of reflection that simulates the appearance of a perfect mirror. It reflects the environment without distortion, providing a clear and accurate reflection of objects facing it. This is often used for creating mirrors in bathrooms, reflective water surfaces, or any highly reflective surfaces.
<>
<hemisphericLight name='light' direction={new Vector3(0, 10, -5)} />
<sphere name='sphere'>
<standardMaterial name='mat' diffuseColor={Color3.Red()} />
</sphere>
{new Array(3).fill(null).map((_, i) => {
return (
<plane
key={`glass-${i}`}
name={`glass-${i}`}
options={{ width: 5, height: 5 }}
//@ts-expect-error - calculation involves into boolean results
position={new Vector3(((i < 2) - 0.5) * 12 * (i % 2 == 1), 0, ((i < 2) - 0.5) * 12 * (i % 2 == 0))}
rotation={new Vector3(0, (i * Math.PI) / 2, 0)}
onCreate={glass => {
glass.computeWorldMatrix(true);
const glass_worldMatrix = glass.getWorldMatrix();
const glass_vertexData = glass.getVerticesData('normal') as FloatArray;
let glassNormal = new Vector3(glass_vertexData[0], glass_vertexData[1], glass_vertexData[2]);
glassNormal = Vector3.TransformNormal(glassNormal, glass_worldMatrix);
const reflector = Plane.FromPositionAndNormal(glass.position, glassNormal.scale(-1));
const mirrorMaterial = new StandardMaterial('mirror', scene);
const mirrorTexture = new BabylonMirrorTexture('mirror', 1024, scene, true);;
mirrorTexture.mirrorPlane = reflector;
mirrorTexture.renderList = [scene.getMeshById('sphere-1')!];
mirrorTexture.level = 1;
mirrorMaterial.reflectionTexture = mirrorTexture;
glass.material = mirrorMaterial;
}} />
);
})}
</>Refraction
Refraction simulates how light bends as it passes through transparent materials like glass or water. This effect creates the illusion of depth and distortion, making objects behind the transparent surface appear altered.
In Babylon.js, refraction can be achieved by using materials that support refraction, such as StandardMaterial or PBRMaterial. You can specify a refraction texture, which determines how the light bends as it passes through the material.
Refraction is controlled by parameters such as the index of refraction (IOR), which defines how much light bends. A higher IOR results in more noticeable distortion.
const scene = useScene();
useEffect(() => {
function rotation() {
sphere1Ref.current!.rotation.y += 0.01;
sphere2Ref.current!.rotation.y += 0.01;
}
scene.registerBeforeRender(rotation);
return () => {
scene.unregisterBeforeRender(rotation);
};
}, []);
// ...
<>
<hemisphericLight name='light' direction={new Vector3(0, 1, 0)} />
<sphere ref={sphere1Ref} name='sphere-1' onCreate={sphere => sphere.setPivotMatrix(Matrix.Translation(3, 0, 0))}>
<standardMaterial name='sphere-1-mat' diffuseColor={Color3.Yellow()} />
</sphere>
<sphere ref={sphere2Ref} name='sphere-2' onCreate={sphere => sphere.setPivotMatrix(Matrix.Translation(0, 0, 3))}>
<standardMaterial name='sphere-2-mat' diffuseColor={Color3.Blue()} />
</sphere>
<box name='ground' options={{ size: 1 }} positionY={-2} scaling={new Vector3(100, 0.01, 100)}>
<standardMaterial name='ground-mat'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/amiga.jpg`} uScale={10} vScale={10} />
</standardMaterial>
</box>
<disc name='disc' options={{ radius: 3, tessellation: 0 }} positionY={2}>
<standardMaterial name='disc-mat' diffuseColor={Color3.White()} indexOfRefraction={0.6}>
<refractionTexture
onCreate={mesh => {
mesh.renderList = scene.meshes.filter(mesh => mesh.name !== 'disc');
}}
name='refraction-texture'
kind='refractionTexture'
size={1024}
generateMipMaps
refractionPlane={new Plane(0, 0, -1, 0)}
depth={2}
/>
</standardMaterial>
</disc>
</>Learn More
For additional info, additional context and advanced use cases, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/reflectionTexture.
