Nabs Vegas Big Bash Site

Ogilvy Interactive has created a site and used a bit of Syerit expertise to get the job done.

the finished product can be viewed at:

http://www.nabsbigbash.co.uk/

This is series of articles called “Behind The Scenes”, where we describe particular project in different ways. this time it will be our fist one. Think360.

Think360

Series Articles:

1) Planning, Platforms, Frameworks, Workspace
2) Architecting, Folder structures, Backend
3) Away3D vs Papervision3D, 3D Modelling, Physics, Sound, Optimization

Away3D vs Papervision3D

We started to build this project on top of papervision3d engine. But somewhere in the middle of project we hit the wall (or roof better say) what was technically possible to do. So I had to find some way. One of them was to risk it and swap engine to another one and hope for better performance. After few days intensive researches there were few choices. Sandy3D, Away3D and Alternativa3D. As our main issue was performance it was hard choice. There are not lot of performance comparisons on high poly objects.

On the end of the day, I decided to go for Away3D.  There few reasons for that.

Engine is continually evolving. Guys around engine development are very clever and open to community. Engine has surprisingly loads of features. Support for Flash Player 10.

Last one was probably biggest advantage.

We made few performance tests and engine seemed to be pretty fast. Actually our first full scene un-optimized test was as fast as maximum optimized papervision3d one.

Away3d engine is surprisingly easy to set up. Actually you need just 2 lines of code to set it up:

view = new View3D();

addChild(view);

Because Away3D is actually a branch of Papervision3D it has similar API.
Only difference between PV3D and Away3D is way how you set up objects. While in PV3D you pass parameters in constructors:

var plane:Plane = new Plane(200,200);

In Away3D you pass object with {name: value} pairs:

var plane:Plane = new Plane({width:200,height:200});

or:

var plane:Plane = new Plane();
plane.width = 200;
plane.height = 200;

I think this is down to own preference. However I found PV3D way little bit more clean and more safe as values are strong typed. But it has its drawbacks when you need to setup just particular properties.

NOTE:
Away3DLite has instniation based on strong typed parameters as PV3D:
var plane:Plane = new Plane(null,200,200);

For game itself we used just one main Scene in Away3D and every other scene (Main Hall, Office etc) was just Object3DContainer with additional Meshes and 3DObjects.

Image shows how effective can be proper 3D design combined with Away3D. With first tests we were able to walk around hall without noticeable loss of frame rate with nearly 17000 triangles in the scene!

KISS Rule

Keep It Simple Stupid. That was main goal in order to build all scenes with this size. No light. No special effects. No reflections. No shades. With all that in mind, everything had to look realistic.

Away3DLite

Funny thing is that just few days before we finished our project, guys from Away3D released lightweight version called Away3DLite.

3D Modelling

3D modelling for flash player is artistic fight rather modelling itself. Because flash player is so idiotically slow in compare with any today’s 3d capable environment that every little polygon makes difference. Model optimization is one of crucial factors when creating 3d content for flash.

Scene modelling

-scenes had to be modelled in way that triangles are spread out in balanced way
- we also used 2 versioned models:

• High-poly for modelling and baking
• Low-poly for Flash Player export

Hi-poly vs Low-poly triangle count difference

Pre-Baking

In order to keep up with speed we use pre-baked materials (you create lighting in 3D modelling tool and export materials with all effects already on them)
Baking was applied on high-poly mesh and then implemented on low poly in flash player.

Baking procedure

Z-sorting

One of biggest issues we had was z-sorting. To spare every possible frame we couldn’t use built-in z-sorting camera. So we had to optimize again.

Objects sitting on floor had to be sitting on holes.

Object always in front could be forced to front with:
obj.ownCanvas = true;

For example in the office scene there is document on wall as additional element. Without obj.ownCanvas there would be issue with picture disappearing occasionally. On other hand obj.ownCanvas = true, 3d object is always in front. So solution was to set  obj.ownCanvas = false while moving into office and after camera finish movement set it to obj.ownCanvas = true and vice versa.

Implementation of ownCanvas in the Office

Without z-sorting you have to be very careful while modeling your 3D content. There are few simple rules to help this issue:

