HTML5 + WebGL: 3D Our Web

• 6 minutes READ

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?

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

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.


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.

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?

Create Websites with Our Online Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

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.


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.

Andrian Valeanu

Designmodo Founder.

Posts by Andrian Valeanu
Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree