So many cool and useful technologies are unveiled at SIGGRAPH every year, this year at SIGGRAPH 2009 was no different.  Khronos Group, behind the new guidance of OpenGL, OpenGL ES, OpenCL, OpenVG, COLLADA etc, came another big announcement about hardware rendering within the browser.  WebGL is now an official standard being developed at Khronos Group to bring javascript control of OpenGL to browsers… Wow!

Ok so this was officially announced at the GDC in March but limited information, but now it has been slated for an official public standard in early 2010. Shortly after the announcement at the GDC we saw Google o3D appear doing exactly that, controlling OpenGL through Javascript in the browser but it was still largely software/harward hybrid rendered. Google, Mozilla, Opera are part of the companies supporting WebGL which is great for browser support, also NVIDIA, AMD and Ericsson are in on it.

Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet

JavaScript Binding to OpenGL ES 2.0 for Rich 3D Web Graphics without Browser Plugins;
Wide industry Support from Major Browser Vendors including Google, Mozilla and Opera; Specification will be Available Royalty-free to all Developers

4th August, 2009 – New Orleans, SIGGRAPH 2009 – The Khronos™ Group, today announced more details on its new WebGL™ working group for enabling hardware-accelerated 3D graphics in Web pages without the need for browser plug-ins.  First announced at the Game Developers Conference in March of 2009, the WebGL working group includes many industry leaders such as AMD, Ericsson, Google, Mozilla, NVIDIA and Opera.  The WebGL working group is defining a JavaScript binding to OpenGL® ES 2.0 to enable rich 3D graphics within a browser on any platform supporting the OpenGL or OpenGL ES graphics standards.  The working group is developing the specification to provide content portability across diverse browsers and platforms, including the capability of portable, secure shader programs.  WebGL will be a royalty-free standard developed under the proven Khronos development process, with the target of a first public release in first half of 2010. Khronos warmly welcomes any interested company to become a member and participate in the development of the WebGL specification.

