Project Description
Ajaxna is a javascript API enabling 3D games for the web, without using plugins.

This programming framework targets Visual Studio 2008, follows an XNA inspired API, is implemented as a C# ASP.NET control and is built around dynamic client class (lazy) loading and intellisense.

Project Links
  • Ajaxna News - Get all the latest info about Ajaxna
  • Tutorials - Get started right now with Ajaxna! Code your first solid, lit, spinning 3D cube in a web page, without plugins, in no time.


Overview

Ajaxna development began in early 2006, by me, Kevin Robinson, as "just another ajax framework", a move away from hidden frames and the like, as an effort to produce a collection of truly re-usable client classes that would help me do my job as a Web Developer. Conceptually it can most easily be compared to the Microsoft Ajax client libraries as it tackles many of the same issues such as an ability to create client classes using a classical Object Oriented nature, cross browser eventing and client serialization from and to json and xml. It was initially developed with no knowledge at all of "Atlas", as it was originally known, but does bear many similarities.

Unlike Atlas however, I made the decision early on to build the framework upon the notion of dynamic client class loading. I didn't want to have to load up tons of javascript code into a client browser, which might never be used. You can still do things this way if needed but there are many reasons not to. By default Ajaxna will load only a set of bootstrapper code/classes to enable it to function if it is called.

As soon as that decision was made I realised that working with a framework like this made a "Single Page Application" a real possibility. And then the advantages of this style of Web Application Development began to show themselves, starting with the statefulness of such applications, the client code never had to deal with page refreshes or roundtrips and instead of being just there for "effects" actually could take over the Presentation Layer entirely. The coding style used is as close to C# as I dared get.

Things then started to get more ambitious and templating was introduced to allow client classes (akin to ASP.NET Code behind) to load in an associated template (akin to ASP.NET .ascx). Any Dom controls of interest could then be parsed out and added as class members of the templated class (akin to what happens with ASP.NET User Controls).

Just for fun, I later added some drawing classes, and then classes for 3D rendering, with a similar API to Managed DirectX (MDX). Again, Ajaxna does not need to load in any class that is not used so I knew this kindof excess was not going to affect download performance of the framework as a whole.

Professionally I then started using MS Ajax, not because it was the best or fastest or scaled well but because it was easily understood, very well supported, and allowed rapid development by a whole team.

Ajaxna then focused more on the 3d stuff and I thought it would be fun to do to my MDX classes what Microsoft did to theirs, and so wrapped it in some XNA style classes to make development easier.

Later on I converted it into a .NET Custom Web Control (AjaxnaControl) because I liked the idea of a single file I could reference and get all this functionality out of. This also made deployment easier. I could make use of the Designers in .NET to make things easier for a developer to set up and Visual Studio was definately what I was aiming at as Javascript Intellisense support was added in the 2008 version. This support is sometimes for free and sometimes you have to work for it. Much effort has been made to enable Ajaxna to get the best from this feature.


Why is Ajaxna on Codeplex?

Ajaxna has gotten so large a project now and I believe has alot of potential, either for games or web applications or both, that I recognise I no longer have the time needed to develop it the way it could be developed.

Due to the built in dynamic class loading, it would make alot of sense for collaboration between developers with specialist skills in certain areas. It's shown currently by having an XNA namespace but others areas could be added without affecting performance at all. A little like the .NET compact framework (and XNA) this framework delivers/can deliver alot of functionality and a very rich API, but unlike the microsoft offerings, users do not have to download anything but the bootstrap code and can run desktop like applications or even games right in the browser, all from a single page, if desired.

Therefore, I offer this out to the community to assess, comment on, use and hopefully to embrace, develop and help to extend.

What is in the (pre) Alpha release

Just the basics, the compiled DLL and the source code for Ajaxna.

I intend to supply examples, code templates and tutorials in due course but for now I had to publish something else the project would be deleted from Codeplex.

Screenies and Info


Early version playable example: http://www.victory-road.co.uk/ajaxengine/examples/ajax_xna_performance_javascript_3d_rendering_test_game_battlezone_prototype_using_intellisense.html

Screenie A
Ajaxna3.gif
Ajaxna3_Large.gif

Screenie A shows:
  • Use of the treeview control. The tree is reflecting the loaded classes and math classes such as Vector3 and Matrix are shown.
  • An Ajaxna Game window rendering 3D geometry, a simple cube in this case.
  • A debug console showing HTTP traffic due to dynamic client class loading (on demand).
  • This example is in IE7

Screenie B
Ajaxna_intellisense.gif

Screenie B shows
  • The Javascript intellisense (using VWD 2008) on an instance of the ajax.windows.Console class.
  • The intellisense shows Events, Method, Properties and Classes properly represented.
  • Registration of a client application with the Ajaxna framework.
  • Dynamic class loading using the $new() method.
  • Type casting using the static "cast()" method of all classes.
  • How event handlers can be applied to DOM elements (the window in this case).

Sceenie C
ajaxna_StarWars.gif

Screenie C shows:
  • A Vector 3D Star Wars game prototype written using Ajaxna rendering 30 polygons per render and running at 114 frames per second in (3420 lighted polygons per second).
  • A Tie fighter flying past with the player HUD in the foreground.
  • This example is in Google Chrome.

