---

Using WebGL in Web Design

By: Sean Peplinski

Date Published: 10/14/2016

---

INTRODUCTION

The purpose of this article is to introduce business owners to the possibilities of a relatively new technology called WebGL and what it can do to improve the effectiveness of their website. We'll first give an introduction to what WebGL actually is, and then outline the benefits and challenges that are posed.

WHAT IS WEBGL?

WebGL is a graphics system that is now supported in all major mobile and desktop web browsers, including: Chrome, Firefox, Edge, Internet Explorer, and Safari. The graphics system allows web programmers to embed rich, 3D media natively in a web page without the need for any plugins or 3rd party support. Typically, this graphics system is used to create games playable inside a web browser, but there is a huge, largely-untapped opportunity to utilize WebGL for web design. The graphical processing power exposed by WebGL allows for creating dynamic, visually impressive backgrounds, and interactive 3D controls.

3D GRAPHICS SYSTEMS

Today, DirectX and OpenGL are the most common systems used to create 3D graphics. These systems are what programmers use to access the power of users' GPUs (graphical processing units). Desktop and laptop computers have had GPUs for almost two decades, but now, even mobile phones and tablets have GPUs (albeit, less powerful) to display 3D graphics just like a desktop computer. Until 2011, 3D graphics could only be utilized with regular desktop applications, typically written in C++. However, in 2011, WebGL was released as a specialized version of OpenGL, and for the first time, 3D graphics could be embedded in web pages by simply using Javascript. Major web browsers started supporting WebGL natively, meaning no 3rd party plugins or extras were needed for users to view WebGL media.

Although WebGL is based on OpenGL, it is not an exact replication. The specification follows OpenGL ES, which is a slightly stripped down version of regular OpenGL. This means there are some limitations in terms of both performance and functionality, but for the most part, many of today's most advanced 3D graphical techniques seen in video games can be utilized on the web with WebGL. Later in the article, we'll look at the capabilities and examples of WebGL and some of the problems/considerations we must make to ensure WebGL scenes work smoothly for all types of hardware.

USING VIDEOGAME-LIKE GRAPHICS IN WEB DESIGN

Obviously, video games have no value for a company looking to design a professional website, but it's important to understand that the concepts and techniques used in video game design can also be utilized to create visually striking media for any website. Real-time blurring, reflection, refraction, particle systems, and endless other effects can give visitors to your site a visual experience that they have never seen before in a web browser. Besides visual enhancements, WebGL can allow for new interactivity possibilities with 3D web controls.

---

WHY USE WEBGL FOR YOUR WEBSITE?

Web design is constantly evolving. In the 1990's, websites contained only text with a few low quality images that could be downloaded quickly with a 56k modem. As internet connection speeds became faster, and computers became more powerful, it became possible to use larger and higher quality images. Eventually, HTML5 allowed for multimedia such as videos to be displayed natively in web pages and CSS3, along with libraries like jQuery, allowed for advanced visual effects to be programmed that were not practically available before. Now, we are at the point where a new era of web design is beginning with WebGL, where the powerful processing power of GPUs can be used to further enhance visuals and functionality beyond what was previously possible. Asking “Why use WebGL?” today, is like asking why “Why use multimedia?” in the 1990's. It is the future, and there has never been a time better than now to be ahead of the curve in web design.

AESTHETICS

The number one advantage a WebGL website has, is visually pleasing aesthetics. WebGL can provide advanced web design possibilities that are very eye-catching to visitors, which is even further amplified at this point in time since most companies do not utilize WebGL, meaning the advanced effects can create a large impression on visitors within seconds of visiting your site. Although the aesthetic look-and-feel of your site may seem superficial, many studies show that the way visitors perceive your website's aesthetics translates into how they predict the usability/functionality/credibility of your site, and thus, how likely they are to remain on your site, or dismiss it within seconds. Here is a great post on uxmyths.com with links to studies about the importance of aesthetics: http://uxmyths.com/post/1161244116/myth-25-aesthetics-are-not-important-if-you-have-good-us Further, here is a Google study that shows users are able to make aesthetic judgments within milliseconds of exposure to a website: http://research.google.com/pubs/pub38315.html

Beyond the studies, we can intuitively realize aesthetics are important by thinking about our own experience with websites. If a website is not well known, how likely are you to stay there if the design seems outdated visually or functionally? How likely are you to buy a product or do business with a company that has a website that looks like it was designed a decade ago? On the contrary, think about how visitors to your site will feel if they see eye-catching web design concepts that they have never seen before. WebGL is the future of web design and is currently quite underutilized. Utilizing it can give visitors the perception that your company is cutting-edge technologically, instill confidence in your company and your website's usability, and ultimately keep visitors' eyes glued to the screen and remain on your site.

FUNCTIONALITY / INTERACTIVITY

Another advantage that WebGL websites have, is the ability to implement 3D related functionality. First, this means we can create 3D web controls. Secondly, we can display complex 3D models that users can interact with. Below is an example I have created demonstrating 3D functionality. It is a 3D image gallery that rotates in 3 dimensions and implements real-time reflections along with glow effects for option buttons.

