This is just a question which has no importance associated with it and is related to this 3d Chart example.
WebGL2 version seems to handle everything properly.
WebGPU version is having a difficulty replacing geometries - only the first EdgesGeometry is set and then retained. This is actually the maroon (dark red) outline pictured in the example link posted above.
Here is the code that creates variable helper
:
let helper = new THREE.LineSegments(
new THREE.BufferGeometry(),
new THREE.LineBasicMaterial({
color: 0xff0000,
depthWrite: false,
depthTest: false
})
);
this.add(helper);
this.helper = helper;
and here is the code that keeps replacing the helper
’s geometry with EdgesGeometry depending on the mouse position and the object it is currently hovering over:
this.setSelected = (obj) => {
this.helper.geometry.dispose();
this.helper.geometry = new THREE.EdgesGeometry(obj.geometry);
this.helper.position.copy(obj.parent.position);
this.textName.innerHTML = obj.parent.countryName;
this.textVal.innerHTML = obj.parent.peaks[
obj.parent.peaks.length - 1
].toFixed(2);
};
Here are both versions in the form of a standalone HTML file, with only difference being that WebGPU version is using WebGPURenderer and node materials:
3D Chart WebGL2.zip (2.9 KB)
3D Chart WebGPU.zip (3.1 KB)