After a bit of work during the weekend, an early version of AGALtheMEaN is available here. It should be a handy tool for those wanting to learn AGAL. It allows you to experiment on realtime with AGAL shaders.

A little explanation about how to use it:

- File -> New Shader: Choose a sample shader.
- Help: Useful AGAL info.
- Shaders Panel: Write AGAL code here and see it recompile in real time.
- Log: If something is wrong with your shader, it will be reported here.
- Constants Panel: Add/edit your shader constants here.
- Attributes Panel: Determine what vertex attributes your shader uses.
- Samplers Panel: Set up textures/images for your shader here.
- Model: Change the used model or its transformation here.

Edit: The sources are now available on GitHub. This is in case anyone wants to help… If you do look at the source, sorry for the mess, I don’t have the luxury to spend enough time on this on a way that it’s tidy

Something that I would like help on (and think would be pretty cool) is the ability to save your shaders on an online database, that way we can start sharing shaders with this app.

Edit 2: v0.5 is up with a few improvements, the main one being the ability to use mip mapping.

In my last post I mentioned my intentions to make shader experimentation in Flash simpler. Well, I figured that the obvious first step was to make a tool that lets you focus on AGAL, and AGAL alone, which is quite a LOT by istelf! Even without having to worry about the rest of the rendering pipeline or having to recompile your app every single time you make minute changes to your obfuscated opcodes, AGAL is hard enough. The video shows a very early preview of such tool, which can be used to edit AGAL shaders in real time.

In the video, you can see how a basic phong shader is loaded, its fragment constants tweaked and its shader code altered while the visual output updates instantly… The tool is at a very early stage, but already proves quite useful in facilitating shader experimentation in Flash. As you type, it recompiles your Program3D or updates the constants it needs, whenever it finds it necessary. Program3D exceptions are intercepted and sent to the log panel without interrupting your flow. During these exceptions, the output is simply not rendered but you are shown what’s wrong with your shader in the log panel. Notice this process running in real time while tinkering with the AGAL code. This should be quite helpful for anyone trying to learn AGAL, or just wanting to make a quick sketch of an AGAL shader.

Disclaimer: I am basing the design of AGALtheMEaN on Mac’s OpenGL Shader Builder.

No live demo or source yet, sorry. I will release both as soon as development reaches a reasonable stage. However, it is a good moment to express feature requests, suggestions, ideas, wishes, or any sort of comments about the tool, like for example, if you like its name or not

EDIT: Try out a very early version of AGALtheMEaN here.

demo

First of all, a “NOT-BIG-NEWS” warning. This is basic Stage3D stuff, but again, as part of my Minimole project intended only to experiment with Stage3D and understand how the big 3D engines out there work, this could help others understand Stage3D as it helps me.

Two things currently happening in Minimole: 1) being a bit fed up with how slowly Adobe advances Pixel Bender 3D, I decided that my dream of never having to deal with the difficult AGAL was not being realistic, so I started developing basic materials with AGAL. PixelBender3D materials are still there, each material will have corresponding PB3D/AGAL versions, so it could be a good resource for comparing them. For example, the phong shader I just committed to minimole looks like this:

Yeah. AGAL is mean. This doesn’t even combine shader bits as engines like Away3D do, but its a start in understanding AGAL. I intend to keep practicing the language and produce more “hardcoded” materials in Minimole, so stay tuned with the project to see more examples.

A note about this particular shader: In the PB3D equivalent of this shader, I was calculating direction to light and direction to camera in the fragment shader. This one performs such calculations in the vertex shader and interpolates them in the fragment shader, which appears to produce better visual results, appart from performing better of course.

2) Something I observe with Away3D is that it’s powerful material system is so complex, that it’s not easy to step in and write some custom shading. Having been playing with Cinder lately, I’m in love with how easy you can write a GLSL shader and inject it into a mesh. I wish I could do the same with Flash. So minimole will be starting to take this direction, that is, expose the Stage3D API in a more “creative coding” way instead of a “full rendering engine” way. My goal is to be able to use Minimole in a way that you can easily experiment with shaders in Flash. Cause shaders rule!

Given the unfriendliness of AGAL, the path will be hard. I doubt that I will be able to produce things like Haxe’s HXSL or Flare3D’s FLSL in the short term, but I will start by focusing on making this stuff simpler. The current state of Minimole fulfills this task a bit. You can easily create new AGAL materials and start getting acquainted with AGAL without having to worry much about the camera projection matrix, geometry, etc and directly focus on intermediate AGAL shaders.

If anyone has ideas on this “make custom shader development in Flash easier” proposal, please feel free to comment. I’m open to ideas.

