Procedural Animated Flag With Minko ShaderLab

I used Alexandre’s work about waves simulation on the GPU with the ShaderLab to create a French flag with a simple blue-white-red procedural texture. Here is the result:

As always with the ShaderLab, not a single line of ActionScript and everything is hardware accelerated! If you want to subscribe to the Minko ShaderLab beta, you can apply on the “Minko ShaderLab: Beta testers wanted!” thread on Aerys Answers.

Minko ShaderLab: Waves Simulation On The GPU with Flash

Alexandre Cyprien – one of Aerys’ engineers – trained himself on the Minko ShaderLab with quite a challenge: waves simulation on the GPU! Alexandre is doing a very extensive work on 3D compression and Artificial Intelligence algorithms. He is not a GPU programmer so I’m very happy he was able to create such a cool and complex effect in no time with the ShaderLab! He took his inspiration from the GPU Gem Article: Effective Water Simulation from Physical Models. Here are the results:

There is not a single line of ActionScript here: everything is done on the GPU! Even the little embed above was created using the “share” feature of the ShaderLab I already detailed in a previous post.

You can actually embed it on your own page/blog with the following HTML code:

More samples and implementation details after the jump…

ShaderLab: Embedding Shaders In A Web Page

As you can read in the online Backsun FAQ, we are currently working on a tool called the “ShaderLab”. This tools provides a visual programming environment to create, debug and test shaders in a user-friendly way:

The ShaderLab is a Flex web application. It’s really easy to use and anyone can start playing. The only requirement is to know shader basics and 3D maths. The tool is actually so powerful that you can build an entire hardware accelerated particles engine without a single line of AS3 (you can look at the first screenshot if you don’t believe me). But I won’t speak about that today.

Today I want to introduce a very cool feature based on the fact that we are working on 3D for the web. To me, the web component is something that must be used to provide new features. And being able to program the GPU and create shaders with a web Flex application is one of those features. And another one is the possibility to share and embed those very shaders on a web page.

Indeed, the ShaderLab will provide a “Share” button “à la Youtube”. It will provide an HTML code – an iframe really – to embed your creations on your blog/website. Here the embedding code in action:


More samples and details after the jump…