MarcPelland.com » Papervision http://www.marcpelland.com blog and portfolio Sun, 17 Jul 2011 22:42:56 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Papervision3d GUI (PaperFace) Team http://www.marcpelland.com/2009/04/20/papervision3d-gui-paperface-team/ http://www.marcpelland.com/2009/04/20/papervision3d-gui-paperface-team/#comments Mon, 20 Apr 2009 12:15:47 +0000 MarcPelland http://www.marcpelland.com/?p=258 In late January I started a project called PaperFace, it is a giant project that is an attempt to build a web-based front end for Papervision. It would allow designer to start harnessing more of the 3d power on the web, plus it could make creation of Papervision 3d scenes much quicker for developers as well.

I quickly realized that I don’t have enough time to make this thing on my own, but being stubborn, I tried anyways. Well, I haven’t had time to even really think about it for over a month now but would like to get back at it.

What I have decided to do is to try and create a team of 3 or 4 developers to try and get this this off the ground and working, because I really feel that it would be a benefit to the Flash community. If you would like to help out, I am looking for a couple people that have experience in both Flex and Papervision.

Here are some of the areas that we need some specific help with :
Interface Design
Flex Development
Papervision Development

If you are interested, you can check out www.paper-face.com to see the app and email me at marc@marcpelland.com and we can get going on this. One thing to note is that there is no compensation for the work done on this project but I would like all involved to take it seriously. It will be a good learning experience and hopefully a helpful tool for the industry.

thanks,
Marc Pelland

]]> http://www.marcpelland.com/2009/04/20/papervision3d-gui-paperface-team/feed/ 1 Getting Started with Augmented Reality / FLARToolKit http://www.marcpelland.com/2009/03/26/getting-started-with-augmented-reality-flartoolkit/ http://www.marcpelland.com/2009/03/26/getting-started-with-augmented-reality-flartoolkit/#comments Thu, 26 Mar 2009 19:17:22 +0000 MarcPelland http://www.marcpelland.com/?p=235 Table of Contents

Overview

Hello FlarToolKitWhat is Augmented Reality?

Augmented Reality is a technology that allows you to superimpose images into real-time environments. For the purposes of this tutorial, you just need to know that it reads a marker (shape/symbol), interprets the angle and size of that marker and then allows you to place objects at that size and position on the screen (or whatever your medium is).

Here are a couple example videos:

Mini Video and the GE Site

What is FLARToolKit?

To start with ARToolKit is the development package that has allowed developers to tap into the power of Augmented Reality. FLARToolKit is an Actionscript 3 port of the Java version of the toolkit.

What do I need for this tutorial?

In this tutorial, we are going to use FLAR Manager, which is a framework setup to make the combination of Papervision 3D and FLARToolKit easy and quick to setup/use.

If you would like to simply use FLARToolKit (or just get a little more information about it) clik on the following link: http://www.libspark.org/wiki/saqoosha/FLARToolKit/en

Otherwise, download FLARManager (using v0.1 in this tutorial) from http://words.transmote.com/wp/20090309/flarmanager-v01/ . FLARManager actually comes with a build of FLARToolKit in it and you can get it for AS3/FP9 or AS3/FP10 (we are using FP10).

You will also need FlashDevelop or another Actionscript editing tool. In this tutorial I am going to be compiling my code directly from FlashDevelop, but feel free to use the compiler/method of your choice.

You should also get a pattern generator so that you can create your own patterns (markers). Go here for more details: http://www.squidder.com/2009/03/05/for-nerds-only-custom-flar-markers-explained/

What else should I know?

You should be aware of the fact that there is a licensing fee to use check here: http://www.hitl.washington.edu/artoolkit/license.html for more details.

]]> http://www.marcpelland.com/2009/03/26/getting-started-with-augmented-reality-flartoolkit/feed/ 16 PaperFace – Papervision GUI http://www.marcpelland.com/2009/02/04/paperface-papervision-gui/ http://www.marcpelland.com/2009/02/04/paperface-papervision-gui/#comments Wed, 04 Feb 2009 15:14:53 +0000 MarcPelland http://www.marcpelland.com/?p=197 Hey all,
This may be a little bit pre-mature, but I would like to announce the launch of a new site. It is called PaperFace.

