North Kingdom on 1st place and Stopp on 3rd, Sweden shows it knowledge in for the 3d web.

2011 in review: 20 sites that took 3D to the next level

3D on the web really came into its own this year. Here HelloEnjoy’s interactive director Carlos Ulloa compiles 20 of the best 3D websites of 2011 and shows us some of his own projects to boot

This year will go down in internet history as the year when hardware accelerated 3D graphics arrived to the browser without the need of dedicated 3D plug-ins.

With WebGL support in modern browsers (ie except Microsoft’s) and the recently launched Flash 11, developers have started to combine experimentation with creativity to build high-end interactive 3D experiences.

The advertising industry is always looking for new and exciting ways to promote products, and real-time 3D graphics have the potential of bringing a new level of interactivity to their customers.

1. Rome: 3 Dreams of Black

Featuring music by Rome, 3 Dreams of Black immerses the user in three amazing 3D worlds, where animals and plants come to life forming beautiful dreamscapes and users contribute with their own creations.

An interactive film by Chris Milk and Aaron Koblin, it was created by North Kingdom, Skellftaå, Mirada and the Google Data Arts Team led by designer/developer Mr.doob, the man behind the Three.js JavaScript 3D engine that powers many of the projects listed here.

Although this list is ranked in no particular order, if I had to choose the best project, it would certainly be this one. A truly landmark experience that shows what WebGL can do in a web browser.

2. Nissan: The Planet Zero

An interactive 3D microsite by ROXIK using his Sharikura engine, produced by unit9 for Japanese agency ENJIN, promotes Nissan’s new eco-friendly range of vehicles.

Visitors explore The Planet Zero in search of various methods of renewable energy, all set in the neo-futuristic, zero-emission world.

Being Flash 10 based, this is the only project on this list that doesn’t use hardware accelerated graphics. But who needs technology when you have ROXIK’s magic?

3. Adidas: Adizero f50

The new Adizero F50 football shoe created by Stopp for Adidas is a great example of 3D product visualisation, something we will certainly see more of in the future.

Using WebGL to render this high-tech football boot, allows the user to change between wireframe, solid and expanded views to see how the boot is put together and read about the various features.

4. Nissan: StageJUK3D

Revealed at the launch of Flash 11, StageJUK3D allows you to configure and drive the Nissan Juke in full 3D. The first of many to come commercial projects taking advantage of the Stage3D technology in the latest version of Flash.

Created by Adobe, Nissan Europe and Digitas France and powered by the Away3D engine.

Self promotion

It’s great to see agencies bringing creativity and innovation to their own sites, leading the way and showing clients what’s now possible.

5. Nouvelle Vague

Created by French agency Ultranoir, Nouvelle Vague offers a poetic WebGL experience based on Twitter.

In a surrealist world, tweets retrieved from your selected hashtag, are carried out by flying objects such as air balloons, biplanes, zeppelins and even UFOs. The user can see the scene from any of these ships from each of the pilot’s point of view.

6. Les Chinois

The website of also French agency Les Chinois was one of the first Flash 11 projects launched this year using Away3D.

Immersive sound design and creative camera work combine with Stage3D graphics to create a futuristic scene dominated by a flying dragon creature.

Creation tools

Making 3D creation tools accessible to anyone is another exciting prospect of the future, made possible by the use of 3D technology in the browser.

7. 3DTin

3DTin is a WebGL modeller that runs in your browser, allowing the user to create 3D models using cubes and other kinds of shapes.

Models can be saved in the cloud or exported in standard 3D file formats like OBJ and Collada.

8. My Robot Nation

My Robot Nation combines WebGL, robots, and 3D printing. Users can make a robot on the site in full 3D, then have it 3D printed and shipped to their door.

You can customise your robot with different body parts, stamps, and colours. Everything happens in real time as you drag new 3D parts onto the model, rotate and place stamps, and pose their robot just right.

I would love for consumers to be able to get easy access to 3D printing. As they say, robots are just the beginning!

Data visualisation

One of the most immediate uses of 3D graphics is data visualisation. The possibilities are truly endless, just take a look at these examples.

9. BioDigital Human

BioDigital Human is an impressive 3D human body explorer with many interactive options and utilities to learn about your body.

Tools for exploring, dissecting, and sharing custom views, combined with detailed medical descriptions provide a new visual format to patients, students and medical professionals.

10. WebGL Bookcase

WebGL Bookcase is an experimental interface created by the Google Data Arts Team that aims to translate traditional media into a virtual space.

They designed a digital bookcase that’s an infinite 3D helix with more than 10,000 titles from Google Books. It allows the user to browse over the covers or search by subject, to open a 3D model of each book. Each one comes with a QR Code for downloading to your mobile and a link to its entry in Google Books.

11. CNN Ecosphere

