WebGPU

What is WebGPU?

WebGPU is the next-generation graphics API for the web, designed to provide high-performance 3D graphics and general-purpose computing capabilities directly in web browsers. It offers several advantages over WebGL:

Key Benefits

• Better Performance: More efficient GPU utilization and reduced CPU overhead
• Modern GPU Features: Access to compute shaders, advanced texturing, and modern GPU capabilities
• Unified API: Single API for both graphics and compute operations
• Better Debugging: Improved error handling and debugging capabilities
• Future-Proof: Designed for modern GPU architectures

Browser Support

WebGPU is currently supported in:

• Chrome/Edge: Stable support (Chrome 113+)
• Firefox: Behind experimental flag
• Safari: Experimental support in Safari Technology Preview

Usage with TresJS

TresJS supports WebGPU through Three.js's WebGPU renderer. You can enable WebGPU by providing a custom renderer factory to the <TresCanvas> component.

Basic Setup

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { WebGPURenderer } from 'three/webgpu'
import type { TresRendererSetupContext } from '@tresjs/core'

// Create WebGPU renderer factory
const createWebGPURenderer = (ctx: TresRendererSetupContext) => {
  const renderer = new WebGPURenderer({
    canvas: toValue(ctx.canvas),
    // WebGPU specific configuration
    alpha: true,
    antialias: true,
  })
  return renderer
}
</script>

<template>
  <TresCanvas :renderer="createWebGPURenderer">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshBasicMaterial color="hotpink" />
    <!-- Your 3D scene here -->
  </TresCanvas>
</template>

Advanced WebGPU Example

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { WebGPURenderer } from 'three/webgpu'
import type { ShadowMapType, ToneMapping } from 'three'
import type { TresRendererSetupContext } from '@tresjs/core'

import HologramCube from './HologramCube.vue'

const createWebGPURenderer = (ctx: TresRendererSetupContext) => {
  const renderer = new WebGPURenderer({
    canvas: toValue(ctx.canvas),
    // WebGPU specific configuration
    alpha: true,
    antialias: true,
  })
  return renderer
}
</script>

<template>
  <TresCanvas :renderer="createWebGPURenderer">
    <TresPerspectiveCamera
      :position="[3, 3, 3]"
      :look-at="[0, 0, 0]"
    />
    <Suspense>
      <HologramCube />
    </Suspense>
  </TresCanvas>
</template>