view-webgpu

A WebGPU-compatible View component for React Three Fiber, serving as a drop-in replacement for @react-three/drei's View component.

Problem

The standard @react-three/drei View component doesn't work correctly with Three.js's WebGPU renderer due to differences in how WebGPU handles scissor tests and viewport rendering compared to WebGL.

Solution

This package provides a modified View component that:

• Correctly handles WebGPU's coordinate system and scissor rect constraints
• Prevents "Scissor rect is not contained in render target dimensions" errors
• Maintains full compatibility with the original View API

Installation

npm install @wuhhh/view-webgpu
# or
yarn add @wuhhh/view-webgpu
# or
pnpm add @wuhhh/view-webgpu

Usage

Simply replace your @react-three/drei View import with this package:

// Before (doesn't work with WebGPU)
import { View } from '@react-three/drei'

// After (works with both WebGL and WebGPU)
import { View } from '@wuhhh/view-webgpu'

Basic Example

import { Canvas } from '@react-three/fiber'
import { View } from '@wuhhh/view-webgpu'
import * as THREE from 'three/webgpu'

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, display: 'flex', gap: '20px', padding: '20px' }}>
        {/* Multiple Views - each needs a unique index for proper WebGPU rendering */}
        <View index={1} style={{ flex: 1, height: '100%', background: 'lightblue' }}>
          <ambientLight intensity={0.4} />
          <directionalLight position={[5, 5, 5]} intensity={1.0} />
          <mesh>
            <boxGeometry />
            <meshStandardMaterial color="orange" />
          </mesh>
        </View>
        
        <View index={2} style={{ flex: 1, height: '100%', background: 'lightgreen' }}>
          <ambientLight intensity={0.4} />
          <directionalLight position={[5, 5, 5]} intensity={1.0} />
          <mesh>
            <sphereGeometry />
            <meshStandardMaterial color="hotpink" />
          </mesh>
        </View>
      </div>

      {/* Canvas with WebGPU renderer */}
      <Canvas 
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }}
        gl={async (props) => {
          const renderer = new THREE.WebGPURenderer({
            ...props,
          } as any);
          await renderer.init();
          return renderer;
        }}
        camera={{ position: [0, 0, 5], fov: 75 }}
      >
        <View.Port />
      </Canvas>
    </div>
  )
}

Props

• as?: string - Root element type (default: 'div')
• id?: string - CSS id prop
• className?: string - CSS classname prop
• style?: React.CSSProperties - CSS style prop
• visible?: boolean - If the view is visible or not (default: true)
• index?: number - Render index (default: 1)
• frames?: number - Frames to render, Infinity for continuous rendering (default: Infinity)
• children?: React.ReactNode - Scene contents

Requirements

• React 19.1.0 or higher
• React Three Fiber 9.3.0 or higher
• Three.js 0.178.0 or higher (with WebGPU support)

Important Usage Notes

Multiple Views Require Unique Indices

When using multiple View components simultaneously, each View must have a unique index prop:

<View index={1}>...</View>
<View index={2}>...</View>
<View index={3}>...</View>

This is crucial for WebGPU rendering - without unique indices, only the last View will be visible as they will clear each other's content.

WebGPU Renderer Initialization

The WebGPU renderer must be properly initialized with await renderer.init():

<Canvas gl={async (props) => {
  const renderer = new THREE.WebGPURenderer({ ...props } as any);
  await renderer.init();
  return renderer;
}}>

How It Works

The main differences from the original View component:

1. WebGPU Detection: Detects if using a WebGPU renderer
2. Coordinate System Handling: Properly handles WebGPU's different coordinate system
3. Scissor Rect Validation: Ensures scissor rectangles stay within render target bounds
4. Clear Operations: Handles frame clearing differently for WebGPU to prevent artifacts
5. Index-Based Rendering: Only the first View (index=1) clears the entire canvas, preventing multiple Views from interfering

Contributing

Issues and pull requests are welcome! Please report any bugs or compatibility issues you encounter.

License

MIT

Credits

Based on the original View component from @react-three/drei by Poimandres.