Stay tuned for more news…

Watch the video in HD in Vimeo.

First look at Twitter’s Streaming API from Flash. The service returns real time tweets, which are then compared to specified search terms. If a match is found, the tweet is plotted on a simple 3D globe in red, otherwise, in white. The experiment searches the twitter database on users that have enabled geo-location only. It would be much more effective if more people had this setting enabled. It can also search in specific areas… The Streaming API looks great so far!

3D wise it’s not too special, just a sphere with an Earth texture, a normal map and a specular map. Longitude and latitude positions from the service are converted into cartesian coordinates and expanded to produce opposite line segment points. The points are contained in Away3D’s SegmentSet, which shares one set of buffers for about 16000 lines, so, there is little limit to the amount of tweets that can be plotted.

PS: Sorry that there is no live demo yet. I don’t seem to be able to connect to twitter outside from a web server yet . Any help on that would be appreciated!

Today I found a great tutorial for getting started with OpenFrameworks coming from an AS3 background, which is exactly where I’m at right now. I’m trying to expand to other languages for several reasons, specially for creative coding matters. Check it out, I really recommend it to anyone with similar interests: Getting Started with OpenFrameworks by Stephen Braitsch.

I added a bit of 3D to the source and connected it to an arduino. You can control zoom with a potentiometer and z rotation with another. Sorry for the crappy video:

Sources 1 – just the 3D addition.

Sources 2 – with the Arduino stuff (you need to load the firmata example on the arduino for the code to work, and change the arduino.connect() method in C++ to point to the appropriate arduino serial port).

A couple of variations of the previous demo. We’re trying to figure out how to take anaglyph photos in real life, so the new set up has a few parameters that you can tweak in order to aid in understanding what’s going on with perspective on 2 cameras.

[UPDATE] – These demos are not working at the moment. I apologize. There seems to be quite a few problems with PixelBender3D and the latest Flash Player 11 release. Since this is still in Beta, I suppose this kind of problems are expected. I am waiting for a new PB3D release and will update the source as soon as possible.

Demo 1. – Flash Player 11 required.

Demo2. – Flash Player 11 required.

Implementation: 2 cameras are used instead of 1, slightly shifted to left and right. What they see is rendered to 2 textures which are then sent to a PB3D shader that does the color transformations in order to produce an anaglyph image. This image is then printed on a plane which always faces the camera, which is actually what you see.

It’s a bit slow, but I think it can be considered a good proof of concept. If this was implemented on a more advanced 3D engine, performance should be just fine.

Color transform shader based on this PB2D work by David Shelton.

[UPDATE] – These demos are not working at the moment. I apologize. There seems to be quite a few problems with PixelBender3D and the latest Flash Player 11 release. Since this is still in Beta, I suppose this kind of problems are expected. I am waiting for a new PB3D release and will update the source as soon as possible.

Demo.

Make sure you view this with red-cyan 3D glasses. Built on Minimole, fp11 needed.

I’d like to share a very small Molehill based 3D engine I’ve been developing lately. It’s called Minimole. It’s not intended for building complex 3D projects or supporting an extended feature set, but rather to expose how a 3D engine could be constructed on top of Molehill. It’s just for learning/experimentation purposes. If you’d like to understand how a complex, full featured 3D engine like Away3D’s Broomstick works, Minimole would be a great place to start.

Demo. – Flash Player 11 needed.
Keyboard arrows or WASD rotates the camera. Z and X moves the camera radially. Please be patient, the demo uses some pretty heavy textures (swf is 7mbs!) and there is no preloader

Minimole uses Pixel Bender 3D basic shaders, so it is also a good test base for shader experimentation. Setting up new materials and PB3D shaders with it is very easy.

Its design is based on Broomstick. I tried to keep it as similar as possible interface-wise and not really care about copying stuff from it since this engine is not intended to replace Away3D, but learn from it. You can consider Minimole to be a hyper simplified, less efficient, not lighter version of Away3D. The only advantage over it is that it is easier to understand.

I don’t intend to take the engine much further than its current state, but you might expect it to be updated and fixed in the upcoming weeks. If you’d like to comment on it, make suggestions, questions, etc. Please do!

UPDATE: Added a few more experimental materials like PhongToonMaterial, VertexColorMaterial, XRayMaterial, EnviroSphericalMaterial, EnviroCubicalMaterial… The reflective materials don’t work properly yet because of some issues with PB3D, but they should be fixed as soon as Adobe makes a few updates on PB3D.

UPDATE1: WireframeMaterial. This is a resolution independent one-pass solid wireframe drawn with triangles.

