WebGPURenderer causes warning: render() called before the backend is initialized

[verekia]

R3F v8 and v9 both cause the following warning:
THREE.Renderer: .render() called before the backend is initialized. Try using .renderAsync() instead.

Reproduction:

• git clone [email protected]:verekia/three-gpu-ecosystem-tests.git
• cd three-gpu-ecosystem-tests
• cd vite-ts-swc-r3f8-react18
• npm i
• npm run dev
• Open http://localhost:5173

[krispya]

@CodyJasonBennett provided a workaround here:

  const [frameloop, setFrameloop] = useState('never')

  return (
    <Canvas
      frameloop={frameloop}
      gl={canvas => {
        const renderer = new WebGPURenderer({
          canvas,
          powerPreference: 'high-performance',
          antialias: true,
          alpha: true,
        })
        renderer.init().then(() => setFrameloop('always'))
        renderer.xr = { addEventListener: () => {} }
        return renderer
      }}
    >

But ideally we leverage suspense and allow for a promise to be passed into gl such that this works:

<Canvas 
  gl={async (canvas) => {
    const renderer = new WebGPURenderer({
      canvas,
      powerPreference: 'high-performance',
      antialias: true,
      alpha: true,
    });

    await renderer.init();
    // This shouldn't be necessary either
    // renderer.xr = { addEventListener: () => {} };
    return renderer;
  }}
>

[CodyJasonBennett]

The fix here would be to prefer renderAsync over render when able, but I'm not comfortable acting until three has a more stable API here.

[verekia]

Since 9.0.0-rc.2 we can do this:

<Canvas
  gl={async (glProps) => {
    const renderer = new WebGPURenderer(glProps)
    await renderer.init()
    return renderer
  }}
>

The frameloop state workaround is no longer necessary.