What is WebGL?

WebGL (Web Graphics Library) is a specification that browsers implement, allowing you to interact with your graphics card from the browser without using plugins.

It is important to note that WebGL is neither software nor hardware. Instead, it is a standard that browsers like Chrome, Firefox, and Safari implement. When you use WebGL in JavaScript, the browser interprets it and communicates with the graphics card on your behalf.

WebGL and OpenGL ES

The WebGL specification is based on OpenGL ES (OpenGL for Embedded Systems), which is a version of OpenGL made for devices with limited resources, such as mobile phones, tablets, and other embedded systems. Specifically:

• WebGL 1.0 is based on OpenGL ES 2.0.
• WebGL 2.0 is based on OpenGL ES 3.0.

Like WebGL, OpenGL is also a specification.

WebGL and OpenGL, the bigger picture

Since WebGL is tied to OpenGL, let’s explore OpenGL and how it fits into the bigger picture. OpenGL (Open Graphics Library) is another specification for interacting with graphics cards, used in desktop and mobile applications. It’s been around for decades, and it is used for the creation of games, simulations and more. There are other graphics APIs similar to OpenGL, including:

• Direct3D: Part of Microsoft’s DirectX, commonly used on Windows.
• Vulkan: A modern, high-performance alternative to OpenGL, supported across multiple platforms.
• Metal: Apple’s graphics API for macOS and iOS devices.

If you were building a 3D graphics application in a desktop environment, you might choose OpenGL, Direct3D, Vulkan, or Metal, depending on the platform and your needs. WebGL, on the other hand, is designed specifically for the web, running inside a browser.

Who Implements These Specifications?

Here’s where WebGL and OpenGL differ in how they work under the hood:

• WebGL: The browser implements the WebGL specification. When you write WebGL code, the browser (e.g., Chrome or Firefox) translates your commands into something the graphics card can understand. To do this, the browser uses the underlying graphics API available on your system, often OpenGL on Linux or macOS, Direct3D on Windows, or Metal on macOS/iOS, depending on the platform.
• OpenGL: In a desktop environment, the graphics card manufacturer (like AMD, NVIDIA, or Intel) implements the OpenGL specification in their drivers. Your OpenGL code talks to these drivers, which then control the GPU.

      
flowchart TD
    subgraph A[Browser]
        A1[WebGL]
    end

    subgraph B[Operating System]
        B1[Graphics Drivers]
    end

    C[Graphics Hardware]

    A -->|OpenGL / Vulkan / Metal / DirectX| B
    B --> C
      
    

So, with WebGL, the browser acts as a middleman: it takes your WebGL commands, converts them into the appropriate calls for the system’s graphics API (like OpenGL or Direct3D), and the drivers handle the rest. In contrast, a desktop OpenGL application skips the browser and talks straight to the drivers.

Putting It All Together

Here’s a concise summary of how WebGL works:

• You use WebGL in JavaScript as part of a web application.
• The browser implements the WebGL specification and interprets your code.
• The browser then uses the system’s graphics API (e.g., OpenGL, Direct3D, or Metal) to communicate with the graphics card.
• The graphics drivers provided by the manufacturer (AMD, NVIDIA, etc.) execute the commands on the GPU.