Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions apps/docs/content/api/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ This section documents only the additions that are specific to React Native, the

- [`Canvas`](/api/canvas): the React component that gives you a WebGPU rendering surface.
- [`GPUDeviceProvider`](/api/gpu-device-provider): provides a `GPUDevice` to your component tree.
- [`installWebGPU`](/api/install-webgpu): installs the WebGPU globals on a worklet runtime.
- [`warnIfNotHardwareAccelerated`](/api/warn-if-not-hardware-accelerated): warns when the device falls back to software rendering.
- [Native Extensions](/api/gpu-device-extensions): React Native specific helpers added to `GPUDevice`.
- [`installWebGPU`](/api/install-webgpu): installs the WebGPU globals on a worklet runtime.
- [Native Extensions](/api/gpu-device-extensions): native buffer and frame import, `createImageBitmap`, high bit depth formats, and other additions to the WebGPU globals.
- [Video Player](/api/video-player): decodes a video into frames the GPU samples without a copy.
- [`drawElementImageToTexture`](/api/draw-element-image-to-texture): copies the pixels of a React Native view into a `GPUTexture`.

Also covered in the guides: [`GPUOffscreenCanvas`](/docs/getting-started/offscreen-canvas) for headless rendering, and [`importDevice`](/docs/getting-started/native-api#importing-an-external-device) / [`adoptTexture`](/docs/integrations/react-native-skia#zero-copy-texture-sharing) for sharing devices and textures with other libraries.
39 changes: 6 additions & 33 deletions apps/docs/content/api/warn-if-not-hardware-accelerated.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,15 @@ Checks `adapter.info.isFallbackAdapter` and logs a console warning. Common on An

## Usage

Call once when the adapter becomes available, typically in a `useEffect`:
[`useDevice`](/docs/getting-started/react-api#usedevice) and [`GPUDeviceProvider`](/api/gpu-device-provider) already call it for you. Call it yourself when you request the adapter directly:

```tsx twoslash
import { useEffect } from "react";
import { useDevice, warnIfNotHardwareAccelerated } from "react-native-webgpu";

export function Scene() {
const { adapter, device } = useDevice();

useEffect(() => {
if (adapter) {
warnIfNotHardwareAccelerated(adapter);
}
}, [adapter]);

if (!device) return null;

// configure canvas, build pipelines…
return null;
}
```

With [`GPUDeviceProvider`](/api/gpu-device-provider), read the adapter from [`useMainDevice`](/api/gpu-device-provider#usemaindevice) the same way:

```tsx twoslash
import { useEffect } from "react";
import { useMainDevice, warnIfNotHardwareAccelerated } from "react-native-webgpu";
import { warnIfNotHardwareAccelerated } from "react-native-webgpu";
// ---cut---
function Scene() {
const { adapter } = useMainDevice();

useEffect(() => {
if (adapter) warnIfNotHardwareAccelerated(adapter);
}, [adapter]);

return null;
const adapter = await navigator.gpu.requestAdapter();
if (adapter) {
warnIfNotHardwareAccelerated(adapter);
const device = await adapter.requestDevice();
}
```

Expand Down
4 changes: 4 additions & 0 deletions apps/docs/content/docs/getting-started/offscreen-canvas.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,7 @@ device.queue.submit([encoder.finish()]);
const pixels = await canvas.getImageData(); // CPU readback
```

`getImageData()` copies the canvas texture into a buffer, maps it, and resolves with `{ data, width, height, format }`, where `data` holds 4 bytes per pixel, row by row. Because WebGPU copies rows in multiples of 256 bytes, the canvas `width` must be a multiple of 64.

It is meant for tests, snapshots and one-off exports; to read pixels repeatedly, copy the texture into a reusable `GPUBuffer` of your own with `copyTextureToBuffer`.

2 changes: 1 addition & 1 deletion apps/docs/content/docs/integrations/react-three-fiber.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const Fiber = () => (
| **Presentation** | Same as raw Three.js - R3F never calls `present()` for you |
| **Orbit controls** | Pointer events must attach to a wrapping `View`, not the Canvas - spread gesture handlers on the parent `View` that wraps `FiberCanvas` |
| **Worklets** | Keep `GPUDevice` on the main thread if combining with worklets ([Worklets](/docs/integrations/worklets)) |
| **Model loading** | GLTF needs `resolveAssetSource` polyfill ([Expo setup](/docs/getting-started/expo)) |
| **Model loading** | Resolve bundled models to a URL with `Image.resolveAssetSource` ([Loading assets](/docs/integrations/three-js#loading-assets)) |
| **Effect deps** | `FiberCanvas` runs setup in `useEffect` without deps - remount the component to rebuild the GL context |

## What you learned
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/integrations/three-js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ renderer.dispose();
```

<Callout type="warn" title="Known leak in three r184">
Three's `RenderObjects.dispose()` leaves `dispose` listeners of the disposed renderer on a module-level shared `QuadMesh` geometry, which keeps the old backend alive across remounts. Until the upstream fix lands, the [example app](https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts) clears those listeners after `dispose()`. See [issue #445](https://github.com/wcandillon/react-native-webgpu/issues/445).
A disposed renderer stays in memory across remounts. Until the upstream fix lands, the [example app's `makeWebGPURenderer`](https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts) works around it after `dispose()`. See [issue #445](https://github.com/wcandillon/react-native-webgpu/issues/445).
</Callout>

## Loading assets
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/integrations/typegpu.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,4 @@ The [example app](https://github.com/wcandillon/react-native-webgpu/tree/main/ap

- [GradientTiles](https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/GradientTiles/GradientTiles.tsx) - the render pipeline above, with buttons driving the uniform via React state.
- [ComputeBoids](https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/ComputeBoids/ComputeBoids.tsx) - a flocking simulation combining a compute pipeline with an instanced render pipeline, double-buffered storage buffers, and tweakable physics parameters.
- [MNISTInference](https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/MNISTInference/MNISTInference.tsx) - hand-written digit recognition running a neural network in compute shaders, with [React Native Skia](https://shopify.github.io/react-native-skia/) for the drawing surface.
- [MNISTInference](https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/MNISTInference/MNISTInference.tsx) - hand-written digit recognition running a neural network in compute shaders, with [React Native Skia](https://wcandillon.github.io/react-native-skia/) for the drawing surface.
Loading