Recently at the office we’ve been dealing with a strange BitmapData memory occupation behavior I want to share with you guys.

On this subject the AS3 reference reads “A BitmapData object contains an array of pixel data. This data can represent either a fully opaque bitmap or a transparent bitmap that contains alpha channel data. Either type of BitmapData object is stored as a buffer of 32-bit integers. Each 32-bit integer determines the properties of a single pixel in the bitmap.”

This should be meaning that a BitmapData object should be represented in memory as a sequence of 32 bits integers, one for each pixel in the bitmap, hence width*height*4 bytes which definitely makes sense.
However the actual behavior is significantly different and you can easily find out that the real BitmapData size in memory is not proportional to its area as it should be.
Let’s see an example (code shared at wonderfl)

BitmapData Memory Allocation – wonderfl build flash online

The example shows how different the size of a BitmapData is depending on its maximum dimension: the code instantiates 4096 images with an increasing area from 1 up to 4096 pixels, first with a horizontal extension (width is the increasing dimension, blue line in the chart) then with a vertical extension (height is the increasing dimension, red line in the chart).
You can notice that the behaviors of the lines in the chart are very different and the blue line’s Y is increasing only few times whilst the red one’s (vertical bitmap) is increasing much more frequently and is reaching much higher values.
So what’s the real memory representation of a BitmapData? For sure it isn’t a width*height*4 matrix as it should be and it is stricly related to the dimension the BitmapData is extended on.

We worked a bit on this thing at the office (thanx to Matteo Lanzi) and we found out that BitmapData object memory allocator has a strange behavior: it allocates N chunks of memory aligned to 256bytes (64 pixels) at time.
This would be a useful behavior if the BitmapData object would be resizable via actionscript, but it is not, or if the freed chunks were put in a memory pool and used by the next BitmapData requiring memory, but it doesn’t seem to do that ( the only case we noticed that the memory is reused is when a NxM BitmapData is created, deleted and recreated with the same N and M dimensions ).
If it was only this however it wouldn’t have been such a big problem to deal with, the real big issue is that a 256b chunk is representing a sequence of pixels with a defined horizontal orientation.
This hardcoded behavior leads to a very unpleasant side effect: a BitmapData instance with a high number of little rows (high height, little width,, hence a ‘vertical’ orientation) is occupying a HUGE AMOUNT OF MEMORY while it should be occupying the same memory of a bitmap with the same area rotated by 90°.
Let’s seesome more example just to clear out the problem:

Case 1:
- width 1px
- height 1px
- expected allocation: 4 bytes
- actual allocation: 256 bytes (minimum chunk)

a 1×1 px BitmapData allocates in the heap 1 chunk of 256 bytes while only 4 bytes would be needed!! 63x overhead!!!

Case 2:
- width 64px
- height 1px
- expected allocation: 256 bytes
- actual allocation: 256 bytes (fits exactly the minimum chunk)

the same 256 bytes are allocated by a 64×1 bitmap and the overhead disappears, what does happen with a 65×1 one?

Case 3:
- width 65px
- height 1px
- expected allocation: 260 bytes
- actual allocation: 512 bytes (2 chunks)

with a ‘max chunk size plus one’ size a 65 px wide image allocates 2 chunks, the overhead is set to approx 1.9x.

Case 4
- width 1px
- height 64px
- expected allocation: 256 bytes (same area of the 64×1 one…)
- actual allocation: 16 Kb!!!!!

this is the worst case, every in 1xN bitmaps have the maximum overhead possible: 63x!
So try to think about an image very narrow and high, let’s say a 1×4096 one: you would expect it to be 16kb in memory (4096*4 bytes) but it actually is 1 whole megabyte (4096*4*256!!)!!

So, the formula to calculate the ACTUAL memory allocated by a BitmapData expressed in bytes I came up with is:

Math.max( 1 , height*(width/64)>>0 )*256

You can see a more detailed and complete dataset in this google spreadsheet http://bit.ly/FlashBitmapDataAllocation (feel free to spread the link) containing data for BitmapData memory occupation from 1×1 to 1×4096 and from 1×1 to 4096×1.
The test to reproduce the dataset is available on github at this url https://github.com/pigiuz/Tests/blob/master/src/BitmapDataMemoryAllocation.as (feel free to share this link as well)

