diff --git a/apps/docs/content/api/index.mdx b/apps/docs/content/api/index.mdx index c3d0b583a..32aa1770b 100644 --- a/apps/docs/content/api/index.mdx +++ b/apps/docs/content/api/index.mdx @@ -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. diff --git a/apps/docs/content/api/warn-if-not-hardware-accelerated.mdx b/apps/docs/content/api/warn-if-not-hardware-accelerated.mdx index 8cd455ff6..d997998b6 100644 --- a/apps/docs/content/api/warn-if-not-hardware-accelerated.mdx +++ b/apps/docs/content/api/warn-if-not-hardware-accelerated.mdx @@ -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(); } ``` diff --git a/apps/docs/content/docs/getting-started/offscreen-canvas.mdx b/apps/docs/content/docs/getting-started/offscreen-canvas.mdx index 29be72f10..57442d513 100644 --- a/apps/docs/content/docs/getting-started/offscreen-canvas.mdx +++ b/apps/docs/content/docs/getting-started/offscreen-canvas.mdx @@ -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`. + diff --git a/apps/docs/content/docs/integrations/react-three-fiber.mdx b/apps/docs/content/docs/integrations/react-three-fiber.mdx index 6064dfce7..bc0a772d8 100644 --- a/apps/docs/content/docs/integrations/react-three-fiber.mdx +++ b/apps/docs/content/docs/integrations/react-three-fiber.mdx @@ -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 diff --git a/apps/docs/content/docs/integrations/three-js.mdx b/apps/docs/content/docs/integrations/three-js.mdx index 958f2b1c0..6a8fda9be 100644 --- a/apps/docs/content/docs/integrations/three-js.mdx +++ b/apps/docs/content/docs/integrations/three-js.mdx @@ -174,7 +174,7 @@ renderer.dispose(); ``` -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). ## Loading assets diff --git a/apps/docs/content/docs/integrations/typegpu.mdx b/apps/docs/content/docs/integrations/typegpu.mdx index 276385218..313fa0ebd 100644 --- a/apps/docs/content/docs/integrations/typegpu.mdx +++ b/apps/docs/content/docs/integrations/typegpu.mdx @@ -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.