React Native WebGPU

installWebGPU

Install navigator.gpu and the WebGPU flag constants on a worklet runtime.

On a worklet runtime, neither navigator.gpu nor the WebGPU flag constants are available by default. Call installWebGPU() once at the top of a worklet to install the needed globals for that runtime: navigator.gpu plus GPUBufferUsage, GPUTextureUsage, GPUShaderStage, GPUColorWrite, and GPUMapMode.

On the main JS thread these are already installed when the native module loads; calling installWebGPU() there is a safe no-op.

Usage

UI thread worklet

import {  } from "react-native-webgpu";
import {  } from "react-native-worklets";

const  = (
  : GPUDevice,
  : ,
  : GPURenderPipeline,
) => {
  "worklet";
  ();

  const  = .();
  const  = .({
    : [{
      : .().(),
      : [0, 0, 0, 1],
      : "clear",
      : "store",
    }],
  });
  .();
  .(3);
  .();

  ..([.()]);
  .();
};

// Create device on the main thread, pass handles to the worklet
()(, , );

Dedicated worklet runtime

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

const  = ({ : "gpu" });

const  = (: GPUDevice) => {
  "worklet";
  ();

  const  = .({
    : 256,
    : . | .,
  });
  // …
};

(, )();

After installWebGPU(), navigator.gpu is available inside the worklet:

import {  } from "react-native-webgpu";
import {  } from "react-native-worklets";

(() => {
  "worklet";
  ();
  const  = ..();
  ..().(() => {
    // …
  });
})();

On react-native-worklets versions before 0.13.0, write globalThis.navigator instead of a bare navigator. Older versions of the Worklets babel plugin capture the main runtime's navigator object by closure instead of reading the one installed on the worklet runtime.

If you create a device on the worklet runtime, beware that spontaneous device events are only delivered for devices created on the main JS runtime:

  • device.lost read on a worklet runtime returns a promise that never settles, unless the device is already lost at that point, in which case it resolves normally.
  • uncapturederror listeners registered on a device created on a worklet runtime never fire.

If you need to observe device loss or uncaptured errors, create the device on the main JS thread, attach the handlers there, and pass the device into the worklet.