How Safari Transitioned WebGL from OpenGL to Metal

This article explores how Apple transitioned the Safari web browser's WebGL rendering backend from the aging OpenGL framework to Apple's modern Metal graphics API. By leveraging the open-source ANGLE translation layer, the WebKit team successfully bridged the gap between WebGL's OpenGL ES foundation and Metal. This architectural shift eliminated legacy driver bottlenecks, enabled WebGL 2.0 support, and improved overall rendering performance and energy efficiency across macOS and iOS devices.

The Deprecation of OpenGL

WebGL is a web standard designed to render 2D and 3D graphics in a browser, and its specification is tightly coupled with OpenGL ES (Embedded Systems). For years, Safari executed WebGL content by passing commands almost directly to the operating system’s native OpenGL drivers.

However, in 2018, Apple deprecated OpenGL across macOS and iOS in favor of Metal, a proprietary, low-overhead graphics framework designed specifically for Apple hardware. Continuing to run WebGL on top of deprecated OpenGL drivers created a major bottleneck. The rest of Safari's rendering engine (WebKit) and the operating system's compositor had already moved to Metal. Running WebGL required the system to constantly switch between OpenGL and Metal contexts, draining battery life and reducing frame rates.

Adopting the ANGLE Library

Because the WebGL specification is fundamentally based on OpenGL ES, Apple could not simply swap the API out for Metal without breaking compatibility with existing web applications. They needed a translation layer.

Instead of building a translator from scratch, the WebKit team adopted ANGLE (Almost Native Graphics Layer Engine). Originally developed by Google for Chrome, ANGLE is an open-source engine designed to translate WebGL's OpenGL ES calls into the native hardware APIs of the host system, such as DirectX on Windows or Vulkan on Android.

Building the Metal Backend

Apple collaborated with Google and the open-source community to build a dedicated Metal backend for ANGLE. This new architecture sits directly between Safari's JavaScript engine and the device's GPU. When a user visits a website utilizing WebGL, the transition to Metal happens seamlessly through three primary steps handled by ANGLE:

  • Command Validation: Web browsers cannot trust code coming from the web. ANGLE intercepts the incoming WebGL API calls and validates them to ensure they are secure and conform strictly to the WebGL specification, preventing out-of-bounds memory access on the GPU.
  • Shader Translation: WebGL uses the OpenGL Shading Language (GLSL) to tell the GPU how to draw pixels and vertices. Metal cannot read GLSL. ANGLE's shader compiler parses the GLSL code, validates it, and translates it directly into Metal Shading Language (MSL) on the fly.
  • State and API Mapping: OpenGL operates as a massive state machine, whereas Metal uses pre-compiled pipeline state objects and explicit command buffers. ANGLE tracks the simulated OpenGL state requested by the web page and translates those changes into efficient Metal render pipeline states and draw calls.

Unlocking WebGL 2.0

One of the biggest casualties of Apple's aging OpenGL drivers was Safari's inability to support WebGL 2.0, which is based on OpenGL ES 3.0. Implementing WebGL 2.0 natively on Apple's older OpenGL drivers would have required extensive driver rewrites for a deprecated technology.

By routing WebGL through ANGLE to Metal, Apple bypassed the limitations of their old OpenGL drivers entirely. Metal easily supported all the modern hardware features required by the OpenGL ES 3.0 specification. Once the ANGLE Metal backend was complete, Apple was finally able to ship full support for WebGL 2.0 in Safari 15 for both macOS and iOS.

Unified Compositing and Performance

The final piece of the transition involved how the rendered 3D graphics are actually displayed on the screen. Previously, Safari had to render WebGL content into an OpenGL texture, copy that data, and hand it over to Core Animation (running on Metal) to composite it with the rest of the HTML page.

With the Metal backend, ANGLE renders WebGL content directly into Metal textures (IOSurfaces). Safari's compositor can now read these textures natively without expensive memory copies or cross-API synchronization. This unified rendering pipeline significantly reduced CPU and GPU overhead, allowing complex 3D web applications to run at higher frame rates while consuming much less power.