• If model sits on floor put floor into different View or merge object with floor
• On places where are more “triangle flicking” chance put little bit more triangles.

Example of merged objects to avoid flicking of triangles:

3D Optimization

As exporter

Because we went pretty wild with all 3d stuff on this project we had to find way how not to kill flash and browser while parsing all that data. And there is when brilliant as3 exporter comes to play. It allows you to export any 3d object from blender into as class. So instead of loading dae or other format into flash it’s already compiled into actionscript and available immediately. We used great blender plugin AS3 Blender Exporter to export 3D models as plain actionscript class.

Video material

We had 2 options here. Use video material or use AnimatedBitmapMaterial. First is small but it also affecting performance. Second perform very well but it is very big in size (especially on large or longer videos). So we applied animated material on short and small sequences and Video on longer and bigger ones. Video Material was created as movieclip in flash and exported as swc.

Example on this one can be found in main hall and office. Videos in “default” mode are Animated bitmaps. After you click on them it swaps to video.

Real video animation

To get realistic effect inside office scene. We shoot several team members on green screen with camera positioned and angled as it would be in virtual office. Then members were cut out and colorized to match colour tone of office. Then video was attached on planes. Again, all planes copy camera y rotation.

Step 1:

We shoot one of our members on green screen and then cut him out. After that we published video with alpha channel.

Step 2:

We imported video into Flash IDE, recompile it into timeline based video and then exported it as SWC.
Then we attached video into scene as Plane with AnimatedBitmapMaterial.

Fire

Fire in gallery scene was great for AnimatedBitmapMaterial. It is just small plane. All planes are stored in vector array and copy rotation of camera on y axis.

Videos has been created in Flash IDE as timeline videos and exported as swc files.

Physics

Because we had to keep frame rate high in every corner of scene we had to come up also with solution for physics. We tried jiglib but it was too slow for such a huge number of polygons and complexity of scene. Also WOW was better but still slow. So instead of using 3d physics I decided to go for 2d physics and excellent library called Box2D. It is blazingly fast in compare with jig lib and because our scenes floor was flat I could implement this 2d approach into 3d world.

We created something similar to mapping tool. It was interface responsible for creating physics objects on the fly.

Something like this:

var map:Map = new Map();
map.w(1522,1233).g(1400,1374);

Image shows how 2D physics map is directly related to 3D world

Sound

This was another place where I found PureMVC extremely useful. We created SoundMediator responsible for sound management. Then we added list of notification interests.

Now we could play sound from any location by sending notification.

sendNotification(AppConstants.PLAY_SOUND,{volume:1,repeat:3}, AppConstants.SOUND_WALK)

Because Flash Player has issues with looping Mp3 files, we used Flash IDE to conver all sounds and export them as swf file.

Additional Performance Optimization:

So after all that there was still room to optimize few bits. These optimizations should be done always as last with relevant “stable” version saved. On top of general optimizations for flash player we’ve done these:

• Simplify unused events to base Event. Instead of (e:MouseEvent) use (e:Event)
• Test wmode=”gpu/direct” and use fastest one
• Simplify classes. Instead of var myMesh:MyMesh use var myMesh:Mesh/Object3D (depends on which functions you need to use)
• Cast to interfaces instead of Classes
• Mark heavily used classes as “final”
• PNG files optimization. More find here
• Exclude unused classes
• Remove unused conditions in cpu intensive places (especially Away3D)

As I said before, these changes must be done on the end and you should do them if you really need squeeze every bit from your application (our case). Otherwise they are not worth of invested time.

Conclusion

As we found by ourselves, pushing flash to its boundaries is quite hard task and we just hope that we won’t need to spend so much hours by doing tasks which shouldn’t be necessary for general mortal person in future. We hope that Flash Player will evolve into something where these tasks will be thing of past. But till then we will rely on ourselvs and amazing work of flash community and its projects inluding Away3D,PV3D,PureMVC and many others.

This is series of articles called “Behind The Scenes”, where we describe particular project in different ways. this time it will be our fist one. Think360.

Think360

Series Articles:

1) Planning, Platforms, Frameworks, Workspace
2) Architecting, Folder structures, Backend
3) Away3D vs Papervision3D, 3D Modelling, Physics, Sound, Optimization

