Exploring away from 3D

Hi folks,

I never have been a “3D” developer, neither a “shader” developer. Actually, I’m just that random flash coder that love to learn those unknown and cool looking techologies.

If I didn’t write any articles in a long time, it doesn’t means that I haven’t been trying some new cool stuff to work with. I worked a lot with javascript lately, because flash is no longer used as often as it was before, so I had to stay up to date. It took me a long time, wrote a framework, had a couple project using it, now I feel like I could start exploring the canvas and webGL, so this blog may have some new content soon.

I also had the chance of working on some digital exhibitions. No browser, no Internet, no screen. It was very refreshing. We worked on a setup for “la FNAC”, a french store of music, books, DVD, and digital stuff. With the success of fifty shades of grey, La FNAC had a whole week dedicated to erotic novels with some conferences to promote some writers. Here at marcel, we worked on a standalone exhibition that was installed in one of their store. Here is the video we presented at the Cannes’ festival which explains better than me the whole idea behind it (in english). For non-french speakers here, the sentence could be translated “With that caress from the hand, so intoxicating, sweet carress of pur desir, he cherished the curves of the belly, went down…” or something like that…

FNAC E-ROTIC TOUCH from Marcel on Vimeo.

Here is another video I shot during the exhibition, so you can here the sentence better.

I’m not allowed to talk about how we dealt with the sound stretching thing, but I can give you a quick overlook of the whole setup. A PC was hidden in a small room close to the wall, controling 6 webcams hidden in the floor in some kind of a ramp along the 7 meter long wall. The PC was grabbing every webcam stream, and crop the sides to get a picture of the wall with no gaps or duplicates. Every few second or so, that giant picture was saved to get a “reference” picture if no movement were detected. Then by taking the difference between the reference picture and the current webcam stream, you can get the position of everything that were “added” to the scene, ie. hands of people interacting with the wall. Those differences were tracked using some features of the computer vision library to get “multi touch” feature.

Then, the position of the hand of the first user would be used to “seek and play”, back and forth on the recorded sentence that would match the one displayed on the wall. The resulting feeling was the ability to control the rythme of the sentence, slowing down on some teasing words. One thing some user did and that we didn’t think about was to “read” another sentence by jumping from word to word, remixing the whole meaning of the phrase.

Well, any way, I hope you enjoy it as I did working on this project ! Feel free to leave your comments.

And for the future, I hope I will be able to work on webGL soon. Also, I need to take some time to write about the rainbow spectrum as some people asked me for it.

Stay tunned !

Everything went better than expected

Hi there

If you can read this post, then you are on the new blog server. It seems that everything is working, but you might have troubles for a few days while the DNS are propagating.

As I was saying, some comments have been lost in the process, but nothing too much important.

Long story short, if you read this post, then you can comment and pingback again 🙂

How can I help you ?

Hi there,

I don’t have a lot of time right now, summer, scuba diving degrees, a little extra job freelancing, and of wourse, well, work…

So I’d like to know what would you be interesting on reading for the next article.

I’d like to go deeper into fragment shader, learn how to have bumpmapping working for instance, I could have a few example ported to WebGL, I could have a few articles about how to use minko to write your own shaders more easily than with AGAL…

Fell free to give me hints in the comments !

And for all, I wish you some nice vacations !

Not in the mood…

Hi there.

I’m not really in the mood for writing another article right now. It’s mostly work-related, but also a little bit diablo-related.

Anyway, I’ve received some tweets about the lack of tutorial about texture. I really though this was an easy task for you guys, and I was waiting to crack the bumpmapping shader to start talking about texture, but I realize there is no need to wait for it, and that the bumpmapping tutorial will be a lot more easily to write (and to read !) if you already have some basic knowledge about textures.

So next article will talk about textures, and maybe sprite sheet, just to give you a hint about how to make your very own “Starling” Mini.


See you soon !

Articles Frequency

Hi every one !

I received a lot of really nice comments lately about my articles, and also some requests. I’m glad about it, really, I’m glad I helped a few of you, and I’m glad you find the articles efficients, simple and easy. I think my article are easy to read only because I share my knowledge with you guys as I am discovering it. Meaning I am not a lot ahead from you 🙂

I wanted to remind you this not because I don’t want you to ask for help, actually I’m glad some of you sent me sources to look at or challenged me with some question, but because from now, I may post articles less frequently as the easy part is behind, and that I need more time to discover myself the other mysteries behind stage3D.

So in other words, please stay tuned, and please keep talking with me via mail or twitter, it’s always interesting, but expect articles (about Stage3D at least) to come less frequently.

About Stage3D, I am currently writing something about directional light. It should be ready by tonight or by tomorrow.

See you folks !

My latest work – Stage3D used in a real project


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 :


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 {
    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 !

A look at AIR 3.2

So AIR 3.2 is out today, and of course the main feature is the ability to use Stage3D on mobile devices.

Obviously, I ported my Rainbow Spectrum on Android to have a look at the performance, and I must say I’m impressed ! Adobe did a really good job, considering my rainbow spectrum isn’t optimized at all for desktop right now, it should be even worse on mobile, but on High End Terminals, right now it’s quite smooth.

Here is a quick video of the Android port. No optimisation done, beside reducing the “length” of each ribbon.


Enjoy !

What I am working on right now

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 !

What’s coming

Right now, I am trying to understand some basic directional light shaders, I’d like to be able to understand and write them by myself. I can’t find any resources on the subject so I’m moving on OpenGL / WebGL articles. If you have any advice / link, or whatever can help me understand, feel free to tell me !

I am also trying to find a small structure more convenient for my tests and that would serve as a Base for the Example I would post here. For instance, I am trying to create an engine-unrelated arcball camera. If I can come up with something fast, I will share it here.

Regarding the tutorial, I am preparing something to understand perspective and add the z coordinate to my previous triangle example, and then we will deal with some Matrices. I think this will come at the begenning of next week, I need some time this week-end to write things down.

Stay tuned !