Threenix WebGPU Canvas

Create a WebGPU React Three Fiber canvas from assets/WebGPUCanvas.tsx in this Skill.

Requirements

This reference requires React Three Fiber v10 alpha and its WebGPU entry point:

npm install @react-three/fiber@alpha three
npm install --save-dev @types/three

It also requires compatible react and react-dom runtime dependencies.

Workflow

1. Read the target repository's local instructions and inspect the requested route, its layout, existing canvas components, and dependencies before editing.
2. If the target already has an @react-three/fiber/webgpu Canvas that meets the request, reuse it. Do not add a second canvas. If it has only a WebGL Canvas, stop and explain that migration is out of scope.
3. Copy assets/WebGPUCanvas.tsx to the target's shared component location without changing its public props. The reference intentionally has no background asset or custom WebGPU support UI.
4. Render WebGPUCanvas at the requested client-side scene boundary, with the target's scene as children. Keep DOM UI and overlays outside the canvas, and give its parent a definite height.
5. Add only missing dependencies. Install @react-three/fiber@alpha and three for the required R3F v10 WebGPU API, and @types/three as a development dependency. Keep compatible react and react-dom. Do not add controls, postprocessing, or a WebGL fallback.
6. Run the target repository's narrowest type-check or build covering the new canvas and report any remaining incompatibility.