Support for WebGPU #46

Activity

1. bigmistqke commented on Jun 5, 2026

   

   bigmistqke

   on Jun 5, 2026

   Contributor

   More actions

   WebGPU is supported now — landed in #53 (and ported to the Solid 2.x line in #56).

   Rather than depending on three/webgpu ourselves, the gl prop and useThree().gl were widened to a structural Renderer union (WebGLRenderer | WebGPURenderer | RendererLike). Any renderer matching the shape works — WebGPURenderer, the DOM renderers (SVGRenderer, CSS2DRenderer, CSS3DRenderer), or your own.

   Usage

   import { WebGPURenderer } from "three/webgpu"
   
   <Canvas gl={canvas => new WebGPURenderer({ canvas })}>
     {/* scene */}
   </Canvas>

   solid-three awaits renderer.init() automatically before the first frame, so the async WebGPU setup just works — no manual await needed. It also skips init() when hasInitialized() is already true, so a pre-initialized renderer is fine too. WebGL-only config (toneMapping, outputEncoding, the flat gl={{ ... }} object form) is guarded so it does not get applied to a non-WebGL renderer.

   Typing it project-wide

   By default gl is the open Renderer union. If your whole app is WebGPU, declare it once and the type narrows everywhere:

   // src/solid-three.d.ts
   import type { WebGPURenderer } from "three/webgpu"
   
   declare module "solid-three" {
     interface Register {
       renderer: WebGPURenderer
     }
   }

   After that, useThree().gl.init() is typed with no narrowing, and passing a WebGLRenderer to <Canvas gl> becomes a type error.

   Re: TSL — since you bring your own WebGPURenderer instance, Three Shader Language works exactly as it does in plain three; nothing extra on the solid-three side. Docs are in the README under Custom renderers.

   Closing as resolved by #53 / #56 — shout if anything is missing.
2. bigmistqke

   closed this as completedon Jun 5, 2026