blog.tartiflop

Previous articles summary :

• First steps in Papervision3D : Part 1
  Creation of a new Papervision3D project within eclipse or Flex Builder 3 and a simple example of a 3D scene illustrating some basic Papervision3D classes.

Following from my last post, I’d like to show how Papervision3D v2.0 provides us with a class to encapsulate the viewport, camera, scene and renderer. This class is called the BasicView and is basically a wrapper class for all these objects. Rather than inheriting from a Sprite, this example is derived from the BasicView and as a result inherits automatically the four key objects named above.

1. Example using BasicView
The following code produces the same example that we saw in the Part 1 but using this new class. If you’re using Eclipse or Flex Builder 3, you can add this example to the project you create from the last post then simply right-click on the new file and select Set as Default Application.

package {
 
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
 
  import org.papervision3d.core.geom.Lines3D;
  import org.papervision3d.core.geom.renderables.Line3D;
  import org.papervision3d.core.geom.renderables.Vertex3D;
  import org.papervision3d.core.proto.MaterialObject3D;
  import org.papervision3d.materials.WireframeMaterial;
  import org.papervision3d.materials.special.LineMaterial;
  import org.papervision3d.objects.primitives.Sphere;
  import org.papervision3d.view.BasicView;

  public class Example002 extends BasicView {
 
    private var sphere:Sphere;
   
    public function Example002() {
      super(0, 0, true, false);
     
      // set up the stage
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;

      // Initialise Papervision3D
      init3D();
     
      // Create the 3D objects
      createScene();
     
      // Start rendering the scene
      startRendering();
    }
   
    private function init3D():void {

      // position the camera
      camera.x = -100;
      camera.y = -100;
      camera.z = -500;
    }

    private function createScene():void {

      // First object : a sphere
     
      // Create a new material for the sphere : simple white wireframe
      var sphereMaterial:MaterialObject3D = new WireframeMaterial(0xFFFFFF);

      // Create a new sphere object using wireframe material, radius 50 with
      //   10 horizontal and vertical segments
      var sphere:Sphere = new Sphere(sphereMaterial, 50, 10, 10);

      // Position the sphere (default = [0, 0, 0])
      sphere.x = -100;

      // Second object : x-, y- and z-axis
     
      // Create a default line material and a Lines3D object (container for Line3D objects)
      var defaultMaterial:LineMaterial = new LineMaterial(0xFFFFFF);
      var axes:Lines3D = new Lines3D(defaultMaterial);

      // Create a different colour line material for each axis
      var xAxisMaterial:LineMaterial = new LineMaterial(0xFF0000);
      var yAxisMaterial:LineMaterial = new LineMaterial(0x00FF00);
      var zAxisMaterial:LineMaterial = new LineMaterial(0x0000FF);

      // Create a origin vertex
      var origin:Vertex3D = new Vertex3D(0, 0, 0);

      // Create a new line (length 100) for each axis using the different materials and a width of 2.
      var xAxis:Line3D = new Line3D(axes, xAxisMaterial, 2, origin, new Vertex3D(100, 0, 0));
      var yAxis:Line3D = new Line3D(axes, yAxisMaterial, 2, origin, new Vertex3D(0, 100, 0));
      var zAxis:Line3D = new Line3D(axes, zAxisMaterial, 2, origin, new Vertex3D(0, 0, 100));
     
      // Add lines to the Lines3D container
      axes.addLine(xAxis);
      axes.addLine(yAxis);
      axes.addLine(zAxis);

      // Add the sphere and the lines to the scene
      scene.addChild(sphere);
      scene.addChild(axes);
    }
    

  }
}

We see below the Flash animation produced - as with the Part 1 a wireframe sphere on the left and the axis in the centre (click on image to launch Flash animation).

