simppa.fi/blog » flash

Introducing open source evoSpicyParticleEngine

simo — Thu, 24 Nov 2011 16:25:05 +0000

In this post I’m going to explain some of my findings when playing around with Adobe’s Stage3D and particles. I have pushed the current version of particle engine called evoSpicyParticleEngine into GitHub, will show some examples how to play with it and explain tricks used in it.

… but first I want to joyously announcing that I do not owe you shit. Nor does anyone else that open source stuff or release what ever. So if you don’t like the syntax or what ever don’t pressure me with feature requests. Get involved by forking my codes.

We are the most spoiled generation ever. The notorious West. At that nanosecond everything isn’t absolutely perfect we start to whine like children. One can just wonder how complaining when train schedule fails for 10 minutes sounds from majority perspective. (including those four billion people that live under $2.50 a day)
How utterly ridiculous it is to whine when some extremely sophisticated technology fails to work at that precious moment one felt like using it? (e.g. Internet)
Or how about whining when some refugee that came four months ago from country middle of oil war fails to pronounce the pizza delivery right?

Here’s a great sort youtube clip from Conan O’Briens show related to this.

We face this nonsense when perspective is fucked up. Lets say we ditch the whining and preserve efforts.

Here’s my next effort for our playgrounds wellbeing (no more preaching):

evoSpicyParticleEngine

The idea behind this engine was to be able to render massive amount of moving particles. So this meant some restrictions. For example it only renders full buffers, it renders triangles instead of quads and all particles share some properties.

All this stuff can be find from GitHub. You’ll get links at the bottom of this gigantic post. Lets take a look from outside. This is how you render basic particles with sphere explosion movement:

// Create engine instance. (Reference to stage, stageIndex = which stage.stage3Ds to use, enableErrorChecking, set f-key as fullscren trigger)

spicy = new EvoSpicyParticleEngine(stage, 0, false, true);

// If context3d failed

spicy.on3DFailed.add(on3DFailed);

// Get info about users GPU.

spicy.onGPUInfo.add(onGPUInfo);

// Wait until the engine is ready.

spicy.onEngineReady.add(onEngineReady);

…

private function onEngineReady():void

{

        // Z-Sort particles or not.

        spicy.setDepthTest(true);

        // Texture for particles.

        spicy.setTextureParticle(new TextureParticleAlphaKill(128));

        // BlendMode of particles.

        spicy.setBlendMode(BlendMode.NORMAL);

        // How far away particles are rendered

        spicy.zFar = 30000;

        // Field Of View

        spicy.fov = 90;

        // count : int (maximum particle count = 1398080), valueClass : IValue (settings for particles. start points, end points, speeds, colors) 

        spicy.addParticles(     139808, // Particle count

                                new ValueExplosionSphere(

                                new ColorGradient([0x3bc1ff, 0x84481b, 0xFFc1ff, 0x3bc1ff]),

                                100, 100, 100,  // Start position multipliers

                                2500, 2500, 2500, // End position multipliers

                                16, // Size of single particle

                                true, // Randomize sizes or not

                                2));// Add random value for individual speed

        // particle renderer. 

        var renderer:RendererLinear; 

        spicy.setRenderer(renderer = new RendererLinear(

                                new ProgramLinear(EaseProgram.LINEAR, false, true), // Shaders

                                0.00008, // Speed of particles

                                128, // How many particles to rebirth in every frame

                                0x1e1b17)); // Background color

        // Move the start point

        renderer.startPoints[0].y = -500;

        // add extra start point(s) (renderer.startPoints[1])

        renderer.addStartPoint(new StartPoint3D(0, 500, 0));

        // Start rendering

        this.addEventListener(Event.ENTER_FRAME, run);

}

…

private function run(event:Event):void

{

        var time:int = getTimer();

        var angle:Number = time * .0001;

        var rad:Number = 1000;

        spicy.camera.position.x = rad * Math.sin(angle);

        spicy.camera.position.z = rad * Math.cos(angle);

        spicy.camera.position.y = 0;

        spicy.camera.lookAtPoint(0,0,0);

        spicy.camera.rotationZ = time * .01;

        spicy.render();

}