PaperFace is a graphical user interface for Papervision 3D. The goal of the app is to build out 3d scenes without the need to write all the initial code. I am hoping to build it to a state where designers can come in and build a fairly complete scene and export the code to someone that can do something with it. Please go register and tell me what you think. Check out the forum on the site, and post any feedback you may have.

The app is no-where near completion, but I thought it would be good to get some thoughts on it throughout the course of development. Plus, now that it is live it puts a little bit of extra pressure on me to work more on it.

the address is www.paper-face.com

]]> http://www.marcpelland.com/2009/02/04/paperface-papervision-gui/feed/ 29 Using Papervision Object Parsers http://www.marcpelland.com/2009/01/29/using-papervision-object-parsers/ http://www.marcpelland.com/2009/01/29/using-papervision-object-parsers/#comments Thu, 29 Jan 2009 15:38:09 +0000 MarcPelland http://www.marcpelland.com/?p=153 Table of Contents

Introduction

Overview

With all the different 3d applications in use today it is hard to come up with one standardized format. So Papervision includes a number of parsers that can interpret some of the different types of 3d files. This gives developers and modelers some freedom as to which application they would like to use.

Located within each parser class in Papervision is a little bit of a write-up that explains what the parser can do and what it can’t. In this tutorial, I will just introduce you to each type; basically re-iterating what is in the class (for ease of access). Then I will run through some examples for how to use a couple of the parsers to load your objects.

What does a Parser do?

As stated above, a parser just interprets whatever is in the 3d asset file and translates it into something that Papervision can read.

Every file format has a core structure that remains the same, so the developers of Papervision have just made an translators for all of these core structures.

Where are the Parsers?

The parsers are located in the Papervision codebase under: src/org/papervision3d/objects/parsers.

]]> http://www.marcpelland.com/2009/01/29/using-papervision-object-parsers/feed/ 22 Guide to Getting Started in Papervision 3D http://www.marcpelland.com/2009/01/22/guide-to-getting-started-in-papervision-3d/ http://www.marcpelland.com/2009/01/22/guide-to-getting-started-in-papervision-3d/#comments Fri, 23 Jan 2009 01:13:13 +0000 MarcPelland http://www.marcpelland.com/?p=100 Introduction

Table of Contents

Overview

Papervision 3dIn this tutorial you will learn a little bit about what 3D is and how it is used on the web. As well as how to harness tools that have been created for you to build your own 3D experiences.

I am going to start out with a brief discussion and introduction of 3D and what Papervision brings to the table and then move on to the full tutorial. The files for the tutorial can be found by clicking here: tutorial files

What is 3D?

A standard website is created in 2D space; that is it consists of objects (text, images, video, etc) on an X and Y plane. People have faked perspective in the past using graphics tool, but in general it has been 2D. What 3D does is add another dimension to that traditional plane. Alongside the X and Y, there is now a Z. This 3rd dimension allows for depth to be shown.

circlesI remember my entry exam for college, I had to look at a series of shapes and come up with any number of ideas for what it could be. For instance, if you look at a circle with another circle inside it you would think that it was just two circles. If you were told to imagine those same two circles in 3D space the possibilities are much greater as to what they are. It could be a bowling pin from the top, an empty glass, a garbage can, or a football being tossed into the center of a hoop.

If you are having still having trouble envisioning the 3rd dimension, here is a great video/project by Rob Bryanton explaining how dimensions work:

What is Papervision?

Papervision is a 3D engine built with Actionscript that enables developers to start working in 3D. Using a ton of math, the Papervision team has found a way to create a simulated 3D environment.

Papervision consists of a ton of Actionscript classfiles that developers can use to create objects, scenes, and even worlds in 3D space. 3D applications and engines generally build objects using smaller objects, Papervision is no different. It uses triangles as the building blocks for larger objects in the scene. The more triangles that are used, the better the quality but more triangles means that it is harder on the processor.

Being open-source, developers are able to see all the code that they are working with which allows for a better understanding of what they are using. This also means that the development community has to ability to build on what the original developers have done without having to go through the hardships involved in extending something that is not open-sourced.

Open source means that it can be easier to understand how a complex system works because you can view all of the code that it was built with. If you have any more questions regarding the benefits of an open-source system, there is a good article located here: http://www.directionsmag.com/article.php?article_id=889&trv=1

Why use Papervision?

