WebGPU Brings a Unified Graphics Foundation to React Native

Shopify has been exploring what WebGPU means for React Native graphics, and the results reach beyond simple rendering. By adopting Skia Graphite — a new Skia backend targeting modern GPU APIs via Dawn, Google's open-source WebGPU implementation — the team is consolidating what were previously two separate graphics stacks into one.

Today, React Native Skia maintains distinct OpenGL implementations for Android and Metal for iOS. Every backend feature must be built twice. WebGPU's unified architecture eliminates that duplication. There are two other significant advantages: symmetry with the web platform and general-purpose GPU computing.

Because Dawn and Skia mirror the graphics stack used in Google Chrome, React Native can leverage the same web ecosystem tools — including Three.js — without compromise. And WebGPU isn't just for drawing; it enables general-purpose GPU compute on mobile, making libraries like TensorFlow.js viable directly in React Native.

Three.js and React Three Fiber Run Natively

Three.js examples run out of the box on React Native WebGPU, using Metal on iOS and Vulkan on Android underneath. These scenes support Reanimated, and a helper library from Software Mansion (react-native-webgpu-worklets) allows Three.js scenes to execute on dedicated Reanimated threads.

Shopify's Black Friday Globe is a notable showcase. The interactive globe visualizes Black Friday orders as arcs; users can zoom in on individual orders, change colors, interact with a physics-enabled bobblehead, and switch data sources. Last year's version used React Three Fiber over WebGL2 with shaders written in GLSL. Supporting WebGPU traditionally would have meant rewriting shaders in WGSL and maintaining two codebases.

TSL (Three.js Shading Language) removes that friction. It lets developers write shaders once and target both WebGPU and WebGL backends automatically. Because React Native now supports WebGPU, the same TSL shaders powering the web version run natively in React Native apps with no additional code. Shopify's mobile team, which builds all apps in React Native, has already prototyped running last year's globe shaders on mobile with Vulkan and Metal — with results identical to the web version.

Compute Shaders Open New Creative and ML Possibilities

React Native Skia users have long been able to run ShaderToy-style fragment shaders with minimal changes. ComputeToys takes that concept further for WebGPU: instead of fragment shaders, it uses compute shaders. Threads can write pixel values into buffers that affect the entire frame, not just their own pixel, enabling more flexible shader art.

Machine learning workloads also benefit. TensorFlow.js runs completely out of the box using the React Native WebGPU backend. These demonstrations use compute shaders for general-purpose GPU computation rather than canvas rendering, opening the door to on-device inference and real-time image processing.

Architecture Changes Speed Up React Native Skia

The WebGPU work functioned as a greenfield project where new architectural ideas could be tested before shipping them back to React Native Skia. The key change was to the reconciler and scene graph model.

The previous fully mutable scene graph, SkiaDOM, treated updates equally from both the JavaScript thread and the UI thread, causing bottlenecks during animation. Moving from the paper reconciler (mutable) to the fabric reconciler (immutable) eliminated concurrency issues and enabled what is effectively an immutable display list with animation value support.

The measurable results:

  • Animation time performance: up to 50% faster on iOS, nearly 200% faster on Android
  • Time to first animation frame: nearly 200% improvement on both platforms
  • Codebase efficiency: 13% reduction in code while adding functionality
  • Stability: fixed 98% of reported Android crashes

React Native Skia has also expanded to three new platforms: macOS, tvOS, and Node.js for headless rendering. Desktop and living room experiences are now covered, and Node.js support enables server-side rendering. Companies like swsh use the headless option to generate Open Graph previews with the same React Native Skia code used in their mobile apps.

What Skia Graphite Adds Next

Skia Graphite is not production-ready, but it is testable via an experimental flag in React Native Skia. Two capabilities stand out.

First, WebGPU allows React Native Skia canvases to run on a dedicated thread automatically. No extra work is required for threading.

Second, Graphite enables seamless 2D/3D composition. Skia's 2D primitives can be placed on 3D scenes at zero cost — 3D scenes running on WebGPU can use WebGPU textures for path animations and text layout while those elements are rendered by Skia. The reverse also works: Skia drawings can use WebGPU textures directly, such as shading a Skia drawing with a ComputeToys compute shader.

Much of this work remains experimental, but the direction is clear. WebGPU collapses backend complexity, matches the web platform's graphics stack, and enables the kind of GPU compute that mobile machine learning and advanced shader art require.