Code above in action
SpicyParticleBasic.

Another example that’s also in GitHub
SpicyParticleBlurPerlin.

That looks easy enough?

Lets take a look on some of the tricks.

Single particle
Like I mentioned earlier in this engine particles are triangles. The ‘normal’ way would have them in quad that contains two triangles. That takes 4 vertices which is more then 3 and triangle can draw a particle as well.

Common sense, huh? ;)

Face particle to camera
This is a trick that I got idea and code examples from blog post by Jean-Philippe Auclair who works at Frima Studio. It’s a great post about particles. Make sure to read it up if you haven’t already.
Trick goes like this:

1. Precalculate a single triangle and store it to GPU. Store those register numbers (10,11,12) into individual particle position component (x, y, z, w <- right there).

var data:Vector.<Number> = Vector.<Number>([-1, -1, 0, 1]);

context3d.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 10, data, 1);

data = Vector.<Number>([0, 1, 0, 1]);

context3d.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 11, data, 1);

data = Vector.<Number>([1, -1, 0, 1]);

context3d.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 12, data, 1);

2. In render method create a matrix that’s invert from camera matrix and pass it on to GPU

// CAMERA

transformCamera.identity();

transformCamera.position = camera.position;

if(camera._doLookAt) {

        transformCamera.pointAt(camera._renderLookAt, Vector3D.Z_AXIS, _up);

        camera._doLookAt = false;

}

transformCamera.prependRotation(camera.rotationX, Vector3D.Y_AXIS);

transformCamera.prependRotation(camera.rotationY, Vector3D.Y_AXIS);

transformCamera.prependRotation(camera.rotationZ, Vector3D.Z_AXIS);

transformCamera.copyToMatrix3D(transformParticle);      // Copy camera matrix

transformCamera.invert();                               // Invert camera

// MODEL

transformModel.identity();

transformModel.position = this;

transformModel.append(transformCamera);

transformModel.append(transformProjection);

context3d.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, transformModel, true);

context3d.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 13, transformParticle, true);

3. In vertex shader get position of stored triangle, rotate that with camera invert. Scale it to desired size and transform to world space.

agalVertexSource += "mov vt2, vc[va0.w] \n";            // get vertice position from stored triangle

agalVertexSource += "m33 vt0.xyz, vt2.xyz, vc13 \n";    // rotate vertice with camera invert matrix

agalVertexSource += "mov vt0.w, vt2.w \n";              // set proper w value from stored triangle

agalVertexSource += "mul vt0.xyz, vt0.xyz, va3.z \n";   // va3.z = Size of individual particle

agalVertexSource += "add vt0.xyz, vt0.xyz, vt1.xyz \n"; // set new position for vertice 

agalVertexSource += "m44 op, vt0, vc0 \n";              // transform and output vertex x,y,z

Tadaa! now it’s always facing the camera and this trick didn’t cost a penny.

Moving particles in vertex shader
In AGAL vertex shader we cannot add values to vertices. Like move them a bit in x-axel in every frame. The data isn’t stored anywhere. All values must be at memory and push to GPU and then it’s just drawn. Continue movement could be done by storing movement values into a texture but we do not have access to texture in vertex shader. This a challenge and there’s a trick to get around this: We store start and end point of every vertices. Give a start time value to every particle and send constantly increasing time value to vertex shader. Then simply tween the particle position between those points according to time and start time value.

This way we can ‘rebirth’ single particle by setting it’s start time value to current time value.
This is how it looks like in AGAL:

agalVertexSource += "mov vt1, va0 \n";                  // vertex

// va3 = individual component for every particle

// va3.x = starttime

// va3.y = speed multiplier

// va3.z = size of particle

agalVertexSource += "sub vt3.x, vc4.x, va3.x \n";       // time – start time

agalVertexSource += "mul vt3.x, vt3.x, va3.y \n";       // multiply time with move.y (to get individual speed)

// LINEAR MOVEMENT

