I'm now finished my first official project using Papervision. Even though there's been the expected learning curve while learning a new library, the project went smoothly. Prototyping and concepting were a breeze. I hit all my deadlines and milestones, with time to spare. The entire project schedule, I compiled, viewed the piece in Firefox, and saw something like this:

So you can imagine my surprise and dismay when, on a Friday afternoon a little before launch, we moved it over to the dev server and the page where it would live and saw this:

Now I've seen some weird behavior between browsers, but never anything like that - and especially not in Flash!

Then things started to get really strange. Trying to get some insight on what might have happened, I decided to check it out in Safari for the Mac. I soon wished I hadn't...

So, after I had a wee little cry, I started combing the Papervision forum over at Nabble. But no one had ever run into a similar problem. The basic gist behind the magic of Papervision - and most 3D libraries for that matter - is that it takes bitmaps and skews them along an imaginary surface using a matrix. I had the cubes in my pieces separated into 12 of these surfaces, two for each side. The first issue was clearly showing a gap where these surfaces were suppose to meet seamlessly, and the second was doing the opposite, only showing the content on the edges themselves. 

Panic was just starting to set in when Pavel, my partner in crime and Pivot and Levy's resident server-side guru, found something. When he changed the background color of the div where the second issue was occurring to black, the issue went away.

"Ok, it's a transparency issue. Now, where have I run into the most issues with transparency?" I said. "Hmm, I bet it's that pesky little attribute, wmode." I replied. Sure enough, I had copied and pasted a embed tag that had declared the wmode as transparent. So, I figured I'd just set it to the default and go about my weekend.

"Not so fast!" said Mr. wmode. That merely balanced out the rendering problem between browsers. Safari now had the milder, although still debilitating, first issue, instead of the mind-blowingly horrific second one. And Firefox and IE now always had it, no matter what color the background. It was progress, at least. Although at the time I didn't know in which direction

So I cried some more. But then I ran through my code some more as well, looked over every object and property, trying to find anything that might affect transparency. I paused over the MovieMaterial objects that I used to take the Flex components behind the app and populate them to surfaces of the cubes. One of the properties of the MovieMaterial Class is "transparency", but I had it set to false. After all, the surfaces of my cubes didn't need transparency, so why ask the player to try and render different opacities. But I was desperate, the same kind of desperate the makes you look for your keys in the freezer, so I switched it to true and pressed the Run button. 

Bam! Eureka! Bug fixed.

There are two morals to this story. One, even cocky Flash developers need to check their apps in other browsers. And two, always set your MovieMaterial to transparent when using the Papervision3D library.