Take a look at this amazing custom 3d isometric engine for building 3d virtual worlds. This literally just popped up on the scene. It seems that they are progressing nicely, not sure how much it can handle in terms of multiple assets but they have a sample of a house and many effects such as lighting (day+night changes), interpolation, zooming levels etc. They are using their own custom 3d engine and texturing system but it is probably highly inspired by the new 3d engines available out there.

Try out the sample here

Now we have all the techs in one engine. Now we also can add bump-mapping and unique lighting FX (say, some green light on a wall near the grass). The engine has some optimization potential, but speed is mainly based on a texture quality settings.

It is supposed that all the objects will be in a 1 pixel = 1 centimeter scale.

Keys:

• Spacebar — change daytime
• Mouse wheel — change scale
• Shift + wheel — tex quality
• Ctrl + wheel — lightmap quality
• Alt + wheel — groung quality
• Q — tex interpolation on/off

The real-time lighting and 3d aspects of this look very promising. There are strong limitations to bulk in 3d in flash, for instance if you had a view with 100-200 homes and zoomed out with this I would like to see the performance then. Amazing work by this Russian development team.

Via Den Ivanov from Park

All the demos from this engine are excellent here’s some:

• BumpMapping and on off lights
• Rubiks Cube
• All of their 3d work

Flash Performance and HD (H.264) Video Progress

Fast performance is needed for good video combined with interactivity especially. Quickly comparing AS2 to AS3 shows that AS3 and the AVM2 virtual machine in Flash9 is much faster. If you are combining Flash and video especially when it is time to go HD, you will need performance.

Compare AS2 to AS3 rendering: AS2 & AS3 Note the as2 item only has 10000 pixel operations, the as3 item has 50,000 and is considerably more usable, in fact the AS2 version isn’t usable since it is slow. [source] This is a good test because it checks the movement of every pixel on the screen which leads me to video performance.

Flash HD in the FLV format is pretty nice looking today in Flash9 with AS3. But to keep up there are more formats and a move to support H.264/MPEG-4 AVC I am sure for online TV/Movie market.

The reason to bring up performance and video is because the video battle on the web is heating up even more between Adobe and Microsoft with Flash Video and Silverlight Video. The recent released info regarding HD on Flash is to combat Silverlight HD video that is looking pretty good.

Silverlight Performance and HD Video VC-1

View this Halo 3 video in Silverlight HD:

View it->

Recently Silverlight came out last week officially on Wednesday, really the 1.0 release is just a video and javascript release but when you view the videos below you will see that they have a short coup de tat on Flash video at the moment in terms of HD quality video.

Silverlight also has been pushing TV on the internet. See these samples that are actual TV on web pages already using Silverlight.

1. Home Shopping Network Online
2. ET Emmy’s coverage
3. They also have WWE and MLB.com baseball already using Silverlight video.
4. Netflix online video uses Silverlight

