Tag Archives: personal work

My latest work – Stage3D used in a real project

Posted on by
5

Hi,

Beside my last article, I’ve not published anything in a while. This is mostly because I was busy working with a coworker of mine on the last project we released here at Marcel, and I need to say that I am proud of the result !

First of all, the website : it’s a digital experience made for Cartier to emphasize their beautiful movie Odyssee. You may visit the dedicated website at :

www.odyssee.cartier.com

Why am I telling you this

First of all because I’m quite proud, and it was a wonderful experience. But also because, as a challenge, we proposed to work with Stage3D for the website. Excluding Flash Player 10 players was excluded, so we actually worked on a fallback system. It’s really simple : You can compile for Flash Player 11, and still be executed by Flash Player 10 if you don’t call specific features. The first thing the website does is this :

try {
    stage.stage3Ds;
    User.getInstance().isStage3DAvailable = true;
} catch(e:Error) {
    User.getInstance().isStage3DAvailable = false;
}

And it’s working !

Stage3D is used for the parallax system used on the “experience” part of the website. Fallback system is made with simple bitmaps and copyPixels instructions.

Because we wanted to be able to modify everything, and because we wanted something light, we didn’t used starling and my coworker did an amazing job at creating a small Stage3D framework, like a kind of StarlingNano.

Push the limits

I am very proud of this website because we succeeded in pushing the limits : we used a lot of pixel bender shader and we used Stage3D. What I am trying to say is that the flash community shouldn’t stay in its comfort zone anymore and start trying to push themselves using Stage3D technology even if it means to code a fall back system.

Using Stage3D wasn’t that hard, and even if it is not necessary at all at the end, it still brings some features to the project :

  • Parallax are smoother. We can push a lot of layers, even animated ones, without being afraid to get some performance issues.
  • We were able to add some particles on some chapter.
  • Most important : We learned something, and we challenged ourselves.

Anyway, flashers of the world, it’s time to push your knowledge to your real project.

You can do it !

Revamping the Rainbow Spectrum

Posted on by
1

The rainbow Spectrum was a study case, and wasn’t optimised at all. With AIR 3.2 coming out, it was the perfect time to improve things, to make it able to run on iOS and Android phones.

The previous version of the spectrum rainbow were using 6 ribbons made of 64.000 vertices each. Why so much ? because It allowed me to make the spectrum works for around 40 minutes.

I had to reduces severely the number of point, destroying old values and creating new as long as we go along the music.

I used the ability to upload a part of a vertex buffer to split my rainbow geometry into 4 sub-geometries. This is how geometry is upload now :

vertexBuffer.uploadFromVector(_geoms[0], 0, _geoms[0].length/3);
vertexBuffer.uploadFromVector(_geoms[1], _geoms[0].length/3, _geoms[0].length/3);
vertexBuffer.uploadFromVector(_geoms[2], _geoms[0].length/3*2, _geoms[0].length/3);
vertexBuffer.uploadFromVector(_geoms[3], _geoms[0].length/3*3, _geoms[0].length/3);

Using this, I am able to :

  • Have a really infinite render
  • Run the shader 160 time less
  • Improve the render from 19FPS up to 60FPS on my transformer
  • Even better, improve the render from ~1FPS up to 25FPS when using SwiftShader (Software rasterizer)

Here is a demo of the rainbow running on my Asus Transformer tab.

I’ll explain the code a little more later.
I am preparing a simple demo APK for Android user. If you want one, please send me an email.

Enjoy

What I am working on right now

Posted on by
1

While working with some more advanced “camera” effect, I came with the desire of creating a simple Sound Spectrum visualizer in stage3D. Not the idea of the year, but right now I am quite happy about it.

This is still a work in progress so it will evolve a lot more in a near future I hope, as I’d like to come with a more finished “product”, so consider this as a sneak peak.

Right now, I am using the FrequencyAnalyser from Ben Stucki
Music is from a talented French composer, Opti, who gave me the permission to publish my work using his track. Thank you man !

You can change the colors with the top left button, uses Adobe Kuler API to get some palette, drag the camera a little bit with the mouse. If you want to try another music, you can press the spacebar to stop the music, then launch some sound in another browser tab, like a youtube video or google music. You may get an Error from the Flash Virtual Machine, just ignore it right now and you are good.

I sure will explain and share the code later, but right now, the code is really to messy and I just wanted to share something.

Have fun and please give me any feedback you have !