This behavior has been tested in AIR 3.1 for Mac OSX 10.6 (snow leopard), 10.7 (lion) (thanx to Marco Nava for testing on lion), Window 7, Android 4.0, iOS 5 (thanx to Shawn Blais for testing on mobile),
Flash Player 11,1 by yourself (if you ran the swf linked backward in the post and noticed the same behavior).

After figuring out the problem we opened a bug in adobe’s jira, if you have comments which can raise the attention of adobe on this stuff or add something to the discussion please feel free to comment at this url https://bugbase.adobe.com/index.cfm?event=bug&id=3094186 (you’re welcome to comment here too btw )

Few more points worth some attention:
I tried to measure the memory in 3 ways:
- the data got back from flash.sampler.getSize() was not accurate, most of the time it was totally wrong and not predictable (or perhaps I didn’t get how it works in relation with BitmapData objects)
- the delta calculated with a pre and post sampling of System.privateMemory is more accurate than getSize() and fits the expected results in AIR but it’s not as accurate as I expected: in the spreadsheet linked backwards you can see that the results have a coherent trend, but there’s a lot of garbage data and little bitmaps weren’t detected at all.
- the delta calculated witn a pre and post sampling of System.totalMemory is more accurate than System.privateMemory only in flash player.

That said,
I find this allocation behavior weird, and the worst thing is that it UNDOCUMENTED and the docs are saying a different thing. I see one VERY significant bad side effects in this way of allocating bitmaps memory that involve how BitmapData objects are stricly tied to the Flash Player’s and AIR runtime’s APIs:
flash.display.Loader generates BitmapData instances when it loads images from URL or streams, so if an application needs to load many bitmaps that don’t fit the memory alignment there will possibly be a HUGE memory waste.
A possible solution could be the creation of few additional functions such as

loadInto(urlrequest:URLRequest, destination:ByteArray):void

and

loadBytesInto(bytes:ByteArray,destination:ByteArray):void

which both take a data source and a preallocated bytearray as input and put outputs to the preallocated bytearray called destination.

This is the first shot, I’d really like you guys to spread the word and help me to make adobe sensible on this topic as it’s really worth some effort to make flash and air runtimes even better than what they are now.

Thank you all in advance,
ciao,

pigiuz

I’m doing some experiments with “Broomstick“, the new born (alpha) version of Away3D which leverages the brand new Stage3D (molehill) of flash player 11 (incubator).

Here’s the coded formula to obtain pixel perfect sprites by moving the camera in the Z axis just before rendering:

// camera is the current Camera3D object with a PerspectiveLens
// h has to be the height of your current viewport
var h:Number = /*current viewport*/stage3DProxy.viewPort.height;
var fovy:Number = (camera.lens as PerspectiveLens).fieldOfView*Math.PI/180;
camera.z = -(h/2) / Math.tan(fovy/2);

…just a snippet, hope you find it useful

More on this topic:
- http://knol.google.com/k/perspective-transformation
- http://en.wikipedia.org/wiki/3D_projection

Short tips post

BitmapData size limit:
Up to flash 9 the size limit for a BitmapData object was 4096×4096 pixels.
With flash player 10 that limit was removed, but what does this exactly mean? May we be able to create 4097×4097 sized bitmapdata instances? the answer is NO, we can’t.
I just found an official explanation of that here http://kb2.adobe.com/cps/496/cpsid_49662.html

Just in case you don’t have the time\will to read it:
- we still have a limit!
- the limit is set to the maximum amount of pixels (16,777,215 (the decimal equivalent of 0xFFFFFF))
- the maximum valid size of the bounding rectangle side is 8191

Stage size limit:
It actually depends on the stage quality.
With a high quality set the bound limit is 4050×4050, if your content exceeds it gets cropped.
With a low or medium quality the bound limit increases, there’s no official documentation about that (or at least I didn’t find it).
Note that Adobe’s saying that “graphic artifacts” could be displayed when our stage “approaches” 3840 pixels range.

have fun

As my previous post was announcing, cancelling and reannouncing, I’m speaking at WebTech Conference here in Milan.
Here’s my presentation slides

And here’s the examples zip: www.flashfuck.it/webtech/examples.zip
If you need something to be more clear or some further explanation please feel free to comment this post

