Monday, August 16th, 2010
If you’ve seen some of the cool work that folks like Mr. Doob or Gerard Ferrandez have done with HTML5/CSS3/SVG/etc., you’ve probably seen them emulating nifty 3D effects in the browser (move your mouse to pan the camera):
The demo above, by Gerard, uses SVG plus various mathematical tricks to emulate 3D.
What both of these samples have in common is they are using special math to simulate three dimensions on a two-dimensional surface (i.e. our screen using SVG, the Canvas tag, or CSS3 Transforms).
I’ve realized recently that the Flash world is a bit ahead of us in the HTML5 world in terms of doing nifty effects using special tricks such as simulating 3D in a 2D space. I’ve been actually trying to go deep into learning Flash so that I can learn some of these tricks but use them in an HTML5 context.
I reached out to Gerard Ferrandez recently to ask him where he learned the math to do his demos, and he told me he learned them from the Flash world. He pointed me to an absolutely excellent Flash tutorial series that explains in depth how to do such 3D tricks in your own code. It’s straightforward to learn the math but apply it in an HTML5 context. The tutorial series is very complete and easy to understand, basically explaining how to do perspective drawing, first invented in the Renaissance. A classic perspective drawing from the Renaissance:
Notice the lines superimposed on the painting above; shapes that are closer to the viewer are scaled larger, while shapes in the background are smaller. In addition, the location of the shapes on the painting change based on where they located along what is called the ‘vanishing point’. Instead of emulating these with paint, as the Old Masters used to do, we use simple mathematics that can then determine the correct x and y coordinates on our fake 2D ‘window’ in order to simulate a perspective point, then draw it using SVG, Canvas, etc.:
- Exploring 3D in Flash
- Zooming Figures
- Static View with 3D Wire Frame Boxes
- Shape Movement vs. Camera Offset
- Panning the Camera
- Simple Camera Panning
- Panning Camera Forward and Backward
- Basic Shading
- Integration of Pre-Rendered 3D Elements
- Trigonometry and Multiple Axes
- Camera Pitch in Viewing Balloon Arches
- Rotation Around A Common Center
- Wire Frame Examples Using the Drawing API
- Shapes and Fills
- Backface Culling
- Solid Pyramids
- Faces and Depths
- Triangular Hourglass and Spaceship
As I continue learning tricks from our Flash friends but in an HTML5 context I’ll keep posting here on Ajaxian.
Posted by Brad Neuberg at 5:00 am