Worklets

By default, WebGPU rendering runs on the JavaScript thread alongside React. Using React Native Worklets, you can run WebGPU rendering on the UI thread or on a dedicated worklet runtime. There is even an experimental Bundle Mode that lets you run complex Three.js scenes on a dedicated thread. You can see an example of Bundle Mode working with Three.js here.

Requirements

npm i react-native-worklets

Follow the Worklets installation guide for the babel plugin and native setup. WebGPU objects are automatically registered for Worklets serialization when the module loads - you can pass GPUDevice and GPUCanvasContext directly to worklets.

installWebGPU

Worklet runtimes start without the WebGPU globals (navigator.gpu, GPUBufferUsage, GPUTextureUsage, etc.). Call installWebGPU() once at the top of a worklet to install all of them for that runtime:

import { Canvas, installWebGPU } from "react-native-webgpu";
import { runOnUI } from "react-native-worklets";

const renderFrame = (device: GPUDevice, context: RNCanvasContext) => {
  "worklet";
  installWebGPU();

  const buffer = device.createBuffer({
    size,
    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
  });

  const commandEncoder = device.createCommandEncoder();
  // … encode passes …
  device.queue.submit([commandEncoder.finish()]);
  context.present();
};

// Create device on main thread, then run render on the UI thread:
const device = await adapter.requestDevice();
const context = canvasRef.current!.getContext("webgpu")!;
runOnUI(renderFrame)(device, context);