RapierHelper - Debug buffer geometry not updating with WebGPURenderer

Questions
, , ,
1

Hello everyone,

I tried to use RapierHelper (available from r176) to debug a RapierJS physic world, based on the three.js physics - rapier3d character controller exemple, rendered with WebGPURenderer.

The physic works as expected, the collisions are detected, the mesh positions updated based on the physic world bodies and the debug vertices from the world.debugRender() are updated accordingly.
But the RapierHelper “mesh” using the debug vertex positions is not updated. The RapierHelper “mesh” stays at its initial position. This happens with WebGPURenderer but works fine with WebGLRenderer (as for the example on threeJS).

As far as I could debug, I found out that the the “position” BufferAttribute is correctly updated with the up to date vertex positions from Rapier world.debugRender().

From RapierHelper source code, I saw that the current “position” BufferAttribute is deleted from the geometry then a new “position” BufferAttribute is created and assigned to the BufferGeometry in the update method (called in the render loop), so the BufferAttribute version property is always 0.

Question:

Could this be the source of the issue ? Or with WebGPURenderer are there some extra/specific steps needed to update a BufferGeometry vertex position ?

I create 2 codepens, based on source code of the character controller example from three examples that demonstrate the different behaviors between :

WebGPURenderer :
https://codepen.io/Eman-Ymton/pen/gbbXEJv

WebGLRenderer:
https://codepen.io/Eman-Ymton/pen/VYYrNQX

Thanks.

2

Just find a solution with chatGPT. According to it the replacement won’t be picked up automatically with WebGPURenderer, instead it recommends to update the existing BufferAttribute instead of creating/assigning a new one each time.

I change the RapierHelper update method from : three.js/examples/jsm/helpers/RapierHelper.js at bc58fecba18150103b95fbde5aaa3cc7cddf95a7 · mrdoob/three.js · GitHub

to (line 123 in the codepen):

update() {
    const { vertices, colors } = this.world.debugRender();

    // init si besoin
    if (!this.geometry.attributes.position || this.geometry.attributes.position.count !== vertices.length / 3) {
        this.geometry.setAttribute('position', new BufferAttribute(vertices, 3));
    } else {
        this.geometry.attributes.position.copyArray(vertices);
        this.geometry.attributes.position.needsUpdate = true;
    }

    if (!this.geometry.attributes.color || this.geometry.attributes.color.count !== colors.length / 4) {
        this.geometry.setAttribute('color', new BufferAttribute(colors, 4));
    } else {
        this.geometry.attributes.color.copyArray(colors);
        this.geometry.attributes.color.needsUpdate = true;
    }
}

It fixes the problem.