How to: draw a cube with Minko

Today I want to talk about Minko’s API. Whats it looks like and how it feels to work with it. This is the first time ever I show some actual code using Minko. There is a great buzz around Molehill and the next release of the Flash Player in general. Please note that evet if – for obvious reasons – this post does not use the Molehill-powered version of Minko, the APIs look “pretty much” the same.

The goal of the post is for people to see what it looks like. Feedbacks are very much welcome and would be greatly appreciated!

Before we start, here is the (very) simple application we will build:

Tutorial right after the jump…

aerys-monitor library updated

The aerys-monitor is a small and lightweight library inspired of Mr.Doobs “stats” library. Here are the main features :

  • watch any property of any object of any class
  • customizable update rate
  • cutomizable per-property color
  • chart rendering for numeric values
  • watch framerate, memory and Flash Player version
  • ready to use framerate property

The Monitor class has been updated with the following changes :

  • Flash player version style is now called “version”
  • new property “backgroundColor” to change the background color of the monitor
  • new “framerate” to get the framerate of your application
  • the framerate and memory usage are now monitored by default

Here is a sample snippet to show how simple it is to use :

And here is how it looks :

The library is under GNU v3 licence and is available on Google Code. Have fun !

Flash 3D physics with Minko and jiglibflash

Drawing (a lot of) triangles is nice. But making them move is another problem… even harder: making them move like objects would move in real life! This is what a “physics engine” is about:

“A physics engine is computer software that provides an approximate simulation of certain simple physical systems, such as rigid body dynamics (including collision detection), soft body dynamics, and fluid dynamics, of use in the domains of computer graphics, video games and film. Their main uses are in video games (typically as middleware), in which case the simulations are in real-time. The term is sometimes used more generally to describe any software system for simulating physical phenomena, such as high-performance scientific simulation.”

Source: Wikipedia, Physics engine

Flash is no exception and has a few physics engine libraries available. Nothing like a “high-performance scientific simulation” though…

Still, jiglibflash is one of those libraries. It is free and open-source. It provides a 3D-capable physics engine and exposes a rather simple API to make it work with any 3D graphics engine. Which brings me to the good news: Minko now supports jiglibflash!

Demo application right after the jump…

Pixel shader demo using Flash 10, Pixel Bender and Minko

I’m really excited to announce Minko (which is, by the way, the final name for my 3D library) has reached a new level: pixel shader integration! Pixel shaders are little programs that run on each pixel and can modify their final color. They are often written in C-like languages and in this precise case we use Pixel Bender, the shader language introduced with Flash 10.

In this post I will:

  • Explain how any 3D scene is built when using Minko
  • Explain how pixel shaders are integrated in the 3D scene
  • Explain how pixel shaders are built using Pixel Bender
  • Show you a very simple demo of the kind of effects pixel shaders will provide
  • Explain how the demo was built

Here are a two screenshots to show the results:

Phong shading + spheric environment mapping on a 2700+ polygons Lamborghini
Phong shading + spheric environment mapping demo

Technical details and a live demo right after the jump!

Flash 10.1 gets a release date

In reaction to Steve Jobs’ latest outrageous declarations, Kevin Lynch himself announced the release date of Flash 10.1 for Android devices:

“We look forward to delivering Flash Player 10.1 for Android smartphones as a public preview at Google I/O in May, and then a general release in June. From that point on, an ever increasing number and variety of powerful, Flash-enabled devices will be arriving which we hope will provide a great landscape of choice.”

You can read is full post here : Moving Forward.

From what I’e heard from Adobe so far, Flash 10.1 for the desktop should be released before the Android version. Meaning we can expect Flash 10.1 desktop to be released in May…

Update: In the following Wall Street Journal interview, Shantanu Narayen – Adobe’s CEO – also comments Steve Jobs declarations and says Flash 10.1 will be released June 17th (3’10):

Flash 11 drawing API will be hardware accelerated

I love catchy titles. I know nothing about the next major version of Flash and all of this is just speculations.

Anyway, as the whole HTML5 versus Flash battle is raging, it appears Flash relatively poor performances are indeed criticizable at best. Beside poor developers, the Flash Platform suffers from a very very slow software renderer. Or at least much slower than the rest of the platform. It’s no secret: hardware acceleration is a key feature for the future of the Flash Player. It’s even hard to believe it is not available yet!

As you must already know, Flash 10.1 will support OpenGL ES 2 on mobile devices to leverage the lack of CPU horsepower. While hardware HD video decoding will be available on the desktop too, the drawing API will only be accelerated on mobile devices.

Anyone knowing a bit about OpenGL ES knows it is a subset of OpenGL. Thus if it works with OpenGL ES, it should work with OpenGL. With this in mind, a few questions:

  1. Why isn’t Flash 10.1 drawing API hardware accelerated on any OpenGL capable platform, including the desktop?
  2. How will it work?
  3. Will Pixel Bender be hardware accelerated?

1. Hardware Accelerated Desktop Flash Player

Let’s face it: there must be an hardware accelerated desktop Flash Player in the works. As I said previously, OpenGL supports all features of OpenGL ES so this is not far fetched at all. Yet, it is neither released nor announced. Why?

