I have spend some time looking at unity3D and how we can use this 3D engine. Unity is an integrated authoring tool for creating 3D games or other interactive content such as architectural visualizations or real-time 3D animations.  It is mainly used for game design, but has a huge potential when it comes to real time visualizations.

I have made a very simple game to get familiar with Unity. The plot is quite simple. You got some boxes with a nasty attitude, and its your job to sort them out. Try the game here.

The focus has been to get to know the unity environment and how to make tings move and interact. In this game I use real time physics, particles and a simple intelligence  for the enemy’s.  For graphics I only use cubes. My game is written in JavaScript, but Unity also supports C# and Boo.  Unity can export to :

• Stand alone players for mac and pc.
• Web player
• Iphone and Ipad
• Android
• Wii, xbox and playstation.

Unity has an excellent integration with all the major 3d apps like Maya, 3ds, c4d etc. Unity comes with an Editor where you combine scripts, 3d assets (models, texutres etc), sounds, terrains, physics and more. Read more about the editor

Where to go from here

I see great potential in Unity and will start a new project when I get the time. The focus will be to get a plot, good looking models and environment. Build it all  in Maya, export it to unity with lights, textures, animations and the rest of it. Should be good.

jQuery UI is a powerful extension to jQuery with themeable widgets as well as functionality to bring rich user interaction to the web. The library is widely used, and has a big developer community behind it. On the other hand, wicked tongues has started muttering that jQuery UI has gotten too extensive and therefore bloated, which has given room for other players on the field of rich websites.

jQuery Tools is a collection of the most popular user-interface components for today’s web. While jQuery Tools doesn’t have all the features of jQuery UI, their approach is making the library as lightweight as possible with a limited set of components and functionality customization. The built-in components are Tabs, Tooltip, Scrollable, Overlay and Form tools. jQuery Tools also provides its own Flashembed, History, Expose and Mousewheel through its toolbox. As they say on their home page: «Let’s face it: do you really need drag-and-drop, resizable windows or sortable lists in your web applications?»

The release of jQuery Tools spurred a bit of a controversy, as some feel that it’s wrong to go solo instead of contribute their ideas to the jQuery UI project.

While I disagree with the statement that we don’t need drag-and-drop or sortable lists on the web (we have used it with success ourself), competition is always welcome. This drives the competitors to make even better products and it makes it possible for us, the developers, to evaluate the options and choose the alternative that suits the task best. We’re in the process of using jQuery Tools in one of our own projects, and will hopefully return with a better evaluation later.

I must say results were disappointing and showed far too much difference than what’s acceptable. It may have something to do with this specific font, like the font-hinting.

It’s sad to see that Opera is not supported at all, even though the latest versions have native support for font embedding.

All the tests were done on a Windows 7 PC.

Most web developers agree that the ability to play video on webpages is a must, however the jury is out on how these videos should be played. I’m of course referring to the HTML 5 video format controversy. Throw FlashPlayer into the mix and you’ll end up with a humongous fight leading fast to nowhere. Based on this, focusing on finding a solution, I tried to piece together a player using both HTML 5 video, and FlashPlayer for less capable browsers like Internet Explorer. You can find a demo alpha version of the player here: http://makingria.com/demo/html5/videoplayer/

Browser support

The player supports the following browsers:

• Internet Explorer 7 (FlashPlayer, H:264 video)
• Firefox 3.6 (Native playback, OGG Theora video)
• Google Chrome and Apple Safari (Native Playback, H.264 video)
• iPad and iPhone (Native Playback)
• Opera 10.5 (Native playback, OGG Theora video)

How to build it

My approach to building the player was based on my not so patented “falling down the stairs” method. In plain English this means that playback methods are ranked in a list, falling down the list as support for the wanted playback method is not found.  To accomplish this we utilize the HTML5 video tags ability to hold a list of different source videos. If no support for html5 video is found the video tag will be replaced by swfObject using the Modernizer JS framework.

The list looks as follows:

1. HTML5 video using the H.264 codec – high-res (WebKit browsers and iPad)
2. HTML5 video using the H.264 codec – med-res (iPhone)
3. HTML5 video using the OGG Theora codec (Firefox/Opera)
4. FlashPlayer video using the H.264 codec (Internet Explorer)
5. Error message (Others)

I wanted the player to support play/pause controls, zoom control and outputting the current time and the duration of the video no matter what video playback method being used. I accomplished this by using JavaScript to control all of these aspects of the video, even when using FlashPlayer as the video playback method. If you want to see how this was done in practice, go take a peek at the JavaScript. The code for the FlashPlayer based player can be found here.

Performance

CPU usage is a challenge when playing high resolution video. On my computer, a ThinkPad Intel Core 2 Duo 2.66 GHz with 4 GB RAM (Windows 7 64 Bit) I found that the combination of HTML 5 video playback in WebKit based browsers using the H.264 codec gave the best results when playing a 720p HD video. Also notice the smooth scaling when testing the video in WebKit based browsers.