Screenie D
Ajaxna_3DCollisions.gif

Screenie D shows:
  • Use of built in classes to perform collision detection & response for Ellipsoid to Mesh.
  • The Mesh in this case is rotating and pushing the Ellipsoid (the box) out of the way.
  • This example is in Firefox.

Screenie E
Ajaxna_Platformer.gif

Screenie E shows:
  • A platform game prototype built using Ajaxna.
  • The player (box) is standing on a rotating platform by making use of the collision classes mentioned above.
  • Bone type scene graph hierarchies can be constructed, with nodes attached and detached. Here the player has been attached to the rotating platform (BRIDGE) as he collided with (jumped on) it and the platform's face Normal was within "Standing on" limits (pointing more or less upwards).
  • This example is in Safari

Screenie F
Ajaxna_Raycaster.gif

Screenie F shows:
  • Use of an experimental set of Ray Casting classes (ajax.xna.Raycaster)
  • Makes use of texture drawing from a source rectangle (ajax.geometry.shapes.Rectangle) to a destination rectangle,
  • Sprite Z occlusion (barrel sprites are partially hidden by foreground raycast walls
  • Sliding collision detection/response.
  • This example is in Google Chrome, running at 70 frames per second+

Screenie G
Ajaxna_Application.gif

Screenie G shows:
  • Ajaxna in it's original use as a framework for scalable, stateful web application development
  • We see an "MDI" type window containing child windows, a treeview, some menus, a context menu and a datagrid.
  • Example used client side datasources to bind multiple controls to the same data (change in one place of the GUI...see the same change in another).
  • This example is in IE6

Last edited Nov 20 2008 at 12:43 AM by VR2, version 15
Comments
ghaladen wrote  Nov 20 2008 at 9:28 PM 
This is absolutely fantastic work. I've been wanting to play around with DHTML and 3D, but the only libraries out there such as http://www.wiioperasdk.com support the Canvas tag only, so that leaves IE users out in the cold.

I'm curious to know what your plans are for Sound and Music. One direction would be to use Flash, but that goes against your "no plugin" philosophy. I did find one site that utilized sound w/o flash, but I think it only uses the QuickTime plugin, I'm not sure. I guess with a bit extra work you could add support for Windows Media and other platforms as well.

http://www.themaninblue.com/experiment/JS-909/

VR2 wrote  Nov 20 2008 at 11:04 PM 
Hey my first comment - and a nice one too - thanks for that :)

Sound is a problem for sure. We have basic sound & music support, you will find it in the ajax.effects.SoundPlayer class. I won't say anything more - hopefully intellisense will tell you all you need to know :) Behind the scenes it uses either the IE/Opera "BGSound" tag or "Embed" for everything else.

However, it's not perfect and trying to be as cross browser as possible meant offering only a very basic API here (start/stop/loop), and even then I've seen problems (Google Chrome won't loop currently for example). It needs work I know but it might be enough to get started with?

I checked your URL and that looks (sounds) great - how are you doing that? I did get a quicktime dialog come up? :) As you say, IE was no good for the Visualization - and Chrome said it had no sound...but FF worked - you could totally do that cross browser with Ajaxna - it looks like you are using 2d canvas commands. Over here you can do that with intellisense on the underlying Canvas context (or IE VML wrapper - it all looks the same).

As you say, the philosophy here is no plugins, after all *with* plugins you can get Shockwave to deliver OpenGL/DirectX right into the Browser or Flash has serveral nice & fast software 3D engines now and there are a load of other ActiveX/plugins that will do this too. Even the mighty XNA has ClickOnce too, although that's probably stretching the definition of plugin a bit far. Certainly, the idea here is to give the "Biggest Bang for the Buck" to deliver the most for the least, both in terms of browser requirement and download.

Having said that however, as a non-visual element, and if there was no other way (nothing else suitable for that browser/platform), then perhaps it would be OK/the only way. After all sound is very important in games.

Perhaps, in a similar way to what I've done here with graphics and the IGraphics interface - it *could* be that 2 interfaces are defined, like "IBasicSoundPlayer" which would work cross browser without plugins, and "IExtendedSoundPlayer" with a more advanced API - but relying on a hidden plugin and warning any developers in the intellisense to possible side effects (like not working, popping up unwanted "Upgrade Now" or any other prompt dialog windows, not being available, freezing or crashing the browser etc) and let them decide if they wanted to use it? For advanced sound based apps (like yours) it might be the only way, but others may opt to stick to the safer but basic sound support.

As an example of this type of cheat, there is a colour picker in the components namespace that only works on IE as it uses ActiveX!! I'd like to fix that but I only have limited time and I needed it for a work project back in the day (intranet).

So, I hope that makes some sense and I'm totally open and welcome any and all suggestions of where to take Ajaxna or how to improve it or indeed offers of help :)

Updating...
© 2006-2009 Microsoft | About CodePlex | Privacy Statement | Terms of Use | Code of Conduct | CodePlex Blog | Version 2008.12.9.14291