Folder Structure:

In flash builder you can create modules in your project. However if your project become bigger it is better to move your module into new project. In this way you create your flex workspace as one project and each project inside of that workspace represent one module/application.

I found very useful to name our workspace as namespace

With this name you can easily put Flex project to svn with .NET project.

ie:
Syerit.Flex.Web.Portfolio (flex workspace)
Syerit.Net.Web.Portfolio (.net solution folder)

Yes that’s right. We use SVN for .NET development.
Why? It’s mainly because of costs. TFS, VSS are great but also very expensive. Those solutions are suitable for much bigger enterprise projects where you have business analysts, testers, developers, build managers, all together counting 50+ staff.
For mid size projects SVN is fairly enough.It’s free and with tools like VisualSVN, Subclipse and Tortoise, it’s very easy to integrate into your project.
And with used structure it’s relatively easy to migrate project to TFS later if you will need to do so.

SVN Structure:

Naming Conventions:

If you work on bigger project, you can find easily lost because of number of projects in your workspace. To help with this issue, we started to use naming conventions for our projects. Each internal project name starts with some prefix dependent on type of project.

• FX – flex application
• FXT – flex based test project
• FXL – library project
• FXM – flex based module
• AS – actionscript based application
• AST – actionscript test project
• ASM – Actionscript based module
• FXB – directory for build scripts

Note: In our case, term Module doesn’t state for Flex module (<fx:Module) but for any sub application loaded into main application. (Module, Sub-application, Flash application)

So in this particular project, we had something like that:

Syerit.Flex.Web.Portfolio (workspace)

• FX_MainApp
• ASM_VirtualWorld
• FXL_MainApp (used as bridge(strong typed VOs) and shared library     between main application and module)
• FXB_MainApp (ant build scripts for project. We used it for easy deployment)
• AST_PhysicsTest
• AST_AwayTest

Architecture/Structure:

Now, the graphical representation of logical structure would look like this:

Also here is Legend to describe color sections:

• Light Grey – Flex based application
• Red – AS3/Flex based module
• Yellow – XML data
• White – Developed Application
• Light Green – Architectural framework
• Light Blue – Other Libraries
• Purple – HTML Based Application
• Amber – .NET Application
• Grey – CMS
• Blue – Data Tier

You can see that on sides, there are descriptions of each sections of application.

• On right hand side we have whole application dividend by .NET metrics
• On left hand side we have application dividend by RIA metrics

Each application/module in presentation layer has its own config file. We use IoC container called SpringActionscript to inject config classes with some data.

In this way we can change application(replace module, add additional, change control settings, disable deep linking etc.) without recompiling application. DI is very popular these days in Flex community (there are several frameworks including Mate, SpringActionscript, Parsley, Swiz for instance). This pattern is very powerful and often used in enterprise development (Spring in Java, Spring.NET in .NET and may others).

However because we are in real world, every pros has its cons. And the same is it with IoC. While it’s very flexible, extend use of it could lead project to be hardly testable and debugging could be nightmare. So instead of use IoC based framework we went for MVC based PureMVC with IoC extension as SpringActionscript. Development with PureMVC could be time consuming so to help this issue some unknown genius called Darshan Sawardekar created small utility called Fabrication and suddenly creating multicore, multimodule, mvc applications became piece of cake.

So what’s the advantage of this model? Imagine if in the future we’ll want to put another section to our application. We simply create additional module and add to main application view. Nothing else has to be changed.

Or later on we’ll decide to use Flash based CMS instead of html. We just unplug CMS Client and replace with our own CMS. This CMS will use the same functionality available trough Pureherit which use WebOrb to communicate with Umbraco.

We can even decide if we want to create it as new application, or simply create additional module. And use all available functionality provided by core application.

Because we use Pureherit as some kind of extended façade, we could even replace whole backend system without letting front-end know about it.

I tried to explain whole concept instead of diving ito details, as this could cover whole book. I hope, this part was useful for anybody thinking about creating mid to large interactive applications.

In next chapter We will concentrate on Virtual Office module including 3D, physics, Animation etc..

