HTML5 + WebGL: 3D Our Web

I remember the first time of watch “Avatar”; I was totally impressed by the astonishing 3D effects. It makes me feel like I’m the part of the movie. Back in work afterwards, I was thinking what a brand new experience will be if the web is benefits by 3D technology. Previously, we do have some 3D applications in web; but it has never been a time like now for us to experience the fast development of 3D web.

In recent years, HTML5 and WebGL have become the hottest technology of the web industry. With the fast development of HTML5 and WebGL, 3D web is no longer a dream; as a matter of fact, web content is in the transitional time from 2D to 3D demonstration which is originally supported by browsers. It is happy to see major browsers like Chrome and Firefox are dedicating to the development of 3D web technology–HTML5+WebGL.

What is WebGL?

WebGL Logo

WebGL (Web-based Graphics Library) is a new web technology that provides API to generate hardware-accelerated 3D graphics to any compatible browser without plug-ins.

Previously, we need special web language or browser plug-in to achieve 3D effects. But now, HTML5+WebGL provide a solution for developers to 3D objects on web directly. WebGL extends the capability of JavaScript to generate the power of hardware acceleration; therefore, we don’t need to worry about the real visual experience of 3D applications.

So what applications do we have realized by HTML5+WebGL? How do they affect our life? Are they looking as well as the native 3D application?

3D Web Game

Game is an important application field of 3D technology. Web game is one of the first beneficiaries of HTML5+WebGL. Traditionally, we used to worry about the visual experience of 3D web game; but now, game developers are dedicating in WebGL game engine development; they are able to create beautiful 3D game sceneries that equal to the traditional PC game.

For example, CopperLicht is a WebGL library and JavaScript 3D engine for creating games and 3D applications in browser. Asteroid is a web shooting game developed on this engine. The game provides dimensional angle of shooting; you can control the direction by keyboard. In this game, WebGL is stable and JavaScript is fast; it can be played on any WebGL enabled browser with excellent 3D visual experience.

Game

Besides, it’s not only WebGL that pushing 3D web game forward; but also other important HTML5 features. WebSockets, for instance, allow true bi-directional networking, thus enabling efficient low latency communication for multiplayer games; audio API allows real time audio manipulation and playback making interactive sound a reality; App Cache allows you to load a website once and cache it, making the burden of large game downloads palatable.

As far as browser concerns, 3D capability is already showing up in browsers like Firefox4 and Chrome through WebGL. According to the statistics of last year, Chrome and Firefox take the second the third market share of the global market. This means there are more than 450 million users who can do hardware accelerated 3D graphics. More importantly, as the most commonly used browser, IE began to support HTML5 from version 9. That is a huge potential user group for 3D web game.

3D Map

Map plays important role of our daily life. It is another key application of WebGL and HTML5. Compare to the 2D map, 3D map is capable of visual angle change, dimensional architecture check and etc, which makes you feel locating in the real scene. Except for the direction, 3D map helps to check the detail information of your destination.

Google provides 3D street scenery map via WebGL. You can fly anywhere to view 3D buildings. With the “3D Buildings” layer in Google Earth, anyone can view 3D models of buildings, monuments, fountains, bridges, towers, museums, homes and much more. While in Google Earth, you can click on a 3D building to open a ballon with more information on the location. This is the screenshot of Westminster Abbey of London.

Westminster Abbey of London

In version 5.0, you can dive into the water to check the amazing under water mystery. Here is a screenshot:

So, here comes a question, how to build 3D model of each city? It is a huge task to build 3D model of one city, let along the whole world. Google’s method is to generate the power of mass people. The 3D models you see in Google Earth are contributed by users all over the world. Any one can add models to Google Earth.

Imagine if every city builds the 3D model, and provides the access through web, it would be huge benefits for mass people. We can add lots of applications such as navigation, invented travel, food search, social network and etc. Although some of the application effects are realized by 2D version with extra plug-in, they are stucky and unpleasant; in the future 3D map, the real city landscape with smooth visual angle rotation will bring you totally different user experience.