greatwhitePapervision is a great 3D engine for Flash, but there are others. These include Sandy, Away3D, Alternative, and more. When push comes to shove it is more of a personal preference that I came to like working with Papervision.

I think that the biggest reason to use Papervision (other than comfort from it being the first engine that I tried) is that it is so widely supported in the Flash community. I seem to be able to find more help with Papervision than with any of the other application. Having the ability to tap into the minds of other developers in forums, at conferences, and anywhere really is a priceless tool.

What has been done with Papervision?

I have to start off with a site that I had a hand in building, and that is www.amg-360.com. Apart from a couple of prototypes, this was my first major 3D application for the web.

Some other good examples can be found at: http://dailypv3d.wordpress.com

]]> http://www.marcpelland.com/2009/01/22/guide-to-getting-started-in-papervision-3d/feed/ 48 New Portfolio in the Making http://www.marcpelland.com/2008/12/09/new-portfolio-in-the-making/ http://www.marcpelland.com/2008/12/09/new-portfolio-in-the-making/#comments Wed, 10 Dec 2008 02:26:46 +0000 MarcPelland http://www.marcpelland.com/?p=86 Marc Pelland PortfolioI was working on some stuff for a couple friends last night, and some other stuff for work when I decided that I wanted a little break to work on something for myself. So I got myself a beer and sat down at my laptop. For a long time now I have been planning on doing something interesting to my portfolio. I had thought maybe something with papervision and maybe something with a different approach to dynamic content. So that is where I began.

When I first created my portfolio, I did it quickly in HTML just to have something online. I made sure that the syntax was valid just in case I decided to create something to parse it with. Well that was my first step for the new creation. I used E4X to grab and parse the correct div within my current HTML portfolio. From there I just built out a little data model to grab whatever I might need from the parsed HTML structure.

Now I needed to do something with it. Why not Papervision, I have a couple projects under my belt now and just happened to update my local copy because I am using it on another project right now. So I just started playing around with the interaction and ways of displaying content.

After a couple hours I was pleased and went back to my other work. I picked it up today after work for an hour or so and would like to say I am very happy with the direction that it is taking. Let me know what you think so far.

click here to see the latest built

]]> http://www.marcpelland.com/2008/12/09/new-portfolio-in-the-making/feed/ 16 Motion Tracking and Papervision http://www.marcpelland.com/2008/05/07/motion-tracking-and-papervision/ http://www.marcpelland.com/2008/05/07/motion-tracking-and-papervision/#comments Wed, 07 May 2008 14:35:26 +0000 MarcPelland http://www.marcpelland.com/2008/05/07/motion-tracking-and-papervision/ A couple of days ago I posted my first attempt at motion tracking in AS3 using a webcam and promised that I would play a little bit more with it. Well, I got a little bit anxious and before refining the tracking code I decided to put it to use.

You may have seen the video of head tracking using the Nintendo Wii. That video inspired me to try my hand at the same concept using Flash, Papervision 3d, and my newly discovered love for trying to get motion tracking / facial recognition into Flash.

Motion Tracking and Papervision

As such, I have created this example which is my first step in creating some sort of tracking interaction with a 3d scene. if you would care to see a little bit more detail about what is going on, hit X to see the video and W to see the framerate. Stay tuned for more updates as I update the tracking code. Once again, I will post the source when it is a little further along.

** please note that you require a webcam to take advantage of the motion tracking, if you do not have a camera the scene’s camera is simply controlled by the mouse.

]]> http://www.marcpelland.com/2008/05/07/motion-tracking-and-papervision/feed/ 96 FITC – Papervision Workshop / Kickoff http://www.marcpelland.com/2008/04/20/fitc-papervision-workshop-kickoff/ http://www.marcpelland.com/2008/04/20/fitc-papervision-workshop-kickoff/#comments Sun, 20 Apr 2008 15:13:43 +0000 MarcPelland http://www.marcpelland.com/2008/04/20/fitc-papervision-workshop-kickoff/ I am here in Toronto and glad to be here! I left a blizzard in Calgary to come to sunny Toronto and attend the Flash in the Can conference. Yesterday, I went to a Papervision 3d workshop run by Ralph Hauwert (www.unitzeroone.com) who showed us just how much can be done with 3d on the internet and he was kind enough to share some knowledge and code with the group.

