WebGPU Scene

WebGPU scene boilerplate for React Three Fiber creative coding projects. Jump straight into building with TSL shaders.

WebGPU Scene¹²¹

WebGPU Scene

WebGPU scene boilerplate for React Three Fiber creative coding projects. Jump straight into building with TSL shaders.

What is it?

This is a boilerplate project intended to drop into any React project to get you started with a React Three Fiber project, WebGPU and 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 { WebGPUScene } from '@/components/canvas/webgpu_scene'
 
export const WebGPUApp = ({ children }) => {
  const ref = useRef(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>
  )
}