agalVertexSource += "sub vt6.xyz, va4.xyz, vt1.xyz \n"; // b – a

agalVertexSource += "mul vt7.xyz, vt6.xyz, vt3.x \n";   // movement

agalVertexSource += "add vt1.xyz, vt1.xyz, vt7.xyz \n"; // add move

And that’s how we can move 1.4 million particles in flash.

Manipulate the movement
AGAL is not limiting language. (except that ‘no access to texture’-thing) It has a stack of mathematical functions. With those a lot is possible. Here’s how particle movement is eased in exponential fashion:

// EXPO OUT

//              c * (-Math.pow(2, -10 * t/d) + 1) + b;

// where        t = time; b = 0; c = 1; d = 1;

// so it’s      1 * (-Math.pow(2, -10 * time/1) + 1) + 0;

// and          -Math.pow(2, -10 * time) + 1;

//________________________________________________________________

agalVertexSource += "mul vt6.x, vc5.z, vt3.x \n";       // -10 * vt3.x

agalVertexSource += "pow vt7.x, vc5.w, vt6.x \n";       // Math.pow(2, vt6)

agalVertexSource += "neg vt7.x, vt7.x \n";              // -Math.pow(2, vt6)

agalVertexSource += "add vt3.x, vt7.x, vc5.y \n";       // -Math.pow(2, vt6) + 1

Get your forks polished
– evoSpicyParticleEngine at GitHub. Also check those examples.

Hopefully you learn something from it. You can use it anyway you like. Contributing for its development by forking at GitHub is desirable. I’m slowly developing it more as time goes by. Post process filters, background and overlays are on table. Ohh and lights of course. All those are actually in my classes commented out waiting for polishing.

Peace and love, Simo

Laboratory output n°80 1.4 Million particles

simo — Mon, 14 Nov 2011 14:54:37 +0000

Real
time

Video
capture

That’s 200 000 particle version. That might run on your browser.

So like I’ve written on this blog my particle engine can move large amount of particles from A to B and I can do custom tweening algorithms for that transition. Great… what then. I realized that using perlin noise for setting the B positions of the particles could turn this thing look quite interesting.

On my OsX toy the difference between flash on browser and standalone is insane. 200 000-300 000 particles is pretty much the maximum until it won’t run smooth anymore. I wonder if this is memory related thing? or what? Who knows? Someone from Adobe might… Well anyways. Here’s the same thing exploding 1.4 million particles in 1920×1200 resolution with smooth 60fps.

There are exactly 1 398 080 animated particles. This is the maximum amount since 64 full buffers is the limitation. It surely is enough. All the contrast will disappear because the screen is full of stuff. Still looks pretty darn rad. Especially thinking it’s Flash and dead and all..

Hopefully some update in the future will unleash this power for flash player in browser too.

— (UPDATE SOME HOURS LATER) —
Here’s a 1.4 million particle demo for you to test. It’s heavy shit. Be patient. I mean it :D
Also added a standalone version that you can play with your flash standalone player. That will run well in decent machine. (after unoptimized initialization)
– Browser version.
– Standalone version.

Laboratory output n°79 SpermOfSibelius

simo — Mon, 31 Oct 2011 21:50:36 +0000

Real
time

Video
capture

Prime Sperm of Sibelius. Music http://soundcloud.com/djlo/sibelius-finlandia-op-26-version-for-male-choir-and-orchestra

and of course.

Real
time

Video
capture

Abandoned Sperm of Sibelius. Music http://soundcloud.com/yourhips/sibelius

These are a bit heavier then last ones. Too bad if you have slow computer and you hate classic music. :/

Laboratory output n°78 PyroTechnicsEaseExpo

simo — Mon, 31 Oct 2011 09:47:09 +0000

Real
time

Video
capture

Here’s how I can ‘individually’ move massive amount of particles.
1. Give them start and end point.
2. Tween between those points in vertex shader.
3. Send only time value to vertex shader in every frame.