Google released O3D this year and there are great strides in 3d within the browser from game engine wrapper technologies such as instant action technology, gaim theory engine (now owned by id Software and runs Quake  Live, hardware rendered Unity 3D (and Torque 3D coming soon), and Flash software rendered  3d engines Papervision 3D, Away 3D, Sandy (Sandy also released a haXe version that exports a javascript version) and others.  But it looks like the movement is to bring OpenGL to the web as a standard under the name WebGL, this would be great!  There would still be lots of times where plugins are better now and in the near future but the path is a good one. Having a software/hardware rendering hybrid like Google O3D for broad video card support (some of the painful older intel cards), or using a plugin like Unity3D, Torque 3D or wrapper technology for bigger engines is a good idea for the time being. But the future is grand in this area.

I think that Google O3D and OpenGL ES success on iPhone games probably combined to get this in motion.  OpenGL and very basic video cards are now standard in most machines out there.  Unity3D actually published hardware statistics on casual gamers (web-based games) ever so kindly and shows that even though there are some older Intel cards out there, for the most part machines nowadays have a video card capable of supporting at least low-poly 3d and hardware supported 2d rendering in real-time for games, user interfaces and more.

This is exciting news, it appears the movement of the web gaming market is getting much more capable and is accelerating the innovation of hardware accelerating the web.

Flash 10 will be ready for mainstream hopefully by the end of this year, or early ‘10 when the penetration numbers will be up in or around the 90% range via zeh fernando based on previous trajectories.  

With that, Flash 10 has many great new things such as the Vector structure that allows a collection of a certain type, which results in a faster collection because of the known type.  So anywhere where Arrays are used, that is a possible candidate for a performance increase within some code because you are asking the virtual machine to do less work on each loop (not having to dynamically find out the type).

ByteArray (Thibault Imbert) has demonstrated that for the JPEG encoding in corelib it is up to 2.5 times faster using Vectors than Arrays.  Your mileage may vary heavily but it is almost a guaranteed speed boost due to less work.  This obviously has great possibilities for speeding up code that uses lots of arrays.  

Due to the performance boost the Vector does have some constraints in the typical give and take of coder flexibility with compiler and virtual machine overhead.  Vectors are more explicit and strongly typed which is why they are fast, but this is also limiting.

In addition to the data type restriction, the Vector class has other restrictions that distinguish it from the Array class:

• A Vector is a dense array. Unlike an Array, which may have values in indices 0 and 7 even if there are no values in positions 1 through 6, a Vector must have a value (or null) in each index.
• A Vector can optionally be fixed-length, meaning the number of elements it contains can’t change.
• Access to a Vector’s elements is bounds-checked. You can never read a value from an index greater than the final element (length - 1). You can never set a value with an index more than one beyond the current final index (in other words, you can only set a value at an existing index or at index [length]).

 [ Vector docs  ]

ByteArray not only used Vectors heavily but did other optimizations that are always good to do, even though optimization is evil when you are working with precious client side resources ensuring an optimized base starting point can be a good thing.

So what did I do ?

• I used bitwise operators as much as possible.
• I replaced all Arrays with fixed length Vectors.
• I used pre-incrementation rather than post-incrementation (thanks Joa for this one ).
• I casted to int all my Vector indices access.
• Other minor stuff you always do to optimize your code 

Other sources as well for even more optimization or shall I say efficient AS3:

• Polygonal Labs Using Object Pools
• Joa Ebert Tweening and Object Pools
• Joa Ebert Optmization Wiki
• Sean Moore Efficient AS3 roundup (great list of resources for more at the bottom)
• Lost in Actionscript Efficient AS3 Tips
• Big SpaceShip Mouse Leave Tip (flash can hog resources so when it isn’t in focus then let is stop tasking the processor)
• Grant Skinner Idle CPU in AIR FPS Tip (set fps to a lower amount when it is out of focus)

Well it appears ES4 path is dead officially and a new standard has been published replacing it, the ECMAScript Fifth Edition announced in Geneva, Switzerland and will be in place as fully tested and approved by all involved by the end of 2009. ES5 was previously known as ECMAScript 3.1 or an iteration of the ES3 standard that is what most JavaScript is based on in all browsers, and was previously competing with the ES4 newer standard that changed Javascript quite a bit but in many areas much better, in some areas it was bloated.

This revision of ECMA-262 will be known as ECMAScript, Fifth Edition. It was previously developed under the working name ECMAScript 3.1, which will no longer be used. ECMAScript is the scripting language that is used to create web pages with dynamic behavior. ECMAScript, which is more commonly known by the name JavaScript™, is an essential component of every web browser and the ECMAScript standard is one of the core standards that enable the existence of interoperable web applications on the World Wide Web.

ECMAScript Fifth Edition (ES5) was strongly guided by Crockford and Microsoft, which is different than the push for ES4 which is what ActionScript 3 is based on and was supported by Adobe and Mozilla.

However it seems everyone is happy and everyone is supporting this version to get things moving if you go by the ECMA Org quotes:

Industry Reaction

Brendan Eich, Mozilla CTO and creator of the JavaScript language, said “The Fifth Edition of ECMAScript makes real improvements based on browser innovation and collaboration in Ecma, which provides a solid foundation for further work in future editions.” Microsoft’s ECMAScript architect, Allen Wirfs-Brock, commented “We expect the Fifth Edition to benefit all web developers by helping improve browser interoperability and making enhanced scripting features broadly available.”

Peace.

I still have to read further into the ECMAScript 5 specification which was published, but there are some new interesting things.

One nice feature is the JSON object.  Right now you have to eval to use JSON in javascript in a browser but they now have JSON.parse(object) and JSON.stringify(object) which is standard and conveniently already wired into IE8 this way. This is based on the JSON2.js library by Douglas Crockford of Yahoo.

var jsObjString = "{\"memberNull\" : null, \"memberNum\" : 3, \"memberStr\" : \"StringJSON\", \"memberBool\" : true , \"memberObj\" : { \"mnum\" : 1, \"mbool\" : false}, \"memberX\" : {}, \"memberArray\" : [33, \"StringTst\",null,{}]";
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);

Another feature is DOM prototypes which are useful and cool, which allow you to extend dom objects.

• Document Object Model Prototypes, Part 1: Introduction
• Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support

If you use javascript or are an actionscripter, not sure if Adobe will have ActionScript 4 go this way or if Alchemy has changed the flash player into a multi language VM now.  It will be fun to watch things progress but also if you are into javascript it seems this standard, ES5, will be it by the end of the year.  And probably since IE8 already supports it, in all new browser by then as well.  It will probably take 1-2 years before browser saturation makes this usable but if you are using standards that mimic this then there will be no change then, such as the JSON2.js library.

