Last month, we presented the new kinds of applications that can be built on top of React Native WebGPU, highlighted how WebGPU has inspired a cascade of improvements to React Native Skia, and shared a sneak peek of Skia Graphite in React Native.
React Native Skia has established itself as the go-to solution for 2D graphics on React Native. And we are seeing many users pushing the boundaries of what can be done with the library.
Why WebGPU Changes Everything
Our quest for continuous improvement led us to Skia Graphite, a new Skia backend for modern GPU APIs that supports Dawn, Google's open-source WebGPU implementation. The advantages of this approach are tremendous:
-
Unified Backend Architecture
We can finally escape our backend complexity. Currently, we maintain two completely separate implementations: OpenGL for Android and Metal for iOS. Every time we want to build a new backend-related feature, we need to build it twice, and this is when things can quickly get messy. -
Web Ecosystem Symmetry
We love the Web. In React Native, following symmetry with the Web in our technical and architectural decisions has always been rewarding. By bringing Dawn and Skia to React Native, we're providing a graphical stack symmetrical to Google Chrome. This means we can leverage giants of the web ecosystem like Three.js without compromise. -
General-Purpose GPU Computing
Beyond graphics, WebGPU brings general-purpose GPU computations to React Native. This is particularly useful for running machine learning models and libraries like TensorFlow.js.
Bringing Three.js and React Three Fiber to Native
Three.js has revolutionized 3D graphics for the web, enabling millions of developers to build stunning 3D experiences. And the Three.js community is very active building best-in-class support for WebGPU into the library.
These Three.js examples run completely out of the box on React Native WebGPU. Behind the scenes, they use Metal on iOS and Vulkan on Android. They also support Reanimated. Additionally, a helper library enables you to run Three.js scenes on dedicated Reanimated threads.
The Shopify Black Friday Globe: A Showcase of Possibilities
Another key part of the Three.js ecosystem is React Three Fiber, React’s reconciler for Three.js. An impressive example of a React Three Fiber app is the Black Friday Globe Mothership, presented by Daniel Beauchamp and the team at Shopify.
Each arc represents a real Black Friday order. Users can zoom in to view individual orders, change arc and particle colors, interact with Shoppy the bobblehead (complete with physics), and even switch between different data sources to see how Shopify powered commerce during the biggest shopping day of the year.
Last year's globe was built with React Three Fiber using WebGL2 under the hood, which meant all shaders were written in GLSL (OpenGL Shading Language). To support WebGPU, they would traditionally have needed to rewrite their shaders in WGSL (WebGPU Shading Language) and maintain two separate codebases—a significant pain point.
This is where TSL (Three.js Shading Language) comes into play. TSL allows developers to write shaders once and automatically target both WebGPU and traditional WebGL backends. It's a unified shading language that abstracts away the differences between GLSL and WGSL, meaning the same shader code can run on both rendering backends without modification.
What makes this particularly exciting for React Native is that with our WebGPU support, the same TSL shaders that power the web version can run natively in React Native apps with no extra code needed. At Shopify, where all mobile apps are written in React Native, our mobile team can write once and effortlessly run their globe directly within their mobile applications. The team has already created prototypes running some of last year's globe shaders within WebGPU on React Native—the result is identical to the web version, but now running natively on mobile with modern GPU APIs like Vulkan and Metal.
For those interested in learning more about how the Shopify Black Friday globe was built, there's an incredible interactive tutorial by Diego Macario Bello that we absolutely recommend checking out.
ComputeToys: Taking Shader Art to the Next Level
React Native Skia users have long loved ShaderToy, where digital artists create incredible demo scenes using WebGL fragment shaders. Most of these shaders can run on React Native Skia with minimal changes, bringing beautiful procedural art to mobile applications.
ComputeToys is a similar tool but directed at the WebGPU community. Instead of fragment shaders, it uses compute shaders, which allow artists to write pixel values to different buffers. This means that instead of each thread only influencing the color of its assigned pixel, threads can write values into arrays that influence colors across the entire frame.
Machine Learning and TensorFlow.js
Machine learning workloads are perfect candidates for GPU acceleration, and WebGPU makes this accessible to React Native developers. TensorFlow.js runs completely out of the box in React Native using the React Native WebGPU backend, bringing powerful machine learning capabilities to mobile applications.
These demos don't even use a canvas but rather compute shaders for general-purpose GPU computation. This opens up possibilities for on-device inference, real-time image processing, and other ML tasks.
Improvements to React Native Skia
While working on WebGPU, we had a greenfield project where we could test new architectural ideas. Once validated, we shipped these improvements back to React Native Skia.
Enhanced Performance Through Better Architecture
We've made significant improvements to our reconciler and scene graph model. Previously, we used a fully mutable scene graph called SkiaDOM, written in C++ for speed. However, it had a fatal design flaw: we treated updates from both the JavaScript thread and UI thread equally, which created performance bottlenecks at animation time.
We moved from the paper reconciler (fully mutable) to the fabric reconciler (immutable). This change eliminated concurrency issues at animation time and allowed us to implement what's essentially an immutable display list with support for animation values.
These architectural improvements delivered dramatic performance gains:
- 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
Expanded Platform Support
React Native Skia now runs on three new platforms: macOS, tvOS, and Node.js for headless rendering. This expansion has enabled exciting use cases:
- macOS: Full desktop support for React Native applications
- tvOS: Bringing Skia's power to living room experiences
- Node.js: Server-side rendering and headless graphics generation
Companies like swsh are using the headless Node.js support to dynamically generate Open Graph previews using the same React Native Skia code they use in their mobile apps. This "write once, render everywhere" approach extends even to backend services.
A Sneak Peek of Skia Graphite
Skia Graphite is a new Skia backend for modern GPU APIs that supports WebGPU. While it is not ready for prime time yet, it can already be tested via an experimental flag in React Native Skia.
Automatic Threading
Thanks to WebGPU, React Native Skia canvases can run on a dedicated thread completely out of the box.
Seamless 2D/3D Composition
With Skia Graphite, we can bring Skia's best-in-class 2D primitives onto 3D scenes at zero cost. In our demos, we show 3D scenes running on WebGPU that use WebGPU textures for path animations and text layout, but these elements are rendered using Skia. We can also go the other way: Skia drawings can use WebGPU textures directly. In this demo, you can see a Skia drawing using a compute shader from ComputeToys for shading. This bidirectional composability between 2D and 3D primitives opens up entirely new creative possibilities.
The Road Ahead
Announcements like these are always important opportunities for us to issue a heartfelt thank you to the React Native community. All of this work wouldn't be possible without your incredible support, contributions, diligent bug reports, and insightful discussions. Your engagement and feedback have been invaluable in shaping these libraries into what they are today.
Some of the work we presented is still quite experimental but we are very excited by the leverage we are getting with WebGPU and Skia running on top of it.
Happy hacking.