No there’s no catch. The movement doesn’t have to be linear. AGAL can do this thing called mathematics and is quite awesomely fast in it. Familiar easing functions can be rewritten into AGAL. Upper flash is an example use case of Robbie‘s legendary ExpoOut function.

And here’s example of ExpoIn function.

Real
time

Video
capture

Laboratory output n°77 OceanBubbles

simo — Tue, 25 Oct 2011 17:54:59 +0000

Real
time

Video
capture

I’m working on a new particle engine (evoSpicyParticleEngine). That I’ll open source when it’s ready enough. Here’s some taste of it. There are 200 000 individually moving z-sorted particles. :D

I found the browser player a bit slow. Or well.. I know it sounds ridiculous to whine “it can only run some hundred thousand particles… nyyh nyyh” when we only had few thousand couple months ago. BUT the local standalone player runs way way way faster! On my OSX it can run almost million in full hd resolution. Maybe browsers limit the power or what?

Laboratory output n°76 FourSparklers

simo — Fri, 14 Oct 2011 20:43:29 +0000

Real
time

Video
capture

I just checked and yeah… I had almost a year break from releasing experiments. The very core content of my blog. What ever. Here’s another particle experiment. There are 87 380 balls doing their thing. I think this will lead to open source Stage3D particle engine lib and hopefully I end up adding these monsters to Away3D someday soon too.

This isn’t a perfect system yet and not fully optimized. Anyway.

What this thing does is:
1. Set start and ending points for particle vertices. (2304 in every frame)
2. GPU will tween between those points.
3. Plus all sort of funky stuff with colors and there’s light at the top of every particle stream. GPU will calculate distances to those and add more value to colors. As you can see.

Anyway that was the plan. In this case it started to behave funny when I adjusted my AGAL codes and the rule explained doesn’t fully apply anymore. So what I released here is a mistake, but I think it feels and looks great!

Here’s a link to that cool song.

Sparkle a Moment

simo — Thu, 06 Oct 2011 10:59:03 +0000

Real
time

Video
capture

You can watch it now or read this thing first. This post contains spoilers but it might help you to understand demo better.

There are several ways to view this demo:

1. The blazing performance and highest quality way (recommended):
a) Download the standalone player here. (NOT THE DEBUGGER)
b) Download the swf + mp3 here and open it with that player.

2. Play in browser. Great quality but not as good in performance.
a) By visiting this link

3. Watch the video.
a) HD Video at YouTube

Making of ‘Sparkle a Moment’ by Away3D Development Team and Evoflash

It was 18th of August when Rob Bateman, the head man of Away3D framework (the worlds most advanced open source flash 3D engine), sent me an email and asked for a demo for Robbie’s and Richie‘s session at Adobe MAX 2011. We did this sort of collaboration with Away3D guys last year. Although it was a insane job I was stoked to burn my self out a bit again for sake of art and passion for this sport.

I introduced an idea, made a little synapsis and created a rough mood board.
Minomus made the track for me last Spring for Assembly demo which I never coded so we had that with us from point zero. (a very good thing.)
Here’s the synapsis:

“Into the endless darkness two light spheres are born. Slowly giving meaning and life to surroundings. In gentle moving light of spheres objects are showing their forms. Objects are symbols of science, history, society, evolution. nature, liquid and time. When a sphere come close to object it’ll be shown by the light of sphere and can become life. It can start levitate, sparkle, move, glow or break apart. Eventually spheres will light up everything. All is glamorous and flourishing. Suddenly spheres pop into little sparkles and disappear. Everything turn into deep endless darkness again.”

People liked it (or was too busy to dislike it) so I got a green light to do the direction again. The Flash on the Beach was closing and everybody was way too busy and could not work for demo. We had a little meet up at the conference and could pick up models for the demo. Other then that it was just drinking and fooling around. After all kind of delays we ended up creating this demo in less then two weeks. Fabrice Closier and Richard Olsson was working with 3D models and Ringo Blanken did examples of physics. David Lenaerts committed a stack of his special effects and went to vacation. I tried to get things together. Worked epic hours with camera cuts, setup elements and desperately struggled to get something to screen so we could move on. Once we got things rolling the process was smooth as nylon. With this kind of abstract idea it’s very important to get something done and move on from there. It took a lot of everybody’s faith to get demo in state that it started to make at least some sort of sense. I’m quite sure it won’t make sense to most of the viewers after all, but at least we got it done!

