diff --git a/apps/docs/content/api/index.mdx b/apps/docs/content/api/index.mdx index 92e0274f3..c3d0b583a 100644 --- a/apps/docs/content/api/index.mdx +++ b/apps/docs/content/api/index.mdx @@ -3,17 +3,33 @@ title: Overview description: How this API Reference relates to the standard WebGPU API. --- +## WebGPU API + React Native WebGPU implements the standard [WebGPU API](https://www.w3.org/TR/webgpu/). Types such as `GPUDevice`, `GPUBuffer`, `GPUTexture`, and `GPURenderPipeline` behave exactly as they do on the web, so any code or tutorial written against the WebGPU specification works here unchanged. -For that reason, this reference does **not** duplicate the standard WebGPU API. -Re-documenting it would only drift out of date with the specification. To learn the core API, use the resources below: - [WebGPU Fundamentals](https://webgpufundamentals.org/): the best place to learn WebGPU from the ground up. - [MDN WebGPU reference](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API): per-type and per-method documentation. - [WebGPU specification](https://www.w3.org/TR/webgpu/): the authoritative source. +## Core WebGPU concepts + +Understanding the foundational WebGPU objects and how they interact is essential to WebGPU development. +Each concept below links to its reference on MDN. + +| Concept | Description | +| ------- | ----------- | +| [Instance](https://developer.mozilla.org/en-US/docs/Web/API/GPU) | The entry point to WebGPU, exposed as `navigator.gpu`, granting access to adapters | +| [Adapter](https://developer.mozilla.org/en-US/docs/Web/API/GPUAdapter) | Represents a specific GPU on the device | +| [Device](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice) | Your logical connection to the GPU where resources are created | +| [Queue](https://developer.mozilla.org/en-US/docs/Web/API/GPUQueue) | The mechanism used to submit commands to the GPU | +| [Shader Module](https://developer.mozilla.org/en-US/docs/Web/API/GPUShaderModule) | Your GPU code, written in the WebGPU Shading Language (WGSL) | +| [Pipelines](https://developer.mozilla.org/en-US/docs/Web/API/GPURenderPipeline) | Objects describing the entire GPU state (shaders, blending) for a task | +| [Bind Groups](https://developer.mozilla.org/en-US/docs/Web/API/GPUBindGroup) | Ties data buffers (ex: textures) to shaders | +| [Command Encoder](https://developer.mozilla.org/en-US/docs/Web/API/GPUCommandEncoder) | An object used to build a sequence of GPU commands into a command buffer | + ## What this reference covers This section documents only the additions that are specific to React Native, the surface you will not find in the WebGPU specification: diff --git a/apps/docs/content/docs/getting-started/installation.mdx b/apps/docs/content/docs/getting-started/installation.mdx index 7e34ffcf4..7c358a94f 100644 --- a/apps/docs/content/docs/getting-started/installation.mdx +++ b/apps/docs/content/docs/getting-started/installation.mdx @@ -5,6 +5,12 @@ description: Your first React Native WebGPU App React Native WebGPU brings the [WebGPU API](https://www.w3.org/TR/webgpu/) to iOS, Android, macOS, and visionOS using [Dawn](https://dawn.googlesource.com/dawn). +## Install the package + +```npm +npm i react-native-webgpu +``` + ## Requirements | Package | Version | Required | @@ -14,12 +20,6 @@ React Native WebGPU brings the [WebGPU API](https://www.w3.org/TR/webgpu/) to iO Please note that this module does not work on the legacy architecture. -## Install the package - -```npm -npm i react-native-webgpu -``` - ## Setup Once installed, the global `navigator.gpu` API is available - the same entry point as in Chrome or Safari: diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts index 9edff1c7c..c4b7818fb 100644 --- a/apps/docs/next-env.d.ts +++ b/apps/docs/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.