React Native WebGPU

Native Extensions

Native interop extensions to GPUDevice and the WebGPU globals.

React Native WebGPU adds a handful of native extensions on top of the WebGPU spec.

importSharedTextureMemory

Imports a native buffer (IOSurface / AHardwareBuffer) for zero-copy sampling. Native texture import requires "rnwebgpu/native-texture" in requiredFeatures.

const  = await .({
  : ["rnwebgpu/native-texture" as ],
});

// frame from createVideoPlayer(..., "bgra8") or Vision Camera
const  = .({
  : .,
  : "camera-frame",
});

const  = .();

.(, /* initialized */ true);
// sample texture in render pass…
.();

.();
.();

Use beginAccess(texture, true) when the producer has already written pixels (typical for video/camera).

importSharedFence

Import native GPU sync fences for producer/consumer handoff:

// Producer side: export a fence after GPU work
const exported = sharedFence.export();

// Consumer side: import on another device or queue
const imported = device.importSharedFence({
  handle: exported.handle,
  label: "frame-ready",
});

// Wait for producer before sampling imported texture
imported.wait(0);
// … render using imported texture …
imported.signal(0);
imported.destroy();

See packages/webgpu/src/__tests__/SharedFence.spec.ts for a full producer/consumer test.

dawnToggles

Non-standard Dawn device toggles at creation:

const  = await .({
  : {
    : ["allow_unsafe_apis"],
    : ["use_dxc"],
  },
});

Prop

Type

GPUExternalTexture extensions

Field / MethodDescription
rotation0, 90, 180, or 270 degrees (camera orientation)
mirroredHorizontal flip for front camera
destroy()Release native surface access after the queue.submit() that sampled it

Usage with importExternalTexture (NV12 camera/video):

const externalTexture = device.importExternalTexture({
  source: nativeVideoFrame,
});

// Read orientation metadata in bind group / shader setup
console.log(externalTexture.rotation, externalTexture.mirrored);

// After submit that sampled the texture:
externalTexture.destroy();
nativeVideoFrame.release();

createImageBitmap

createImageBitmap mirrors its Web counterpart and also accepts a Uint8Array or ArrayBuffer as input.

const  = await ().(() => .());
const  = await ();

..(
  { :  },
  {  },
  { : ., : . },
);
.();