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?
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.