Native Extensions

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 device = await adapter.requestDevice({
  requiredFeatures: ["rnwebgpu/native-texture" as GPUFeatureName],
});

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

const texture = memory.createTexture();

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

texture.destroy();
frame.release();

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 device = await adapter.requestDevice({
  dawnToggles: {
    enabledToggles: ["allow_unsafe_apis"],
    disabledToggles: ["use_dxc"],
  },
});

GPUExternalTexture extensions

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 bytes = await fetch(url).then((r) => r.arrayBuffer());
const bitmap = await createImageBitmap(bytes);

device.queue.copyExternalImageToTexture(
  { source: bitmap },
  { texture },
  { width: bitmap.width, height: bitmap.height },
);
bitmap.close();

getPreferredHighBitDepthCanvasFormat

Returns the canvas texture format most likely to reach the display with more than 8 bits per channel on the current platform: "rgba16float" on iOS, "rgb10a2unorm" on Android. Unlike getPreferredCanvasFormat(), this helper is not part of the WebGPU standard, so it is exported as a regular function instead of a navigator.gpu method.

const format = getPreferredHighBitDepthCanvasFormat();
context.configure({ device, format, alphaMode: "opaque" });

The values you write stay sRGB-encoded exactly like on an 8-bit canvas: this is about precision, not HDR (no extended range). See High bit depth for the platform details and banding comparison.