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 (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.
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.
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.
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.
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 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.
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.
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.