Here are screenshots of scenes and some comments about them:

Sparkles are born in to darkness. Cold and warm light. You know… Symbols of Yin and yang, thermodynamics, sweet and bitter, life and death… all that kind of shit.

A clock. And cogs. Symbols of time obviously, but also progress.

Eagle. Is a historical symbol of strength, courage, farsightedness and immortality. It is considered to be the king of the air and the messenger of the highest Gods. This is obviously nonsense as we’ll witness in near future where everything eventually vanish. (talking about the demo not 2012…) Eagle is also an animal and represents the Animalia.

We dive under water and what we find? no.. it’s not salmon. It’s tuna and David’s awesome realtime mirror ball. Fish is of course part of Animalia, but also very important symbol in various of religions.

Lunar eclipse is here to remind us of cycling nature of world. As a symbol it’s very important in all sort of nonsenses like astrology. It also looked nice with radial blur.

The train leads us to humans and society. It’s developing extremely fast. The technological progress seems invincible. It slithers through all obstacles.

We’ll move on to military tanks. While band plays ironic smooth jazz they drive in perfect formation. Firmly and certainly jumping off the cliff and form pile of junk.

We follow sparks and see Hercules, the demigod, the son of Zeus at the bottom of highest stone pole. Eventually he will fall.

Demogod now fall into pile of stones. Gravity fade down. Sparkles vanish and void darkness continues.

Simply put demo is about lifespan. It’s constant property that everything has.

I’ve been mostly listening to these records during past two weeks while doing demo:
Tori Amos – Night of Hunters and Ladytron – Gravity The Seducer
They might explain this madness a bit.

Big hugs to Away3D guys Rob, Richard, David and especially to Fabrice and Ringo who did a lot of work and had solution to all problems we faced during this process.

Ahh it feels good to have GPU support in Flash at last! Until next time…

Ohh and here’s guys shared session with Flare3D guys at Adobe MAX.

Throwing salmon into back seat of Lada

simo — Fri, 16 Sep 2011 09:53:10 +0000

Real
time

Video
capture

I got a change to speak for three minutes at Flash on the Beach conference few days ago. I was one of the 20 speakers that got three minutes to show something they’ve done or discovered or whatever. The lineup was pretty damn hot in this session. One could build a conference around these people easily.

For some forsaken reason I was the last one of 20 to get into stage. So I had to wait 57 minutes behind the curtain. 57 minutes of nail eating, struggling against the pressure in my stomach and desperately meditating to keep my mental in some sort of order. The session it self went pretty well. I didn’t freeze too much. Hopefully FOTB will release videos from Elevator Pitch so I can see others stuff. They sounded really interesting behind the curtain.

My speech was about APEXvj of course. I’ll post video of it here if there’s gonna be one. The APEXvjDesktop is now in version 1.0 and we’ll move on to new project. We gonna get what we learned from earlier projects and build APEXvjHD with just Stage3D based effects. AWESOME! So related to that I showed this new Molehill experiment at the end of my speech. There are 87 380 particles flying. Movements and rendering are done in GPU so it runs pretty easily in full HD.

Here are songs that I used in my session:
– Ellie Goulding – Lights (Bassnectar Remix) by Bassnectar
– Blu Mar Ten vs Erykah Badu – You Got Me Remix
– Oliver – I Need You

It was brilliant to meet so many web friends in real life. There are risks involved in these geeks + beer situations. No, it’s not that it’s only talking about coding.. ohh no, not at all. I spent several hours with David Lenaerts talking about how we could throw all sort of fishes in to a car. Concludes are that best fish for this job is Salmon and old Lada has simply best back seat for this sort of sport. “You know what happens when shit hits the fan? -Fish hits the van”. I also witnessed chicken and ninja moves by party-@nicoptere and learned some really kinky drinking games from @grapefrukt. We also solved the mathematics behind Joshua Davis’s talk.

