PDFBook3D, a 3D flipbook engine
PDFBook3D is a Flash application that allows to transform a PDF document into a 3D model, that later can be viewed pretty much like a real book. The product was just released by Powerflasher, and I was involved in creating the front-end 3d Flash part of it.
This application belongs to the family of flipbook engines. I am sure you have seen the classic 2D version of a flipbook at least once. It is widely popular around the web! PDFBook3D replaces this classic piece with a more accurate and realistic 3D version of the effect created with AS3Dmod bend modifier. The bend modifier allows to create paper simulation in Flash, which is something I already posted about back in November.
The application has a rich set of configurable properties, including dimensions of the book (for non typical page sizes) and a number of quality settings to get a decent framerate on slower machines as well. The Powerflasher team created an admin interface to generate 3d books on the fly. You can see it in action here. The product functionality also includes links editor and video embedding. If you are interested in more information please refer to the Powerflasher Solutions site.
PDFBook3D is also my first commercial project made using Away3D. There are a few features in Away3D that made me choose it, but mostly it was the curiosity to try "the other" engine. I must admit Away3D turned out to be pretty cool!
It is most famous for its advanced features like normal maps, path extrudes and bones animation. However, this project does not rely on those advanced functionalities. Most of what I used in here is pretty basic, but still I was able to find some cool stuff.
One very useful feature is being able to assign back material to planes. It might not seem like a huge thing, but since it is used to create the flipping page, it helped me a lot. Actually any mesh in Away3D can have a back material assigned to its faces using the back property of the class:
-
myMesh.material = new WireframeMaterial(0xff0000); // classic front-side material
-
myMesh.back = new WireframeMaterial(0x00ff00); // back material
Notice, that it is not the same thing as having a double sided material - that is, the same material used for both sides of a face. In this case - one material is used for one side, and a completely different one for the other. This is why it was perfect for creating a page of a book.
Another cool feature of Away3D is triangle caching - it is a built in functionality, that doesn't require any extra coding and it can give a significant performance boost. Thanks to triangle caching, whenever the page flip animation is on, the rest of the book that does not move at this moment is not re-rendered at each frame. A similar optimization can be achieved in Papervision3D using render layers, but it's not as easy to use.
Last but not least, I'd like to thank Fabrice Closier from the Away3D team for support and feedback during the project!
Nice work, though it seems like there are some bugs to work out on the application side. They should might want to include a test for if(swfmacmousewheel != null) in the index.html file of the download package. When I open the file locally it throws an error in FF 3.0.8. Also, my PDF didn’t create anything. I’m going to try a new one, but all the flash stuff looks great!
(should might == might) ;)
Very nice job.. Quite surprised how well it performs, compared to the 2d ones. I also like the feature that it floats in 3d space, so you dont look directly on it.
Lovely well done :)
Real paper king :) I loved attention to details, such as box heights changing.
Looks really nice!!!
Could you tell how you bind pages together?
I tried to fold (unfold) in half a piece of paper in Papervision, using a couple of planes (maybe it’s a wrong way to go?), and as3dmod, but the planes got disconnected.
I tweaked some parameters, but couldn’t make the planes stay together without making waving of the paper less realistic. What would you do to fold a piece of paper in half?
@kayluhb thanks, we will look into this!
@yayakut I use only one plane and the front & back materials available in Away3D. With PV3D its a bit more tricky – you need 2 planes to work in synch. Take a look at the source code from my first demo with bending:
http://www.everydayflash.com/blog/index.php/2008/06/11/bending-modifier-papervision3d/
It was done before I put all the code in to AS3Dmod, but it should give you an idea on how I approached the subject.
This is an amazing project! The week before you announced this, I noticed that I hadn’t seen anything like this and was going to build my own in pv3d. I still probably will, since it’s so expensive.
I was not intending to have it generate from a PDF — How does that work? I’m aware of generating PDFs from Flash, but what is this AS3 runtime PDF solution??
Looks awesome. I really like the way the amount of pages at the base change as you flick through the pages and the fact you’ve make it a hardback book!
@michael There is no PDF-to-AS3 solution here. The PDF files are processed on the server-side and decomposed into an XML document and a series of images.
[...] Visit Article [...]
Looking good.