Today I encountered this blog post from Zevan (which blog is REALLY a good daily reading I suggest everyone to take) about bitmapData merging and I started tweaking some code doing some benchmarks to find out which way is the most performing. Here are my tests:

First strike (Zevan’s one): copyPixels

[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector. = new Vector.();
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i
in my machine (mbp, osx) it takes ~27 ms to extract data and ~2-3ms each iteration for setting data on the canvas bitmapData
Second strike: getVector\setVector
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.> = new Vector.>();
var tileRect:Rectangle;
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	tileRect = new Rectangle(0,0,tileWidth,tileHeight);
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i;
	  var startTime:Number = getTimer();
	  for (var i:int = 0; i
on my machine it takes only ~9 ms to extract tiles slices (yes, 3 times faster!!!) and ~1ms for pushing them all in the canvas for each loop iteration
Third strike: getPixels\setPixels
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector. = new Vector.();
var tileRect:Rectangle;
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	tileRect = new Rectangle(0,0,tileWidth,tileHeight);
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i
a nice one, ~ 17 ms to extract and ~2ms to loop on my mac, faster than copyPixels but vectors are still leading...
Fourth strike: merge
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector. = new Vector.();
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
	w = evt.target.width;
	h = evt.target.height;
	var image:BitmapData = Bitmap(evt.target.content).bitmapData;
	var tileWidth:Number = w / cols;
	var tileHeight:Number = h / rows;
	var inc:int = 0;
	var pnt:Point = new Point();
	var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
	var startTime:Number = getTimer();
	for (var i:int = 0; i
~36 ms to extract and ~12ms to merge tiles on the canvas!!!...too slow all the way...:\
There are still some methods left such as getPixel\setPixel, getPixel32\setPixel32, and copyChannel but they're a too much restrictive choice because they're handling one pixel, or channel at time therefore a further loop would be required to get them doing this task.
Summary:

getVector\setVector : ~9ms\~1ms

getPixels\setPixels: ~17ms\~2ms

copyPixels: ~27ms\~2-3ms

merge: ~36ms\~12ms
make your choice  
NOTE: these benchmarks are valid from flash player 10 because we (both me and Zevan) used the Vector native type to store lists of typed data. To make them valid for previous version of the player make sure to replace vectors with arrays and check other types are already supported by the target player.
stay tuned  
				

Yep, i made my submission to 25lines contest just few days ago (right in time ), so (as Sakri did some days before me) I’m publishing my code. It’s an easy terrain generator…

Actually, I think it can be somehow improved both in lines of code and actual performances, so feel free to edit or tell me “you’d better to do that this other way…”

What’s going on is:

• generate a shape filled with a gradient to create a reference color for differents “height”
• generate a perlinNoise everyframe for dataprovider use
• detect each perlinNoise pixel depth according with its main channel value (blue in this case..)
• generating a vector of Bitmaps to be employed in the view

/**
 * 25-Line ActionScript Contest Entry
 *
 * Project: Random Terrain 3D Generator
 * Author:  Piergiorgio Niero (aka pigiuz) piergiorgio.niero[at]gmail.com
 * Date:    11/24/08
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

// 3 free lines! Alter the parameters of the following lines or remove them.
// Do not substitute other code for the three lines in this section
[SWF(width=800, height=800, backgroundColor=0xffffff, frameRate=24)]
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// 25 lines begins here!
var _bd:BitmapData = new BitmapData(50,50,false,0x0000FF);
var _points:Array = new Array(new Point());
var _vxCont:Sprite = Sprite(addChild(new Sprite));
_vxCont.x = _vxCont.y = 400;
var _vexels:Vector. = new Vector.((2500),true);
var _hMap:BitmapData = new BitmapData(255,1,false);
var _gradient:Shape = new Shape();
_gradient.graphics.beginGradientFill( GradientType.LINEAR,new Array( 0x4267F9, 0xF9EAB0, 0x9EF07D, 0x8DF273, 0x9D5E1E, 0xFFFFFF ),new Array( 1, 1, 1, 1, 1, 1 ),new Array( 90, 105, 110, 120, 145, 185 ),new Matrix(0.2456396484375,0,0,0.0006103524625,127.5,.5));
_gradient.graphics.drawRect(0,0,255,1);
_hMap.draw(_gradient);
addEventListener(Event.ENTER_FRAME,generatePerlinNoise);
function generatePerlinNoise(e:Event=null):void{
	_bd.perlinNoise(25,25,1,0,false,true,4,false,_points);
	Point(_points[0]).y+=1;
	for(var v:uint=0;v<(2500);v++){
		_vexels[v] = (_vexels[v]==null)?generateVoxel(v):_vexels[v];
		_vexels[v].y = Math.pow((_bd.getPixel(v%50,Math.floor((v/50))) & 0xFF)/255*6,3)*24*.24;
		_vxCont.rotationX = mouseY*.1;
		_vxCont.rotationY = (_vxCont.rotationY-(90/stage.stageWidth*(mouseX-stage.stageWidth)+45))*.5;
		_vexels[v].bitmapData.floodFill(0,0,_hMap.getPixel(255-(_bd.getPixel(v%50,Math.floor((v/50))) & 0xFF),0));}}
function generateVoxel(v:uint):Bitmap{
	var b:Bitmap = new Bitmap(new BitmapData(24*.5,24*.5,false,0x000000),"auto",false);
	b.x = v%50*24-(_bd.width*24*.5);
	b.z = Math.floor((v/50))*24-(_bd.height*24*.5);
	return Bitmap(_vxCont.addChild(b));}
// 25 lines ends here!

enjoy  

Did you remember “Pacifica” project? Now it’ [UPDATE: Adobe Stratus is a rendezvous service for RTMFP, a new protocol built in to Flash Player 10 and AIR 1.5. Neither RTMFP nor Stratus are related to the project codenamed Pacifica.] Something new is on adobe labs and its name is “Stratus“..WONDERFUL!

Let’s explain what i’m talking about:

Stratus is “hosted rendezvous service that aids establishing communications between Flash Player endpoints”.
This technology enables clients’ flash player (10 +, or AIR 1.5) to connect directly each other to share runtime informations…actually PEER TO PEER!! (underline this: Stratus is a service by Adobe, not a technology to run on own servers).

Stratus does support only “end to end” p2p, multicast or swarming are not supported. This means we’re not enabled to create a new air-mule service over stratus, but we can build our p2p video chat, p2p real time games, etc…

Stratus introduces a new data transfer protocol: RTMFP, which uses UDP instead of clean RTMP which uses TCP. (note, RTMFP is not RTMP*, which is the encrypted protocol for FMS).

Stratus is now beta, and you can test a sample application hosted on the labs Stratus page…

Stratus is going to be released next year (hopefully “early”) …it seems we’re going to have real time “anything” in few months

This could be a new red pill for our webapps,
Stay tuned

I’m digging into MMOs, now testing papervision2 cow model (unfortunately i’m not a modeler, but i’m a pretty good thief ) and put it on my testing stage…here’s the result…40 COWS! quite good uh?

Let me know how it runs on your machines

Stay tuned

Here is my very first test on MMOs with Papervision3D on Flash Player 10 (needed to watch properly).

here’s the link http://www.flashfuck.it/test/pv3d_isometry_01/

this is just the beginning…it has to be tuned and refined but, yes, it can be done

PS: I stolen the model somewhere on the web…please if it is yours don’t offend yourself, i stole it because it’s good (anyway let me know so i can put your name somewhere )

Since it has been created i’ve been a fan of flash tracer extension, i really fell in love with that tool, but i noticed it slow down the browser and can even make it crash.

So, let’s open a trace logger on our terminal…

To do that the right command is “tail” which actually “[...]Print  the  last 10 lines of each FILE to standard output[...]” and the file to open is located in /Users/[your username]/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

Then, let’s do something good and useful with that:

open your TextEdit, cmd+shift+T to switch to plain text, write down this one line command:

tail -f /Users/[your username]/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

save the file as “flashtracer.sh” and use sh as file extension instead of txt.

then right click on the file, reach the “open with” menu and choose “terminal” application located inside utility folder. Note: it would be great if you set terminal as default application to open that file

ok, now everything’s ready; double click on flashtracer.sh and start tracing

Note: remember you’re in a shell now, so you can clear up the lines with cmd+K…

I hope it can be useful,

byez