Why is Box2D body's line, distorted , unclear and not straight when rendered using WebGL?

Question

I'm using Box2DWeb with javascript and WebGL.

My bodies' dimensions are around 1.0 and the ground is around 5.0 in Box2D. I simply draw them using WebGL using translate and rotate (using values obtained from GetPosition() and GetAngle() function). I use the same values I get from those functions. i.e., I use values around 1.0 to draw the objects and around 5.0 for the ground.

The issue is when rotation occurs, (like when 2 bodies collide), the bodies rotate and translate until equilibrium and the final position drawn is unclear. The lines are not straight even when the object is simply lying on the ground. Without rotation, the bodies look just fine.

Here is an image:

As you can see some side and bottom lines are not straight. They appear distorted. Why could this be happening?

To summarize, I step the world, store changed positions and angles somewhere, and using WebGL I translate to the point and rotate using WebGL calls and draw the body on the screen.

[EDIT] The angle while resting down finally for the bigger object was : -3.1379659302514917 ! It didn't go down to a complete -PI . Maybe thats why it is seen that way. Is there any way to fix it?

Answer 1

It is inevitable that a generic physics engine will produce inexact results. You may be able to tune it to come to a closer approximation by setting tighter thresholds for stopping the simulation of nearly stationary bodies (apparently Box2D calls this “sleeping”).

You can also make it less obvious on-screen by using antialiased graphics, so that the slight rotation does not create a one-pixel kink in the line but a more gradual slope.

You could also tweak the rotation value under the assumption that being close to a multiple π/2 is actually exact, but that would create a noticeable glitch in a tumbling body.

Answer 2

I found out that it happened because I was using perspective projection and not orthographic projection to draw 2D stuff.

Also I had to keep the images in 0.5 m to 5 m range and use a scale of 30.0 to convert between screen pixels and Box2D meters.