David

Full version in spanish (PDF) here.

Abstract

Nowadays we have the opportunity of developing three-dimensional graphical user interfaces for Internet browsers, these interfaces are capable of reaching 99% of the Internet users without the need of installing  any additional software. This is achieved by using the virtual machine Adobe Flash Player, which has a multimedia native format.
Papervision3D is a real time 3D engine for ActionScript 3. It’s an open source library which has the basic features of the three-dimensional computer graphics, which creates a 3D illusion using the 2D rendering engine that has the Flash Player.

You can make a 3D site based totally on open source tools, using Linux as a platform for Flex SDK, which compiles the ActionScript code, based on the Papervision3D library.

Introduction

The user experience is a factor that has recently gained great importance in the network. There are a strong tendency of migration from desktop applications to the browser: word processors, spreadsheets, photo-processing software, email clients, and a great number of applications that have been built to run in web browsers. The question is why haven’t there appeared three-dimensional interfaces for certain applications or complex web pages with a minimum  of load time? The answer is simple: The lack of a suitable software platform with ubiquity for developing three-dimensional applications online. This issue will be analyzed in depth in this article.

Papervision3D opens a world for demonstrations and simple interfaces neglected for a long time in the network. Now there is a reasonable potential for creating stunning and interactive three-dimensional interfaces, with a minimum download time. This is something that web developers have wanted for a long time. A new version of Papervision3D is beeing developed, based on the new Flash Player 10 API, which includes the posibility of including C++ and Pixel Bender to compile codes to Flash Player. With all of these improvements on the recent technology it’s expected to increase dramatically the quality of the 3D websites. Following this path we can open a lot of possibilities to develop innovative user interfaces. For this reason Papervision3D becomes very important in Web development.

The objetive of this post is to show the basics elements that you needed to know for developing 3D applications using Papervision3D.

Analysis of existing technologies for developing 3D interfaces in browsers

When all technologies and resources for the developing three-dimensional interfaces with easy access for users (Software Development Kit, 3D rendering engine in real time via the Internet, using the GPU for rendering engine, high penetration technology Internet browsers and bandwidth of high-speed) have matured, it will be an impending shift in internet browsing.

Software engineers from numerous companies and communities of open source development are working today to make rendering of real-time 3D in web browsers possible. It is possible to demonstrate that the development environment based on the Adobe Flash Player virtual machine is currently the leading infrastructure for implementation of 3D interfaces in web browsers.

The advantages of Flash over other alternatives:

In this analysis I merely consider the basics technical aspects and ubiquity for choosing the best enviroment for developing 3D aplications for browsers. (Part of this analisys is based in Tinic’s post)

HTML vs. Flash for 3D

HTML is a static document format, Flash has in its core a multimedia format. So, unlike HTML, which has exactly 1 frame, Flash content can have an infinite number of frames over time. HTML is static, Flash is dynamic. HTML doesn’t support Drag and Drop, Flash does.

AJAX vs. Flash for 3D

In most cases, AJAX is encouraged for the development of RIA, the examples include: Gmail, Google Maps, among others. But there are a proofs that AJAX is reaching its limits. The fact that Google Earth could not be taken to the browser with AJAX demonstrates that 3D software development goes beyond what AJAX can offer.

SVG/Canvas vs. Flash for 3D

Flash and SVG were designed initially for two-dimensional graphics, but the Core Team of Papervision3D has challenged the performance of Flash Player and turned it into a 3D rendering engine. This could also be possible with SVG or Canvas, but the amount of tags used to develop a multi-frame real content (not a demo site) are too many compared to a code written in Flash. This causes decrease of productivity because of the extra lines of code. Another thing to take in consideration is that in Internet Explorer you must install a plug-in for viewing SVG content (most of the current PCs that have installed Internet Explorer don’t have installed this plugin).

Java Virtual Machine vs Flash for 3D

Java Virtual Machine has some incompatibilities between versions. Flash has no incompatibility between the releases.

Silverlight vs Flash for 3D

In tecnical aspects, Silverlight is better than Flash for the development of three-dimensional environments, because it has access to DirectX, but it doesn’t have ubiquity (you need to download a plugin to use it), while Flash Player is present in 98% of the browsers.

