How to make Mesh.clone() updatable?

Currently cloning an updatable mesh does not make the clone updatable, even after clone.makeGeometryUnique(). What are the options to make the clone geometry updatable for changing displacement map? (without resorting to creating a new mesh, because it is not easy to do so in my scenario → it ends up with spaghetti code).

I am wondering why cloning in this case, as nothing would be shared anymore ?

I clone the original Mesh before applying displacement, as the backup for subsequent displacement changes (since re-applying displacement map has accumulating effect).

Can you share a simple repro in the PG so I can wrap my head around the need? :slight_smile:

Not exactly PG, but hope this illustrates it - as the slider changes minHeight/maxHeight for displacement map, I believe a new displacement map has to be applied each time - correct me if I’m wrong, because min/maxHeight are passed as arguments to:

mesh.applyDisplacementMap(preview, minHeight, maxHeight)
// is there such thing as mesh.minDisplacementHeight setter?

If you want to change the min height, you would need to call applyDisplacementMapFromBuffer, but you might not need to call applyDisplacementMap. What you can probably do is cache the buffer. If you look inside the implementation for applyDisplacementMap inside mesh.ts, you’ll see this:

const onload = (img: HTMLImageElement | ImageBitmap) => {
            // Getting height map data
            const heightMapWidth = img.width;
            const heightMapHeight = img.height;
            const canvas = this.getEngine().createCanvas(heightMapWidth, heightMapHeight);
            const context = <CanvasRenderingContext2D>canvas.getContext("2d");

            context.drawImage(img, 0, 0);

            // Create VertexData from map data
            //Cast is due to wrong definition in lib.d.ts from ts 1.3 -
            const buffer = <Uint8Array>(<any>context.getImageData(0, 0, heightMapWidth, heightMapHeight).data);

            this.applyDisplacementMapFromBuffer(buffer, heightMapWidth, heightMapHeight, minHeight, maxHeight, uvOffset, uvScale, forceUpdate);
            //execute success callback, if set
            if (onSuccess) {

        Tools.LoadImage(url, onload, () => {}, scene.offlineProvider);

You can probably just call this yourself, and keep a reference to that buffer variable. Then to update min/maxHeight in the future, just call applyDisplacementMapFromBuffer and pass in the buffer that you already rendered.


Hello @ecoin just checking in, was your question answered?

Kind of yes, there is no solution to it currently.

1 Like

Did you try the solution I suggested? How did it go?

I mean there is no solution to making cloned mesh updatable because that the original question and I do have other use-cases for it.

Applying a different displacement to the clone seems to work fine in the below PG, maybe you can modify it to show what’s not working or make some other PG to show a clone that can’t be updated?