Demo Sources

We remember that the more easy way to create custom triangle3DMeshes is using ASCollada (exporting your 3D model from Maya, 3DsMax, etc, to Pv3d). This post is focused on creating a triangleMesh3D at runtime.

The primitive objects (Plane, Cylinder, Sphere)  are extensions of TriangleMesh3D. The construction of another type of TriangleMesh3D object have similar procedures to primitive objects creation.

The basic sintaxis to create a TriangleMesh3D instance is:
var triangleMesh3D = new TriangleMesh3D(material, vertices, faces)
Where the parameters represent:

-material:MaterialObject3D, the material to be mapped into triangles3D.

-vertices:Array, an array of Vertex3D instances that conform the mesh vertices.

-faces:Array, an array of Triangle3D instances that represent the triangles to be rendered.

The vertices array and the faces array represent the TriangleMesh3D geometry.

triangleMesh3D.vertices
triangleMesh3D.faces

The orthogonal space.
Papervision3D use a right-handed triad. That means that the positive axis can be represented by the right-hand rule. This is a graphic which the directions of the positive axis can be appreciated.

Creating the vertices array

Each position of the vertices array store a instance of Vertex3D. A vertex3D object lets you create the 3D vertices. A vertice is composed of x, y and z values that represent the position in the orthogonal space.

The sintax to creat a Vertex3D objects is:
var x:Number = 10;
var y:Number = 20;
var z:Number = -15;
var vertex3D = new Vertex3D(x,y,z)

Where the x,y and z variables represent the position in the 3D space.

The set of vertex3D is stored in the vertices array.

A Vertex3D object allow to store others properties (vertex3D.extra).

When a vertex3D object is asigned to another variable, it adquires the same characteristics than the process of array element´s asignation. Then, if you want to create a copy of a vertex3D, you need to create a new instance of this vertex3D.

For example:

var vertexA:Vertex3D = new Vertex3D(1,2,3);
trace(vertexA) //x:1, y:2, z:3;
var vertexB:Vertex3D = vertexA;
vertexB.x = -5;
trace(vertexB) //x:-5, y:2, z:3;

trace(vertexA) //x:-5, y:2, z:3;

See also:

var vertexA:Vertex3D = new Vertex3D(1,2,3);
trace(vertexA) //x:1, y:2, z:3;
var vertexB:Vertex3D = vertexA.vertex3DInstance;
vertexB.x = -5;
trace(vertexB) //x:-5, y:2, z:3;
trace(vertexA) //x:1, y:2, z:3;

Creating the faces array

The faces array have the Triangle3D objects stored, that represent the triangles which conform
the mesh. The sintax to create a Triangle3D is:
var triangle3D:Triangle3D = new Triangle3D(do3d, vertices, material, uv)
Where
do3d:DisplayObject3D, this is the instance that contain the TriangleMesh3D
vertices: An array of length 3. Each position of the array stores a vertice (vertex3D) of the vertices array. Theses vertices represent the absolute position of the triangle3D vertices (v0,v1,v2).
material: The Material3D object to be used in the triangle3D (BitmapMaterial, ColorMaterial, PhongMaterial, etc) is referenced here.

uv: An array of length 3. This array store NumberUV objects that represent the UV mapping of the triangle3D.

The connected faces represent the set of triangle3Ds that are connected to the vertex3D object. Each vertex3D object that belongs to the mesh have at least one triangle3D connected.

After initializing a triangleMesh3D (with the triangleMesh3D.geometry.ready = true property) each vertex3D in the mesh store a Number3D object in the triangleMesh3D.normal property. The normal Number3D represents the normal vector to the surface in the vertice. It is calculated in relation to the triangle3D normals that are stored in the connected faces. The normal have modulo 1.

UV Mapping

Mathematically, a NumberUV represents the projection in the xy plane (by default) of the versor (vector with modulo=1) of the triangle3D vertices. If you move the triangleMesh3D.vertices[k] x, y or z positions, you’ll see a distortion in the texture, this is because you need to update the UV mapping of the triangle3D. You can use the triangleMesh3D.projectTexture() method. This method isn´t fast if it is used in a loop because it creates a lot of new variables and uses dictionary, you can create your own UV mapping update method, for example:

