Possible intermittent performance issue

[eugeniosegala]

Hello!

First of all, thank you for building this awesome wrapper for React (I'm enjoying it very much).

I started building a 2D video game using react-three-fiber.

Basically the problem is that sometimes the application starts to stutter. This usually happens 2 times out of 10, after the application is loaded (it's very random).

Basically I can play the game without problems for many minutes, but then, if I refresh the page it might start to stutter and it will never stop until the page is refreshed again.

This might be related to how I'm using the useFrame hook (I'm updating the object/camera position), or maybe it's related to something else.

if (moveForward || moveBackward || moveRight || moveLeft) {
   api.velocity.set(moveRight || moveLeft, 0, moveForward || moveBackward);
}

camera?.position.set(obj.x, 5, obj.z);

Live demo: https://elated-stonebraker-1ba3c9.netlify.app/

I recored 2 videos as well:

Performance issue: https://user-images.githubusercontent.com/29021217/149996870-d1c33c46-b92a-4e57-8856-d95911a2e894.mov

Application working fine: https://user-images.githubusercontent.com/29021217/149996882-de075dae-54f8-4c7a-bd93-65a2aa2b0629.mov

As you can see, the problem appear to be very random (if you refresh the page 8/10 times you should start seeing it).

Another thing I noticed is that the FPS never drops (there's a counter on the bottom left side), so this must be related to the only moving object: the player.

I also tried to detach the camera from the player and I literally saw the player object having the issues I described.

I'm also using @react-three/cannon and I originally thought that the issue was related to it, but I tried to remove it and the problem was still happening.

Do you have an idea of what might cause this problem?

[drcmda]

this doesn't seem to related to useframe and i think you're doing everything right, nothing wrong with the code you posted unless there's something up with obj.x/z. that the fps is stable tells you just as much, this must be a value or a syncing problem, not a performance problem.

btw have you seen @react-three/p2 by @joergjaeckel ? it could perhaps simplify the process a bit. though atm i think it has the same issue. but communicating with joerg could perhaps flatten that out.

[joergjaeckel]

You should really go for use-p2 except there is a reasons you need a third dimension in physics! Maybe we could implement an other generic character controller for this genre. Are you using dynamic bodies only? Jitter often comes from using physics simulation (the wrong way) over a kinematic/raycast based controller. But there is no obvious reasons for your issue to happen. From time to time I experienced this issue too and its impossible to debug since its not reproducible.

[eugeniosegala]

Hey! thanks for sharing @react-three/p2, I did not know about its existence!

Yeah I'll definitely use it, I thought @react-three/cannon was the only available option out there!

I will try think more about this problem, as you said, it's impossible to debug since it's not reproducible.

I'm wondering if perhaps this is a problem with how Three.JS is interacting with WebGL?

[joergjaeckel]

Just let me know if you need some advice with use-p2! It's young but already has most of p2 features which are mostly identical to how cannon works.

Since three.js is the most mature package/framework of all components it's unlikely the problem. I'm with @drcmda it might be a syncing issue somewhere at the react side. It's important how and when we manipulate the physics world and when we sync which values. Maybe we figure out along our journey 💁

[drcmda]

I'm wondering if perhaps this is a problem with how Three.JS is interacting with WebGL?

honestly before that it's probably use-cannon or cannon-es messing something up. i dont see jitter anywhere else, but i have seen it in worker-physics driven apps. it's like as if two workers pulling on the poor sprite. that it only comes after refreshing - perhaps some leftover somehow stays alive and keeps feeding data back into the app.

[jklein131]

Posting this just in case someone else had a similar problem to the "buzzing".

I am also working on a 2D RPG style game where each tile is rendered with a stack of 2d images, if that sounds like you, I solved the buzzing problem by setting all the textures to the same size. For example, I had a 20x20 ground tile (which wasn't buzzing) and then a 200x200 rock tile (which was buzzing). When I changed the rock texture to be 20x20, no more buzzing!. I think that either lower graphics helped (200x200 pixels was too big for a single tile), or that that it was scaling down the larger texture on each frame load to normalize the graphics against the 20x20 size tile, and webgl had rounding errors as there was other movement on the screen.

Cheers!

[zhangchangjun]

您好！您发送的邮件我已收到!----张昌君