Demo. Source here. Drag the path handles to bend the sprite.

The experiment makes use of a small library I just uploaded to google code called as3bend. It has the ability of bending a sprite along a given path. The library makes use of swfvector in order to extract the vector data of a Sprite. It then uses a small modifier to align that data onto a path.

How might this be useful? Well, in my case, I am trying to make a plant whose skeleton is controlled by box2d physics. I could have done it with Flash’s bones tools but I found that accessing bone’s data at run time is rather uncomfortable, plus using box2d instead yields much more realistic results. The bones tool can bend a shape to follow a bone, but all this happens in the Flash authoring tool, not allowing you to do it at run time dynamically via AS3. So this is where this little library comes in, you just wrap your graphics around an OpenSprite object, specify a path to the modifier, and your graphics can bend to any box2d kinematics at run time.

I imagine this is a common problem in Flash, so if you’d like to collaborate with the project just let me know. I suppose this could be expanded to some sort of 2D version of as3dmod.

Demo.

This is the demo we did a while back, now updated to the latest broomstick version, which was only exposed in video. The idea is not to produce realistic trees but rather demonstrate the polycount power of Molehill. With a regular macbook, I get around 26fps with over 4,000,000 polygons in the scene.

The trees are generated using a very simple idea exposed in this post.

The source should be available in the Away3D Broomstick examples soon.

Click here to see the experiment. (Click and drag to rotate, use keyboard arrows or wasd to move, z and x to zoom).

If you subdivide a cube by 3 from each side (yielding 27 cubes) and remove the 7 inner cubes (resulting in 20 cubes), you get a level 1 Menger Sponge. If you perform the same process on each of the resulting cubes, you advance to level 2. The demo shows a level 3 sponge.

The primitive is built using a very simple recursive function:

private function step(level:uint, x:Number, y:Number, z:Number, size:Number):void
{
if(level == 0)
buildCube(x, y, z, size);
else
{
var s3:Number = size/3;
var nLevel:uint = level – 1;
step(nLevel, x – s3, y + s3, z + s3, s3);
step(nLevel, x, y + s3, z + s3, s3);
step(nLevel, x + s3, y + s3, z + s3, s3);
step(nLevel, x – s3, y, z + s3, s3);
step(nLevel, x + s3, y, z + s3, s3);
step(nLevel, x – s3, y – s3, z + s3, s3);
step(nLevel, x, y – s3, z + s3, s3);
step(nLevel, x + s3, y – s3, z + s3, s3);
step(nLevel, x – s3, y + s3, z, s3);
step(nLevel, x + s3, y + s3, z, s3);
step(nLevel, x – s3, y – s3, z, s3);
step(nLevel, x + s3, y – s3, z, s3);
step(nLevel, x – s3, y + s3, z – s3, s3);
step(nLevel, x, y + s3, z – s3, s3);
step(nLevel, x + s3, y + s3, z – s3, s3);
step(nLevel, x – s3, y, z – s3, s3);
step(nLevel, x + s3, y, z – s3, s3);
step(nLevel, x – s3, y – s3, z – s3, s3);
step(nLevel, x, y – s3, z – s3, s3);
step(nLevel, x + s3, y – s3, z – s3, s3);
}
}

Level 4 takes a bit of calculation time (a few seconds), but is rendered at a reasonable speed considering it generates around 2 million polygons.

In case you’re trying to set up an IntelliJ project that uses the Molehill API, you followed all the instructions on Adobe Labs, and you are still getting the “Class flash.display3D::Context3D could not be found” runtime error, this might help. Apparently, IntelliJ doesn’t know how to handler the “-swf-version=13″ additional compiler argument. But fear not! There is a hack. The hack was passed to me by David Lenaerts, so many thanks to him for saving trillions of human hairs. If you do this, you shouldn’t have any trouble experimenting with Molehill in IntelliJ. If anyone has an alternative method, please comment!!

What you need to do:

As for Flash Builder, FDT, etc.

1) Uninstall your Flash Player and install the Flash Player Incubator version. You can get the uninstaller and the installer plus instructions at this Adobe Labs link.

This is an Adobe Labs Flash Player 11 non official version for devs who want to try this stuff out.

2) Download and unzip a Flex Hero 4.5.0.x SDK to your hard drive at this Adobe OpenSource link. I would recommend getting something like 4.5.0.19786.

This SDK is needed for by the Molehill API.

3) Get the latest playerglobal.swc from this Adobe Labs link. Additionally, you can also get the Flash Player Incubator version documentation at this same link.

