Mesh position slow to change when updated in animateReady

[IRobot1]

I have a simple mesh who's position I'm changing in animateReady

<ngt-mesh ngtPhysicBox [getPhysicProps]="getCubeProps" 
          [position]="position" (animateReady)="animateGroup($event.state)">
  <ngt-sphere-geometry [args]="[ radius, 16, 16]"></ngt-sphere-geometry>
  <ngt-mesh-standard-material [parameters]="{ wireframe: true, color: 'black' }"></ngt-mesh-standard-material>
</ngt-mesh>

The position is being changed to match the position of the XR motion controller is world space.

  animateReady(event: NgtRender) {
    if (this.controller) {
      const position = this.controller.position;
      this.position = [position.x, position.y, position.z] as NgtVector3;
    }
  }

However, the mesh only seems to update twice a second and is slow to track the position of the controller.

I've confirmed animateReady function is being called 60 times a second.

Any thoughts?

If you have a VR headset, you can try the project here. Set vr=true in app.component.ts first.

[nartc]

Can you replicate this issue without vr mode? I have a hunch of what's going on but it'd be easier with a sample that I can run :)

[IRobot1]

I was able to fix by adding change detection

  constructor(
    private cd: ChangeDetectorRef,
  ) { }
  animateGroup(event: NgtRender) {
    if (this.controller) {
      this.position = this.controller.position.toArray();
      this.rotation = this.controller.rotation;
      this.cd.detectChanges();
    }
  }

[nartc]

Interesting! Now I really want to see the code to find out the root cause.

[IRobot1]

Regarding your new object clumping example, I think the PointerComponent needs some documentation and clarification. It appears to use internal features. I'd like to understand your thinking on implementing this way.

When to extend from NgtStore and why?
When to use animation frame store?
What is this.effect?
What is tapEffect?
Why do all your components have ChangeDetectionStrategy.OnPush?

[IRobot1]

The project code is here. See xr-controller.component.ts. Look at history to see version that didn't work.

I've updated position in other animationReady callbacks, and they've all worked fine (as you would expect). Very puzzling.

[IRobot1]

The object clump examples was very helpful.

Changing the location and rotation in the animateReady callback using physics api works great! I've removed my work-around mentioned above.

  animate() {
    const p = this.controller.position;
    this.physics.api.position.set(p.x, p.y, p.z);

    const r = this.controller.rotation;
    this.physics.api.rotation.set(r.x, r.y, r.z);
  }

<ngt-mesh ngtPhysicBox [getPhysicProps]="getCubeProps" (animateReady)="animate()"

This has also solved a problem with collideBegin and collideEnd events not firing properly when one object uses isTrigger.

Thanks for this useful example.

[nartc]

That is great to hear!!

About those clarification questions, I agree. I will update the docs when I find some time.