Video Textures

Video textures in Babylon.js allow developers to use video files as textures on 3D objects, enabling dynamic and immersive visual experiences. This feature is particularly useful for creating multimedia applications, interactive installations, or games where video content is an integral part of the scene.

Video

Video Textures enable you to use pre-recorded video files as textures on 3D meshes.

const scene = useScene();
 
// ...
 
<plane name='plane' options={{ width: 7, height: 5 }}>
    <standardMaterial name='material' roughness={1} emissiveColor={Color3.White()}>
        <videoTexture scene={scene} kind='diffuseTexture' name='video=-texture' src={mountain} />
    </standardMaterial>
</plane>

WebCam

WebCam Textures allow you to capture live video from a user’s webcam and use it as a texture. This can create interactive experiences where users can see themselves or their surroundings within the 3D scene.

In the following example, clicking on the plane prompts you to grant permission for camera access, allowing you to view live video from your webcam.

const scene = useScene();
 
useEffect(() => {
    scene.onPointerDown = () => {
        VideoTexture.CreateFromWebCam(scene, videoTexture => {
            materialRef.current!.diffuseTexture = videoTexture;
        },
            { minWidth: 256, maxWidth: 256, minHeight: 256, maxHeight: 256, deviceId: '' },
        undefined, false);
    };
}, []);
 
// ...
 
<plane name='plane' options={{ width: 7, height: 5 }}>
    <standardMaterial ref={materialRef} name='material' emissiveColor={Color3.White()} />
</plane>

Learn More

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