Marching ants revisited...

When you're creating online applications you often want to mimic the tools people are used to from the desktop. The classic marching ants selection marker is a good example and even easier than before, now that the lineBitmapStyle has been added to AS3.


matrix.translate(0.5, 0);
this.graphics.clear();
this.graphics.lineStyle(1);
this.graphics.lineBitmapStyle(ants, matrix, true, false);
this.graphics.drawRect(downX, downY, extentX, extentY);


Fullpage Example Click and drag to make a marker.
Flash Source

Menu in a Bottle

Original? No.
Useful? Not really.
Flashy? Definately!


Forked on Wonderfl

My HERO

A few days ago I recieved my new phone. With all the recent hype about CS5 and iPhone it may have escaped some flash developers attention that the HERO already ships with Flash player. Currently this only runs AS2, although video is running perfectly (YourTube, TED) in fullscreen, and the F10 player is on the way. What can I say, the HTC HERO is the best phone I've ever seen. It has all the polish and easy of use of the iPhone, but the operating system is open source, and the majority of apps are free. Some of those free apps blew me away. Layar is the first usable Augmented reality app I've tried, though I know there are similar apps out there. The phone comes all rigged up to several Google services, search (naturally), maps, mail and my favourite, a Google app called Sky Map, that instantly turns you into an expert on the constellations. I always wanted to learn the night sky and with this app you just point the phone in any direction and it shows you the names of the stars you're looking at. The first thing I saw looking south out of the window was Uranus. I never knew you could see Uranus with the naked eye ;O)

I am impressed. There was an app I couldn't find though, a magnifying glass, so today I downloaded the SDK and built it! Depsite the fact I've never actually written a Java application before, this evening I made my first Android application, using completely free tools. The Android phone emulator makes developing for Android phones a doddle. When you're used to Flex, using Eclipse for Java is a no brainer. Once you get over the initial differences in syntax, developing Java is very similar to making AS3 projects in Flex and I would encourage any Flashers turned Flexers to give it a try. You never know, it may be the start of a new career...

Over the weekend I intend to get the app finished and on the app store. If that proves possible, it will be the absolute fastest "from-idea-to-market" cycle ever!

If like Bonnie Tyler you've been holding out for a Hero, wondering whether to buy one or not, my advice is go for it, 100%. Apparently the first version with HTC "TouchFLO" was a bit choppy, but that's been fixed and mine came with the very latest BIOS already pre-installed.

3D Studio MAX clone - alpha 0.0.1 :)

A friend of mine has been making 2D floorplan tools in Flash since MX.
A couple of years ago I built a 3D option for him, based on the then open source Flux player(X3D).
When MediaMachines turned into Vivaty, the javascript API broke and player was no longer open source, and that was the end of the solution we spent 6 months developing. Ouch! Since then we've been looking for another option based on open source technology.
In the meantime, maybe flash has come of age to do this type of thing?
I've seen Autodesk's attempt, and while I understand their thinking, for me going totally isometric/single angle is just too big a compromise.


As a proof of concept I used a couple of hours making a demo in Away3DLite. Out of laziness and lack of time I've used the Plane primitive for walls, where a custom class is called for to add thickness and get around z-ordering issues.

So here it is, the simplest 3D editor you're likely to see :)
http://www.videometry.net/floorplan/


Use the pencil to draw a few boxes and hit the "3D" icon for a rough 3d model. Be warned at the moment the eraser just clears everything, without a prompt.

UPDATE: Save floorplan or 3d drawing as .png, straight to your harddisk.
Flash 10 required, but hey, you wouldn't be here if you didn't have FP10, right? :)

Atomic Fusion

Still playing around with Away3dLite.

It's a huge advantage when you want to extend a framework for your own purposes, that the framework itself is compact and understandable. That's certainly the case with this lastest version of Away3d. I've been working for some time with high fidelity models, X3D import and custom material filters. This work has been easy to migrate to Away3dLite, which is an even faster rendering engine then anything I've been able to code. I look forward to publishing all the fruits of this labour, but for now here's a demo done last friday afternoon just for the fun of it.

http://www.videometry.net/away3d/chopper.html
and source files...
http://www.videometry.net/away3d/Chopper.zip

Enjoy!

Away3d lite, first test

The first test og Away3dLite looks promising.
http://www.videometry.net/away3d/AwayTest.html
(Click the screen to start)