THE FUTURE OF HARDWARE

The utilization of WebGL and 3D graphics for your website means that your visitors' GPUs need to be powerful enough to display the content smoothly. Luckily, today's desktops, laptops, and even mobile phones have enough graphical power to display 3D content. However, mobile phones and older computers usually need to have graphical detail trimmed down a bit. We'll tackle this topic later in the article and discuss how we can make WebGL content run smoothly on all types of hardware. The question is, what is the hardware trend of upcoming phones and desktop GPUs? The news is looking very good for WebGL web design.

Mobile Hardware

Phone manufacturers are improving their graphics capabilities at a rapid rate. This is happening for a variety of reasons: so users can play more advanced 3D games, faster rendering of web content, and the ability to display HD content at resolutions as high as 2k and eventually, even 4k. This is great news for WebGL programmers. The increasing power of mobile GPUs means that newer phones are able to handle WebGL content in web pages with ease and eventually, phones will be able to render effects that were only possible on computers.

TechSpot's review of the Google Pixel XL has useful comparisons of the graphics capabilities of various phones. As you can see, the newer phones like the iPhone 7, HTC 10, and the Pixel XL have made huge leaps over phones released the last few years. Even the iPhone 7 shows a large increase in graphics capabilities over the iPhone 6. This shows the importance manufacturers are placing on GPU speed and the trend manufacturers are showing towards advanced 3D capabilities. Also important to note, is that as phones trend towards higher resolution displays, a more powerful GPU will also be required. Some phones, like the HTC 10 have a 2k display, and although not official as of the writing of this article, Samsung looks to be eyeing a 4k display for the upcoming Galaxy S8.

Desktop/Laptop Hardware

Graphics capabilities are less of an issue with computers than phones since the hardware has been sufficient for a long time to display complex 3D graphics. However, the future trends are important because of the implications for laptops and low end hardware, which are the areas of concern for WebGL developers. Namely, the hardware that may cause a bottleneck for WebGL content is something called an “integrated GPU”. Integrated GPUs are typically found in low-end desktops and non-gaming laptops. Again, it looks like we are in luck as companies like Intel are making it a priority to improve the processing power of their integrated GPUs and they have gotten to a point where moderately advanced 3D games can be run smoothly. This means that generally, desktop/laptop users will have no problem displaying WebGL content, except for those who are using outdated, low-quality integrated GPU chips.

Intel Increasing Integrated GPU Power:
http://www.extremetech.com/extreme/221322-intel-claims-its-integrated-gpus-now-equal-to-discrete-cards

Integrated GPUs and 3D Gaming:
http://www.pcgamer.com/gaming-with-integrated-graphics-tested-intels-finally-good-enough/

---

WEBGL SCENES VS. VIDEO CONTENT

Without WebGL, a typical method of giving moving, dynamic content to a homepage is to use a video as a background. Although this gives visitors something more exciting than a background image for a visual experience, there are many cons to using video content in web design that can be countered with using WebGL content as an alternative. The least of these cons, is that video content is non-interactive and static, meaning that a video will play and loop infinitely with no ability to be interacted with via user events. Below, we'll look at other advantages of using WebGL over video content.

MOBILE BROWSERS

One major constraint with video content occurs with mobile browsers. To protect users against consuming unwanted bandwidth, mobile browsers require the user to explicitly trigger a video to play through an 'onclick' event. This means the user must click a button or some area on the webpage to make a video play. This is obviously very limiting for web design purposes as it's quite awkward to make the user click a button to get a background video to play, and mobile users are typically stuck with static background content such as an image. WebGL has no such constraint leaving an opportunity to provide visitors dynamic content as soon the web page loads. Since well over 50% of users now access the internet with mobile devices, it can be very beneficial to your company to use WebGL to provide a way to grab mobile users' attention with dynamic content that they are not accustomed to seeing on mobile devices.

COMPRESSION / BANDWIDTH USAGE

When video content is used for web design purposes, video file size becomes an issue. Web designers need to be concerned about the size of their video files due to: bandwidth usage (only a concern for mobile and low-speed internet services), page response time, and streaming smoothness (a high quality video may cause stuttering as the video buffers). To combat these concerns, videos used as webpage content must be heavily compressed and the video length must remain short to ensure a small file size. This is highly limiting for web design purposes. If you do a search for some websites using video backgrounds, you'll notice that the videos are blocky (due to compression) and the video length is short. This provides visitors with a quite underwhelming visual experience, albeit more interesting than a simple background image.

These same concerns need to be taken into account with WebGL scenes, but bandwidth usage is less of a concern and compression is not needed on the actual output of the WebGL scene. A WebGL scene is comprised of JavaScript code, textures (images), and 3D models. In regards to scenes used for web design purposes, these objects typically don't require any compression for the scene to remain a reasonable file size. This allows for high quality, visually impressive content that doesn't consume excessive bandwidth nor impact page load times significantly.

COMPARISON EXAMPLE