Libspark from Japan is a treasure trove of great flash advancements, they seem to realize the great things that can come from porting in existing solid libraries from C/C++ etc into flash and have been scoring lately including augmented reality in flash porting the ARToolkit to FLARToolkit.  Recently a port of openCV for as3 called Marilena was found and it is for object detection and decent facial recognition (it is a computer vision library from intel) considering the processing power needed to do this.

Face Detection: Here is the sample included with Marilena showing facial detection on an image.

Lots of recent action has blown up on this front from Mr doob, quasimondo (optimizing the Marilena classes for better performance) and Boffwswana. Also there is a kit called deface by sshipman that is the first foray into this a year ago doing similar things but it was just a bit before it’s time and a bit slow in previous versions of flash, it performs decent now in this sample. Flash 10 performance of the AVM2 and future directions with Alchemy will lead to more interesting stuff just like this.

Mr. doob head tracking sample, be sure to check lots of other examples there

Boffswana example of head tracking Johnny Lee Wii style with only a webcam and flash, no wiimote needed since it uses facial detection to check where you are and how close you are in the screen and then moves accordingly.

This is stemming from the recent explosion of the FLARToolkit and augmented reality in flash as well as the gimmicks used by Nintendo with the wii and Johnny Lee’s great head tracking advancements. Porting great libraries to flash seems to be the phase we are entering now judging by the recent excitement around Adobe Alchemy and the LLVM along with the lead from the libspark.org contributors. We have also seen this heavily last year in ports of Box2D for 2d physics and other toolkits using established working code and porting that to flash now that is is mostly capable of handling the performance.

OpenCV (Open Computer Vision Library by Intel) is quite a powerful platform that allows you to do all this and now it is available in flash. There are other great libraries for nearly all platforms now. I have done some previous work with Aforge which is also a port of OpenCV mainly for motion detection. This was always around but not until the recent performance updates and the innovation that has come with Alchemy and the thinking that goes along with that (porting in libraries to flash from C/C++ etc), has allowed this to flourish in flash and thus the web.

The amazing new things we can do with flash by porting in existing libraries is only going to get more intense as alchemy and flash 10 are even more mainstream.  It is almost as if Flash will eventually just become a web renderer and simplified front end to many great toolkits that exist in more native environments like C/C++ but with the speed and distribution access of the web with Flash.  Exciting times ahead.

The guys over at Flashbang Studios, a web game development studio in phoenix, az, and some of the most visible developers in the Unity3d space with Blurst, released something that may interest both FlashDevelop users and Unity3d developers.

UnityDevelop was released by Flashbang Studios recently and it is a modded version of FlashDevelop (originally from SharpDevelop a really nice open source .NET and mono IDE) and it supports intellisense for Javascript or Unity3d’s use of Javascript which is called UnityScript much like ActionScript.  UnityScript can be a little more strict and has access to all of Unity3d’s API calls just like C# and Boo in the mono based virtual machine that Unity3d uses.

FlashDevelop, is by far the best Flash / Flex /haXe IDE in my opinion so it is really great to release this for Unity.  I hope one day I or someone has the time to port to Mono so it can be used on Macs even with the 140 pinvokes, it would be a good spread mechanism for mono.

With Unity3d coming to windows soon, UnityDevelop could be a good go to IDE for unity if you aren’t using solely C# with VS.NET. Currently this is based on FlashDevelop2 source code.

Video Overview of UnityDevelop


UnityDevelop Walkthrough from Flashbang Studios on Vimeo.

Downloads

• Download UnityDevelop (2.9 MB)
• Source Code

Thanks flashbang!

Looks like it is a javascript day here at *drawlogic.  Here is an interesting example with some demos of a javascript and canvas based pseudo 3d engine. Anything this cool you know it has to be from Japan.
Also of note, it has been rumored that Silverlight 3 will have fully hardware accelerated 3d and canvas and javascript engines are getting much faster with great demos like this.  Adobe needs to leap into hardware acceleration for flash on a broader scale soon.

But I digress, this demo it appears, was inspired by Papervision3D due to the naming and the javascript reference of “parpevision.js“.  I wasn’t able to find much more information about this but it is very well done and this example even shows some environment mapping. It is not close to flash pseudo-3d engines like Papervision3D yet but at the rate of javascript engine development lately this could rival flash AVM2 in the next couple of years.

Demos

• Cloth
• Miku Character
• Enviroment Mapping

Code