I fudged the BitmapMaterial so I could use a shader as input.
At 30 fps there seems to be no performance hit at all. At higher framerates the shader does cause a dip compared to using a plain bitmap. The size of textures seems to affect framerates dramitically when using shaders generally.

Away3D, now in F10 optimized version

Away3d has just released a new version, Away3dLite.
http://away3d.com/away3d-lite-v1-0-fastest-and-smallest-3d-engine-in-flash

This release seems to address all the same issues that Atomic was trying to.
Firstly it is written from the ground up for Flash10, making full use of the new features/types, etc. which greatly increases performance, and secondly it has a very small footprint compared to the full engine.

I think it's a shame they dubbed it "Lite" as that suggests it's less powerful than the full version, when in reality it's a good example of 'the less, the more'.

Great release, will start testing ASAP.

Normal Mapping

Normal mapping has now been added to Atomic.

Normal maps provide a fast alternative to, for example phong shading and other lighting models, and at the same time enhances simple geometry.
The normal filter adds less than 1Kb to the size of the engine, but adds a fast, smooth, directional lighting.

Click the image to open the example, click and drag to rotate and zoom

Atomic Kitten

Atomic, the new 3D renderer is purring like a kitten, even with full mapping and baked ambient occlusion.
http://www.videometry.net/atomic/town.html



There's zoom when you click and drag in the y-axis. I discovered to my horror the scrollwheel *still* doesn't work natively in Flash player 10 on Mac. Sorry about that, will use alternative from now on...

Introducing Atomic

Here's a first glimpse of our new 3D class for Flash10, Atomic.
Wait a while for the 300K model to load then click the screen to start. There's some primitve navigation via mouse position.

This actual t-shirt design is available at http://www.bluebaldur.com/

The idea of Atomic is to be like the atom itself, very small yet surprisingly powerful.
Rendering quality is the number one priority, closely followed by speed. Materials are written as shaders in Pixel Bender. The example uses a material that combines a Normal and Diffuse map.

Why a new "flash 3D engine"? With Flashplayer 10, a little knowledge of 3D maths and shaders, the developer can arguably achieve just as good, and maybe even better results using Flashes inbuilt classes than importing large external libraries.
The missing element right now is that Flash player supports no native 3D formats, and that the drawing API does not support native z-sorting. Atomic handles these two issues, leaving the rest up to the developer and the particular project.

DepthMask Filter New Example

This example shows the exact same filter, but a more complex 3D scene.
As before, you can click and drag the object in x and y planes, and use the scroll wheel to move in the z plane.
Try moving the beachball around the scene and notice that it is masked correctly in all 3d positions.
You can place it between the car and figure, or halfway through the windscreen, behind a pillar, etc.
The actual 3d Studio Max scene fills around 25Mb, as appose to 150Kb as an image+ depthmap.

Now just to add some normal mapping (example here) to both background and object to get the lighting right...

DepthMask Filter

When is 3D not 3D? Well, all the time when it comes to computer monitors, 3D is merely a 2D illusion.
The generally accepted way to producing this illusion is to draw 1000's of triangles based on a geometric model of an object, or group of objects in a scene resulting in hundreds of thousands of calculations per frame. There are other ways. There are other techniques that also mimic 3D, but avoid geometry altogether.

Here we have an example of one such method, which could be readily combined with others, including actual geometry.

Click on the image for a Flash10 example.

The balls are just used to add some complex geometry, but the scene could be anything, a room, a town, spacecraft interior, you name it. When the page first opens you see the depth mask. This contains the depth of each pixel in the image represented by a greytone.

pixel depth represented by greyscale

By comparing the position of the playing card in space it's easy to work out which pixels would be infront of the card (visible) and which ones would be behind the card (invisible). A pixel bender filter runs through each pixel and decides whether to use the playing card or to draw a transparent pixel. This is then shown over a pre-rendered version of the scene, and voila, the playing card is more or less perfectly masked at every position and depth in the scene.

So why might you want to do that? Well you could replace a great deal of background geometry with a single bitmap and still have characters walking in and out of obstacles in the scene. This means smaller downloads and far less processor power needed, so not a bad idea for web based games.

Program in Flash, view in 3D

In the past we've used Flash to control an X3D plugin. It worked, but was kind of limited. With the O3D plugin literally everything is exposed to javascript, and as Flash can call javascript throught the ExternalInterface it follows that is it straight forward to control the O3D plugin from Flash.