This swc contains the Molehill API.

4) Go to the Hero SDK in your hard drive, to frameworks/libs/player/10.2 and replace the playerglobal.swc with the one downloaded at step 3. Make sure the new swc bears the same name as the last one.

Now the Hero SDK is modded with the Molehill API.

Specific to IntelliJ.

5) Duplicate the 10.2 folder from step 4 and rename it to 10.1 so you have 2 folders in frameworks/libs/player/, 10.1 and 10.2.

6) In the SDK’s bin folder, there should be a file named “mxmlc”. Edit it with a text editor and change the last line reading:

java $VMARGS $D32 $SETUP_SH_VMARGS -jar “$FLEX_HOME/lib/mxmlc.jar” +flexlib=”$FLEX_HOME/frameworks” “$@”

to:

java $VMARGS $D32 $SETUP_SH_VMARGS -jar “$FLEX_HOME/lib/mxmlc.jar -swf-version=13″ +flexlib=”$FLEX_HOME/frameworks” “$@”

then save and close the file.

7) This setting is per IntelliJ project. File->Settings->Compiler->Flex Compiler, check the Mxmlc/compc option.

8 ) This setting is per IntelliJ module. Make sure you target the Flex Hero modded SDK and target Flash Player 10.1 and not any other.

9) This setting is per IntelliJ module. In additional compiler arguments, set -swf-version=13.

10) This setting is per IntelliJ module. To get optimal performance, set wmode=direct in your wrapper html.

Well, that’s it. Hope it avoids you hours of frustration. Time to play with Molehill ;D

Demo. Click and drag to create particles and disturb the fluid.

I’ve been wanting to do SPH fluid simulation in Flash for quite some time now. A problem with simulating fluids using particles is that you can’t do microscopic particle to particle analysis for that many particles, because it simply is too much work for the CPU. Techniques like Smoothed Particle Hydrodynamics perform a macroscopic analysis on the fluid and then interpolates that data onto the particles. Massive particle collisions is one of my main interests in programming and SPH seems to be ideal for this.

Unfortunately, the technique is difficult to understand, involves higher mathematics, physics and quite a bit of knowledge of programming. Fortunately, the fluid master Grant Kot has agreed to help me. Ideally, we’d like to take this to the 3D realm with Away3D. This is a hacky, unoptimized first attempt, but shows that this kind of thing is definitely possible in Flash.

The experiment runs with 10,000 particles on C++ code provided by Grant, using a variation of SPH known as Material Point Method (MPM). The C++ code is connected to AS3 via Alchemy using a memory marshaling technique exposed by Raplh Hauwert in this great post.

Update: Here’s a slight variation that sets initial conditions for a collision, without gravity.

Update1: Another variation after playing a bit with the rendering method using pixel bender.

Demo.

You’ll need to install the new Flash Player from Adobe’s Incubator Program to see the interactive demo. Alternatively, you can watch a video of it here.

The experiment uses the same pixel bender code as in my previous post but renders output using the Away3D 4.0 (broomstick) engine. No comments on the performance and graphical difference… just “WOW”.

Learn more about this on Away3D.com!!

Click on the image to see a simple implementation of 3D ripples in Away3dLite. Clicking on the mesh triggers disturbances on the surface, which then propagate through it. Wave equations are great for this kind of thing, and I found them to be an accessible entry point for fluid simulation. Particle based fluid simulation is next on my wish list.

You can find an explanation of what’s going on here.

The implementation uses Pixel Bender to make the 2D wave calculations. The math is not simple at all, but the numerical implementation is surprisingly simple!

This should start to become interesting with more rendering power since the actual PB wave calculations occur very fast and it’s the graphics rendering that burdens the CPU. The long awaited Flash hardware acceleration should be specially handy in this case.

Part of the source here.

I’ve been wanting to try out processing for a while and peek outside of the Flash box. Click the image to run the applet, once in it click and drag the stage to exert a force on the canvas.

A little flash photo portfolio website. Check out the awesome photos!

www.blauff.com.ar

As3-wise, I’d like to recommend some of the libraries I used for the project. It was a pleasure working with them for the first time. Picasaflashapi is a great library for connecting with google’s picasa web service for photo storage and maintenance. You can download the Picasa software and update your gallery in seconds. Flint is a very easy to use and powerful particle engine. Standingwave is an api for generating dynamic sound. And Robotlegs is an awesome, minimalistic mvc framework for putting together your actionscript applications. Beyond that, I really like the idea of using an internet radio as the music for a website. In this case, the radio used is Radio Swing Worldwide: the best music from the 30′s!

