danielbunte.de – the actionscripter

I just thought it would be great to talk about fileformats for 3D web applications. As you should know, the new FlashPlayer will be able to display and handle a lot more triangles/faces than the current one. At the moment you may be using your 3DS- or Collada-Files; I prefer OBJ.
As a matter of fact, these formats were developed for offline-usage only. Does anyone know a 3D-Format that’s built for web applications? I don’t know anyone.
In our office we’ve got an internet-connection of 16MBit/s – that’s far enough for everything and I don’t have to wait a long time for any content. But at home, I only have 1MBit/s, what’s not that much. In Germany there’re still a lot of people that don’t even have 1MBit/s, no they still have those modems (biip biip) with not more than 56KBit/s. As you can image, it takes a looooong time to download 2 or 3 MB with such a connection.
I downloaded a tree as OBJ-file with about 61K triangles. That’s much you think? Well, for the current available engines it may be much. I want to try this on our own engine noob3D, but the engine does not yet support colored triangles (only textured), so I’ll have to wait til this is supported and I also have to make my parser working asynchronous.
With FP 11 (that one which will hopefully support Molehill), we shall be able to have a lot more triangles in our 3D-Scenes, like Thibault Imbert told us “hundreds of thousands”.

Well, I’m able to handle that much, but how do I load it? My tree, mentioned above, is approx. 8.31MBs as OBJ-File. Let’s consider a Scene with about 250K triangles – how big will that file be? 20MBs perhaps… WITHOUT TEXTURES! Most of the current engines will even crash on parsing a file with about 60K tris.
Is there a solution to reduce that file size? Of course there is! Otherwise I wouldn’t have written this down

About 3 or 4 weeks ago, I developed a fileformat especially designed for web-usage. At the moment it includes meshes, vertices, faces, materials, as well as textures(if you want them to be included).
I did try it with the Tree, but my parser also fails because of timeout and I can’t set it to a higher value than 15 seconds?! But I did the test with a small object of about 230 triangles. That OBJ-file was 22KB, then I converted it to my format N3D and got 7KB out of it. Finally I compressed that file with zlib and got 3KB – that’s a reduction of about 86%!
If I have this Tree now and would convert it to N3D and we predict it’s reduced by 86%, the final N3D-File will be just 8.31MBs * .14(ratio) = 1.16MBs.

That’s not everything. By including the textures into that file, we also save the http-request as well as some additional bytes. To get the textures into N3D, I convert the bitmapData into PNG, using a custom PNGEncoder I hacked together from different sources. My default test-picture was 256KB. Then I saved it using a professional graphics program with save for web-functionality and got 252KB. That’s fine, but there’s more
I tried converting the BitmapData by using the PNGEncoder provided by adobe (found that class somewhere on google code) and I got about 362KB – w00t? That’s 100KB more than the default image! The reason for this was that the default adobe-encoder didn’t use optimization-algorithms at all. After a short research I found those algorithms on wonderfl, but I wasn’t able to use them all at once, just one by time. That got me to point “do it yourself, daniel”. So I did it myself and combined all those algorithms to be used in one file and got finally a size of: 245KB. That’s less than the professional graphics software gave me

I will provide that class soon to the public community.

Let’s compare the results:
The OBJ+MTL-Files + PNG-Texture were 277KB and 3 http-requests.
N3D is 248KB and one http-request.

I will include support for Bone/Skeleton-animation. Who’s interested in this? ^^

btw.: that’s the tree I tried:

Hi there,
on Monday, my business-partner and I watched the Live-Stream of the Adobe MAX 2011. They showed a lot of stuff targeting mobile devices (that was the main content of the first session). There will be a lot of interesting stuff for designers to do really good publishing on almost every internet-connected device with just a few clicks.
For both of us, this was not too impressive, because you can already do most (not everything) of this stuff, by using AIR or Flash – but you’ll have to code it yourself. But as we all know: designers aren’t programmers. They don’t even like scripting imo. So for those people, the new features will be very interesting in future.

So let’s get back to the main topic: Flash 3D Molehill API.
This was the last thing that was presented, so we had to wait about one hour, fifty minutes to get informed about some “really interesting stuff”.
Flash will be supporting hardware-accelerated rendering on all plattforms, without having specific hardware requirements.
On Windows DirectX 9.0 will be used.
On Mac and Linux OpenGL 1.3 will be used.
On Android-driven phones OpenGL ES2.0 will be used.
On devices not supporting 3D hardware acceleration a software rasterizer, called SwiftShader, will be used.

