If I’m perfectly honest I really can’t stand animated gifs (as a format), simply because the compression is really poor and the resulting filesize is usually huge. Never the less it’s pretty university accepted on the old interwebs, so I thought it might be handy to have a fast and easy way of applying them to Away3d materials.
My fork of “Flash-Animated-GIF-Library”
My fork of “away3d-core-fp11″
First step is to load or embed your gif.
In my case I’m simply going to embed it.
[Embed(source="image.gif", mimeType = "application/octet-stream")] public static const data:Class;
Next create a new GIFPlayer instance and add a GIFPlayerEvent.COMPLETE event listener
gifPlayer = new GIFPlayer(true); gifPlayer.addEventListener(GIFPlayerEvent.COMPLETE, OnDecodeComplete); gifPlayer.loadBytes(new data());
Then all you need to do is create a GifTexture and a GifMaterial and your home free.
var texture:GifTexture = new GifTexture(gifPlayer); var gifMaterial:GifMaterial = new GifMaterial(texture);
Animated Gif applied to a plane
var geo:PlaneGeometry = new PlaneGeometry(gifPlayer.width, gifPlayer.height, 1, 1, false); var mesh:Mesh = new Mesh(geo, gifMaterial); addChild(mesh);
Animated Gif applied to a cube
var geo:CubeGeometry = new PlaneGeometry(200,200,200,1,1,1,false); var mesh:Mesh = new Mesh(geo, gifMaterial); addChild(mesh);
In part 1 of this post (Which can be viewed here) I discussed various approaches to creating a AGAL vertex shader within the away3d framework. I successfully created a custom material and pass that achieved basic vertex animation, however the issue was that I wanted to apply this effect to standard materials.
So I investigated using an away3d effect method instead. As outlined in my previous post the issue I was facing with using an effect method is that the custom AGAL was being inserted at the wrong location in respect to the complete material vertex AGAL.
So my hack to get around this was to add the following variable to ShadingMethodBase
public var preTransfer:Boolean = false;
As you can see the default value is false, however if it is set to true the ShaderCompiler will insert the AGAL before the matrix transfer AGAL.
Once I had my AGAL being placed in the right location it was just a matter of writing the AGAL to match the material and material params that I was using. The result can be viewed below. (environment map / normals AGAL still needs work)
While I’m happy with the result, this is by no means a real solution. As i’m sure my preTransfer hack is far from the best way to insert the AGAL in the correct location, and my custom effect method only works with a material that has an environment and normal map applied to it, as soon as you use a material without these you’ll get a runtime error.
Source code can be download hereRead More
As part of one of my last projects I needed to create this interactive oil blob (as seen here, 58 seconds in). Thought I’d do a quick post showing it off and sharing the source for anyone who is interested.
The environment map is of Manly Beach (Sydney) and was photographed by myself, so feel free to use without restriction.
source can be downloaded from here.Read More
This video features projects produced by Peter J Shand during 2012 and were created in collaboration with RESN, Circul8 and Imagination. The projects all use Flash 11 stage3d technology, enabling full 1080p 60fps rendering. A big thank you goes to the many contributors of the Away3d and Starling frameworks.
EDF Light Games (RESN – Wellington)
The EDF Light Games serves up a series of 7 Olympic sports events brought to life on desktop, touchscreen and as an iPad app. The Games were created with Flash 11′s stage3d technology and utilized the away3d library.
Wrapped In Merino (Circul8 – Sydney)
Wrapped in Merino connected people with wool globally, asking them to collaboratively design a giant virtual scarf. Again the site was built with Flash 11′s stage3d technology and utilized the away3d library. Users were prompted to upload a photo, take a snap with their webcam or select a photo from facebook. They could then customize their portion of the scarf. The site was integrated with facebook, twitter and pinterest, allowing the users to share their creation & encourage friends to join in.
GE Innovation (Imagination – Sydney)
12 touch screen applications, along with 4 additional supporting applications were developed for the GE Saudi Arabia Innovation Center. Adobe air was used to package the applications and the Away3D and Starling frameworks were used extensively throughout the applications to produce full 1080p 60 frames per second experiences.
Ok, so I’m on a mission to create some sweet ass AGAL powered vertex animation that will integrate with the Away3d library. I’ve started a conversation on the away3d forum, but thought I’d create a blog post to help people understand exactly what I’m trying to achieve. http://away3d.com/forum/viewthread/4641/
One thing to note is that I’m not trying to create a static vertex animation, the whole point of this is to come up with a dynamic vertex animations via AGAL. Also worth noting that while the same effect can be create by calculating vertex position in AS3 with the CPU and then uploading to the GPU, this is not the desired approach, as the upload process is quite costly.
I’m not sure the best way to approach this. So my first thought was to create a custom material and pass, and then bake the vertex animation AGAL into the custom passes getVertexCode method. This actually worked out exactly as planned (see below)
You can download the source files for this here
So this is cool, but the issue arises when trying to combine this effect with some of the more complex materials that are built into away3d. For example I’d like to apply this effect to a standard TextureMaterial with a normalMethod and EnvMapMethod…
Sp my next thought was to create a custom method and try to apply the AGAL with this. The issue with this approach is that the AGAL is inserted in the incorrect location. for example if I use a ColorMaterial and set Debug.active = true, I can see the output AGAL looks like this:
mov vt0, va0
m44 op, vt0, vc0
Ideally my custom AGAL needs to be injected on the second line.
mov vt0, va0
// Want custom AGAL to go here
m44 op, vt0, vc0
However when I apply my custom method my custom AGAL is inserted underneath the ColorMaterial AGAL.
mov vt0, va0
m44 op, vt0, vc0
// Custom AGAL is getting inserted here
It seems to me that a custom method would be the best way to make custom AGAL vertex shaders because it would make it easier to apply to any material, however I’m a little stumped how to get around this issue.Read More