Demo is broken in various ways ("Debug" button, Cradle demo and Plinko demo - possibly more)

[JayFoxRox]

I have issues with https://react-three-rapier.pmnd.rs/

Here's a video and some observations (Recorded on https://react-three-rapier.pmnd.rs/ just now):

https://github.com/pmndrs/react-three-rapier/assets/360330/e1bd652e-16e3-403d-a460-f027f58e14da

• "Debug" button only works once (or while "Perf" is also enabled). Otherwise you get "WebGL Context Lost" in the devconsole (not shown in video) and it doesn't work anymore / flickers the wireframe briefly.
• Many bodies spawn in wrong position.
• Spawn positions differ between body creation and after unpausing.
• Despite all of this, physics mostly seem to work (there is no rendering issue here - the bodies are actually in the wrong position, but otherwise behave correctly).

I've also checked out the code I've tried checking out the code locally (@react-three/rapier@1.2.1 and the latest main) and did npm install / npm run demo and also tried the online demo: all broken. I've tried this in Chrome and Firefox - both of them are broken.

Probably not relevant, but this machine is ARM (Apple MacBook Pro M1 Max) running macOS.

---

(Not shown here, but the cradle demo appears to use a restitution > 1, so the balls actually accelerate if I tweak the demo so the rods "hang" initially - although I'm not sure why I have to apply odd rotation values to even get them pointing straight, so there might be more serious issues)

[JayFoxRox]

This appears to be related to the order of rotations / position transformations. Especially with how / when collider transforms affect the rigid body.

I'm able to get Plinko working like this:

(The position on the group is used so the dropped bodies don't hit the front edge; I assume the entire model was originally turned 180 degree, so the 1.06+0.44=1.5 offset was incorrect)

diff --git a/demo/src/examples/plinko/Plinko.tsx b/demo/src/examples/plinko/Plinko.tsx
index 8933f3c..c77dc76 100644
--- a/demo/src/examples/plinko/Plinko.tsx
+++ b/demo/src/examples/plinko/Plinko.tsx
@@ -35,10 +35,10 @@ export default function Plinko({ ...props }: JSX.IntrinsicElements["group"]) {
       ref={group}
       {...props}
       dispose={null}
-      rotation={[0, -1, 0]}
       scale={1}
+      position={[0, 0, 0.44]}
     >
-      <RigidBody type="fixed" colliders="trimesh" position={[0, 1, 0]}>
+      <RigidBody type="fixed" colliders="trimesh" position={[0, 7.58, -1.06]}>
         <group scale={1}>
           <mesh
             geometry={nodes.plinko.geometry}
@@ -46,24 +46,20 @@ export default function Plinko({ ...props }: JSX.IntrinsicElements["group"]) {
             material-color="blue"
             castShadow
             receiveShadow
-            rotation={[0, 0, 0.4]}
-            position={[0, 7.58, -1.06]}
           />
         </group>
       </RigidBody>
-      <RigidBody type="fixed" colliders={"trimesh"}>
+      <RigidBody type="fixed" colliders={"trimesh"} position={[0, 0, 0]}>
         <mesh
           geometry={nodes.container.geometry}
           material={materials.Material}
           castShadow
-          rotation={[0, 1, 0]}
         />
       </RigidBody>
-      <RigidBody type="fixed" colliders={"hull"}>
+      <RigidBody type="fixed" colliders={"hull"} position={[0, -0.39, 0.44]}>
         <mesh
           geometry={nodes.wall.geometry}
           material={materials["Material.001"]}
-          position={[0, -0.39, 0.44]}
         />
       </RigidBody>
     </group>

And Cradle like this:

diff --git a/demo/src/examples/cradle/CradleExample.tsx b/demo/src/examples/cradle/CradleExample.tsx
index f63afb5..4d933a4 100644
--- a/demo/src/examples/cradle/CradleExample.tsx
+++ b/demo/src/examples/cradle/CradleExample.tsx
@@ -52,7 +52,7 @@ const Rod = (props: RigidBodyOptions) => {

 export const CradleExample: Demo = () => {
   return (
-    <group rotation={[1, 0, 0]} scale={3}>
+    <group scale={3}>
       <Rod position={[0, 0, 0]} />
       <Rod position={[0.5, 0, 0]} />
       <Rod position={[1, 0, 0]} />

I'm not sure if these are the "correct" fix though. It probably changes the CoM, but it shouldn't be relevant in this case?