Flash video is cool and you can do great fun things like neave.tv (flash and high definition FLV video in flash9 with AS3 and on occasion AS2 if it is just video with full screen flash but when you are talking TV and movie quality, it is still up for grabs but both are looking good especially Silverlight and that Halo 3 video.

Flash video is updating to H.264 [source]

Tinic Uro reports the beta player of flash that has HD now. Currently the FLV format is the web leader (you tube, Google video) but is not as good quality as Silverlight until they update to H.264 at least in terms of standards video. This is probably 6 months off?

Video literally changed in the internet in the last two weeks with the Flash announcements and Silverlight launching. I am surprised at Silverlight’s adoption rate and partnerships so far with the 1.0 offering which lacks many programming tools, but I see why on the video front why they did it. When 1.1 comes out it has all the programmer toys, and it will attract a lot of attention I think. It is all about performance and HD video right now.

Yes yes… Quicktime has done HD/H.264 video for a while but Quicktime is just a video format really, it will be able to be used in the new flash video as well as other formats but it doesn’t have the interactive platform behind it like Flash and Silverlight have.

The difference is the choice of format and standards. Silverlight with VC-1 and Flash going to H.264 codec. They are largely competing standards that are both “HD”.

The good news is we have competition to bring really high quality video to the web, the mashups with HD video in interactive games, demos, advertising etc will be very fun.

When debugging flash sometimes you need to either debug in browser or check a past version of the Flash player or the new beta player to see how things are looking. Here is a list of some tools beyond the included debugging IDEs FlashCS3 and Flex2 that are helpful to making your flash projects more bulletproof.

• Firefox Flash Version Switcher from Sephiroth
  

  

  
  Find out if your code is just messed in the latest version or an older version of the flash player. This has links to the older versions of the Flash player from Adobe that you are interesting in testing.

• Xray Flash/Flex Debugging Kit by John Grden XRay is a flash/flex debugger
  

  

  for real-time debugging and spying on your code. It is 16KB for the connector that you add to your files but it is debugging in style. If you have any issues with a live app or to help during testing Xray is great. It also includes a nifty admin site that allows you to access objects and spy on your code at any time.

  

  Xray (The AdminTool) is a “snapshot viewer” of the current state of your Flash application without impacting the performance or the file size of your application. Xray’s true nature is to look into the very guts of the Flash application and disolve the 2d myth you see on screen to a 3D tangible entity you can truly crawl through.Xray is brought to you by Blitz Labs.

• AS3 Debugging with Firebug and Actionscript from marcosweskampWhen using Firebug (a web developers Swiss army knife for browser debugging) you can also use actionscript to write to the firebug console with this class from marcosweskamp The code to Console.as for firebug is here.
  

  

• Output Panel from Senocular
  Last but not least, try out this class that creates or mimic the output panel in flash. Another great quick class from senocular. You have to change your trace command to Output.trace but I recommend that you abstract logging anyways to a method that can determine to trace, Output.trace(str:*) or any further logging you might want to do for debug or application logs (it also makes it easy to switch out logging options). This Output panel can help when you don’t’ have the debugger available, or for use in a live debug mode of your application. This class can be implemented in minutes.

  package com.senocular.utils {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.GradientType;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import flash.text.TextField;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextFieldAutoSize;
  
    /**
    * Creates a pseudo Output panel in a publish
    * swf for displaying trace statements.
    * For the output panel to capture trace
    * statements, you must use Output.trace()
    * and add an instance to the stage:
    * stage.addChild(new Output());
    *
    * Note: You may want to place Output in an
    * unnamed package to make it easier to
    * trace within your classes without having
    * to import com.senocular.utils.Output.
    */
    public class Output extends Sprite {
    private var output_txt:TextField;
    private var titleBar:Sprite;
    private static var instance:Output;
    private static var autoExpand:Boolean = true;
    private static var maxLength:int = 1000;
  
    public function Output(outputHeight:uint = 150){
     if (instance && instance.parent){
      instance.parent.removeChild(this);
     }
  
     instance = this;
     addChild(newOutputField(outputHeight));
     addChild(newTitleBar());
  
     addEventListener(Event.ADDED, added);
     addEventListener(Event.REMOVED, removed);
    }
  
    // public methods
    public static function trace(str:*):void {
     if (!instance) return;
     instance.output_txt.appendText(str+“n”);
     if (instance.output_txt.length > maxLength) {
      instance.output_txt.text = instance.output_txt.text.slice(-maxLength);
     }
     instance.output_txt.scrollV = instance.output_txt.maxScrollV;
     if (autoExpand && !instance.output_txt.visible) instance.toggleCollapse();
    }
    public static function clear():void {
     if (!instance) return;
     instance.output_txt.text = “”;
    }
  
    private function newOutputField(outputHeight:uint):TextField {
     output_txt = new TextField();
     output_txt.type = TextFieldType.INPUT;
     output_txt.border = true;
     output_txt.borderColor = 0;
     output_txt.background = true;
     output_txt.backgroundColor = 0xFFFFFF;
     output_txt.height = outputHeight;
     var format:TextFormat = output_txt.getTextFormat();
     format.font = “_typewriter”;
     output_txt.setTextFormat(format);
     output_txt.defaultTextFormat = format;
     return output_txt;
    }
    private function newTitleBar():Sprite {
     var barGraphics:Shape = new Shape();
     barGraphics.name = “bar”;
     var colors:Array = new Array(0xE0E0F0, 0xB0C0D0, 0xE0E0F0);
     var alphas:Array = new Array(1, 1, 1);
     var ratios:Array = new Array(0, 50, 255);
     var gradientMatrix:Matrix = new Matrix();
     gradientMatrix.createGradientBox(18, 18, Math.PI/2, 0, 0);
     barGraphics.graphics.lineStyle(0);
     barGraphics.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
     barGraphics.graphics.drawRect(0, 0, 18, 18);
  
     var barLabel:TextField = new TextField();
     barLabel.autoSize = TextFieldAutoSize.LEFT;
     barLabel.selectable = false;
     barLabel.text = “Output”;
     var format:TextFormat = barLabel.getTextFormat();
     format.font = “_sans”;
     barLabel.setTextFormat(format);
  
     titleBar = new Sprite();
     titleBar.addChild(barGraphics);
     titleBar.addChild(barLabel);
     return titleBar;
    }
  
  // Event handlers
    private function added(evt:Event):void {
     stage.addEventListener(Event.RESIZE, fitToStage);
     titleBar.addEventListener(MouseEvent.CLICK, toggleCollapse);
     fitToStage();
     toggleCollapse();
    }
    private function removed(evt:Event):void {
     stage.removeEventListener(Event.RESIZE, fitToStage);
     titleBar.removeEventListener(MouseEvent.CLICK, toggleCollapse);
    }
    private function toggleCollapse(evt:Event = null):void {
     if (!instance) return;
     output_txt.visible = !output_txt.visible;
     fitToStage(evt);
    }
    private function fitToStage(evt:Event = null):void {
     if (!stage) return;
     output_txt.width = stage.stageWidth;
     output_txt.y = stage.stageHeight - output_txt.height;
     titleBar.y = (output_txt.visible) ? output_txt.y - titleBar.height : stage.stageHeight - titleBar.height;
     titleBar.getChildByName(“bar”).width = stage.stageWidth;
    }
   }
  }
  

Other debug and logging tools that may help are listed here from OSflash.

• Alcon – An external output console for Actionscript debugging
• LuminicBox.Log – A logging API and output console for ActionScript
• DebugIt – Displays traced data in a seperate SWF so you can debug outside of Flash, while running your application in its shell/production environment.
• Print_r Debugger – Brings PHP‘s “print_r” to Flash, invaluable once you start to use it. Free, Complete Source Available
• Sock4Log – JAVA application which displays traced data from SWF and other (PHP,JS…). Could be a command line or windowed application.

Haxe is a very interesting project that is a scripting language that can create SWF for Flash.

Haxe has now added Flash9 Assembler library called hxASM and released version 1.1.4 that includes performance updates for Flash9 SWFs compiled using Haxe scripting.

I have to compile SWFs dynamically right now in a service and this is a very attractive solution with the new version and the performance improvements. Previously there was some slow down and only static content really worked well but if this is equal or a 30% improvement that is excellent.

Flex 2 can also compile at the command line you can compile flash9 swf with or without the flex2 libraries, when using mxml the flex libraries are included which add 100k or so minimum. It is not required to compile with flex 2 libraries though.

Flex 2 command compiler options

Haxe command compiler tutorial

Using Haxe with Flex 2

Using Haxe hxASM

Full Haxe API (includes all flash libraries)

Bubblemark has added a JavaFX version of his bubble animation test that spans now all of the RIA technologies out there. Bubblemark is a great site and has been a great site for comparing animation in the browser. Alexey Gavrilov has kept the site up to date on all versions of Silverlight since when it was WPF/E and it is a nice quick baseline test to check FPS performance across these new vector toolkits and scripting.

My results are very similar to Bubblemarks tests:

JavaFX — 14 fps
Firefox + Silverlight (JavaScript) — 56 fps
Firefox + Flex — 62 fps
Adobe AIR — 62 fps
Firefox + Silverlight (CLR) — 99 fps

Silverlight is not final and is quite light compared to Flex (I wonder if a vanilla Flash9/AS3 export has been done or if it would perform any different), but if Silverlight has a lead on FPS, where FPS is really success of any kit in RIA or vector, then it could be a rough battle. Flash/Flex is really far far ahead due to the browser penetration and the development community but the better performance is always a good indicator of possible success. Plus, Microsoft controls the desktop market and any “benefits” it might give their own kit which includes distribution and performance in preloading or caching.

mr doob has posted a first away3d verses papervision3D test for the same model and found pv3d to be faster than away3D. Who wants to take the source and test it on Sandy?

Disclaimer: Test can vary on types of content and different systems or browsers to it is not a definitive test just one test, more will be coming and the faster it makes engines the better for adding more content to each project.

Papervision3D (src): 14FPS, Memory: ~8,5Mbytes
Away3D (src): 10FPS, Memory: OPS!
Away3D (CORRECT_Z_ORDER) (src): 5FPS, Memory: OPS!

So far there are a few good flash 3d engines But it will all come down to performance for the best.

• Papervision3D
• Away3d (from pv3d – there are a few other revisions of pv3d like wow engine)
• Sandy
• SWFZ (although this one is scanline z-buffer like javascript canvas engines, it will need much more processor advances to be usable and does not easily go full screen, also not open source)

The top three are the only ones viable for full screen and projects that can cross into the commercial realm, other pixel level systems like scanline z-buffers in flash are really just tech showcases right now.  The fast and dirty Painter’s Algorithm of Papervision and drawing things the fastest wins out when dealing with software rendering and processor based graphics.  When and if 3d acceleration is added, that will change the game immensly.

Polygonal labs who has the lion share of cool physics demos with their motor physics engine has posted another excellent physics demo.

This demo should be called the Jedi demo  because when you move the particles around it feels like the force is helping you out that is how cool this physics engine is.

Let’s hope this is released soon and has a license to make Polygonal Labs famous, which would be an open source one

Who’s got the textures and cool chrome shiny 3d objects in Flash? There have been lots of materials work recently from papervision list developers and away3d developers (away3d is a branch of Papervision3D) and recently it is heating up a bit.

Early on on the papervision3D excitement, flash possibilities in 3d with AS3 specifically, much of that was due to 3d in flash but also the ability to texture and have bump mapping, toon rendering/cell shading and other neat effects like baked lighting, faked real-time lighting, video and movieclips on flash 3d objects and animated textures.

But when it comes to environmental mapping and true 3d reflection that might be simply stretching Flash to a limit that might require hardware acceleration but that isn’t stopping some.

I am not sure if environmental mapping will every be possible on a large scale without hardware acceleration. Pushing the limits could help influence Adobe to the market direction. But then again I never thought I would see the level of 3d in flash that we have and maybe in 2-3 years with multi-core processors it will be possible.

Here’s a snapshot of the current materials and environmental mapping (fake and real attempts).

UnitZeroOne first environment mapping /bump mapping:

Some toon renderings from UnitZeroOne

Recent work by mr doob

Wood

Metal

Weird

Weird 2

Recent work by actionscript architect

Perlin noise algorithm to animate texture real-time into water effect

More environmental mapping effects by the away3d materials developer Fabrice. Fabrice and the away3d developers are really taking off with the papervision3d core. I am seeing lots of engine limits tested and some great work at away3d.

Bumpy Meteor

Flat Lighting on bitmapMaterial

Chrome Ball (dont’ zoom in too far )

Did your processor melt yet?

I think that for games and flash effects faking it or real environmental mapping will have to be judged by what is needed for your purpose. I think that Flash player on software rendering can only go so far. So if you have real-time environmental reflections and surroundings it doesn’t always make your gameplay better and it won’t make your demo better if it means removing assets in other areas to make up for the performance drain of software rendering and the pressures it puts on the processor or browser plug-in.

You can still make really killer effects with baked animations, fake environmental mapping, faked dynamic real-time lighting and other effects. Flash, nor silverlight, will not be able to match hardware rendered shaders, per pixel lighting and physics anytime soon. But people are making good progress on this. I think it would be great if hardware acceleration were added to both Silverlight and Flash, with that, a brand new massive game market online, and it will be game on!

Polygonal Labs is building a Motor Physics Engine (unreleased) and here is a test that has boxes stacked up that you shake. I am looking forward to the Motor Physics Engine by Michael of Polygonal Labs after going through APE Physics engine by Alec Cove which is pretty slick.

The tools so far by polygonal labs such as the AS3 Data Structures for Game Developers have been excellent and made it into many games and engine tests of mine and his blog is a really well presented and the topics are always well presented and researched.

Be sure to check out the 50 boxes test with Motor Physics at Polygonal Labs

Also if you don’t regularly visit polygonal labs you are missing out on some really good research and tools. The recent post with the graph-based A* sample using the AS3 Data Structures for Game Developers was killer.

When storing numbers in AS3 VM Andre Michelle and his collegue Bram de Jong at splicemusic found an interesting behavior of the internal uint storage.  When the numbers are stored they change from int to Number depending on range.  Why does this matter?  Because ints are faster than Numbers and during larger simulations with lots of math it could slow things down quite a bit at these types change. 

The disadvantage of this is that Numbers are slower in computation as well as reading, writing in an Array.

The internal findings when storing a uint 

From 0 to 27 it is int
From 28 to 31 it is Number
From 32 to 59 it is int (again)
From 60 to 63 it is Number (again) …

Found when reading another excellent polygonal labs post on benchmarks and performance (this one is great as well concerning faster operations using bitwise shifts or alternate ways to eek out more performance) where he wisely advises to use signed int for loops or iterations rather than uint where needed because the iterations with numbers will be slower.

Andre Michelle posted an Adobe response on the issue and it is a known and by design characteristic due to the metadata that is stored with the datatype in the AS3 virtual machine.          

The AS3 VM uses 32-bit Atom formats to store various types. 3-bits of the Atom describe the type data, leaving 29-bits for actual data. In some cases, like null/undefined/void/etc, we use 3-bits plus a few more bits to define the type.

For signed integers, we have 28-bits to work with plus a sign bit. For unsigned integers we have 29-bits (or maybe 28 with the upper bit always zero?). Once your number gets larger than 28/29 bits, we dynamically switch it to a Number Atom type, which contains a 3-bit type value with a 29-bit ptr. All ptrs are 8-BYTE aligned so we get away with using 29-bits there.

All three formats are basically interchangeable. When storing a number in an Atom, we see if it’s an integer and fits within the 28/29 bits. If so, we store it as a int/uint value – otherwise we store it as a Number value.

It essentially is an optimization for uint to make it faster at times but its good to know for large iterative loops or large storage where uints might be needed. This goes back to sometimes where optimizations are a mixed bag.  The switching/converting types adds delay to the iteration.

var num: uint;

for (var i: int = 0; i < 64; i++)
{
 num = 1 << i;

 trace( i, getQualifiedClassName( num ) );
}

0 int
1 int
2 int
3 int
4 int
5 int
6 int
7 int
8 int
9 int
10 int
11 int
12 int
13 int
14 int
15 int
16 int
17 int
18 int
19 int
20 int
21 int
22 int
23 int
24 int
25 int
26 int
27 int
28 Number
29 Number
30 Number
31 Number
32 int
33 int
34 int
35 int
36 int
37 int
38 int
39 int
40 int
41 int
42 int
43 int
44 int
45 int
46 int
47 int
48 int
49 int
50 int
51 int
52 int
53 int
54 int
55 int
56 int
57 int
58 int
59 int
60 Number
61 Number
62 Number
63 Number