Chapter 262: <ThreeWebGPUCanvas>

Core Idea

<ExperimentalBadge> <p>Three. js currently considers its WebGPU renderer experimental.

Key Concepts

• Example
• TSL
• Fallback
• Rendering
• Props
• See also

Code Examples

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>
  );
};

• What it demonstrates: Usage pattern for <ThreeWebGPUCanvas> from the official docs.

Key Takeaways

1. Understand example when working with <ThreeWebGPUCanvas>.
2. Understand tsl when working with <ThreeWebGPUCanvas>.
3. Understand fallback when working with <ThreeWebGPUCanvas>.
4. Understand rendering when working with <ThreeWebGPUCanvas>.
5. Understand props when working with <ThreeWebGPUCanvas>.

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.