Shockwave vs Flash for 3D

Shockwave is a plugin for browsers that specializes in creating 3D content in real time. Technically it a good choice for 3D development, but has a low penetration rate (50%).

Unity3D vs Flash for 3D

Unity3D is also a plugin for browsers specialized in 3D content rendering in real time. Technically it is the best choice for 3D development, but also has a very low penetration rate (1%).

Therefore, Adobe Flash Player could actually be the best option for creating three-dimensional interfaces in web browsers.
The most important reason for choosing Flash Player in this analysis was because of its ubiquity, this is really important. The clearest example is Second Life, a virtual world that has not been as successful as expected, and much of this failure is due to the need of downloading a 21.2MB software to access this virtual world. Downloading a plugin to display a website is usually big limitation for its popularity. Internet users generally do not want to install new plugins, while Flash Player is already installed in most of the PCs worldwide.

The Flash player is designed and optimized for 2D rendering. Not for 3D rendering.

This is a critical reason why Flash is not technically the best option. In real cases, the number of frames per second of 3D content rendered  is often lower than most 3D desktop games. The developer community of Flash Player is developing several private and open source projects to render 3D in Flash Player, including:

Alternativa3D

Away 3D

Five3D

ND3D

Papervision3D

Sandy3D

Wire Engine 3D

For this article, I decided to talk about Papervision3D, which is the most popular engine for 3D rendering for flash.

Basic concepts on 3D design with Papervision3D

In terms of computer graphics, more especifically in 3D spaces, rendering is a complex process calculated by a computer to generate a 2D image from a 3D scene.
The technique most used today for the production of 3D graphics in real time is the rasterization. The rasterization is basically a process for transforming  converted vector data (data) into a set of pixels (images). Papervision3D uses this technique due to the fact that it is the fastest.
In short words, the the Papervision3D render engine uses a robust logic to produce a 3D illusion on 2D. This logic is basically the following:

Projection (project)

The orthogonal projection is done through mathematical transformations. This technique is not entirely satisfactory, so in fact it is used in perspective projection. Papervision3D in a 4×4 matrix (Matrix3D) represents the translation, rotation and scale for all axes. There are also three other matrices to represent 3D scenes: The global array, the array of cameras, and the transformation matrix objects.
More explicitly, each Vertex3D from each 3D object has to be transformed by these matrices to finish as a 2D Flash Player.

Geometry

Basically, every point in space is located in the form of stored data points (Vertex3D). The set of three vertices can form a face (Triangle3D). Parent vertices and faces are stored in instances of GeometryObject3D. Each DisplayObject3D class contains information objects (location, processing, orientation, axes, etc.) and a reference to the instance of GeometryObject3D. The DisplayObject3D data and the materials of each object are used by the BasicRenderEngine engine to draw the object into an object Viewport3D.

Texture mapping

Is the most used, and it consumes much of CPU cycles. UV mapping is used in this process.

The mapping of a triangle, the most basic example, is as follows:

It creates an array of vertices.  In each array position we store an instance of Vertex3D to be the x, y and z coordinates that turns to be vertices of the triangle. In this example each of these vertices are called v0, v1 and v2.

A face is composed of three vertices (v0, v1, v2). It creates an instance of Triangle3D, where they are introduced as parameters to the material to be mapped, vertices and UV coordinates for each vertex. The array of 3 vertices introduced in the instance of Triangle3D must have the same location as the sequence of the 3 array UV coordinates. The UV coordinates of each point corresponds to the coordinate of versor bi-dimensional projection of the point on the Viewport3D object. The sequence can be chosen arbitrarily, but it must be remembered that the orientation of the face is submited to the right hand rule.

v0 = new Vertex3D (x0, y0, z0); vertices.push (v0);

v1 = new Vertex3D (x0, y0, z0); vertices.push (v1);

v2 = new Vertex3D (x0, y0, z0); vertices.push (v2);

