Add support for cannon-es-debugger

pmndrs / use-cannon

👋💣 physics based hooks for @react-three/fiber

https://cannon.pmnd.rs

2.76k stars 154 forks source link

Add support for cannon-es-debugger #190

Closed elisherer closed 3 years ago

elisherer commented 3 years ago

Addresses #21

Usage

Add a debug prop to the <Physics /> component.

e.g.

ReactDOM.render(
  <Canvas>
    <Physics debug>
      <Plane />
      <Cube />
    </Physics>
  </Canvas>,
  document.getElementById('root')
)

Tech notes

I externalized the propsToBody algorithm from the worker, so the useBody hook could fill the debugInfo with its own bodies (so we could use cannon-es-debugger as-is)
The debugger component has its own "dummy" THREE.Scene for the same purpose of using the debugger as-is.
The debug prop can't be switched on and off since the solution relies on "monkey patching" the useBody hook. If switched off then no body information is collected.

stockhuman commented 3 years ago

Thanks for this, @elisherer! Instant collider view is very handy to have.

@marcofugaro do you want to weigh in on this? I'm not entirely sold on the idea of a debugger with erroneous representations (as a limitation) like in the Vehicle demo or even the demos pictured above, where the debug representation isn't accurate to the physics model.

elisherer commented 3 years ago

@stockHuman, any other comments on this PR? I'm working with that version of use-cannon already and it saves me a lot of time building my bodies (can't see any other way of doing it). About your comment, I am using cannon-es-debugger as-is and what ever "erroneous representations" are part of it and will be fixed as it is a dependency. We can add it as a peer dependency instead of a dependency to allow upgrading the debugger without relying on use-cannon (but it will mean that every installation of use-cannon will require cannon-es-debugger);

stockhuman commented 3 years ago

Hey @elisherer, I've spoken to Paul, I think we'll merge. :)

Edit: in the future, it would be nice to make this an optional import as in:

import { Provider, Debug } from @react-three/cannon

<Provider>
  <Debug>
 ...

drcmda commented 3 years ago

@elisherer thanks! i made some adjustments:

it's completely optional and won't bring in a full cannon-es for use-cannon users
it's faster as it won't poll through react.setState to figure out new bodies

i've documented it on the readme and here's a small example https://codesandbox.io/s/simple-physics-demo-with-debug-bounds-0k27n?file=/src/App.js

elisherer commented 3 years ago

@drcmda, very cool! I haven't figured I made cannon-es be bundled twice. Good idea to split it up. I see you went with black as the default 😁