uvAx = Math.abs( (a.x - menU) / (mayU - menU + 0.000001) );
uvAy = Math.abs( (a.y - menV) / (mayV - menV + 0.000001) );
uvBx = Math.abs( (b.x - menU) / (mayU - menU + 0.000001) );
uvBy = Math.abs( (b.y - menV) / (mayV - menV + 0.000001) );
uvCx = Math.abs( (c.x - menU) / (mayU - menU + 0.000001) );
uvCy = Math.abs( (c.y - menV) / (mayV - menV + 0.000001) );
uvDx = Math.abs( (d.x - menU) / (mayU - menU + 0.000001) );

uvDy = Math.abs( (d.y - menV) / (mayV - menV + 0.000001) );

uvA = new NumberUV(uvAx, uvAy);
uvB = new NumberUV(uvBx, uvBy);
uvC = new NumberUV(uvCx, uvCy);
uvD = new NumberUV(uvDx, uvDy);
faces.push( new Triangle3D(this, [a,c,b], null, [uvA,uvC,uvB]) );
faces.push( new Triangle3D(this, [d,b,c], null, [uvD,uvB,uvC]) );

in were a, b, c and d are the vertices of two connected triangles, mayU is the greater X value, mayV is the greater X value, menU is the smallest X value, menV is the smallest Y value, and 0.000001 is used to solve the indetermination of division by zero. This is a code fragment of a dinamic triangleMesh3D.

The secuence of the uv array parameters that are stored in a Triangle3D must be governed by the right hand rule (I’m not sure why pv3d uses the two types of triad rules, it could be better to use only the left hand rule). These graphic can help you  understand the secuence of the uv0, uv1, and uv2 NumberUVs that correspond to v0, v1 and v2 vertex3D’s of a triangle3D.

Some experiments of vertices manipulation are done only with wireframe materials or with color material. A way to do vertices manipulations without a distortion in the texture of the 3D objects in meshes that have bitmapMaterials or shade materials is to update the uv mapping of the faces.

PD: This post needs a good revision of the english. My native language is spanish. I created the english version of this blog to exercise my english writting.

rzbknd75ht

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.

I decided to share my firsts experiments:

• Construction of a3D triangle.
  
  In this experiment I learned how to create a TriangleMesh3D, the process is simple, every point in space is an instance of the class Vertex3D, and the faces are based on these points. The way of mapping faces I’ll post later.
  View. Source Code.
  

• My next step was to create a plane joining two triangles.
  
  Papervision3D already exists in the Plane class, but I decided to do it manually, with the goal of learning how to build instances TriangleMesh3D.
  View. Source Code.

• Then I started to experiment to create 3D games,
  
  I used the Particles class to create particles at each vertex of the plane and it’s rotate around the y axis. The limitation is the very low framerate, it is necessary to optimize the code, but for a first experience was very nice. I was happy :D. To rotate and move the camera position, you can use your mouse and arrow keys
  View. Source Code.

• My next experiment consisted in the construction of algebraic surfaces instanciating TriangleMesh3D class, and made my first integration with Tween Papervision3D in this experiment.
  To rotate and move the camera, you can use your mouse and arrow keys. And press the space key to change the subject.
  View. Source Code.

• The experiment quoted above simply play with the depth of Vertex3D points, I make a small modification so that the x and y components follow a sine curve, and the z component of the transition point.
  Some objects are ugly, some rare, but gives an idea of what can be done with careful mathematical study of surfaces to create.
  View. Source Code.

• There are many classes to create materials in Papervision3D, the basic tests that I made with Papervision3D materials used for the following types of materials:
  flatShadedMaterial
  gouraundMaterial
  phongMaterial
  cellMaterial
  envMapMaterial
  
  To view the types of materials listed above, you must re-compile the source code you must uncoment addChild methods.
  View. Source Code.

• I was interested to make a small integration of sound materials.
  Source Code.

• This example of cubes and spheres in Papervision3D was very easy to make, simply because using primitive objects.
  You can use de arrows keys to see the 3D objects.
  View. Source Code.

This is my first post about Papervision3D, I’ll post frequently about this.

My name is David Pérez, I live in Ciudad del Este, Paraguay, my interests are based in electricity, web technologies and their intersections. I’m studding Electrical Engineering, , and parallel, I’m studding a BA in Systems Analysis, both at Polytechnic Faculty of the East National University, I love music! I play classical guitar and some violin, I invite you to see my photos on Flickr!

I’ll much like very much that you involved in my blog leave comments, this is very important for me. You can too contact me by mail as well.

Welcome, I hope to share an interesting experience with you and have a good time