So it goes without saying that FOTB was simply epic experience.

APEXvj – Chapter two

simo — Sat, 21 May 2011 10:33:03 +0000

It has been 6 months since the first release of apexvj.com. During that time it has visualized songs for over 1.2 million visitors. Yeah that’s right. :) She did it all by her self. No advertising or such. It seems that people just like to share it. There aren’t specific group of people who share it. According to Facebook people from teenages to more mature seems to enjoy it. It’s pleasant to see comments like these . Also when I Google for APEXvj I found a stack of blog posts about it. To me this proofs the idea and execution isn’t entirely fail. It’s obvious that this concept can be pushed much more.

One thing people constantly ask for is ability to use APEXvj offline and to play their local files. Currently APEXvj can play only one mp3 file at the time. That isn’t enough. So obvious move is to go to desktop. I’ve been promising APEXvjDesktop for several months now and been slowly developing it on weekends and at nights. Plus this I’ve been working as Lead Developer on my day job. Naturally this isn’t very good mix. One cannot code 24/7 without becoming burnout human ruin at some point.

Although one of the most important component of APEXvj are visuals and they came by my hands a successful service needs much more. As I’ve blogged before a friend of mine Art Director Jani Länsimäki designed layouts, graphical lines and worked with me to clarify the concept and user experience. I believe that without this combo this toy would not be as good. Jani brings so much to table and also get best out of me. I wanted this combo back with full power.

It was not simple task but I’m happy to announce that team is back again! We managed to make a deal and have now been developing the APEXvjDesktop almost fulltime for a week. This will continue at least until end of this year. So there are 7 months to show what we are made of. We have a lot of ideas on the table waiting for their creation, but first we are working on getting the first release of desktop out before summer vacations. I won’t show you all the cards at this point but here are few sneak previews. Screenshots are taken from the current development version and they contain only offset graphics.

Bunch of new visualizations and ability to control their attributes in real time. Users can create combinations little like in demotools and share them. Users can also show the visualization on one screen and adjust their attributes on second.

New music sources such as Audiotool (maybe more… ;) ) and ability to play all local music files including the iTunes format .m4a. You can also create custom list as excepted.

I’ve been working fast phase projects for 10 years so guess how thrilled I am to have this opportunity to create something without compromises and with relatively long time phase! I think we’re going to setup a short beta test phase before first release so if you would like to take part on that just drop a message to this blog or tweet me.

The way we name our classes

simo — Fri, 01 Apr 2011 11:53:27 +0000

This minor detail has been haunting me for years. It’s not extremely significant, but really makes a difference with modern coding tools.

I’m talking about the code hinting that all decent coding tools have. It’s such a priceless feature, but for some reason I often see libs that don’t take advantage of it. Most libs are still coded in “clear English format”.

For example:

Let’s pretend for a second that you are coding as3 for the first time. You heard that there are filters, but you don’t know what sort. In this case you need to open your manual and see the filters-section and save the names of all filters into your already overloaded brains. Or at least the first words of them. This leads you to jump back and forward with the manual during your development. For example you would like to add a shadow to image. So you might try to type something like Shad and ask code hint for some guidance. What do you get? Shader this and that… Where’s the shadow filter??? After some clicking you find from your manual that the correct word is DropShadowFilter.

Instead all this could be solved with extremely simple naming solution = FilterShadowDrop. In this case you could just type Filter and the code hint would serve you a list of all filters at the lib and there could even be different sort of Shadows.

So the idea is to name your classes with type first method. Here’s an example of lib that contains Frisbee’s:

This is why I’ve named classes at evoCunningParticleEngine as follows:

And this is exactly why command-type classes are named with C-letter at front:

I don’t see why code should be clear English when instead it could be just clear code with good design patterns and named so that it’s intuitive to use. I can sure you that with this kind of naming the manual paddling will decrease fundamentally.

Or do you disagree? Am I missing something here?