• Sample iPod iTouch Mesh data (meshdata.js) – contains models
• Code from the main engine (parpevision.js)
• Sample Viewport and main app (touch.js from demo 3)

Here is the code for the parpevision.js file and the mini engine, it is an MIT license. (more…)

When you do lots of any language you build up libraries over time that are time savers that are repetitive and tedious if you do not consoildate into a library.  Taking a look at the CASALib, an as3 library of common functions for flash that was released I have many of the same things in my libraries but CASALib just has lots of extras that go a bit deeper than some libraries, is very clean and is organized pretty well.

One cool thing about it is the IDestroyable interface and the CasaMovieClip, CasaSprite, CasaTextField , etcthat all have a destroy() method that cleans up all events, removed instances and even removes it from the parent display object. Gets me thinking why this isn’t just part of DisplayObject in the first place.

From the release:

Here are a few of our favorite things in CASA Lib AS3:

• Standardized external load API
• Easily remove listeners with IRemovableEventDispatcher
• destroy methods make garbage collection easy
• Large group of utility classes for common manipulations

We will be elaborating further the power of CASA Lib in future blog posts.

As with any new release there will be bugs that emerge, but with your help we promise to release updates often to keep CASA Lib as stable as possible.

1.0.0 Downloads & Documentation

ZIP: http://as3.casalib.org/releases/1.0.0/1.0.0.zip
SVN: http://svn.as3.casalib.org/releases/1.0.0/
Documentation: http://as3.casalib.org/releases/1.0.0/docs/

[source]

(more…)

This is older, from january, somehow I missed it but… nitoyon has created an AS3 port of jQuery. jQuery is my favorite javascript tool besides javascript itself. Mootools, prototype, and others like mochikit are all great but jQuery was the first to do lambda chain decorating and others followed suit.

But having this power in as3 is a great thing! $ selectors, common access methods to properties, methods, etc. All good stuff. Again this shows the fun in as3 or ES4 based languages like Actionscript because people are porting all sorts of libraries to it. If this performs I may just start using it daily TODAY!

For instance setting the stage align for use in full screen:

$(stage).attr({scaleMode: "noScale", align: "TL"});

That is too fun… The only thing not cool about this is all the spam at nitoyon’s blog : )

How about a functional Tweener call:

function animate(f:Boolean):void {
				// Select 'RoundRect' elements using CSS selector
				$("RoundRect:" + (f ? "odd" : "even"))
					.addTween({
						rotation: 90,
						scaleX: 0.5,
						scaleY: 0.5,
						time: 0.6,
						delay: 0.3,
						transition: "easeOutCubic"
					})
					.addTween({
						scaleX: 1,
						scaleY: 1,
						time: 0.5,
						delay: 0.9,
						transition: "easeOutElastic",
						onComplete: function():void {
							// restore the rotation and call again.
							this.rotation = 0;
							animate(!f);
						}
					});
			}
			animate(false);

Stuff to see and try

• CSS Selector Demo Source code plain text
• 25 boxes and Tweener Source code plain text
• SVN: http://snippets.libspark.org/svn/as3/as3Query/

TweenMax (Speed Test) has been released that adds a main feature missing from GreenSock’s offerings in tween animation libraries and kits over Tweener. That is the bezier curve tween. Tweener is very popular for use in PV3d and AS3 due to the bezier curve and Zeh’s great example that is really the base of a possible 3d editor. TweenMax now adds this and bezier tween capability for the GreenSock animation libraries.

Tweener and TweenLite have become the micro animation kits as well as micro kits you can make with Go base kits. TweenLite, TweenFilterLite and TweenMax divided up into different kits allows it to be embedded for banners or small assets easier if you don’t need the filters or other advanced tweens (this comes into play heavily with large games and asset collections when the compiled SWF each need the library). Tweener packs all features into one kit for simplicity. GreenSock kits are divided up for need. The comparison together is about the same but for basic tweens TweenLite is only 2k.

Performance is one area that the kits from GreenSock have really shined and since the addition of the speed tests and benchmarks it has become a great focus on showing how the open source kits are much better than bloated included animation calls in Flash and Flex defaults. I think all the kits have niches that they fit and Tweener and TweenLite are just very simple to use which adds alot to an animation kit success.

List of Animation Kits for AS3 (some for AS2 as well)

• Tweener
• GreenSock
  • TweenLite
  • TweenFilterLite
  • TweenMax (Speed Test)
• Go Base
• Twease
• AS3Easing
• Animation Package
• Animation System

