Worklets
Run WebGPU rendering off the JS thread on worklet runtimes.
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-workletsFollow 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 WebGPU flag globals (GPUBufferUsage, GPUTextureUsage, etc.). Call installWebGPU() once at the top of a worklet:
import { , } from "react-native-webgpu";
import { } from "react-native-worklets";
const = (: GPUDevice, : ) => {
"worklet";
();
const = .({
,
: . | .,
});
const = .();
// … encode passes …
..([.()]);
.();
};
// Create device on main thread, then run render on the UI thread:
const = await .();
const = .!.("webgpu")!;
()(, );