What is it?
This is a resizable WebGPU scene component for React Three Fiber projects using Three.js (TSL).
This is going to use several other utils in conjunction with a basic scene to get us up and running:
If you're using the Boilerplate Project, this will already be set up in the React environment.
How to use it
Once a React project is created, you can drop this WebGPUApp component into your project to get a basic full screen WebGPU scene.
Using the WebGPUScene component
import { Suspense, useRef } from 'react'
import WebGPUScene from '@/components/canvas/webgpu_scene'
export const WebGPUApp = ({ children }: { children: React.ReactNode }) => {
const ref = useRef<HTMLElement>(null)
return (
<main
ref={ref}
style={{
position: 'relative',
width: '100%',
height: '100%',
}}
>
<Suspense fallback={null}>
<WebGPUScene
style={{
position: 'fixed',
inset: 0,
pointerEvents: 'none',
}}
eventSource={ref}
eventPrefix='client'
>
{children}
</WebGPUScene>
</Suspense>
</main>
)
}
