Skip to main content

<ThreeWebGPUCanvas>v4.0.503

EXPERIMENTAL

Three.js currently considers its WebGPU renderer experimental.

A wrapper for React Three Fiber's <Canvas> which uses Three.js's WebGPURenderer.

Import it from the @remotion/three/webgpu entry point. The regular <ThreeCanvas> entry point does not load WebGPU code.

<ThreeWebGPUCanvas> requires three 0.167 or newer, @react-three/fiber 9.0 or newer and React 19.

Example​

ThreeWebGPU.tsx
import {ThreeWebGPUCanvas} from '@remotion/three/webgpu';
import {useCurrentFrame, useVideoConfig} from 'remotion';

export const ThreeWebGPU: React.FC = () => {
  const frame = useCurrentFrame();
  const {height, width} = useVideoConfig();

  return (
    <ThreeWebGPUCanvas
      width={width}
      height={height}
      camera={{fov: 60, position: [0, 0, 5]}}
    >
      <ambientLight intensity={0.4} />
      <directionalLight position={[5, 5, 5]} intensity={2.5} />
      <mesh rotation={[frame / 80, frame / 100, 0]}>
        <torusKnotGeometry args={[1.1, 0.38, 220, 36]} />
        <meshStandardMaterial color="#4f9dff" />
      </mesh>
    </ThreeWebGPUCanvas>
  );
};

Animate properties using useCurrentFrame(), rather than React Three Fiber's useFrame() hook. This keeps rendered frames deterministic.

TSL​

Import TSL utilities from three/tsl. To use node materials as JSX elements, extend React Three Fiber's catalogue with the three/webgpu namespace. See the React Three Fiber WebGPU guide for the required type augmentation and extend() call.

Fallback​

Three.js's WebGPURenderer falls back to a WebGL 2 backend when WebGPU is unavailable. Features which specifically require native WebGPU may not be available when using the fallback.

Rendering​

Enable a Chromium graphics backend when rendering. Without one, Chrome Headless Shell may produce an empty canvas:

Render using ANGLE
npx remotion render three-webgpu out/video.mp4 --gl=angle

--gl=angle configures Chromium's GPU process and compositor. It does not force Three.js to use its WebGL fallback: If WebGPU is available, WebGPURenderer continues to use its WebGPU backend.

When using a server-side rendering API, pass the equivalent option:

render.ts
import {renderMedia} from '@remotion/renderer';

await renderMedia({
  // ...
  chromiumOptions: {gl: 'angle'},
});

Use swangle instead of angle on a machine without a GPU. It provides a software-backed rendering path and is the default on Lambda.

To render using a native GPU, use Chrome for Testing. On Linux, a Vulkan-capable GPU may additionally require --gl=vulkan:

Render using a native GPU
npx remotion render three-webgpu out/video.mp4 --chrome-mode=chrome-for-testing --gl=angle

Use npx remotion gpu with the same browser options to inspect GPU support.

Props​

<ThreeWebGPUCanvas> accepts the props of <ThreeCanvas>, except for gl. The renderer is initialized by <ThreeWebGPUCanvas>.

See also​

CONTRIBUTORS