Sun Jun 10 2018 15:17:54 GMT-0400 (EDT)

A Beginners Guide to WebGL

WebGL is something of a mystery to most developers these days—the learning curve is high, the resources are scarce, and its importance to the web is unapparent to many.

My goal for this guide is to teach you how to harness the power of WebGL in plain-speak. Too many articles use complex technical jargon with little explanation behind important concepts.

So where do we begin? Let's start off by defining what WebGL is and how it came about.

What is WebGL?

By standard definitions, "WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser." Fair enough, but I know for a fact, if I read this back when I was still new to web dev, I'd have no idea what the fuck this means. Let me break it down into simpler terms.

You can think of WebGL as a set of functions that allow us to draw points, lines, and shapes onto a web browser (2D or 3D)

Want a line on the screen? We can use WebGL functions to draw it. Want a square or a 3D object? We can use WebGL functions to draw those as well.

With shapes being drawable through other methods such as HTML and CSS though, you may be wondering, what's the use of drawing these shapes and objects with WebGL?

The answer: WebGL allows us to draw complex, lag free visuals by harnessing the power of our computer's GPU.

Lag free particles in the browser. Edan Kwan - Particle Love (particle-love.com)

GPUs Explained

A GPU (graphics processing unit) is a physical piece of hardware within our computer made specifically for computing thousands of similar tasks at the same time. An example that illustrates this concept extremely well comes from Patricio Gonzales' Book of Shaders.

Scroll to the section where there is an image of a singular pipe, then scroll to the section where there's an image of many pipes laid out in a field-like structure. The singular pipe is Group A, while the multiple pipes are Group B. (Currently asking author for permission to use images).

Think of each of these pipes as something that can perform a task. Since drawing a complex shape will require a lot of tasks, which group of pipes is going to draw the shape quicker, Group A or Group B?

The answer is Group B since it can perform more tasks at once compared to Group A. This exhibits the concept of why we'd want to utilize our computer's GPU: it can compute a lot of tasks at the same time, providing for better performance and less lag when drawing shapes onto a web browser.

In case you're wondering. Yes. There is something wrong with me.

This all seems extra, what are some practical uses of WebGL?

WebGL is used all around the web today, and although it may seem "extra" to some, the ability to create highly interactive 2D and 3D environments is extremely useful in today's day and age. With WebGL, you can create the following:

1.Supremely High-Quality Marketing Campaigns

These are highly interactive websites used to generate brand awareness, attract customers, and create promoters out of visitors.  Not only does the brand get a nice return on investment, but the agency that developed the project typically gets a hefty payday as well (based on previous agency experience, I estimate these sites go for anywhere from 30k - 100k).

Pottermore - Discover Your Patronus
OH BOY OH BOY, CAN'T WAIT TO FIND OUT WHAT MY PATRONUS IS! "Your results are in... Your Patronus is... A Hedgehog!" ... ... *Restarts experience*
Converse - Diamonds

2.Interactive Music Videos / Visuals

These are music videos that you can actually interact with—turn the camera, grow grass on building walls, fly a flamingo, you name it—adding a source of input allows for user interaction which you can use to your creative advantage.

Google / ROME - Three Dreams of Black
Emmit Fenn - Prologue EP

3.Interactive UI / UX that Draws Interest

What's going to draw more interest: A button with no hover effect or a button that lights up when moused over. I think we can all agree that the one that lights up will draw more attention.

With WebGL, your ability to grab the eyes of the user and impress are increased tenfold—just see some of the WebGL infused user interfaces below and tell me you're not impressed.

Julie Bonnemoy - Portfolio Site
Prime example of WebGL being used on a 2D object, in this case, an image.
Active Theory - Portfolio Site

All in all, if you want your projects to stand out and generate increased value for your brand or company, there's really no reason to not learn WebGL. So without further adieu, let's hop right into lesson one and learn how we can start creating some of the magnificent WebGL pieces as seen above.

This series is currently a work in progress, check back often or follow @chriscourses on Twitter, Facebook, or Instagram for updates.

Support the Cause

All Chris Courses tutorials are completely free—help support the production of more free blog posts and tutorials via PayPal or Patreon.