pmndrs / use-p2 Goto Github PK

Hi!

Is it possible to change the layering order of different objects while using react three fiber? I change the z position of the object but once the useCircle hook takes into effect, the object gets snapped to z-0 again.

I tried arranging objects by changing the line order in jsx but it's not editable and not reliable - sometimes it produces artifacts.

Is there anything in use-p2 or p2.js like z-index in CSS where I can manually set the position on z-axis?

Thank you!

Problem

The documentation says an isTrigger prop can be passed to the body to make it work as a collision detection trigger (similarly to how cannon-es, use-cannon work following this PR.

However, p2-es does not implement an isTrigger prop anywhere in the codebase.
You can instead pass the sensor boolean when instantiating a shape (codebase ref, but the current implementation off use-p2 doesn't allow to pass extra props to shapes.

Solution?

Add ability to pass extra props to shapes when creating a body or implement the isTrigger prop.

Also here's the p2.js sensor demo

Hey!

I was trying to update the radius args of a useCircle hook with react three fiber but running into some problems.

My current solution is to create a useState hook and store the radius inside of it. The radius state get updated (set state function) in useFrame hook. And finally make the radius state as a dependency of useCircle hook. Whenever the radius state gets updated in useFrame hook, the useCircle hook then got updates with new radius, and picking up the velocity and position in the current frame.

This solution work, but not very performant - on my m1 Mac mini, it runs fine in chrome but extremely jaggy on safari. I suspect the reason is that I call the set-state function in useFrame hook, which is explicitly advised against in r3f's documentation. However, I couldn't figure out another way to update radius.

Is there any other way I can trigger the dependency updates of args in a useCircle hook without calling set-state in useFrame? Or should I not update the dependency at all? Or is there anyway I can access P2.js's native setters of args (e.g. getting access to the Body object of the component)?

And btw thank you for maintaining this amazing project!!

Hello, So I want to set the angle of a body smoothly. for instance from 0 to 90 degrees. how can I do that? I wanted to use angular velocity or apply torque to the body but there is no ensure that the final angle of the body would be 90 degrees.

Maybe it can be achieved by exporting the state from Physics, something similar like useThree(), but then usePhysics() from there I could manipulate state.world.

Another idea is to expand the step prop from the Physics component so that it allowed the timeSinceLastCalled too, just like p2-es: http://schteppe.github.io/p2.js/docs/classes/World.html#method_step
Then you would be able to pause and resume using step={[0, delta]} without the engine playing catch up if you resume with step={[1/60, delta]).

To replicate:
Run any demo, e.g. KinematicCharacterController, click on another tab, wait for a couple of seconds, then go back to the demo tab, and the physics simulation runs at super speed for a bit before it goes back to normal. The issue is the same in p2.js (http://schteppe.github.io/p2.js/examples/canvas/character.html)

The length of this glitch seems proportional to the time you spent away from the page, so i thought it's because the physics engine is accumulating time while the page is not active, and then it tries to catch up the simulation after the page is active again? I'm not sure, just guessing. (also I'm running Mac M1)

Fix:
This fixed it for me, but maybe there's a better way?

   const [isPageActive, setIsPageActive] = useState(true);
   
   useFrame((state, delta) => {
      if(!isPageActive) return
      world.step(fixedTimeStep, delta, maxSubSteps);
    })
  
    useEffect(() => {
      function onPageVisibilityChange() {
        if (document.visibilityState === 'visible') {
          requestAnimationFrame(() => setIsPageActive(true))
        } else {
          setIsPageActive(false);
        }
      }
      document.addEventListener('visibilitychange', onPageVisibilityChange);
      return () => document.removeEventListener('visibilitychange', onPageVisibilityChange);
    }, [])

I noticed that the linear damping prop in use-p2 is called linearDamping (same as cannon), but in the p2 lib it is called damping.

Setting linearDamping via the body hook api works, as the setLinearDamping op sets the damping property correctly:

e.g.

const Example = () => {
  const [_, api] = useCircle(...)

  useEffect(() => {
    api.linearDamping.set(someValue) // this works!
  }, [])
  
  // ...
}

But providing linearDamping in the props of a body hook doesn't work. From a quick look, it appears that's because propsToBody doesn't have any handling for the linearDamping -> damping property name mismatch.

e.g.

const Example = () => {
  const [_, api] = useCircle({
    linearDamping: someValue, // this doesn't work!
    damping: someValue, // this works as it's passed through to `propsToBody`, but conflicts with our types!
  })

  // ...
}

I can think of a few options for fixing this:

1. We could rename the prop from linearDamping -> damping in this lib to be consistent with p2

2. We could update propsToBody and keep the API in as-is

3. Once we start using p2-es in this lib, we could rename damping to linearDamping in p2-es for consistency with cannon

Below are the currently planned features for the 0.1.0 release.

After this release, larger changes will be considered.

The completed changes are currently in the next branch.

• #12
• #11
• Clamp deltatime to 1 second - similar to fix in rt/rapier pmndrs/react-three-rapier@5de1f77
• Create useLinearSpring and useRotationalSpring hooks

For some reason, the angle of the debugger is not always correct:
https://codesandbox.io/s/md5oz

Hi, I'm trying to create a basic mouse joint so that I can drag objects, similar to this p2 example.

I've had a bit of success with useRevoluteConstraint, but it seems that enable() and disable() aren't actually available in the ConstraintApi returned from the revolute constraint (only seeing motor functions), so I'm unable to disable the constraint while not dragging the mouse. Also, it only really works if I set a different collisionGroup on the mouse body, but then this messes up the collisions on the target body while dragging it. Sleeping/waking the mouse body doesn't seem to help.

Any advice for creating a basic mouse constraint in use-p2 would be greatly appreciated!

Some things to consider for a 1.0.0 release:

Decide whether physics should continue to run in a web worker

This requires some refinement around the purpose of @react-three/p2.

For websites that use p2 for secondary effects and interactions, running p2 in a web worker is advantageous as webpages will remain interactive - a long physics step won't block the main thread.

But for game-dev purposes, running physics in a separate thread can be a nuisance. Things like character controllers that rely on raycasting are difficult to write in with the hooks, and should ideally be run in the same thread as p2 for performance.

For maintainability reasons, offering both worker and non-worker versions of rt/p2 isn't easy.

Consider a declarative API, rather than the current hooks API

A declarative API should be considered, similar to the one that @react-three/rapier sports.

The demo site (https://p2.pmnd.rs/) seems to be down. Happy to PR a fix if possible