This is amazing, isn’t it?
However, I have to stop your euphoria right now, right here. There’s not yet a beta available of this and they are still in early development-stages. If I’d be asked to do a prediction about a release-date of the new Flash-Player, I’d say: “Flash Player 11 with Molehill API will come out in Q4 of 2011″. That would also mean that the first 3D-Content using this API will be published in Q1 2012. So this is my prediction
BUT: There is a software-company that already has access to the new API. It’s alternativaplatform from Perm, Russia.
At the moment, I’m in contact with Adobe to also get access to the new API, because we at badnoob.com also do our own 3D-Engine for our project awesay – the virtual and interactive 3D Online-Shopping-Center right in your browser. We do another aproach than the alternativa-guys with our own engine noob3D: we have a real z-buffered 3D-Engine, written in Alchemy. This is that kind of stuff the new SwiftShader will do for us in future. If you’d like to have a look at it, try out the online demo or watch our first demonstration video on youtube. We’re still searching for companies to join us.
What I wanted to say before telling you about awesay is that alternativa is a competitor for us, and it wouldn’t be nice if they were the first company with a DirectX/OpenGL-powered Flash 3D-Engine only because they had access to the API earlier than we have.
I’ll keep you informed, if I had luck with Adobe and if so, provide some nice demo videos

More details will come with the presentation by Sebastian Marketsmueller on Wednesday 27th of October 2010 (tomorrow).

finally here’s the link to Thibault Imbert’s page with the first demonstration videos of Molehill API.

stay tuned!

It’s been a while since my last post concering AS3. I’m currently developing the HUD/GUI for awesay and yesterday, I came in contact with the new flash text engine for the first time.
For the HUD, I created a window, where I want to display a title centered on a sprite (horizontally, as well as vertically).

So, after reading some docs about how to create a simple line of text, I finally got it on the screen. To me, the process of creating such a simple line of text, seems horrific. However, you’re able to do a lot of nice things with the FTE, and the good old TextField won’t be improved in future, but is still supported. Because we want our HUD to be multilingual, I decided using the FTE would be a good choice. OK, I went a bit off-topic, so let’s get back to it.

How do I positon a simple line of text (flash.text.engine.TextLine) centered on a sprite? The horizontal positioning is easy, because it behaves like every DisplayObject, so we do it like this:

var sptMyTitleSprite:Sprite = new Sprite;
sptMyTitleSprite.graphics.beginFill(0xDEDEDE);
sptMyTitleSprite.graphics.drawRect(100, 25);
sptMyTitleSprite.graphics.endFill();
this.addChild(sptMyTitleSprite);
 
var tlSimpleTextLine:TextLine = myTextBlock.createTextLine(null, 100);
sptMyTitleSprite.addChild(tlSimpleTextLine);
 
tlSimpleTextLine.x = (sptMyTitleSprite.width >> 1) - (tlSimpleTextLine.width >> 1);

What I do in the code above, is creating a Sprite and draw a rectangle (100 width, 25 height) onto that Sprite. After adding the Sprite onto my displayList, I create my textLine from a TextBlock(not defined in the code above), and finally add the textLine onto my Sprite. When this is done, the textLine’s x-position is centered with the calculation(bitShift by 1 is a simple divison by 2, where the result is an integer).

Ok, that wasn’t too hard, it’s something I do very often. Well, I thought positioning the title in the vertical center of my Sprite is even that simple – Naaah, it’s not! Did you really thought it was that simple, hrhr

tlSimpleTextLine.y = (sptMyTitleSprite.height >> 1) - (tlSimpleTextLine.height >> 1);

That does not work. The 0, 0 Point of a TextLine (Roman) is always on the very left of the baseline.

(I catched this image from the Adobe docs).

This behaviour causes the main part of our textLine to be in the negative y-direction(up) of it’s DisplayObject. The Adobe-People may again have smoked one pipe too much while coding this just kidding!
So when I calculate the vertical center of the Sprite (sprite.height >> 1), and I position the textLine at that position, it will nearly be centered, because it’s baseline is now at y: (sprite.height >> 1).
What we have to do, to position it at the absoule center, is subtracting the half of the textLine’s decent-value. That is everything what’s below the baseline. For example the lower parts of “j, g, y”.
The final solution will be:

