Project for implementing 'page curl' effect on Android + OpenGL ES 1.0 (possibly 1.1/2.0 too if there's clear advantage in using them). Feel free to use everything found here on what ever purpose you can imagine of. With the exception of images I'm using as example as they are randomly selected from Google Images. And application icon is borrowed from deviantART. Besides these exceptions, let it be as-is implementation or - maybe more preferably - as an example for implementing your own effect.

For the ones without Android development environment, and/or people willing to take only a brief look on what's happening here, there are a few video captures. While person responsible for capturing them is not a happy owner of Android device yet It's truly hoped performance is not that poor on actual device compared to what you see here;

• With textures
• Without textures

So what you saw there;

1. There are approximately 26 + 26 + 4 + 4 = 60 vertices at most.
2. 8 vertices for underlying pages, 4 for each.
3. ~26 vertices for curled page + ~26 vertices for fake soft shadow. These numbers are maximum values and vary depending on curl position and angle.
4. Rendering them as triangle strips end up producing approximately 50 polygons at most. To give some perspective rendering a cube without back face culling requires 8 vertices and 12 polygons.

• Adjust fake soft shadow calculation. It's an endless road..
• Add some details to make it a bit more book alike.

Implementation can be divided roughly in two parts.

• CurlMesh - which handles actual curl calculations and everything related to its rendering.
• CurlView - which is responsible for providing rendering environment - but more importantly - handles curl manipulation. Meaning it receives touch events and repositions curl based on them. While this sounds something utterly trivial, it really isn't, and becomes more complex if curl didn't happen around a cylinder. Depending on what you're trying to achieve of course. For me it was most important from the beginning that 'paper edge' follows pointer at all times.

Anyway, here are a few links describing this page curl implementation somewhat well. Only difference is that instead of using a static grid an algorithm which 'splits' rectangle dynamically regarding curl position and direction was implemented. This is done in order to get better render quality and to reduce polygon count. It's an absolute win-win situation if these things can be combined with limited performance loss. We really do not want to draw polygons separately if they lie next to each other on same plane. It's more appropriate to have more vertices used for drawing rotating part instead. On negative side lots of code complexity comes from the need for creating a triangle strip for rendering. Using a solid grid such problems do not occur at all.

• Page Flip 2D [https://nomtek.com/tips-for-developers/page-flip-2d/]
• Page Flip 3D [https://nomtek.com/tips-for-developers/page-flip-3d/]

It isn't very difficult to see what happens here once you take a paper and simply curl it to some direction. If you fold paper completely, cylinder, curl happens around, radius becomes zero, making it more of a 2D effect. And likewise folding the paper so that curl radius is constant most of the characteristics remain - most importantly there is a line - at center of this 'cylinder' - which has constant slope not dependent on radius. Its distance from the point you're holding the paper varies only. Using such approach makes handling curl position based on touch events a lot easier compared to using a cone as solid curling is done around.

For information on using a cone, it's highly recommended to take a look on W. Dana Nuon's blog post on the topic. Chris Luke's article is a good read too.

• Implementing iBooks page curling using a conical deformation algorithm
• The anatomy of a page curl

Curl/cylinder is defined with three parameters, position, which is any point on a line collinear to curl. Direction vector which tells direction curl 'opens to'. And curl/cylinder radius. 'Paper' is first translated and rotated; curl position translates to origin and then rotated so that curl opens to right (1,0). This transformation makes it a bit easier to calculate rotating vertices as all vertices which have x -coordinate at least 0 are not affected. Vertices which have x -coordinate between (-PIradius, 0) are within 'curl', and if x -coordinate is less than equal to -PIradius they are completely rotated. And scan line algorithm for splitting lines within rotating area is more simple as scan lines are always vertical. Not to forget rotating happens around y -axis (0, radius) as cylinder center is positioned at x=0. And after we translate these vertices back to original position we have a curl which direction heads to direction vector and it's center is located at given curl position.

1. At first there is a piece of paper represented by 4 vertices at its corners.
   
   
2. And let's say we want to curl it approximately like this.
   
   
3. Which could results in something like these vertices. Adding more scan lines within the rotating area increases its quality. But the idea remains, bounding lines of original rectangle are split on more/less dense basis.
   
   

Some YouTube links to page curl/flip implementations which were found interesting for a reason or another.

• Tiffany [https://www.youtube.com/watch?v=Yg04wfnDpiQ]
• Huone Inc [https://www.youtube.com/watch?v=EVHksX0GdIQ]
• CodeFlakes [https://www.youtube.com/watch?v=ynu4Ov-29Po]

Not to forget many of the true real-time rendering heros. One day We're about to beat them all. One day. Right?

• Rgba&Tbc - Elevated [https://www.youtube.com/watch?v=_YWMGuh15nE]
• Andromeda&Orb - Stargazer [https://www.youtube.com/watch?v=5u1cqYLNbJI]
• Cncd&Flt - Numb Res [https://www.youtube.com/watch?v=LTOC_ajkRkU]