The layer does not change after changing the data

[Wizlight]

Vuejs + Pure Js

data() {
        return {
            sliceDeck: undefined,
             viewState: {
                target: [0, 0, 0],
                rotationX: 0,
                rotationOrbit: 0,
                minZoom: 0,
                maxZoom: 10,
                zoom: 1
            },
            data: [some data]
        }
    },

async mounted() {
 const sliceLayer = [{
                id: "point-cloud-slice-layer",
                data: data,
                coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
                getNormal: [0, 1, 0],
                getColor: [0, 210, 255],
                opacity: 0.5,
                pointSize: 1
            }]
  this.sliceDeck = new Deck({
                    views: new OrbitView({orbitAxis: 'Z', fov: 50}),
                    parent: document.getElementById('deckglContainer'),
                    initialViewState: this.viewState,
                    controller: true,
                    layers: sliceLayer,
                });
}

methods: {
reRenderSlice(newData) {
            let layer =
                new PointCloudLayer({
                    id: "point-cloud-slice-layer",
                    data: newData,
                    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
                    getNormal: [0, 1, 0],
                    getColor: [0, 210, 255],
                    opacity: 0.5,
                    pointSize: 1
                });

            this.sliceDeck.setProps({layers: [layer]});
        }
}

When I call the function reRenderSlice and pass it a new set of points (newData) - nothing happens. I would like to note that only the position of point z has been changed in the data. That is, the layer is shifted by some value along the axis of Z.

If I reset the data array and then after some time redraw the layer with new data - the layer is drawn correctly (with an offset)

methods: {
reRenderSlice(newData) {
            let layer =
                new PointCloudLayer({
                    id: "point-cloud-slice-layer",
                    data: [],
                    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
                    getNormal: [0, 1, 0],
                    getColor: [0, 210, 255],
                    opacity: 0.5,
                    pointSize: 1
                });

            this.sliceDeck.setProps({layers: [layer]});
        }

setTimeout(() => {
                layer =
                    new PointCloudLayer({
                        id: "point-cloud-slice-layer",
                        data: data,
                        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
                        getNormal: [0, 1, 0],
                        getColor: [0, 210, 255],
                        opacity: 0.5,
                        pointSize: 1,
                        loaders: [LASWorkerLoader],
                    });

                this.sliceDeck.setProps({layers: [layer]});
            }, 1000);
}

What am I doing wrong? thank you

[Pessimistress]

By default, data must change shallowly to trigger a layer update. If you only mutated some of the elements in the data array, the layer would have no way to know that something has changed.

You can also look into dataComparator to implement your custom update logic.

[Wizlight]

"

By default, data must change shallowly to trigger a layer update. If you only mutated some of the elements in the data array, the layer would have no way to know that something has changed.

You can also look into dataComparator to implement your custom update logic.

I have 50k points and change each of them along the Z axis to the same value (+-10). Is this not enough to change the layer?

[Pessimistress]

"Change shallowly" means that your data prop must point to a different array object. Please google it if you don't understand the difference.

Also, for the use case you described, you can use modelMatrix which is much more efficient than updating the data prop.

[Wizlight]

Thank you