How to create a PDF Flipbook

Hi. I want to create a 3D PDF Flipbook.
I already googled and searched this forum. I found 2 very helpful topics:

My Question:

  1. To use dynamic texture: is there a way, that a text is on the mesh and is selectable? ( I hardly cannot find anything about it except GUi which i assume is not possitble to transform like dynamic text if the mesh transforms? And even with GUI I dont find the possibility to select the text.

  2. I like todo an animation like: quick_flipbook - npm
    demo
    I would assume to create in Blender (or other 3D programm) a template of planes (or 3D Cubes…): “PrevLeft”, “PrevRight”, “ActiveLeft”, “ActiveRight”, “NextLeft”, “NextRight” and use pdfjs like in the forum posts I linked to image pages on the panels and have an animation in blender in it to play/stop .
    So my question: are there any playgrounds where someone did something similar? Is the idea total wrong and a page animation can easily be made with tools in babylonjs without importing a glb/obj file? (like wrapper modifier animation, page flip simulation…)

You may try to use HTMLMesh - Babylon.js docs
There is PDF in the doc example as well - https://playground.babylonjs.com/#Y2LIXI#44

1 Like

I think a paper page is a stiff fabric. Insert more joints and I think you’ll be on the right way…

Babylon.js Playground (babylonjs.com)

2 Likes

It’s totally reasonable to use a 3D engine for this.

If the book/magazine has thin pages, a plane could be used per page, with two-sided UVs:
https://doc.babylonjs.com/features/featuresDeepDive/materials/using/frontAndBackUVs

It can all be done using only the Babylonjs primitives, animation curves and math, if you’re good with the latter!

I recently created a very similar animation in 3ds Max using bend modifiers. I’m sure the same can be done in Blender. It’s possible to bake to vertex animation too.

If you have a large number of pages, you may want to consider streaming the page textures for the sake of memory. Animation plays on texture loaded. You’ll only need one page animation then another mesh as the static before/after state. Switching of materials will be required.

Generally with the PDF, you will need to convert to an image one way or another… probably best as a server function.

1 Like

Nice Answers. Thanks for the hint with the HTML Mesh @labris and the bothSideUVs @j-te .
@CodingCrusader thank for your answer, I think it is a bit too much to add a physic engine. also I have to controll the page flip. So I think Ill try to simulate it with modifiers or so…

I have to create the whole mesh in Babylon because the PDF size can variate so I have to read the width and height of the pdf file and create a plane (or box) object, and than add an animation like bend/morph/bone animation to it…

So does anyone see a “How to do a page flip in BabylonJS” playground or similar?
https://doc.babylonjs.com/features/featuresDeepDive/mesh/dynamicMeshMorph seems like i can do something with it. Are there andy Mesh Deformers like “Bend” or “Curve” or “Wrap” deformers like in a 3D programm?

Depending on your page ratios, I think you can get a baked model to work just scaling the pages. The curve may look slightly skewed but it depends on how uniform your animation is/the end result you want to achieve. If there is a skewing issue then creating 2 meshes / animations should only be required since pages are generally 1:1 or 1.4142:1. Note you want to consider the camera perspective, FOV and page curl against your viewport frame (do you want the page curl to go outside of the view).

Morph targets is another, hopefully easy approach:
https://doc.babylonjs.com/features/featuresDeepDive/mesh/morphTargets

Here’s a Playground example using Morph Targets mentioned above.

Note the ANIMATIONLOOPMODE_YOYO assignment is a bit of a hack.

2 Likes