Javascript physics engine and simulated infinite curve

Question

I'm trying to do a Tiny Wings like in javascript.

I first saw a technique using Box2D, I'm using the closure-web version (because of the memory leaks fix).
In short, I explode the curve into polygons so it looks like that:

I also tried with Chipmunk-js and I use the segment shape to simulate my ground like that:

In both cases, I'm experiencing some "crashes" or "bumps" at the common points between polygons or segments when a circle is rolling.

I asked about it for Chipmunk and the author said he implemented a radius property for the segment to reduce this behavior. I tried and it indeed did the trick but it's not perfect. I still have some bumps(I had to set to 30px of radius to get a positive effect).

The "bumps" append at the shared points between two polygons :

Using, as illandril suggested to me, the edging technique (he only tested with polygon-polygon contact) to avoid the circle to crash on an edge:

Also tried to add the bullet option as Luc suggested and nothing seems to change.

Here the demo of the issue.
You can try to change the value to check :

• bullet option
• edge size
• iterations count
• the physics

(only tested on latest dev Chrome)
Be patient (or change the horizontal gravity) and you'll see what I mean.
Here the repo for the interested.

Answer 1

The best solution is edge shapes with ghost vertices, but if that's not available in the version/port you're using, the next best thing is like the diagram in your question called 'edging', but extend the polygons further underground with a very shallow slope, like in this thread: http://www.box2d.org/forum/viewtopic.php?f=8&t=7917