The CNN Ecosphere Project is a real-time Twitter visualisation that aims to reveal how the online discussion is evolving around the topic of climate change.

The online representation consists of an interactive 3D globe where tweets grow into plants and trees. Conceived by Heimat-Berlin and developed and produced by Minivegas and Stinkdigital.

12. TwitterGraph

TwitterGraph is an interactive 3D word cloud visualisation which shows common friends among several Twitter users.

Developer Daniel Pettersson has also used data from last.fm to show similarities between music bands and artists in another interesting piece called ArtistGraph.

13. WebGL Globe

The WebGL Globe uses an interactive 3D representation of the Earth to visualise geographic data like world population, latest earthquakes or search volume by language.

Created by the Google Data Arts Team, the project is an open data visualisation platform for anyone to copy the code, add their own data and create their own globe.

Globe visualisations get more interesting every day. These are other good examples, using data from world flights, weather and internet traffic.

Maps

The future of digital cartography is clearly in 3D. We’ve just started to see what’s possible when maps take advantage of hardware accelerated graphics to create a more detailed representation of the world.

14. Nokia Maps 3D

Currently only supported in a few major cities, Nokia Maps 3D uses WebGL to accurately render terrain and buildings, that really come to life when you move and look around.

The experience is closer to Google Earth than Google Maps, with the freedom of a 360-degree view and adjustable elevation. Click the name of a city to go there and see it close up in all its glory.

15. Google MapsGL

Bringing one step closer Google’s idea of mirroring the real world inside your browser, the new MapsGL option introduces the power of WebGL graphics to Google Maps.

The experience is improved with 3D buildings (with shadows appropriate to the local time of day), slick transitions between imagery (like the 45-degree aerial photography views in some areas) and the ability to smoothly enter into Street View without a plugin.

To try this features out, click the “Want to try something new?” words on the lower left side of the screen.

16. Blocky Earth

Described by author Jaume Sánchez as “all the planet, one block at a time”, Blocky Earth is a voxel visualisation of your local area using both photographic and elevation data.

In close range it gives a unique view of the area that surrounds you, but only when you zoom out you can see the big picture, from the heights of the mountains to the depths of the seas. Fascinating.

Online coding

Due to the fact that JavaScript runs natively in the browser, a number of online live coding tools have emerged. These two are a lot of fun and have great potential as learning tools.

17. GLSL Sandbox

GLSL Sandbox  is a WebGL application for live coding fragment shaders right inside the browser. GLSL is the language the shaders are written in, and here you can edit them in real time and instantly get the feedback.

The interface is dead simple, the results are displayed in the background while the code editor is overlaid on top. Your work is automatically saved to the gallery for all to see and build upon.

Originally created by Mr.doob, the project has attracted many developers who are creating all sorts of awesome graphic effects, render tests and even simple games. The extensive library of shaders is quickly becoming an excellent source of reference for beginners and experts alike.

18. WebGL Playground

In a similar fashion, WebGL Playground lets you type in WebGL programs and see the results on the same page. The live editor supports JavaScript code and GLSL vertex and fragment shaders, plus a handful of features that make your life easier.

The idea is to shorten the development cycle so you can spend more time on the creative part. All necessary things are added behind the scenes. Your code is automatically organised, formatted and includes syntax highlighted.

The project is still at its early days but the potential for becoming another comprehensive learning source is an exciting prospect.

Demos

Of the many demos we’ve seen this year, I’ve chosen these two because of their technical prowess and superb attention to detail.

19. Chrysaora

Chrysaora is a real-time jellyfish simulation using realistic rendering and simulation techniques. Created by Aleksandar Rodic, it demonstrates both creative talent and technical expertise.

To enjoy it at its full, make sure you check the debug console and play with the different shaders and simulation controls.

20. WebGL Water

WebGL Water by Evan Wallace, is another beautiful demo that combines advanced rendering techniques like reflection, refraction, caustics and ambient occlusion to simulate something as simple and beautiful as a pool of water.

Don’t forget to try the various interactions to draw ripples with the mouse and move the sphere across the water surface.

Looking at the 3D sites created this year, we can see interesting trends starting to appear. Developers working in advertising, entertainment and product and data visualisation are starting to take advantage of hardware accelerated 3D graphics to deliver a richer, more immersive experience to their users. Furthermore, game and demoscene developers have also produced amazing 3D work, pushing the boundaries of what can be achieved in the browser.

But things are going to get even better. On the one side, professional 3D development tools such as Unity and Unreal UDK will enable us to create console quality graphics for Flash 11. On the other, WebGL has got a lot of momentum and a growing community, and will soon be available on mobile browsers.

Different technologies give creative teams plenty of choice to choose the right one for the job. These are very exciting times and we look forward to the year ahead.

2011 in review: 20 sites that took 3D to the next level | Feature | .net magazine.

Filed under: web, North kingdom, Stopp