http://www.videometry.net/o3d/FlashPiggyback.html
(click and drag the white circle in the flash movie and it updates the position of the 3d teapot in realtime)

I've had some problems loading tgz in Firefox from my own server, not sure why yet. Offline everthing works fine in both Firefox and IE on Windows. If you have trouble viewing the demo, or just want to see how it's done the source files are here

UPDATE: By changing the file type of the .tgz file it can be loaded in FireFox and IE and the example has been updated to reflect this. Offline, it seems the file has to be a .tgz to function properly.

Google flips the 3D web's normals!

I couldn't resist starting with this geeky, 3d way of saying that Google have turned the 3D web inside out with the preliminary release of O3D, a new initiative to attempt to bring 3D to the web. But before you go thinking "heard it all before, yet another VRML clone" let us talk about why this time it might just be different.

In the beginning there was VRML, way ahead of it's time, and certainly way ahead of it's public. Then VRML 2.0, a vital update to keep the emerging standard on track. Then X3D, the xml version of VRML 2.0. And then... well it all went very quiet indeed. From what can be gleaned from the biographies of the various authours of VRML, they all went their seperate ways to start their own companies, implemented their own versions and the momentum of a single unifying standard was lost forever.
So what was VRML/X3D's biggest flaw? Well in my humble opinion it tried to do too much as a standard. Not content with encapsulating geometry, textures and animation, it tried to define interactivity and programming structure, so if you wanted it to do something, you implemented a node in the standard to make it possible. That's fine for the people actually in the position to get their ideas implemented, but for everybody else in the universe, it sucks. Hence the ever repeating pattern of the newbie 3D web programmer on discovering X3D:

this is great, this is great, this is easy, this is great, hey I've got an idea....(3 weeks later)... this sucks.

Wouldn't it be a good idea to make a format that actually mirrored the capabilities and internal working's of graphics hardware? Wouldn't it be great to be able to move data seamlessly from one 3d authouring platform to another? Enter COLLADA, a completely new religion.

This was a very different mandate to the VRML crowd, but it proved that if you provide something useful people will rapidly adopt it, and they did. So now we have a well defined format for transfering 3D data from one program to another. How you use that data is not the formats concern.
Well in that case you could just bolt on whatever programming technology/platform/console you fancy and you're away right? And even if you're a startup, designers and artists can create content for your platform straight away, without you having to build exporters, importers, etc. for every 3d authouring tool out there. Cool! (though you'll have to think up another business model than selling your 3D Studio Max export plugin)

PaperVision3D, ironically probably the most widely seen 3D on the web, even though it's actually running relatively slowly (but still amazing job lads!) on top of the flash 2D rendering engine. How can this be? Well because Flash rocks the boat of so many talented web designers and programmers. Is there a lesson here? Yes, give the developers what they want, and they will spread your technology like wild fire, even if it isn't necessarily the ultimate in 3D technology. Easy, open and *free* are always good start points when trying to introduce a new web program/technology/service, whatever.

What is the perfect recipe for 3D on the net?

• Standards where standards are genuinely advantageous, i.e. transfering data from one application to another.
  
• Freedom to interact with, effect and combine that data however you want to.
• Free to use and develope for.
  
• As cross platform/browser/device as possible, though not allowing the lowest common denominator to dictate everything (hey, developers can downgrade stuff if necessary, can't easily add stuff that isn't there!)
• Good tools

So how does X3D stack up, and how about O3D?

Well, the first release of O3D has proven that it's not quite there yet as far as being compatible with every set-up, but there does seem to be a movement towards this. If you compare with X3D you don't have any single plugin for all platforms, and content programmed for one plugin won't run on another. Here google's advantage is to actually provide the plugin, free of charge, rather than leaving (random) implementation to others.

Tools. For content you can of course use existing 3d tools that can export Collada, which is all the main ones.
Programming wise you use your favourite javascript editor. If the idea of O3D catches on, there will surely evolve an ecosystem of editors, and whole game libraries as has been seen with Flash.

It would be a travesty to write this entry, or indeed anything about 3d on the web without mentioning Unity3D. Currently basking in the iPhone application goldrush, like Lewis Strauss before them they are providing the miners with the tools. I hope they achieve the same turnover :O)
Unity provide and maintain their own very excellent web plugin for Mac and Windows, but who knows, maybe they could provide the ultimate authouring tool for O3D games?