I got a chance to work with the Away3D team on a little demo using Adobe’s 3D hardware accelerated API codenamed Molehill. I must say forehand that what Adobe and the Flash community are doing here is truly exciting!

This API provides a bridge between Actionscript and OpenGL or DirectX, depending on the configuration of the machine the Flash Player is running on. While I’m still trying to figure out much of how the Molehill API is used since it is extremely low level, the Away3D team -as well as many other 3D experts from the community- have been working closely with Adobe and are doing a superb job on a new version of Away3D built on top of Molehill.

When the team asked me if I could make a demo, I was a bit skeptical; I know too little about OpenGL or DirectX and the way the Molehill API works… How could I possibly make a demo? The thing is, when I used the new engine, everything was exactly the same. As far as the end Away3D user is concerned, the API is identical. The only difference was that I could now render 4,000,000 at 60 fps! Amazing.

These demos are only available as videos obviously, since you’d need to have a specific Flash Player version installed on your system, which is not publicly open yet. When this does go open though, it will be very exciting times for 3D in Flash. Not just polygon count-wise, but on the general quality of 3D rendering since hardware acceleration should give the 3D engines a much wider range of development, in which many of the more advanced 3D resources could be assimilated.

The demo is conceptually the same as my previous 2D fractal tree demo, but in 3D since the high amount of polygons required is now accessible: A square generates a triangle on top of it and from each triangle 2 cubes arise, and so on the fractal tree is formed, all this with minor random variations. At the end level, simple leaves are generated.

A few days ago, our latest Away Media work  was made public. This time it’s www.mydreamdevice.com, a website where you can arrange existing 3D models into all kinds of creations. The site is a simple but fun way to promote Qualcomm’s Smartbook computer: you can create your dream device with components that all exist miniaturized in the Smartbook. Right after the site became live, people started to effectively use the tools we provided, but not precisely in the way we had in mind. But hey, I have to admit that I couldn’t stop laughing after seeing some of the obscenities that were created! Too bad there has to be a moderator :-/

Our main focus was to make the manipulation of 3D elements as simple as possible and as least “techy” as possible. It’s pretty amazing how hard this is to do once you get involved with the task: you need to manipulate things in 3D with a 2D interface BUT you can’t introduce abstract concepts, a complex interface, just 3 or 4 buttons! It was quite a challenge, but I think we did a reasonable job. While doing this I studied a lot of 3D interfaces in different softwares. They vary a lot and are usually very effective but they all require you to “learn” how to use the rather complex controls. None seem to have what we tried to accomplish here: A set of controls that you don’t need time to adapt to, just a few clicks and tests and you’re ready to go after a few seconds. In real life, you don’t need to know about X, Y, Z in order to manipulate objects, so why would you need to be familiar with 3D tools in order to effectively drag things around in virtual 3D. I must admit though that the only way I see to do this perfectly is to actually have a 3D interface, but I guess that won’t happen for a while. Anyway, there is a lot behind the apparent simplicity of the results and the topic of natural, simple interfaces for 3D editing is very interesting.

Another nice thing that we dealt with in the project is OBB collisions and collision response. I wrote about how to detect OBB collisions before, but not about how to resolve them. The challenge here was to make the colliding objects respond physically, without having the user loose control of what’s in his grasp, which is the typical response a real physics engine would cause. In the end, the physics are so simple that its nice not to have to use a full 3D physics engine.

It has been very nice to work with such level of designers from Cocomino (www.cocomino.com). I really hope we create more cool stuff with them!

CLICK HERE TO VIEW DEMO

On my last post about this topic I was using a very inefficient triangle filling method; for each triangle joining the center of a Voronoi cell with one of its boundary segments, I was performing a per-pixel distance check and, depending on such distance, the amount of white for the analyzed pixel was determined.

I realized that, since the distance was being checked linearly, a gradient fill would actually do the trick. It works, and a lot faster. Also, since this runs with gradient fills, the method can generate a very large variety of different “Voronoi noises”, try playing around with the source and you’ll see.

This demo uses Alan Shaw’s AS3Delaunay library. It runs just as fast as the one I used previously (Controul’s) which is amazingly fast for pure AS3, but it is actually much more comfortable to use. Controul’s Voronoi class is kind of encrypted because of all the optimizations it has, and returns only the Voronoi segments data. Shaw’s Voronoi class can be asked for just about anything, from Voronoi segments to Delaunay triangles, spanning tree, nearest neighbors, etc. Thanks for this Alan!

I wonder if using drawTriangles() or bitmap fills could make this even faster. Any suggestions would be highly appreciated!