2. Initialising and rendering the scene
Compared to the example shown in Part 1, the initialisation of the Papervision3D is simpler : for this example we specify in the constructor the values we want for the viewport :

    public function Example002() {
      super(0, 0, true, false);

If you look at the source of BasicView you’ll see that these values are passed directly to a new Viewport3D instance. The camera by default is focused on the origin but can be changed also by specifying a different type of camera by adding another parameter in the call to the super constructor being either CameraType.DEBUG, CameraType.TARGET (default) or CameraType.FREE.

Next, we set up the stage as in Part 1 and then perform the remaining initialisation of the 3D : all we need to do is specify the position for the camera, which rather handily, is accesible through the public function camera(). For this example we use exactly the same position as in Part 1.

    private function init3D():void {

      // position the camera
      camera.x = -100;
      camera.y = -100;
      camera.z = -500;
    }

The objects in the scene are identical to the previous example so I won’t go into detail here, however I should say that the scene is accessible through the public variable scene. The only remaining difference is the last line of the constructor when we start the rendering :

      // Start rendering the scene
      startRendering();

If you look at the the contents of startRendering() in the BasicView class, you’ll see that it simply adds a Flash frame enter listener calling a function called onRenderTick(event:Event=null). This method can be overloaded in our own inherited classes to perform any necessary changes to the scene.

And that’s all there is to it! The objective of this post was really just to show an alternative method of quickly setting up a 3D scene in Papervision3D. Its worthwhile examining the contents of the BasicView class and you’ll see that it performs exactly the same steps as shown in the previous example.

The next post should be along shortly and I’ll illustrate how some simple animation can be performed in the onRenderTick function.

Next article:

• First steps in Papervision3D : Part 3 - animation
  Adding some basic animation to the scene by modifying 3D object parameters when entering a frame.

In this post I hope to show how, in a few simple steps, we can create a simple 3D scene in Actionscript 3 using Papervision3D. As I’ve mentioned in previous posts, I’m no expert and am merely posting on the web the experiences I’ve had over the last few weeks in starting myself. A couple of useful links providing an introduction to 3D techniques and Papervision3D features provide a good starting point.

My main objective here is to highlight the principal elements necessary to render a 3D scene using certain principal pv3d classes namely Scene3D, Viewport3D, Camera3D and BasicRenderEngine. In the next post in this series I’ll show how Papervsion3D v2.0 provides a simple wrapper class, BasicView, that encapsulates all of these making it even simpler to get started. However, for this post I wanted to show the basic ingredients involved in Papervision3D.

Before starting, I’m assuming that you’re using Flex Builder 3 (or the Eclipse plugin) and have downloaded and compiled Papervision3D v2.0 (Great White) within this environment. You can check out these previous posts if you need help :

• Installing Flex Builder 3 plugin with Eclipse 3.4 (Ganymede)
• Installing Subversion (SVN) plugin for Eclipse
• Downloading and compiling Papervision3D (Great White) sources with SVN in Eclipse

1. Creating a new project
From the File menu in Eclipse, select New -> ActionScript Project. In the new project wizard, enter the name of the project (here I’ve called it FirstSteps) and click on Next.

We now need to specific the source path. Rather unimaginatively, I use src entered next to the Main source folder label. I also change the name of the Main application file to Example001.as. Note that this can also be changed later. The output folder I left as its default value. Next click on the Library path tab to set up the import of Papervision3D.

Initially only the Flex 3 classes are included and we need to import the Papervision3D ones. You now have two options : either link this project to the Papervision3D one (see my last post) by clicking on the Add Project… button or copy the compiled as3 library from that project into the new project and link to it by clicking on Add SWC… For this example I’m going to use the first option - I’ve found it useful over the last few weeks to be able to wander through the Papervision3D source code during the development stages. I don’t know if there’s an advantage or not with using one option rather than the other… In any case you can always change how you import Papervision3D later by modifying the project properties. So, for the time being, click on Add Project… and select the Papervision3D project that we created before.

2. Example001.as
We’re now ready to start our first example. Open the newly created Example001.as file and replace what’s been automatically generated with the following code. This example draws a wire-frame sphere and the x-, y- and z- axes. What I really want to illustrate though is how the scene is set up.

package {
 
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;
 
  import org.papervision3d.cameras.Camera3D;
  import org.papervision3d.core.geom.Lines3D;
  import org.papervision3d.core.geom.renderables.Line3D;
  import org.papervision3d.core.geom.renderables.Vertex3D;
  import org.papervision3d.core.proto.MaterialObject3D;
  import org.papervision3d.materials.WireframeMaterial;
  import org.papervision3d.materials.special.LineMaterial;
  import org.papervision3d.objects.DisplayObject3D;
  import org.papervision3d.objects.primitives.Sphere;
  import org.papervision3d.render.BasicRenderEngine;
  import org.papervision3d.scenes.Scene3D;
  import org.papervision3d.view.Viewport3D;

  public class Example001 extends Sprite {
 
    private var scene:Scene3D;
    private var camera:Camera3D;
    private var viewport:Viewport3D;
    private var renderer:BasicRenderEngine;
 
    public function Example001() {
     
      // set up the stage
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;
     
      // Initialise Papervision3D
      init3D();
     
      // Create the 3D objects
      createScene();
     
      // Initialise Event loop
      this.addEventListener(Event.ENTER_FRAME, loop);   
    }

    private function init3D():void {

      // create viewport
      viewport = new Viewport3D(0, 0, true, false);
      addChild(viewport);

      // Create new camera with fov of 60 degrees (= default value)
      camera = new Camera3D(60);
     
      // initialise the camera position (default = [0, 0, -1000])
      camera.x = -100;
      camera.y = -100;
      camera.z = -500;
     
      // target camera on origin
      camera.target = DisplayObject3D.ZERO;

      // Create a new scene where our 3D objects will be displayed
      scene = new Scene3D();
 
      // Create new renderer
      renderer = new BasicRenderEngine();
    }

    private function createScene():void {

      // First object : a sphere
     
      // Create a new material for the sphere : simple white wireframe
      var sphereMaterial:MaterialObject3D = new WireframeMaterial(0xFFFFFF);

      // Create a new sphere object using wireframe material, radius 50 with
      //   10 horizontal and vertical segments
      var sphere:Sphere = new Sphere(sphereMaterial, 50, 10, 10);

      // Position the sphere (default = [0, 0, 0])
      sphere.x = -100;

      // Second object : x-, y- and z-axis
     
      // Create a default line material and a Lines3D object (container for Line3D objects)
      var defaultMaterial:LineMaterial = new LineMaterial(0xFFFFFF);
      var axes:Lines3D = new Lines3D(defaultMaterial);

      // Create a different colour line material for each axis
      var xAxisMaterial:LineMaterial = new LineMaterial(0xFF0000);
      var yAxisMaterial:LineMaterial = new LineMaterial(0x00FF00);
      var zAxisMaterial:LineMaterial = new LineMaterial(0x0000FF);

      // Create a origin vertex
      var origin:Vertex3D = new Vertex3D(0, 0, 0);

      // Create a new line (length 100) for each axis using the different materials and a width of 2.
      var xAxis:Line3D = new Line3D(axes, xAxisMaterial, 2, origin, new Vertex3D(100, 0, 0));
      var yAxis:Line3D = new Line3D(axes, yAxisMaterial, 2, origin, new Vertex3D(0, 100, 0));
      var zAxis:Line3D = new Line3D(axes, zAxisMaterial, 2, origin, new Vertex3D(0, 0, 100));
     
      // Add lines to the Lines3D container
      axes.addLine(xAxis);
      axes.addLine(yAxis);
      axes.addLine(zAxis);

      // Add the sphere and the lines to the scene
      scene.addChild(sphere);
      scene.addChild(axes);
    }
   
    private function loop(event:Event):void {
      // Render the 3D scene
      renderer.renderScene(scene, camera, viewport);
    }
  

  }
}

When executed you should see a wireframe sphere to the left and the a red x-axis, green y-axis and blue z-axis (click on image to execute the Flash animation):

Now let’s go into a bit more detail into the code.

3. Initialising the stage
During the setup of the project we specified that Example001.as should be the main application file. This means that it has access to the stage and its associated variables. In the constructor of Example001.as we include the following lines of standard Actionscript code :

      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;

The first line indicates that rendered scene should be aligned to the top-left of the browser. The second indicates that the displayed scene will remain the same size when the browser window is redimensioned.

The other pure Actionscript part is to specify an event listener so that the scene can be drawn on the stage (and updated if the scene changes). This is specified using the event listener :

      this.addEventListener(Event.ENTER_FRAME, loop);

4. Initialising the 3D scene
There are three essential classes necessary to set up the scene : Scene3D, Viewport3D and Camera3D. I’d recommend playing around with the values that I’ve given in the code to see what differences they make - its always easier to learn through trial and error !

Firstly we specify the viewport which is added directly as a child of of Example001 and rendered on the stage :

      viewport = new Viewport3D(0, 0, true, false);
      addChild(viewport);

The first two parameters specify the size of the viewport (width and height respectively). By setting them both to 0 we indicate to Papervision3D that we want to use the full width of the stage. We could though for example have a viewport that is smaller than the stage. The first boolean value we pass is to resize the viewport when the stage (or browser window) is resized. The final value indicates that we are not rendering an interactive scene.

Next we set up the camera which specifies the user location relative to the scene and in which direction they are looking in. We imagine that the user is seeing the scene through a camera because variables such as zoom and focus can be specified.

      // Create new camera with fov of 60 degrees (= default value)
      camera = new Camera3D(60);
     
      // initialise the camera position (default = [0, 0, -1000])
      camera.x = -100;
      camera.y = -100;
      camera.z = -500;
     
      // target camera on origin
      camera.target = DisplayObject3D.ZERO;

The camera is created with a field of vision of 60 degrees, indicating the vertical visible angle. We then give it a position which by default is located at -1000 along the z-axis (positive values go into the screen). We then indicate that we want the camera to point towards the origin - if you leave this out you’ll notice that the camera by default looks along the z-axis.

Finally we create a Scene3D and a BasicRenderEngine.

      // Create a new scene where our 3D objects will be displayed
      scene = new Scene3D();
 
      // Create new renderer
      renderer = new BasicRenderEngine();

All 3D objects that we create with Papervision are added to the Scene3D, as we’ll see later, and the Renderer is used, as one might expect, to draw the scene.

That, at its very simplest, is how we set up Papervision3D before creating the 3D objects (actually, that’s not true : I’ll show in the next post an easier way !). As I said before, play around with the value and, more importantly, explore the Papervision3D code to see what the different parameters do.

5. Adding 3D objects to the scene
Here I’m going to add two simple objects to the scene : a sphere with a wireframe structure, and three lines to show the x-, y- and z-axes, each with a different colour.

We use a Papervision3D primitive object for the sphere - the people at Papervision3D have done all the hard work for us, all we need to do is give a few parameters for its size and amount of detail.

      // Create a new material for the sphere : simple white wireframe
      var sphereMaterial:MaterialObject3D = new WireframeMaterial(0xFFFFFF);

      // Create a new sphere object using wireframe material, radius 50 with
      //   10 horizontal and vertical segments
      var sphere:Sphere = new Sphere(sphereMaterial, 50, 10, 10);

      // Position the sphere (default = [0, 0, 0])
      sphere.x = -100;

First of all we create a new material. All objects in Papervision3D have an associated material. To name but a few examples, the material can be simply to display edges (as we use here), a coloured material for a solid colour, a shaded one that takes into account lighting or a bitmapped material to show images. If you explore in the Papervision3D source to org/papervision3d/materials you’ll find a huge variety. For our example we create a wireframe material (showing the edges of the polygons used for the sphere) having a white colour.

The sphere is then created with this material. We give it a radius of 50 and specify that it is made up of 10 horizontal and vertical segments.

After the sphere, we create the axes.

      // Create a default line material and a Lines3D object (container for Line3D objects)
      var defaultMaterial:LineMaterial = new LineMaterial(0xFFFFFF);
      var axes:Lines3D = new Lines3D(defaultMaterial);

      // Create a different colour line material for each axis
      var xAxisMaterial:LineMaterial = new LineMaterial(0xFF0000);
      var yAxisMaterial:LineMaterial = new LineMaterial(0x00FF00);
      var zAxisMaterial:LineMaterial = new LineMaterial(0x0000FF);

      // Create a origin vertex
      var origin:Vertex3D = new Vertex3D(0, 0, 0);

      // Create a new line (length 100) for each axis using the different materials and a width of 2.
      var xAxis:Line3D = new Line3D(axes, xAxisMaterial, 2, origin, new Vertex3D(100, 0, 0));
      var yAxis:Line3D = new Line3D(axes, yAxisMaterial, 2, origin, new Vertex3D(0, 100, 0));
      var zAxis:Line3D = new Line3D(axes, zAxisMaterial, 2, origin, new Vertex3D(0, 0, 100));
     
      // Add lines to the Lines3D container
      axes.addLine(xAxis);
      axes.addLine(yAxis);
      axes.addLine(zAxis);

The lines are created using the Line3D class. These lines need to be grouped together in a Lines3D object. As for the sphere, all these objects need to have an associated material : here we use the LineMaterial with different colours for each axis (red, green and blue for x, y and z respectively). Lines are defined simply by specifying two vertices. After they are created we add them to the Lines3D group.

We now have our main 3D objects. All that is left to do is add them to the scene.

      // Add the sphere and the lines to the scene
      scene.addChild(sphere);
      scene.addChild(axes);

We now have Papervision3D initialised and the 3D objects created and added to the scene. All that’s left is to render the scene.

6. Rendering the scene
As mentioned previously, we use the Actionscript event listener to call a method at every frame of the Flash movie. In this method we simply use the BasicRendererEngine that we created earlier to update the rendered scene.

      // Render the 3D scene
      renderer.renderScene(scene, camera, viewport);

The renderer takes the scene (our 3D objects), the camera (the observer’s position) and the viewport (where we see the scene) and performs all the necessary calculations to convert the 3D data into 2D displayable data.

So, there we are - a simple example of using Papervision3D. As always I’d recommend playing around with the code to get a feel for what the different parameters are doing and more so to go into the Papervision3D code itself which is well documented to get a better understanding of what each class does. In the next post I’ll show how Papervision3D v2.0 encapsulates the camera, scene, viewpoint and renderer into a single simple class, but I think its useful to see each individual element on its own to start off with. Hopefully this post illustrates how simple the API is to use and provides a useful first step in Papervision3D development.

Next article:

• First steps in Papervision3D : Part 2
  Illustration of use of new Papervision3D v2.0 class BasicView that encapsulates essential elements to rapidly start developing new 3D scenes.

In this post I aim to show you how to download the Papervision3D v2.0 (codenamed Great White) sources from their Subversion repository within Eclipse and compile them as an Actionscript 3 library.

For this I’m assuming that you have the Flex Builder 3 plugin installed (see a previous post on using this plugin with Eclipse 3.4) and, if you need to, read my last post on installing the SVN plugin (Subversive) in eclipse. Another source of information can be found on the Papervision3D FAQ.

In Eclipse, select Import… from the File menu item

From the popup that appears, select Projects from SVN in the SVN node of the tree - thanks to the Subversive Eclipse plugin - and click Next.

You’ll then be requested information on the SVN repository. We need to create a new one for the the Papervision3D source so select the Create a new repository location radio button and click Next.

In the following window we need to enter information about the Papervision3D respository location. Enter http://papervision3d.googlecode.com/svn/ in the text field next to the URL: label and click Next. Note that the URL given on the Papervision3D FAQ is http://papervision3d.googlecode.com/svn/trunk/. Eclipse automatically searches for the trunk directory, as you can see if you click on the Advanced settings tab, so we don’t need to give it here.

Eclipse then searches for the repository and provides a listing of available directories. You can browse through the trunk branches and you’ll see that there is the Great White branch as well as the previous version of Papervision3D (v1.5 ?) shown here for Actionscript 3. Select GreatWhite and click on Finish.

Eclipse starts to scan the repository and then requests how you would like to check out the project. Select Check out as a project configured using the New Project Wizard and click on Finish.

In the New Project wizard select Flex Library Project from the Flex Builder tree node and click Next.

Enter the name of the project you’d like to create - for example Papervision3D as I show below and click Next to set up the main source directory.

Enter src in the field next to the Main source folder label and select the radio button next to src under Classes to include in the library then click on Finish.

Eclipse will then start to check out the Great White branch from the Papervision3D repository and place them in a new project which can take several minutes. You should then see the new project in the Flex Navigator.

If, like me, you see the error message nothing was specified to be included in the library, then simply right-click on the project, select Properties and select Flex Library Build Path from the menu and click on the check box next to src under Classes to include in the library and click on OK.

You’ll see at the bottom right of the Eclipse window that it starts to compile the sources and when its finished if you open up the bin directory of the project in the Navigator you’ll see a newly created libary file called Papervision3D.swc that you can use in your Papervision3D projects (or otherwise link your other projects to the Papervision3D one when you configure them).

Also included in the import are some examples of using Papervision3D v2.0. These are useful to get started on Papervision3D projects. Similarly useful is to perform the same procedure as above and check out the previous version of Papervision3D (check out from a different branch from the repository as shown above when importing an SVN project). The API has changed quite a lot, but not completely. There are a lot of useful examples showing the different features. The source code is also well documented and its useful exploring the different Actionscript classes.

Anyway, I hope to provide some simple, concrete examples of using Papervision3D in the near future. In the meantime I hope this has provided a useful step in obtaining the source code using SVN in Eclipse (*) and please let me know if there’s anything missing.

(* by the way, I presume the same steps in installing SVN and obtaining the Papervision3D source code can be performed directly within the Flex Builder 3 application since it uses the Eclipse architecture - it’d be useful to know if you’ve tried it)

To download Papervision3D v2.0 (Great White) we need to have Subversion (SVN) installed (see the pv3d wiki). I’ve seen a number of posts on the web doing this using a separate SVN client (for example using TortoiseSVN in Windows, (shown here in a YouTube video tutorial), and svnX for the Mac). However, I’m a fan of Eclipse and have not come across a CVS client that works as well as that which is included with Eclipse so wanted to see how well SVN plugin compared. Plus with Eclipse being multi-platform I can move from Mac to Linux to Windows and have exactly the same interface for all of them - I guess my motto is be lazy because I’d really rather not repeat the same tasks using different applications wherever I go. What’s more, I use the Flex Builder 3 plugin for Eclipse and, as with my other projects, like to have the version control integrated into my development environment. For SVN, we need to install the Subversive plugin for eclipse.

To integrate SVN into eclipse I simply followed the instructions given on the Subversive download page. Before using the Subversive plugin we need to however download the SVN Connectors. The following illustrates how to do this using Eclipse Software Updates.

In Eclipse, selected the Help menu item, then Software updates… Click on the Available Software tab.

We first need to install the SVN Connectors that are available from polarion.com, from where the Subversive plugin originates. Click on Add Site… and type the following address : http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/

When you click OK you’ll see a new list of components available for installation.

Click on the check box next to the polarion to select all the components and then click on Install…

NOTE : If you’re using a Mac you must deselect both the JavaHL Win32 Binaries otherwise there are unresolved conflicts when it comes to installing the Subversive plugin.

You should now be presented with a summary of all the components to be installed.

Click Next and accept the terms of the license agreement. The components are then downloaded and installed. You’ll then be asked whether you want to restart eclipse - its probably a good idea to do this.

When Eclipse restarts we need to go through the same procedure to install the Subversive plugin. As before, select Software Updates… from the Help menu item and then click on Add Site… Now type the address of the Eclipse Subversive update site : http://download.eclipse.org/technology/subversive/0.7/update-site/

Click OK and select the newly proposed components for Subversion :

Click on Install… and you’ll get a summary of the new components to install.

Click Next and agree to the terms of the license agreement and Eclipse will start to download and install the Subversion plugin. As for the SVN Connectors, restart Eclipse when prompted.

And that’s it ! You should now have SVN fully working within Eclipse. Just to check, if you select
Import… from the File menu item you should have the possibility of importing a project from SVN.

So now that we have Subversive up and running in Eclipse, we can now move onto the main objective of installing Papervision3D v2.0 (Great White) from its SVN repository.

At the time of writing, the Adobe Flex Builder 3 plugin is not compatible with Eclipse 3.4 (Ganymede). Flex Builder requires a version 3.3 of Eclipse during its installation and will report an error when you point it to a 3.4 version. However you can force it to continue with the installation and then install a patch, available with thanks to Tekool.net. For the patch to work fully you need to cleanly restart Eclipse (as mentioned in the comments on the linked post) :

eclipse -clean (on windows, or)
./eclipse -clean (on mac/linux)

This is needed only once - after this the plugin works fine with the latest version of Eclipse.

Having developed over the last few years a number of 3D applications using OpenGL in both C++ and Java, I recently wondered what the possibilities were in producing a web-based application. Obviously OpenGL has an advantage of being hardware accelerated so my initial thoughts on this were rather pessimistic : how can software rendering produce anything comparable ? …

… within a few minutes of searching on the web my opinion was totally changed.

Ok, so maybe its too early to assume that calculation-intensive applications such as 3D games or data visualisation are going to become web applications - after all, these rely heavily on (and are designed in light of) hardware processing power - but 3D animation and effects can be reproduced using a number of Actionscript-based libraries providing some impressive and beautiful sites. Here are just a few commercial sites using 3D techniques that caught my attention just to give you an idea…

• Red Bull Flugtag Flight Lab
• Fifa Street3
• WHITEvoid
• TiltViewer
  

From a number of Actionscript libraries (*) available for producing 3D Flash applications (including Papervision3D, Away3D, Sandy3D and Alternativa3D) I’ve decided to concentrate on Papervision3D (or pv3d). A number of posts on the web seem to imply that it is good in performance compared to other 3D engines and there seems to be a large number of demos illustrating its capabilities… Mr.doob’s blog, for example, has a very impressive list. Having said that, I have tried Sandy3D as well. I was impressed by the documentation and tutorials - getting started using this library is very rapid and very well explained. Pv3d, by comparison, is trickier to setup and get started with… acutally, having said that, maybe that’s just because I went straight for the v2.0 (or Great White as its code-named) which isn’t officially released yet ! I guess I have some kind of predeliction for doing things the hard way…

Anyway, all that’s just a build up to explain why I started this blog. I’m new to both Actionscript and Papervision3D and have had a lot of fun over the last couple of weeks getting started and making my first 3D Flash applications. I’ve found a lot of useful sites along the way and just wanted to regroup this information so that maybe it’ll be useful for others too.

(* actually at the time of writing this I’ve just seen that Adobe is releasing native 3D support in the new Flash Player 10)