When using the Gecko renderer in Firefox 3.6, the CPU usage almost doubled compared to the H.264 playback in the WebKit browsers. And it needs to be noted that this was a huge improvement from Firefox 3.5 where native video playback was pretty close to unusable due to a 60-80% CPU usage. This spike in CPU usage is probably caused by the OGG Theora decoder in Firefox and Opera.

In Internet Explorer you’ll end up watching a FlashPlayer rendered video as Microsoft has yet to release a browser supporting the HTML 5 video tag. What’s interesting is the fact that the FlashPlayer renders video content far more efficient (CPU vise) that the native video rendering in Firefox and Opera. WebKit’s native video implementation is slightly more efficient that the one of FlashPlayer, but not by much. It should also be noted that this test was done in FlashPlayer 10.0. Not the mythical speedmonster (rumored) which is FlashPlayer 10.1.

Firefox 3.5 as well as many smartphone browsers like Mobile Safari include a JavaScript API to geo-enable your web applications. Using it is pretty simple, and it gives us the ability create a completely new range of services utilizing the user’s current position. We can use it to position yourself on a graphical map or use yr.no’s weather API to get the weather right where you are.

In the following example, I will try to determine the user’s address by using Google Maps’ new Reverse Geocoding API. I haven’t included all my code in this post, but I will share upon request.

See the demo here

Since there’s still just a few browsers supporting geolocation, we need to check the current browser for the navigator.geolocation object. If it exists, we’ll call its getCurrentPosition function to get the user’s latitude and longitude:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, fail);
}

This triggers Firefox’ location notification bar (or the iPhone’s location dialog) which will ask you for permission to give your location to this web page. After you accept, devices with built-in GPS will give the browser access to these data while other devices will use local WiFi networks and IP address information to try and guess your location.

These values can now be used to retrieve your address from Google Maps:

http://maps.google.com/maps/geo?q=<lat>,<lon>&output=
   <xml_kml_csv_or_json>&sensor=<true_or_false>&key=<api_key>

We can either get our results through a direct JavaScript request using JSON or by getting an AJAX result using a server-side script. In my case I’m using the AJAX approach to let a PHP script retrieve, parse and format the data:

function success(position) {
    $("#location").load("location.ajax.php?lat=" +
        position.coords.latitude + "&lon=" +
        position.coords.longitude);
}

Addresses from Google Maps’ Reverse Geocoding API are ordered from best to least matches and categorized by accuracy. In this example, I’m just printing them all out.

See the demo here

Download geolocation demo source code

References

• Mozilla: Location-Aware Browsing
• hacks.mozilla.org: geolocation in Firefox 3.5
• Google Maps API Services: Reverse Geocoding

While waiting for more browsers to support CSS3′s @font-face, the javascript method Cufón is an interesting alternative to the more commonly used sIFR method.

It’s pure Javascript, so it doesn’t require any plugins like sIFR does. And it has faster loading times than sIFR. Depending on the browser, it internally uses different techniques like SVG, Canvas and VML paths to draw the fonts. Luckily, web developers don’t need to know much about it, it just works!

How to use

1. Download cufon-yui.js
2. Generate a javascript file of the faces you need of your font. Check “Basic Latin” + “Latin- 1 Supplement” for Norwegian characters.
3. Add cufon-yui.js and yourGeneratedFontFile.js in html head.
4. Then, for example,  to use font on all h1-tags: Cufon.replace(‘h1′);

Make sure to only use fonts that allows font embedding – check the EULA (end user licence agreement).

http://cufon.shoqolate.com/

For a long time I have been using JavaScript for the bare necessities, relying on Flash to do the heavy-lifting. After investigating a couple of OK “Flash-sites” I found out they were not actually made in Flash, but in JavaScript. Seemed both had jQuery as the foundation for their scripting. I’ve been using jQuery blindly as a “switch-class” engine for styling only, but could it really do more than a little CSS-manipulation?

The answer to this is: Yes. well actually jQuery itself doesn’t actually do much, but it’s enabling a lot of functionality and it’s making JS accessible for guys like me. As a bonus it can do your AJAX accessible and SEO-friendly. jQuery is a JavaScript-framework containing a lot of functionality to program routines to access the DOM, circumventing all the long and boring “getElementBy….”-commands with a nifty XPath and dot-syntax. It enables asynchronous data- and state-flow and also incorporates a “new”, that is overridden, event-model, for convenience.

There’s a lot of different frameworks out there, and trying but a few of these it’s impossible for me to choose which is best. Since MicroSoft has selected jQuery as their preferred AJAX-bridge, I feel it’s a safe platform to explore. I have seen a lot heavier graphics programming with the MooTools and really nice AJAX and data integration with the Dojo-framework, however, jQuery seems to come out of most tests and comparisons on a close-to-best on most cases, excelling in kind of most aspects.

After a rough start, meeting again the longly avoided $-sign, I have started understanding how jQuery works. A lot of cool things can be done with JQuery. Take a look at a couple of examples that inspired me to take up JS/jQuery again.Site 1 and Site 2
The sites themselves are not very impressive, however, concidering they’re done in Javascript it’s not half bad really, at least it made me take the plunge into the world of front-end javasripting again.

More info on jQuery here.