If you are using the Flex of Flash default animation classes, I am sorry…

AS3 libraries for crypto are pretty robust from the new RAW POWER in the AVM2 virtual machine that runs flash9/as3, cryptography, like compression, is very processor intensive and needs a fair amount of power to be worth the time (usually a balancing mechanism). I am working on a few security apps in AIR and Flash9 for a project and a product so this is the best of what I have found to share. I will be sure to post here when these projects are complete.

There are two that are pretty good as3 kits that have decent support for crypto and hashing, actually as3crypto is quite broad in their support or most common crypto algorithms, even hashing support up to SHA-256 and ciphers 3DES, AES, RC4.

This is not really a comparison just some kits that have tools you might need. as3crypto is definitely the way to go for more heavy ecryption with common ciphers, but if you are just hashing some text as3corelib might work for your project. as3corelib is a more broad toolkit that is made or sponsored by Adobe that has JSON, RSS, support and other tools. It is a great core lib, but not as deep in the encryption area. I am actually using both in the stuff I am working on, as3corelib for some other uses (JSON,RSS) and as3crypto for all encryption and hashing.

The two are:

• as3corelib
  • Open source
  • Support for hashing algorithms only.
  • Browse source

• as3crypto
  • Robust, broad encryption and security support
  • Open source
  • Demo
  • Browse source
  • Broad support of algorithms
    • • TLS 1.0 support, exposed through TLSSocket and TLSEngine classes
      • X.509 Certificate support, including parsing, and validation
      • built-in list of common root Certificate Authorities
      • symmetric ciphers: AES, Blowfish, DES, 3DES, XTEA, RC4
      • confidentiality modes: CTR, CBC, CFB, CFB-8, OFB, ECB
      • public key crypto: RSA (encryption, decryption, signing, verifying and key generation)
      • padding: PKCS#1 (type 1 and 2), PKCS#5
      • BigInteger library
      • hashing function: SHA-256, SHA-224, SHA-1, MD5, MD2
      • HMAC support
      • prng: TLSPRF and stream-cypher-based PRNG.
      • minimal ASN-1/DER support for PEM key parsing and X-509 cert parsing
      • Crypto – Shortcut class to access many classes above.
      • Hex, Base64 – Static methods to convert binary data to and from text formats

Here’s some numbers from as3Crypto home page that show the speed, note it has not been optimized just yet (since most of this is client side and only one user would be using it this is not an issue – server side is where this can have scale problems from parallel execution but flash is rarely server side if it is too slow, but it is quite fast)

The 'numbers' are in 1000s of bytes per second processed.
type             16 bytes     64 bytes    256 bytes   1024 bytes   8192 bytes
md2                  1.01k        3.64k       15.08k       53.89k      171.76k
md5                221.85k      447.32k      739.54k      893.72k      905.82k
sha1                82.28k      184.78k      286.76k      336.03k      345.41k
sha224              60.84k      125.67k      200.27k      234.28k      247.58k
sha256              60.52k      126.30k      199.19k      234.04k      246.01k
hmac-md5            48.37k      159.37k      282.87k      295.15k      341.21k
hmac-sha1           18.29k       64.82k      165.72k      277.60k      342.52k
hmac-sha224          5.75k       24.84k      125.71k      204.35k      256.36k
hmac-sha256         15.10k       49.33k      123.71k      206.17k      249.08k
rc4                117.24k      381.34k      878.93k     1315.01k     1539.44k
xtea-cbc             2.49k        6.48k       12.80k       33.00k       44.48k
aes128-cbc           1.61k        4.01k       22.97k       78.55k      205.01k
aes192-cbc           1.34k        5.13k       20.91k       69.45k      172.43k
aes256-cbc           1.48k        5.63k       18.87k       63.45k      150.39k
blowfish-cbc         2.77k       10.81k       42.28k      140.27k      343.05k
des-cbc              2.53k        9.73k       35.20k      124.84k      624.88k
3des-cbc             2.50k        9.72k       35.61k      115.21k      253.42k

The library has not been optimized for speed, and those numbers could probably be improved.

They both have minimal or none ASN.1 support which I will need but I can port much of this from my favorite Java/C# crypto kit from the legion of the bouncy castle of which I was happy to find was a substantial base for this kit.

Whatever you do don’t send any type of message from your crypto kits with aes 256 cipher and sha-256 hashing to Iran from the US.