faces.push (new Triangle3D (triangleMesh, [v0, v1, v2], material [UV0, UV1, UV2)].

This produces the same results by following sequences: [v0, v1, v2], or [v1, v2, v0] or [v2, v0, v1]

The other side of the triangle is mapped under the sequence counter: [v0, v2, v1], or [v1, v0, v2] or [v2, v1, v0]

The array “vertices” and the array “faces” are stored in an instance of GeometryObject3D.

Complex geometric objects are created by the combination of triangles, which are the basic geometric entity in the process of rendering. I Posted here some examples of construction of a triangle, and instances of more complex TriangleMesh3D.

Materials

The materials are a collection of properties that determine how it will be rendered a superificie 3D. The different types of materials inherited the MaterialObject3D class, this implies that they find the following properties for each material:

name (string): name of material

interactive (Boolean): allows allocation of listeners, eg click events.

oneSide or doubleSided (Boolean): Maps the material in one or both sides, repectivamente.

Smooth (Boolean): Applies a smoothing algorithm to the material.

The basic types of materials are:

WireframeMaterial

As mentioned above, a 3D object is composed of several triangles.

The sides of each triangle, around the object, are displayed with WireframeMaterial.

ColorMaterial

The materials of a solid color color projected on 3D objects.

BitmapMaterial and BitmapFileMaterial

It is possible to use an image jpg, gif or png, or any object on bitmapData

BitmapColorMaterial

ColorMaterial is like the difference is that you can access the pixels of the material.

VideoStreamMaterial

You can do streaming video materials such as 3D objects.

Lighting and shading

The simulation of light is one of the most complicated in the 3D rasterization process because of the high amount of CPU cycles is required. Therefore, the lighting effects are very basic Papervision3D. You can use a class called PointLight3D for lighting effects. Lights affect the following materials: CellMaterial, EnvMapMaterial, FlatShadeMaterial, GouraundMaterial and PhongMaterial.

The syntax used is:

PointLight3D

light = new PointLight3D (true);

light.x = 50;

light.y = 50;

light.z = -600;

scene.addChild (light)

CellMaterial

var cellMaterial: CellMaterial = new CellMaterial (light, 0×111111, 0xFFFFFF, 5);

var plane: Plane = new Plane (cellMaterial, 400400,10,10)

scene.addChild (do3d)

EnvMapMaterial

var material: EnvMapMaterial = new EnvMapMaterial (light, bitmapData, bitmapData, 0×555555);

var plane: Plane = new Plane (material, 500.500);

scene.addChild (plane);

FlatShadeMaterial

var flatShadedMaterial: FlatShadeMaterial = new FlatShadeMaterial (light, 0×0000FF, 0×00ff00);

var plane: Plane = new Plane (flatShadedMaterial, 400400, 10.10);

scene.addChild (plane);

GouraundMaterial

var gouraundMaterial: GouraudMaterial = new GouraudMaterial (light, 0×0000FF, 0×00ff00);

var plane: Plane = new Plane (gouraundMaterial, 400400,10,10);

scene.addChild (plane);

PhongMaterial

var phongMaterial: MaterialObject3D = new PhongMaterial (light, 0×0000FF, 0×00ff00, 1);

plane: Plane = new Plane (phongMaterial, 400400,10,10);

scene.addChild (plane)

A summary of materials can be found on the blog Mad Vertices.

Collada

You can import 3D objects from any 3D modeling software that supports exporting to COLLADA. COLLADA is an XML format that is used to establish a file-sharing for interactive 3D applications.

Cameras

Papervision3D have 4 types of cameras: free, target, spring and debug.

The camera has three especific properties that can be manipulated: zoom, focus and FOV

Papervision3D Tween + Flex SDK + + Linux: An Open Source solution

Carlos Ulloa released to open source the first version of Papervision3D in 2006 and it has been improved greatly since then. For transition of numerical value properties yo can use a library called Tweener, developed by Zeh Fernando.

It is important to note that Adobe Flash Player is still the owner, but the tools mentioned adove are avaliable for free.

Conclusion

Using all the new features of Flash Player 10 APIs, you get more capacity for real time 3D rendering. This will significantly optimizes the performance of Papervision3D, in fact, others 3D rendering engines are already partially implemented the new API will dramatically improve the experience of Internet users.