tlSimpleTextLine.y = (sptMyTitleSprite.height >> 1) - (tlSimpleTextLine.descent >> 1);

I wrote this post, because I didn’t find any solution to this in the net. This will hopefully help other people.

badnoob.com just published the presentation website of our project awesay.
awesay is going to become a virtual, interactive shoppingmall in 3D!

Visit http://www.awesay.com (German language only)

I just wan’t to inform my visitors that we (my company badnoob.com) has started it’s own blog. Main topics are our new Flash 3D-Engine, which is currently under heavy development, and also our project called “awesay” – more information can be found on the blog: http://blog.badnoob.com

yeah, it’s not a typo in the title, but it’s almost true!
Flash’s own functions and/or method are slow as I can say. I first noticed this while having a look at TweenLite’s easings.
Math.pow is slow. It’s faster doing x * x * x and so on – yeah really! Don’t believe me? Give it a try!
I assume this behaviour not only to sin, cos and other trigonometric functions (as already found out to be right by polygonal labs), but also to Flash’s own graphics-library.
So I’m on trip atm where I’ll do EVERYTHING myself. I’ve already done a small Bitmap-based Font-Engine, Textfields, unbelievable fast OBJ-Parser and a lot of more stuff… just wanted to let you know this (if anyone reads this at all – I dunno)

I also think about y everyone doing flash 3d on this planet, uses sin/cos and so on with radians, instead of creating a lookup-table “once”. horrific – it’s just that what’s done in code these days… ugly code! ever had a look at papervision, away3d, and some more google code project? blehyawk.
enough for know – have a nice day

I just found some improvements on my ListenerProxy-Class and packed them into a new “Version 2″. I also added a license-information. You can get the new Version 2 of ListenerProxy here.

I updated the List of References, because the link to the old version of the HugoBoss Flash-Shop was incorrect.
Check it out: List of Refrences

Get the newest version[v1.3.4-stable]: ListenerProxy

Hi again!
Yesterday I’ve found out a cool new feature of ActionScript 3.0. You will sometimes have to use associative Arrays. The problem with these is that you can’t easily loop through them with a for-loop like

var	myAssocArray:Array = [],
		i			:int,
		intLength	:int;
 
myAssocArray['foo'] = 'one';
myAssocArray[1] = 'two';
myAssocArray['bar'] = 'three';
myAssocArray[0] = 'four';
intLength = myAssocArray.length;
 
for(; i< intLength; ++i)
{
	trace(myAssocArray[i]);
}

The trace will probably print out “four, two, undefined, undefined”. The fact is that you can get the elements 0 & 1 via the variable i, but the the other keys can’t be accessed with this method.
As I also like PHP very much, I also know the function array_keys(array) of PHP, which returns the key-values of the array given in the parameters. I thought that I really need this functionality within AS3, so I tried a lot, searched the internet and finally got it! It’s pretty simple for those knowing AS2 – prototype functions.
What do we need to do? Place the following code in your main, unnamed package below or above the class-definition and you can use it everywhere else in the code:

package
{
	public class foo
	{
		public function foo():void
		{
			trace('bar');
		}
	}
 
	Array.prototype.arrayKeys = function():Array
	{
		var	arrReturn	:Array = [],
			strKey		:String;
 
		for(strKey in this)
		{
			if(typeof this[strKey] == 'function') continue;
			trace('in Array:: value->'+ strKey +' typeOf:'+ typeof strKey +' proto:'+ ((this[strKey] !== false) ? typeof this[strKey] : 'NULL'));
			arrReturn[arrReturn.length] = strKey;
		}
 
		return arrReturn;
	}
 
	Number.prototype.give = function():String
	{
		return 'Number::giveItToMeBaby';
	}
}

You can now use this method to get the keys of the variable:

var arrKeys		:Array = myAssocArray.arrayKeys(),
	i			:int,
	intLength	:int = arrKeys.length;
 
for(; i < intLength; ++i)
{
	trace(myAssocArray[arrKeys[i]]);
}

Pretty easy, isn't it? Well, it is easy because the native Array-Class is dynamic, but what do we do with Number (final class)? Let's see...

var num:Number = 4;
num.give(); //doesn't work! final class, can't add methods to it?
 
num['give'](); //does work :) you can dynamically add methods to a class even if it's final; problem is that this code is hard to read, but it actually works

So far...
Daniel