Dynamic Textures

Dynamic Texture in Babylon.js is a powerful feature that allows developers to create textures that can change at runtime. This is useful for various applications, such as rendering 2D elements, updating images, or creating interactive UI elements within a 3D scene.

Drawing Text

When you draw text on a dynamic texture, you can customize it with different fonts, sizes, and colors. This is useful for creating labels, HUD elements, or any textual information that needs to be displayed in a 3D environment. However, keep in mind that once the text is drawn, the dynamic texture needs to be updated to reflect the changes visually.

<ground name='ground' options={{ width: 20, height: 10, subdivisions: 25 }}>
    <standardMaterial name='material'>
        <dynamicTexture
            kind='diffuseTexture'
            name='dynamic-texture'
            canvasOrSize={{ width: 512, height: 256 }}
            onCreate={dynamicTexture => {
                dynamicTexture.drawText('REACTYLON', 73, 135, 'bold 44px monospace', 'cornflowerblue', 'white', true, true);
            }} />
    </standardMaterial>
</ground>

Drawing Image

Similarly, you can draw images on a dynamic texture. This is done by loading an image and drawing it onto the texture’s canvas. This feature enables you to add logos, icons, or any graphical content to your 3D scene. Like with text, you’ll need to update the texture after drawing the image to ensure it appears correctly on the associated 3D object.

<ground name='ground' options={{ width: 20, height: 10, subdivisions: 25 }}>
    <standardMaterial name='material'>
        <dynamicTexture
            kind='diffuseTexture'
            name='dynamic-texture-img'
            canvasOrSize={{width: 512, height: 512}}
            onCreate={dynamicTexture => {
                const grass = new Image();
                grass.crossOrigin = 'anonymous';
                grass.src = `${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/grass.png`;
                grass.onload = function () {
                    const context = dynamicTexture.getContext();
                    context.drawImage(this, 0,0);
                    dynamicTexture.update();
                }
            }} />
    </standardMaterial>
</ground>

Serialization

Dynamic textures can be serialized with the scene using SceneSerialized.Serialize() or a mesh using SceneSerialized.SerializeMesh().

Reactylon uses the metadata attribute of generic nodes (such as meshes and lights) to manage relationships between nodes, package ownership, and other relevant information. However, this can lead to issues during serialization. When you attempt to serialize a Reactylon node with JSON.stringify, it may trigger a circular dependency error due to the way these relationships are structured, preventing successful serialization. So be sure to exclude metadata attribute by replacer function:

const jsonData = JSON.stringify(SceneSerializer.SerializeMesh(meshRef), (key, value) => {
    if (key === 'metadata') return null;
    return value;
});

Then you can import the serialized mesh in this way:

SceneLoader.ImportMesh('', '', 'data:' + jsonData, undefined, function (newMeshes) {
    console.log(newMeshes);
});

🚫

When serializing an object, consider two key points:

The imported mesh and all its descendant will no longer be part of Reactylon’s lifecycle, meaning you’ll need to manage them using standard JavaScript.
While the properties of the mesh will be preserved during serialization, event listeners will not be included. Therefore, you will need to manually reattach any event listeners after loading the mesh.

Learn More

For additional info and advanced use cases, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/dynamicTexture.

Multi Materials Video Textures