What is WebGL?

A journalist from CNN once stated that Steve Jobs hated Flash. Hated it.

While users today should never encounter the “please enable Flash” pop up, or even really think about what tech is powering their web experiences, the advancements made with the advent of HTML5 should not be taken for granted. Among those advancements is WebGL, which has become a key component in the ability for rich content to be displayed across browsers and devices. But what does this piece of JavaScript do for users, and how is it impacting web development today?

What Is WebGL?

Short for Web Graphics Library, WebGL is a JavaScript API for rendering 2D and 3D interactive graphics in browsers without a plugin (read: no Flash here Mr. Jobs). Based on OpenGL and accepted as a standard, the use of WebGL means that rich content, such as graphics, video, and even elements such as 3D and augmented reality, can be displayed in a browser without the need for additional triggers or tools. With the creation of HTML5, which enabled more and improved functionalities across browsers, WebGL was designed to further elevate and in some cases eliminate graphic limitations for content by increasing the speed at which a device could render graphics, while also improving performance through memory management.

WebGL and 3D

Consumer tastes and expectations have greatly evolved over the last several years, particularly when it comes to online experiences. With those shifting expectations has come increased interest in more immersive online experiences, both from the buyer and the brand perspectives. 3D and augmented reality (AR) are quickly becoming popular and valued tools amongst marketers, and to meet the expectations of consumers online there has been an increased focus on ensuring that product representations are accurate. 92% of Gen Z shoppers want to use AR for shopping, and 40% of buyers have indicated that they would pay more for products that they can experience in 3D and AR; but if the experience or the product do not meet expectations, then the interest and success will be short-lived.

WebGL allows immersive experiences such as 3D visualizers, product configurators, and augmented reality to be deployed across a variety of platforms The beauty category has generated several early adopters of 3D and AR technology, with virtual try-ons emerging on channels such as Snapchat and Pinterest, as well as within brands’ owned properties. Fidelity is of particular importance for virtual try-ons on the beauty industry as product selection is largely determined by how a color compliments a buyer’s appearance. To deliver higher fidelity, browsers must not only be able to accurately render the content, but do so at a speed that meets the demands of customers.

Examples of WebGL

Beauty retailer, Ulta, utilizes virtual try-on in their GLAMlab to allow shoppers to view a variety of products. Without WebGL, users would have to access this feature through an additional app or with a browser plug-in that enabled the content. Instead, the experience can be accessed through the user’s chosen browser, and loads quickly for a seamless experience.