geometry.setAttribute is not working

[Lafeu-p]

Description

I used to work with WebGLRenderer and often had requirements for custom meshes, such as defining an IconMesh that includes IconGeometry (extending from BufferGeometry) and an IconMaterial. IconGeometry requires an attribute for rendering, and I use geometry.setAttribute('position', new Float32BufferAttribute(array, 3)) to update the attribute.
For example, during initialization, I use geometry.setAttribute('position', new Float32BufferAttribute(array, 3)) with array.length being 1200. Later, I have an update requirement where the array changes and array.length becomes 2400. At this point, I again use geometry.setAttribute('position', new Float32BufferAttribute(array, 3)) to update the attribute. This worked well with WebGLRenderer, but recently when using WebGPURenderer, it results in an error

At this point, I need to call material.needsUpdate = true to update the material for it to take effect. It doesn’t seem reasonable that updating an attribute would require recompiling the material.
I understand that it’s best not to modify the size of the buffer in BufferGeometry, as doing so would likely cause the buffer to be recreated. However, in my use case (based on WebGLRenderer), this hasn’t caused any noticeable performance issues, and being able to reset the size of the attribute is what I want.

Reproduction steps

1. init geometry based on WebGPURenderer
2. geometry.setAttribute('position', new Float32BufferAttribute(array, 3)),array.length being 1200
3. geometry.setAttribute('position', new Float32BufferAttribute(array, 3)),array.length being 2400

Code

geometry.setAttribute('position', new Float32BufferAttribute(array, 3))

Live example

empty

Screenshots

No response

Version

170dev

Device

No response

Browser

No response

OS

No response

[Mugen87]

The mentioned workflow is not supported in WebGPURenderer anymore since we don't allow buffer attributes to be overwritten. That was already an anti-pattern with WebGLRenderer.

You have to define attributes once with sufficient size and then just update them. That means it is not allowed to overwrite the buffer attribute with setAttribute() since that potentially creates memory leaks. If a resize is required, you have to call dispose() on the geometry and then create a new one with new attributes.

Related #29452 (comment).

[Lafeu-p]

I completely agree with your point of view. when I dispose the old geometry and create a new one, and then set the attribute, the error no longer appears, but the setAttribute dose not take effect, and the rendered data is still the old one. It only works when I call material.needsUpdate=true. What could be the reason for the?

[Mugen87]

Any chances to demonstrate this issue with a live example?

[Lafeu-p]

live example
I made some modifications to the 'webgpu_instance_point' example in three.js and was able to reproduce this issue.
I added a change method, which, when called, recreates a geometry and updates the positions to make the points offset slightly from their original positions.

const config = {
	change: () => {

		const geometry = new InstancedPointsGeometry();
		positions.forEach( ( _, i ) => {

			positions[ i ] += 1;

		} );
		positions.push( positions[ 0 ], positions[ 1 ], positions[ 2 ] );
		geometry.setPositions( positions );

		instancedPoints.geometry = geometry;

		console.log( 'set positions' );

		// material.needsUpdate = true;

	},
};

gui.add( config, 'change' );

When the change method is triggered, nothing happens. However, if I uncomment material.needsUpdate = true, the update succeeds.
I sincerely hope to receive your response.

[Mugen87]

The problem is that InstancedPointsGeometry.setPositions() overwrites the instancePosition attribute with setAttribute() which should not be done.

Methods like setPositions() and setColors() are currently design for a single time usage during construction time.

[Lafeu-p]

But here I am creating a new geometry, without modifying the old one.

const geometry = new InstancedPointsGeometry();
...
instancedPoints.geometry = geometry;

console.log( 'set positions' );

[Mugen87]

You're right! I'll have a look...

[Mugen87]

It seems using normal geometries are also affected. Even setting needsUpdate = true does not help.

https://jsfiddle.net/bohv5pag/1/

@sunag Is this maybe a cache related issue?

[sunag]

Hmm... I will check this.