My first guess is OpenGL provides with a lot of features that would make the desktop experience a lot smoother than just using what offers its little brother OpenGL ES. So at some point Adobe had to make a choice :

  • release a fully hardware accelerated Flash 10.1 on both mobile and desktop platforms, with the last one being very far from what desktop hardware is actually capable to handle
  • or release Flash 10.1 focusing on mobile devices and announce hardware acceleration for the desktop just after its the final release… and I’m guessing it might be a key feature of Flash 11

When I was at the French Flash User Group (TTFX – les TonTons FleXeurs) a few months ago, I spoke with Lee Brimelow and Mike Chambers about the just announced microphone raw-data access. I asked them why it was announced only for AIR 2.0 and not Flash 10.1. The answer was something about the “quality guys” making sure the feature was well suited on both the roadmap and the logic of the incoming updates. And this feature eventually made its way into the Flash Player! I think that’s what is happening with hardware acceleration on the desktop.

But if you don’t believe me, you don’t have to take my word for it! What about Adobe’s word? Cnuuja, one of the engineer working on the Flash Player, posted this very message on the Flash 10.1 Forum:

Can OpenGL 3.3/4.0 improve Flash 10.x ?

“Yes….  with a lot of work.   We have spent the last year writing new code which allows OpenGLES2 to render flash content on mobile devices.  Performance varies significantly from one gpu to the next, with some gpus being slower than the software renderer.   What Flash does is significantly different from the 3d triangles+shaders GPUs were designed to support. Its a lot of work to make OGL/D3D usable as our renderer, but we’re working on it 


2. How will it work?

Just like in Flash 10.1 for mobile devices. But much faster thanks to OpenGL and Direct3D.

The internals of such feature is very important: developers must know and understand how it works to make the best out of it. Adobe already talked about how the drawing API is accelerated in Flash 10.1 on mobile devices:

“When a GPU renders vector graphics, it breaks them up into meshes made of small triangles before drawing them, a process called tesselating. There is a small cost to doing this, which increases as the complexity of the shape increases. To minimize performance impact, avoid morph shapes, which must be retesselated on every frame.”

It’s straight forward and I think it’s actually the best (and only…) way to do it. Tesselation will create triangles by computing sets of vertices/indices (also called Vertex and Index Buffers) and push them to the graphics hardware. The end of the quote suggests such data is cached and should not be recomputed if no redraw occurs.

Something very important though: z-sorting. People might think hardware acceleration implies z-sorting. But it doesn’t. When you know how 3D hardware and APIs work, you know it will be very tricky to make it work with something as general purpose as Flash. If Adobe wants to use the z-buffer, they will have to cut the compatibility with the software renderer. And I don’t think this will happen anytime soon.

3. Hardware Accelerated Pixel Bender

Pixel Bender is already hardware accelerated pretty much everywhere except the Flash Platform. I’m not sure why. Still, it’s hardware accelerated in other products of the Creative Suite so I guess that an OpenGL/Direct3D shader languages compliant intermediate represenation of Pixel Bender kernels does exist.

This said, it’s just a matter of how to make it work with the very general purpose Flash Player. Considering Flash 10.1 is using tesselation, my guess is pixel shader should follow quite easily.

Build Flash 10.1 applications with Flex Builder 3 or Flash Builder 4

It was one of my first posts on this blog: Work with Flash 10 in Flex Builder 3. This post has proven to be very helpful and is still read a lot every day!

As Flash 10.1 is currently accessible in beta. I thought it would be nice to have some tutorial to build applications targeting this new version of the player to take advantage of the new APIs (like multitouch for example). This tutorial will provide a generic solution to enable the creation of Flash 10.1 capable projects in both Flex Builder 3 and Flash Builder 4.

Step 0: Download the latest Flex SDK

This step is not mandatory and should not be necessary if you already have a Flash 10 capable Flex SDK. Still, keeping your SDK up to date is always a good thing and this tutorial might be a good opportunity to do it!

As the Flex 4 SDK was just released a few days ago, I recommend you download, install and use it for the rest of the tutorial.

In the rest of the tutorial, $SDK_DIR will designate the path to the Flex SDK you want to use (ie. “C:\Program Files\Adobe\Flash Builder 4\sdks\4.0.0” for example).

Step 1: Download and install playerglobal.swc

Step 2 : Setup your Flash 10.1 project

  • Open Flash Builder 4
  • Create a new Flash/Flex project or open the project you want to setup
  • Open the properties of your project (right click on your project in the Package Explorer > Properties)
  • If you are using Flash Builder 4, go to the “ActionScript compiler” panel and in the “Adobe Flash Player options” section, check “Use a specific version” and enter 10.1.0 as the version number

  • If you are using Flex Builder 3, go to the “Flex compiler” panel and in the “Additional compiler arguments” text input add “-target-player=10.1.0”
  • Click “OK”

Step 3 : Build your project

Press F11 to build and run your project. Everything should work fine and you should now be able to use the new Flash 10.1 APIs!

You can now create as much projects as you want and you just have to do Step 2 to make sure it will target Flash 10.1!