I can’t say that I was blown away by what I saw and learned because it was a very low-level session but I believe that I am taking away a good base to start on my own projects with Papervision. I recommend similar workshops to anyone who doesn’t know much about Papervision and would like to see what it is about and get a good understanding of what it is and how to use it.

Following the full day workshop, I attended a little function in Kensington Market with a presenter from Graffiti Research Lab (graffitiresearchlab.com) that showed some of what they are all about and some of their latest works. It was quite inspiring to see what they have been up to and their methods.

To top off the night, the FITC kickoff party at the Burroughs was a lot of fun. The venue had a unique style that I am not used to seeing in Calgary. I had a good time talking with people from around the industry and meeting as many people as possible. It also gave me a chance to catch up with some old friends and co-workers that I don’t get to see since I moved to Calgary.

I am now sitting here on the official Day 1 of the conference waiting to hear what Colin Moock (www.moock.org) has to say about Actionscript 4.

]]> http://www.marcpelland.com/2008/04/20/fitc-papervision-workshop-kickoff/feed/ 1 Papervision Actionscript 2 BitmapFileMaterial http://www.marcpelland.com/2008/04/16/papervision-actionscript-2-bitmapfilematerial/ http://www.marcpelland.com/2008/04/16/papervision-actionscript-2-bitmapfilematerial/#comments Thu, 17 Apr 2008 00:31:11 +0000 MarcPelland http://www.marcpelland.com/2008/04/16/papervision-actionscript-2-bitmapfilematerial/ I have kept it no secret that I would really like to become much more familiar with Papervision. This means playing around with it. While I would ultimately like to be able to use AS3, I decided that I would like to learn a little bit about PV3d in a more familiar language.

Upon decided to try a project in AS2, I instantly discovered that there are many short-comings when comparing the capabilities the AS2 version to the AS3 version. One thing that I felt I needed to do was load external images as materials for objects. I searched and I searched and didn’t really find much to support my need. I did manage to find a class called LoadArrayMaterials written by JLM at Justinfront DOT net. This was very helpful, but I thought that I might like to load one image at a time.

I decided to write the class myself using the guidance of JLM’s classfile. The result, a quick class that does just what I want !

/***************************************************************************
  1. * BitmapFileMaterial
  2. *
  3. * uses the functionality from the built in BitmapMaterial
  4. * in PV3D to allow the user to assign an external image
  5. * to a material in as2
  6. *
  7. * @author: Marc Pelland
  8. * @date: April 13, 2008
  9. *
  10. * ***************************************************************************
  11. * Example:
  12. *     var myMaterial:BitmapFileMaterial = new BitmapFileMaterial();
  13. *     myMaterial.loadImage(__applicationData.pages.page[i].image.text);
  14. *     myMaterial.onLoadInit = function( material ) {
  15. *         material.oneSide = false;    // double sided
  16. *         material.smooth = true;        // smoothing
  17. *     }
  18. ***************************************************************************
  19. * credit to JLM at Justinfront DOT net for LoadArrayMaterials class
  20. ***************************************************************************/
  21.  
  22. import org.papervision3d.materials.BitmapMaterial;
  23. import com.dynamicflash.utils.Delegate;
  24. import flash.geom.Rectangle;
  25. import flash.display.BitmapData;
  26.  
  27. /***************************************************************************
  28. * The BitmapFileMaterial class creates a texture from an external file
  29. *
  30. */
  31. class com.marcpelland.as2.papervision.materials.BitmapFileMaterial  {
  32.  
  33. // store the material info
  34. private var __bitmapMaterial:BitmapMaterial;
  35. public function get bitmapMaterial():BitmapMaterial {
  36. return __bitmapMaterial;
  37. }
  38.  
  39. private var __materialHolder_mc:MovieClip;    // holder for the material
  40. private var __loadListener_obj:Object;        // load listener
  41. private var __loader_mcl:MovieClipLoader;    // movie clip loader
  42. private var __path:String;                    // file path
  43.  
  44. // set a separate load init function
  45. private var __onLoadInit:Function;
  46. public function set onLoadInit(ARG_func:Function):Void {
  47. __onLoadInit = ARG_func;
  48. }
  49.  
  50. /***************************************************************************
  51. * CONSTRUCTOR
  52. ****************************************************************************/
  53.  
  54. function BitmapFileMaterial() {
  55. init();
  56. }
  57.  
  58. /***************************************************************************
  59. * PUBLIC FUNCTIONS
  60. ****************************************************************************/
  61.  
  62. /***************************************************************************
  63. * load image function
  64. *
  65. * @param ARG_filePath – path to the image file
  66. *
  67. * creates a clip holder, moves it off screen and loads
  68. * the image into the holder
  69. */
  70. public function loadImage(ARG_filePath:String):Void {
  71.  
  72. // updates bitmap material ( designed to not overwrite material already assigned )
  73. __materialHolder_mc = _root.createEmptyMovieClip( 'materialHolder__' + _root.getNextHighestDepth(), _root.getNextHighestDepth());
  74.  
  75. // place off screen
  76. __materialHolder_mc._x = -5000;
  77.  
  78. // load the image into the holder
  79. __loader_mcl.loadClip( ARG_filePath, __materialHolder_mc );
  80.  
  81. }
  82.  
  83. /***************************************************************************
  84. * PRIVATE FUNCTIONS
  85. ****************************************************************************/
  86.  
  87. /***************************************************************************
  88. * init function
  89. *
  90. * initialize the loader
  91. */
  92. private function init():Void {
  93.  
  94. // set up the loader
  95. __loader_mcl = new MovieClipLoader();
  96.  
  97. // set up the listener
  98. __loadListener_obj = new Object();
  99.  
  100. // add the load int functionality
  101. __loadListener_obj.onLoadInit = Delegate.create(this, loadInit);
  102. __loader_mcl.addListener(__loadListener_obj);
  103.  
  104. }
  105.  
  106. /***************************************************************************
  107. * loadInit function
  108. *
  109. * the image has been loaded and all is ready to move on
  110. */
  111. private function loadInit():Void {
  112.  
  113. // get the material into a BitmapMaterial
  114. __bitmapMaterial =  writeMaterial();
  115.  
  116. // run the custom load init command
  117. __onLoadInit( __bitmapMaterial );
  118.  
  119. }
  120.  
  121. /***************************************************************************
  122. * write material function
  123. *
  124. * create a bitmap and copy the data from the movieclip
  125. * to the bitmap, return the bitmap
  126. */
  127. private function writeMaterial():BitmapMaterial {
  128.  
  129. // draw movie on bitmap
  130. var bitmap = new BitmapData(__materialHolder_mc._width, __materialHolder_mc._height, false, 0×000000);
  131. bitmap.draw(__materialHolder_mc);
  132.  
  133. var rectangle:Rectangle = new Rectangle(0 , 0, __materialHolder_mc._width, __materialHolder_mc._height );
  134. bitmap.copyPixels( bitmap, rectangle, rectangle );
  135.  
  136. // assign material
  137. var material_bm:BitmapMaterial = new BitmapMaterial(bitmap);
  138.  
  139. // remove the temp clip
  140. __materialHolder_mc.removeMovieClip();
  141.  
  142. return material_bm;
  143. }
  144.  
  145. }
]]> http://www.marcpelland.com/2008/04/16/papervision-actionscript-2-bitmapfilematerial/feed/ 4 Flash In The Can – Toronto http://www.marcpelland.com/2008/03/27/flash-in-the-can-toronto/ http://www.marcpelland.com/2008/03/27/flash-in-the-can-toronto/#comments Thu, 27 Mar 2008 15:08:12 +0000 MarcPelland http://www.marcpelland.com/2008/03/27/flash-in-the-can-toronto/ Flash in the CanFlash in the Can Toronto 2008 is quickly approaching, and I am getting very anxious to go. I used to attend the conference every year but missed it last year since I now live in Calgary. Critical Mass is nice enough to send me to the conference this year in hopes that i pick up a couple tips and tricks to show off when I get back. So I get to go back to Toronto!

If you are considering going to the conference, I highly recommend it if not just for inspiration. Being in the presence of the industry leaders is usually enough to get my mind going a mile a minute. Another incentive is that the great folks at FITC appear to be giving a couple last minute ticket discounts. I came across one such discount on moockblog.

While at the conference I will be attending the Papervision 3d workshop which I hope gives me the final push and confidence to start really getting into pv3d. I hope to take in a lot of the technical presentations that are being offered and I will be posting my notes and work throughout the conference.

Flash in the Can

]]> http://www.marcpelland.com/2008/03/27/flash-in-the-can-toronto/feed/ 0