I created a simple scene of a rotating Earth to demonstrate the differences between WebGL and video content. First, it's important to note that the WebGL scene contains only 4.5 MB of content while a video representing the same scene reaches 21 MB. Also, with 1/5th the file size, we are able to display much clearer and smoother content by using WebGL. Below are links to both example pages - one using WebGL, the other using a video. Open both of these and compare the differences.

---

RESPONSIVENESS OF WEBGL SCENES

In today's world, it's crucial that a web layout behaves and looks correctly on all screen sizes belonging to both mobile and desktop devices. As the share of users accessing the internet via mobile devices increases, responsive web design is becoming more important than ever. With HTML content, various tools exist to implement responsive design, such as flexboxes, CSS media queries, and javascript event handlers. Luckily, like HTML content, it's possible to make WebGL scenes respond to different screen sizes and changes in device orientation (from portrait to horizontal and vice-versa). A WebGL scene is very dynamic and can be resized at any time. Although flexboxes and CSS media queries are not of much use for WebGL scenes, Javascript can be utilized just it can for regular HTML content. Any browser event, like window resize events, can be captured and appropriate adjustments can be made to WebGL scenes and controls.

To demonstrate this in a real-world example, take a look at the following WebGL control. This is a 3D image gallery created by Pyramid Software Solutions. To view the responsiveness of the control, either view on a mobile device, or resize the browser window. When the width of the browser window is greater than the height, the gallery is oriented horizontally. When the height is greater than the width, the gallery is oriented vertically. These adjustments occur dynamically, not just when the page is loaded.

---

WILL WEBGL SCENES RUN SMOOTHLY ON ALL DEVICES?

Typically, bandwidth consumption and quality are not crucial concerns/bottlenecks for WebGL scenes. However, the hardware capability of your visitors is a concern that must be dealt with. Visitors with all types of hardware will be visiting your site – from desktop computers with the latest high end GPUs, to older laptops and mobile devices. The challenge is to take advantage of high-end hardware, but to also effectively handle lower-end hardware by modifying settings and adjusting the scene. An important concept in this discussion is something called “frame rate”. A 3D scene operates by rendering images multiple times per second and displaying them on the user's screen. The number of images rendered and displayed per second is called the frame rate. In order for a smooth experience, the frame rate should remain above 25-30 (50 or greater is ideal). Different hardware will achieve different frame rates, and pre/post load adjustments can be made to ensure the frame rate is acceptable on any hardware.

PRE-LOAD ADJUSTMENTS

Many adjustments can be made before a WebGL scene is loaded so that appropriate content and settings can be used. The most obvious thing to be queried before a scene is loaded, is the device type that the visitor is using to view the web page. If the visitor is using a mobile browser, it may be desirable to disable certain effects or to use lower resolution content. For example, if we detect a mobile browser, we can assume less processing power, and therefore disable certain settings like anti-aliasing and reduce effect quality (maybe use a less precise blurring process for example). These adjustments can ensure that mobile users have a smooth experience. If we attempt to render too many visually-intensive effects, the user's device may not be able to keep up resulting in a low frame rate and a choppy experience.

POST-LOAD ADJUSTMENTS

The limitation with pre-load adjustments is that although we can get a rough indication on how well a user's hardware will handle 3D effects, we can not accurately determine the user's experience from just their device type. For example, it's possible that someone is using an older laptop that has even less graphical capability than a newer mobile phone and pre-load adjustments would not be of much use. To catch these scenarios, post-load adjustments can also be made. Unfortunately, it's not possible to detect the hardware that a visitor is using to view your webpage, but we can examine the frame rate they are experiencing and make adjustments based on that. For example, if a user is experiencing a frame rate lower than 25, we know their hardware is struggling, and settings/effect quality can be reduced to give them a smoother experience. The disadvantage of post-load adjustments to pre-load adjustments is that post-load adjustments require a few seconds to get an accurate representation of the frame rate. This means that the scene quality will be adjusted after the page has loaded. The chances of a user noticing this is low, but it is something to consider.

---

CONCLUSION

WebGL is a powerful system that has the potential to revolutionize web design. Although a variety of web browser games have been developed with the technology, WebGL is quite underutilized in the area of web design. Background scenes, widgets, and controls can be integrated seamlessly with HTML content and can give your visitors a very rich, unique visual experience with new possibilities in interactivity that are not possible with just HTML, CSS, and Javascript. WebGL is now widely supported in all major desktop and mobile browsers and all crucial methodologies of regular HTML web design, such as responsiveness, can be properly supported.

As 2D web design reaches its limitations and becomes stale, the future is moving towards WebGL and 3D design concepts that utilize the power of the GPU, which normally remains mostly untapped while browsing the web. As both desktop and mobile GPUs progress at a rapid rate, the future is looking bright for rich, 3D web design. Being an early adopter of this technology for your company's website is an excellent way to increase the visual appeal of your site, and show that your company is cutting-edge technologically. Both of which can translate to an increase in web traffic and user satisfaction, and ultimately, an increase in company profit and success.