4

I've been studying openGL for a while, I'd like to create a book with the page turning effect, but the pages should "bend" themselves. So now I'm wondering how one could bend a surface and animate it in openGL. Sounds like a multiple-per-vertex-shaders depending on the position of the vertex, isn't it?

Or perhaps a single shader with multiple branches

Johnny Pauling
  • 12,701
  • 18
  • 65
  • 108
  • If you're on iOS, you may [see here](http://stackoverflow.com/a/2646810/1262542), though the code might be interesting anyway. – Stefan Hanke Jul 10 '12 at 11:08

3 Answers3

4

Implement the bending as a curve equation, and apply that curve to the vertex position depending on the distance from the binding (you may use an additional vertex attibute for this).

Update as per suggestion (formerly comment):

If look at a cone you can see, that it consists of a circular curve (around its axis) which is tapered to its tip. This is the curve you'd create for a cone method page curl effect. The surface of a cone with its tip at the origin and its axis being Z is described by the analytic surface

S(u,v) = (x*cos(u*2*pi) + y*sin(u*2*pi))*v + z*v*a

where x,y,z are the cartesian unit vectors and a = 2*tan(opening angle)

Community
  • 1
  • 1
datenwolf
  • 159,371
  • 13
  • 185
  • 298
  • What kind of curve? How would one take into account the position of the user's touch input? Sorry, but this answer seems VERY vague to me, given that a even simple google search yields the "cone" paradigm as well as samples for such an effect. – Ani Jul 10 '12 at 13:54
  • If look at a cone you can see, that it consists of a circular curve (around its axis) which is tapered to its tip. This is the curve you'd create for a cone method page curl effect. The surface of a cone with its tip at the origin and its axis being Z is described by the analytic surface `S(u,v) = (x*cos(u*2*pi) + y*sin(u*2*pi))*v + z*v*a`, where x,y,z are the cartesian unit vectors and `a = 2*tan(opening angle)`. – datenwolf Jul 10 '12 at 14:06
  • I didn't disagree that it was a curve, only that the answer was vague. The comment above would a nice edit to your answer. – Ani Jul 10 '12 at 14:16
4

Page turning is implemented as a cone that varies its radius and apex angle at various stages of the "curl". Here is a tutorial for iOS that walks through the math. The original paper by Xerox PARC is here.

Hope this helps!

Ani
  • 10,826
  • 3
  • 27
  • 46
0

There is a very nice GLSL implementation (with antialiasing and analytic shadows) of a page curl effect by Hewlett-Packard, which is the part of WebVfx. Here is the source code:

http://rectalogic.github.io/webvfx/examples_2transition-shader-pagecurl_8html-example.html

The project is licensed using a BSD-style License.

Sergey K.
  • 24,894
  • 13
  • 106
  • 174