GPUDeviceProvider

GPUDeviceProvider requests a GPUDevice once and shares it through React context, rendering children only when device is non-null. Wrap your scene root so every child can read the shared device with useMainDevice instead of requesting its own.

Props

interface DeviceProviderProps {
  ?: ;
  ?: GPURequestAdapterOptions;
  ?: GPUDeviceDescriptor;
}

Usage

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

function () {
  const  = ();
  const {  } = ();

  (() => {
    if (!) return;

    const  = .!.("webgpu")!;
    const  = . as HTMLCanvasElement;
    const  = ..();

    . = . * .();
    . = . * .();
    .({ , , : "premultiplied" });

    const  = "https://example.com/video.mp4";
    const  = (, { : "nv12" });
    .();

    // Render loop: copyLatestFrame → importExternalTexture → draw → present
    // See [Video Player](/api/video-player)
  }, []);

  return < ={} ={{ : 1 }} />;
}

export function () {
  return (
    <>
      < />
    </>
  );
}

Request features through deviceDescriptor (for instance { requiredFeatures: ["shader-f16"] }): you cannot add features to an existing device later. Native frame import needs none, it is enabled by default.

While the device is loading, the provider returns null (nothing rendered). If you need a loading UI, wrap the provider:

function () {
  return (
    <>
      <>
        < />
      </>
      {/* Optional: show a spinner until Scene mounts */}
    </>
  );
}

useMainDevice

useMainDevice is the hook that consumes this provider's context. It returns the same { adapter, device } the provider created, so any descendant can share that one device instead of requesting its own. If you are not using a provider, useDevice requests a device directly instead.

function () {
  const { ,  } = ();
  // Read adapter info / feature list, or pass `device` to Three.js, overlays, etc.
  return null;
}

Must be inside the provider

useMainDevice throws No DeviceContext found. when called outside a GPUDeviceProvider. Because the provider renders null until the device is ready, any child that calls it only mounts once device is non-null.

GPUDeviceProvider

Props

Usage

useMainDevice

See also

On this page