Enjoy:)

This is series of articles called “Behind The Scenes”, where we describe particular project in different ways. this time it will be our fist one. Think360.

Think360

Series Articles:

1) Planning, Platforms, Frameworks, Workspace

2) Architecting, Folder structures, Backend
3) Away3D vs Papervision3D, 3D Modelling, Physics, Sound, Optimization

Introduction:

Why I’m writing those articles? Well, for last 3 years I was reading articles of others and learn from them, so had some “philanthropic” moment when I decided that would be good to share my knowledge finally and this was perfect project for that.

Aim of this article is not to give you ready to go solution rather than to show you how you COULD build more complex solutions on flash platform. I’m warning you, I’m not Adobe expert, I’m not Flash evangelist and I’m not even university educated (author-note: consider removing last words). So whatever you read here is my subjective opinion coming from my experience with this project.

Planning:

Choice of platform/frameworks

It’s very important to choose right base blocks for your project. Bigger project means bigger importance of this stage. So what was our choice? When I was planning those essential blocks, many times my mind came across eternal sentence “Make everything as simple as possible, but not simpler”. I’m sure everybody knows well who said that.
But, there was one issue with this and it could be described like this:
“When you want build sports car you have generally two options upgrade normal car or downgrade supercar”.
This is one of the most essential questions you should answer when planning bigger scale project. On the end we decided to go for “supercar” philosophy because of probability of adding supercar features into our sports car in future.

Platforms:

Flash

We are flash developers in most of the time and we love flash community. Speaking technically, despite hard fight on front with HTML5 (6, 7 so on), Silverlight, JavaFX, AJAX, Unity3D and others, Flash is still the best overall choice for interactive content on web and it was definitely best for this project.

.NET

Ok, If you stop reading here I completely understand it:). Microsoft technology is not very favourite chap in Flash territory. But we decided to go for it because of more scalable choice, Umbraco and VisualStudio (Forgive me all, but as far as like Flex Builder and even more new Flash Builder and I mean it, they are still little bit of joke in compare with this monsterous mother of IDE. Adobe, please stop treating evolving of Flash Builder as upgraded “car” and start treat it as downgrading supercar). And yes, for me as person coming from both backgrounds nearly simultaneously was this favour choice anyway. But our html version is done with WordPress which means PHP to be fair.

Backend:

Umbraco

For me, best open source .NET CMS and one of best overall. It’s even better than some commercial alternatives. Great community, even the story behind evolution of it is very interesting.

WebORB for .NET

Connect two opposite worlds, Flash and .NET. It offers you practically everything you need to for develop, test and deploy RIA applications. Another great choice was FluorineFX (open source) but WebORB.NET’s superior console application won.

Pureherit.NET

our internal framework which is responsible to provide facade bridge between Front-end and Umbraco.

Front End:

PureMVC

As core part of our internal framework this was obvious choice. If you need small-mid size project, go for something like Cairngorm. If fact I used it before I get into PureMVC and in some way I still like it despite its chronic singeltoniolity. But if you plan big project, go for PureMVC. It’s more complex and slower to setup but once you’ll have several hundreds or even thousands files in your structure, you’ll see why.

Fabrication

This little utility should be nominated on Nobel Prize. It just revolutionized our development (and I’m sure many other ones). PureMVC is like solid powerful computer. On other end, fabrication is like operating system. It hides all that complexity and allows you to build incredibly complex solutions incredibly quickly. Fabrication however works on top of another great utility called Pipes to be exact. Thanks Darshan for this!

SpringActionscript

This is very helpful IoC/DI container for AS3 based on Spring framework. It made deployment of our project a piece of cake.

Pureherit

this is our internal enterprise framework we use for building complex solutions. It wraps features of previous frameworks under one hood and adds additional scalability, modularity and platform features.

Development:

Flex4

