Dynamic entity removal and physics stability during render loops

Question

When utilizing a physics-based component within AFrame, dynamically removing an entity from the DOM during an active render loop leads to inconsistent state behavior. While the entity-component system handles the DOM detachment immediately, the underlying physics engine often fails to synchronize the removal of the rigid body proxy instantaneously.
This issue is particularly prevalent when entities are toggled via visibility or re-added based on rapid logic changes, resulting in transform jitter or state resets when the entity is re-introduced to the scene. There is uncertainty regarding whether the physics solver properly clears its internal references before the next simulation step.
What is the recommended lifecycle hook to ensure a physics body is properly purged before the entity is removed to prevent jitter? Is there a specific configuration property to force a synchronous update of the physics state when a DOM change is detected?

Zoha · Answer

Answer to the Core Question
The recommended lifecycle hook is the component’s remove method. Override it and explicitly call the physics system’s body‑removal API before the entity is detached. This guarantees the solver clears its internal reference in the same frame the entity disappears.
Why the Default Removal Can Jitter
When an entity is removed from the DOM, A‑Frame’s entity‑component system fires remove on all components immediately. The physics system, however, only purges its internal map on the next simulation tick. The one‑frame lag manifests as a ghost body or a sudden transform reset when the entity is re‑added.
How to Implement the Hook

Identify the physics component on the entity (e.g., dynamic-body or static-body). If it’s missing, skip removal.
Override the component’s remove method:
AFRAME.registerComponent('dynamic-body', {
  remove: function () {
    const body = this.el.body;
    if (body) {
      // Tell the physics system to drop the body
      this.el.sceneEl.systems.physics.removeBody(this.el);
      // Optional: force a solver step so the change takes effect immediately
      this.el.sceneEl.systems.physics.updatePhysics();
    }
  }
});
Ensure removeBody is called only if this.el.body exists to avoid runtime errors.
Test by toggling the entity’s visibility or using <a-entity> removal. The debug shape should vanish on the same frame.

Is There a Synchronous Update Configuration?
There is no built‑in configuration flag that forces the physics solver to step immediately on every DOM change. The typical approach is to invoke updatePhysics() manually, as shown above. If you need a global setting, you can monkey‑patch the system’s tick to call updatePhysics() after every DOM mutation, but this is rarely necessary and can introduce time‑step drift.
What If the Physics System Differs?
The pattern works across cannon‑es, ammo.js, and oimo.js because each exposes a removeBody or similar API. However, the exact method name and the need for updatePhysics() may vary. If you’re using a different engine, replace the calls accordingly.
Next Diagnostic Step
To tailor the solution precisely, could you confirm which physics system you’re using (cannon, ammo, oimo, etc.)? That will determine the exact API names to call.

Dynamic entity removal and physics stability during render loops

1 answer

Answer to the Core Question

Why the Default Removal Can Jitter

How to Implement the Hook

Is There a Synchronous Update Configuration?

What If the Physics System Differs?

Next Diagnostic Step

Your perspective belongs here.

1 question comment

Recommended Cleanup Strategy