Stuttering when moving a physijs object

[iiceman40]

Hi everybody,

The story - skip that if you are not interessted ;) I am playing around with three.js and Physijs for a while now having alot of fun with it. I was planing to make a small game like Dynablaster (aka Bomberman). Even if it still has alot of bugs and is far from completion I am kinda happy with what I got so far:

http://p215008.mittwaldserver.info/bomberman/game.php

What really bugs me is that i can't get smooth movments when using Physijs. It always seems to stutter, it's hard to explain, I hope you can see it yourself - it is just not smooth.

Now the Question: Why is the object not moving smoothly? What am I doing wrong? I reduced everything I could from my scene and tired to find the cause but with no success. I even created a new scene based on the physijs examples but even there with only one cube the problem still appears:

http://p215008.mittwaldserver.info/bomberman/test.php

The cube in the back is a non-physics three js mesh and its going pretty smoothly. The one in the front is the physijs box that seems to stutter. I don't think my PC is causing it, but it seems to be even worse on slower PCs.

I hope somebody can help. It's really frustrating. I am grateful for any hint that could lead me to the problem.

[iiceman40]

Does nobody have any idea why this is happening? Is there maybe another (better) way to move the Physijs object that I should try?

[maxg0]

Nice looking game!

I hardly noticed the stuttering until I tried to look for it. It's probably caused by non accelerated movement not looking natural, or non dirty positions getting overwritten by ammo. I would suggest either setting dirty positions or using applyCentralImpulse. I looked at your code and don't quite understand how you get things moving that smoothly without setting dirty positions. I find that dirty positions are a bit jerky anyways so I would recommend impulses.

If your character were to actually spin, the movements would be more realistic. You could use a regular THREE.js sphere to keep the face up, or face the direction he's moving in. Why use a physics engine if you're not using physics?

Btw, you might want to be using vectors everywhere instead of x,y,z separately (looking at handlePowerUps). I found using this file as reference to be helpful (the distanceTo function in this case. Although using collision events might be a better way to handle this).

Hope you find a solution!

[iiceman40]

Thank you for your comment! I am gonna play around with dirty positions and applyCentralImpulse a bit more as you suggested. Right now I use setLinearVelocity to move things around. It's in the handlePlayerMovement function.

I am not sure what the difference between apply impulse and set velocity is, can somebody explain?

I believe i tried impulse before and it looked the same. I also used dirty position before but it messed up the collisions, if I remember it right. But as I said, I'll follow your advice and try a bit more :)

About spinning the character: I had that in mind already. That makes it look way nicer. But I wanted to get the movement straight before trying that out, but I will definitely take care of it!

"Why use a physics engine if you're not using physics?" Well, I tried to handle the collisions myself but it didn't quite work out. Collision detection worked well, but I had trouble with the proper response to the collisions. I also planned to use the physics for explosion effects later on. Like when a box explodes I would like to create some derbies that fly around and behave according to the law of physics.

About using vectors: you are absolutely right! I need to refactor that. I only recently figured out that it's nicer to use the vectors... still a lot to learn I have :P

Thanks for the Links. They look pretty helpful, I am gonna check everything out as soon as I have the time.

[iiceman40]

I updated the example from above: http://p215008.mittwaldserver.info/bomberman/test.php

red is linearVelocity green is centralImpule blue is centralForce gray is dirty positioning

yellow is the no physics (smooth) reference

I cant really tell the difference between velocity, impulse and force. except that i have to use different values to get about the same output speed. but the result always seems to be the same: not quite smooth.

Strange is that it looks smooth to me when they bounce of the wall. I am still thinking that I am just doing it wrong somehow.

Anybody any other ideas what to change to make things better?

[maxg0]

Setting the velocity directly, you skip acceleration, so it doesn't look quite as natural. The difference might not be apparent with small objects though. See what happens if you fiddle around with the objects masses. I don't see where you set masses to the cubes though, should be last argument in Physijs.BoxMesh(). I'm currently using masses between 1 and 100 and apply impulses of 1 each physics update, which gives quite nice movement, you apply a huge impulse and force once, that might be causing some trouble.

None of the issues explain the jerkiness though and I'm beginning to suspect it may have something to do with the libraries versions you are using. I'm using three.js r67 and the latest physi.js. I'm not exactly sure where I got my ammo.js from though, you might want to try different versions of it (like the one found in the examples).

Glad you like the links, the three.js vectors one I find very useful because it describes what's happening to the vectors. Also found a function to make creating new vectors easier: function v3(x,y,z){ return new THREE.Vector3(x, y, z); }.