It was tough choice between well established Flex 3 and Flex 4, which is still in beta. But looking on “craziness” of this project we decided to give it go wit new baby. Project itself wasn’t really “Flexi”. It doesn’t have spreadsheets, loads of data or shopping cart. However the reason why this “flexiness” IS there and why IS hidden is similar to one when you buy one of those boring German cars like BMW M divisions or Audi RS*… they are very civilized, comfortable and in some way boring when you drive them gently, but at some point you met some geek on traffic lights with his shiny blinking Porsche thinking he is driving god so you have to put him out of this illusion. That time you really need that power. And those civilized cars become monsters and leaves Porsche guy looking embarrassed like child who lost his lollipop (nothing against Porches to be clear). Similar to this weird example, it is with software. You need think forward when deciding how much complexity on the beginning of project is worth of, when adding another robustness/complexity in future, whiles still maintaining cost, speed, maintainability and other factors of present. At some point, many days, months or even years after you finished project, client comes back to you and says “Hey what about shopping cart?” and should be able to predict this or at least try it in some way. Flex is heavy, slow, more complex, but as there is possibility to add future modules and complexity we go for this rather than recoding whole thing from scratch when it comes to it. And as seen on this project, doing it properly you don’t loose on speed or size practically anything.

Away3D

This thingy saved our butts. When PV3D was on its last breath with hi-poly performance this just started showing real potential of flash player and its 3D future allowing us to fine-tune it nearly like famous Toyota Supra. I’ll be writing about Away3D closely in following articles.

Papervision3D

on final version we dropped PV3D in favour of Away3D but is still worth of mentioning as most of our knowledge comes from PV3D core team, forums, enthusiasts and actually engine itself. And all that knowledge was used when working with and optimizing Away3D. PV3D is great engine, but unfortunately its lack of support for new FP10 features was really noticeable in this project.

Bulkloader

this little library is synonym of “loading”. It’s engine behind of all our assets management tools.

TweenMAX

Hard choice was between GTween and this. On the end we decided for TweenMAX as all of us already familiar with it and it’s little bit more feature packed.

SWFObject

When it comes to scary (for most of flash population as I found) HTML world and embedding flash there, this is unquestionable choice. Even Flex4 support it so what else to say.

SWFAddress

The only thing what really surprise me is how it’s possible that SWFObject and SWFAdress are still separate projects. They are destined to be together! Rostislav, Geoff…c’mon guys, buy each other some beer and marry those 2 brilliant things with each other.

Box2D (full name is Box2DFlashAS3 …Well, I’ll stick with Box2D)

I felt in love with this little physics engine . It’s like ugly duck when you first look at it (it has c like interface so what you expect) which transform to beautiful swan when you put it to do what it supposed to do…physics. The speed of this thing is just impressive.

Mayherit

this is our internal game framework I started developing few moths ago and it hides the complexity of Box2D for example.

Testing:

FlexUnit

Our unit testing framework of choice. Even better that new Flash Builder got it by default. To be honest I like ASUnit more, but looking forward to use FB 4, we decided to go for FlexUnit.

XRay

As our old school testing tool, we used this for our AS3 Projects/Modules. Even it’s little bit outdated and there are now more choices outhere, It still do it’s job well.

FlexSpy

We used it to test flex related projects. Great testing interface and simplicity were major arguments to adopt this tool.

Beherit

this is (now open source and in Alpha version) flash micro-framework I developed and used on my small-scale projects when I worked at ASOS.com. It was created to simplify high volume development, leaving developer time to do all that cool stuff (with deep-linking, state machine, paging etc is in some way similar to Gaia Framework, but is more oriented to developer designed to work in Flex Builder not Flash). But this time it was used rather for testing small bits. As setting up ready to go project template was matter of 1-2 minutes it was our first choice.

Other free/open source tools and software we used:

Subclipse – Flex Builder svn client
TroiseSVN – Windows based context menu svn client
VisualSVN Server – Great, easy to setup svn server
DotProject – PHP based project managment tool
Mantis – PHP based bug tracking
StarUML – UML design tool. It even has utility to export UML classes straight to Actionscript ones. Great feature!
Hamachi – allows you to setup VPN in practically “seconds”

So this was introduction of our building blocks. Now we can start building something.

In next article I will go trough architecting phase allowing backend/frond end scalability by still leaving performance on both sides.

As our first post hopefully you wasn’t bored. If you know something cool what could be implemented in such a workflow or use different one, put some comment. Would be happy to see!
Stay tuned