3D Social Network

New applications can be developed on the basis of 3D technology, and social network based on 3D map is one of them. At present, content like text, image and video are the basic forms of SNS; while in 3D social network, it is a totally different concept. Here is an interesting imagination: after logging on to Facebook, you “walk” on the street, “open” the door of a coffee bar, “buy” a cup of coffee and “say” hello to the 3D image of your neighbor. Wow, am I crazy?

Well, I think I’m not a mad guy. As a matter of fact, Google is doing such a thing in project YoubeQ. YoubeQ is a 3D social network capable of virtual travel. Users are turned to 3D people; they can meet friends around the world and play games. After Google Earth supports webpage model, it is much easier to visit the project.

3D Social Network

3D in Mobile

There are also important applications that relate to our daily life in mobile world. Look at the growth of smartphone, global smartphone unit sales are expected to grow 25% from 472 millions in 2011 to 630 millions in 2012. As people exchange their feature phones for more advanced devices, mobile is an ever increasing place for 3D application.

Tablet is an ideal platform to combine 3D image and finger touch operation together. Let’s take Google 3D Bookcase as example; it uses WebGL with the Goggle Books API. Google creates an inspiring bookshelf which features over 10000 books from Google Books’ collection, all of which are presented on a 3D way. As you drag mouse, you can rotate the bookshelf to choose books and open a 3D version of the book. Each book comes with a QR Code for downloading to your mobile.

It changes the traditional way of choosing books. If you like, you don’t need to go to the library or book shop; but find books in your mobile app.

3D Our World

After 3D web technology applied to daily life, our world will be modelized by 3D, from earth, stars to cars, houses, digital stuff and bacterium. Everything will have 3D details. It is a brand new experience to find the mystery in life.

Last year, there is another 3D web application of Google called body browser. You can check body parts from 360 degree on web including bones, muscle, organs, nerve system and etc. It helps us to know more of our body which is essentially helpful to health.

3D Restrictions

Any advanced technology takes time to get accepted and popularized, so does 3D. On the one hand, as the next standard of web, HTML5 is not officially settled; there is still a long way to go; on the other hand, complicated 3D model building is another restriction. For instance, we want to demonstrate Bird Nest in 3D. It is a complicated process to make 2D polygonous shape collection understoodable by the computer. So web industry needs a huge yet inexpensive 3D model library that contains different things of world for web developers to use.

Conclusion

Without any doubt, HTML5+WebGL is making web different little by little; they provide a way to 3D our world with brand new experience. At the same time, we should also see the bottleneck. Compare to the 3D effects we realized by Flash, there is still a long way to go to achieve complicated 3D effects on web. On the one hand, I’m looking forward to see the changes brought by HTML5+WebGL; on the other, I hope Flash to HTML5 technology would catch up the fast speed of web development.

If we can convert 3D effects from Flash to HTML5 directly, it will be a huge benefit for all developers. At present, it’s still the early stage of Flash to HTML5 conversion; but pioneers bring us hope, such as Google Swiffy and Sothink SWF Decompiler. They have realized the basic and simple animation conversion from Flash to HTML5. To conclude, we are on the way to 3D web world.

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

4 Comments
  1. Naga Harish Movva Mar 22, 9:07 am

    WebGL this is really super!

    nice post again!

    Thanks

    Reply
    0
  2. steven Mar 22, 12:56 pm

    Such a great thing you share! I didn’t know about this! thanks for sharing, gonna to check more details.

    Reply
    0
  3. nicolas Mar 23, 1:33 am

    You are wrong Google Earth is not using WebGL for the moment, it requires a plugin to work in the browser. If you want to see a real WebGL Map take a look at http://maps3d.svc.nokia.com/webgl/index.html or http://www.webglearth.com

    Reply
    0
  4. Rick Mar 23, 2:16 am

    Since WebGL is and never will be cross-browser, what’s the point?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters