Posted by …

Jul 18 2008
11 Comments
Architecture, AS3, Flash, Programming

Papervision3D Part 1: Introduction

by

I have many friends asking me for more information on Papervision 3D. Usually, they’re just genuinely interested in learning about it and also how they can use it. These friends are bright people, but generally unfamiliar with the topic of computer graphics. I’ve consistently directed them to Wikipedia articles that I think will make everything clear to them (in this order):

  1. Computer Rendering
  2. Rasterisation
  3. 3D Projection
  4. Matrix Multiplication

Unfortunately, I think people are reluctant to read those articles because they’re half written in math formulas. Those formulas are critical for getting a real understanding of what’s going on “under the hood” but I admit they’re annoying to read if you don’t really want to learn the math. And also, those articles won’t mention a single Papervision class file anywhere (naturally). I’m sure this is a little less exciting for someone who’s into 3D in Flash. Therefore, I’m reviewing and dissecting Papervision3D 2.0 (Great White) in a multi-part series for those who are curious about 3D in Flash.

Part 1 will review those Wikipedia articles and relate them to Papervision along the way. If you’re already familiar with computer graphics as a topic of CS, you may wish to skip this post. Parts 2 & 3 will review the details of many features of Papervision3D. Part 4 will be a set of useful notes and tips for anyone who’s not already experienced with Papervision3D.

Continue reading →

Jul 09 2008
6 Comments
AIR, Architecture, AS3, Flash, Flex, Programming

Actionscript 3 performance tuning review

by

After late-night conversations amongst coworkers and friends over beers, I’ve discovered that many flash developers remain unfamiliar with AVM2′s inter workings. A while ago, I found a couple documents which have benefited me greatly in understanding AVM2 and AS3:

Actionscript 3.0 and Performance Tuning

AVM2 Overview

There are definitely some big take-aways in these two documents. I would list them here, but then you might not read them for yourself! ;)

The first document is 74 powerpoint slides (prepared by Gary Grossman of Adobe) which is very useful for getting a quick understanding of AVM2 topics such as garbage collection, the benefits of strong typing, the Actionscript byte code (abc) format, the code interpreter and JIT compilation. For an AS3 developer this is a must-read.

The second document is a bit more dense. It contains 108 pages of more formally described underpinnings of the virtual machine. It focuses a lot on how your AS3 code will ultimately be run as processor instructions. Its a great follow-up to the first document. If you’re a geek, I would highly recommend reading this overview.

Jun 02 2008
2 Comments
AS3, Flash, Programming

Flash Site Experience Profile

by

This is essentially the second part to my last post. This time however, I’m concentrating on the user experience of the same campaign site (www.starbuckscoffeeathome.com) based on tracking data. I’ve used a custom-built statistics class which helped me to derive plenty of useful numbers from a normal user experience flow. My method was to record all important events and normal status data like the amount of external data loaded, the frame rate, and the memory usage. After recording the information I designed an infographic about what I discovered. You can see the graph here.

As you can see, there’s some disappointing trends. I noticed there seems to be a memory issue -something that must have become unresolved before final launch. The framerate reflects the usage on my trusty Intel 2 Ghz Mac Book Pro. Very unimpressive considering this is a decent machine really. I’m sure there’s a little bit of overhead which came from the statistics activity. Although the experience didn’t seem out of pace with the same one when the statistics class inactive. After considering when the average user leaves the site, I decided to make a second graphic which can be seen here.

And this is a little bit unfortunate. I will confess however that the connection speed on the machine I recorded the statistics with was a very slow DSL. A DSL connection would’ve produced more favorable results (assuming the user wasn’t doing other download work in the simultaneously). Although, as you can see a very large amount of time is consumed by watching a loader which brings me to the point of this post. If you build Flash sites which rely upon a pleasant user experience, then make sure all the content you load is well worth its weight.

May 24 2008
7 Comments
Architecture, AS3, Flash

Code Documentation

by

I recently finished a campaign site for Starbucks in order to promote the Starbucks brand of coffee available in grocery stores. The address is www.starbuckscoffeeathome.com. It was a very pleasant project to work on, but it was also quite fast paced. The project also remained in a state of high flux until launch. These two aspects combined made it nearly impossible to keep accurate comments on my code. So, after this project was complete I decided to re-write my UML for it based on the way it ended up (rather than the way I originally designed it). After doing so I’ve come to believe this serves as better and more digestible documentation for a developer than most inline commenting. Thats not to say it would completely replace code commenting, but I feel as though its more useful for another developer to see in order to get a grasp on how a body of code works. For this diagram I didn’t have the right tools available to me immediately so I used what I had (which was Adobe Illustrator). This required a greater investment of time, but the time consumed was likely on par with the amount of time required to produce sufficient written documention. For most practical situations, a simple sketch would suffice. Have a look at the diagram (and submit your critiques if you like).

Download the Starbucks basic class UML (PDF).

I’ve also conducted a certain amount of performance profiling that I will write up in the near future.

May 01 2008
1 Comment
Hydra, Programming

Pixel Shading and Adobe AIF

by

Pixel shading is a feature supported on graphics hardware starting with the Radeon R200 based cards (8500-9250) and the GeForce FX series. Though pixel shading was first specified in OpenGL 1.1 and DirectX 8, it wasn’t implemented by consumer grade hardware until OpenGL 1.4 and DirectX 8.1. These consumer grade cards are enumerated on the Adobe Labs AIF toolkit page . Before shaders existed the graphics pipeline for real-time rasterisation (via a GPU) was fully procedural and the only means by which a programmer could interact with that processing pipeline was to use the standard APIs. However with shaders, any 3D author has the power to fully control the rasterisation algorithm at the frame buffer level. The only downside to this level of control is that the shader must be pre-compiled before put into use. Nvidia has recently opened the doors up more by introducing CUDA. It would be really interesting to see Adobe produce something similar (but cross-platform) with some future version of Flash. Whether that would be a good or bad thing can be debated and discussed for a long time.

Last night I decided to break out the AIF toolkit again and work some mathy expressions into a filter. Up to this point most of the filters that I’ve seen are along the lines of what you will find in Photoshop’s menus. Those filters certainly aren’t bad, but I’ve always been more interested in how an image can be sampled and reconstructed in a manner not unlike what’s found in the 90′s DJ scene. So with that introduction I’d like to demonstrate my latest filter.

Ripped Filter (v3) image 01

Ripped Filter (v3) image 02

Just like in Flash, you can think of the canvas as a 2D coordinate plane. For this filter I used a few trigonometric and polynomial expressions in combination. Most of the polynomial coefficients are also parameters that you can manipulate which is where all the fun is. More to come, stay tuned.

Download the filter.

Newer posts →