A WebGPU oferece acesso de baixo nível à aceleração de hardware gráfico diretamente no navegador, permitindo renderização de alto desempenho e computação paralela masssiva. Integrar esta tecnologia em um ecossistema Next.js exige configurações específicas para gerenciar os shaders WGSL (WebGPU Shading Language) e os tipos TypeScript necessários.

Configuração do Ambiente

Para começar, inicialize seu projeto Next.js com suporte a TypeScript. O primeiro passo é instalar as definições de tipo da WebGPU para garantir suporte no compilador:

npm install --save-dev @webgpu/types

Para carregar arquivos .wgsl como módulos de texto, utilizamos o ts-shader-loader. Instale o loader:

npm install ts-shader-loader

No arquivo next.config.mjs, integre o loader à configuração do Webpack:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.wgsl$/i,
      loader: 'ts-shader-loader',
    });
    return config;
  },
};
export default nextConfig;

Crie um arquivo declarations.d.ts no diretório raiz para permitir a importação de arquivos WGSL:

declare module '*.wgsl' {
  const source: string;
  export default source;
}

Inicialização do Dispositivo GPU

A conexão com a GPU é feita de forma assíncrona. Abaixo, temos uma função utilitária para preparar o contexto do canvas:

async function setupGPU(canvasElement: HTMLCanvasElement) {
  const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
  const device = await adapter?.requestDevice() as GPUDevice;
  const context = canvasElement.getContext('webgpu') as GPUCanvasContext;
  
  const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
  
  context.configure({
    device,
    format: canvasFormat,
    alphaMode: 'premultiplied',
  });

  return { device, context, canvasFormat };
}

Definição do Shader (WGSL)

O pipeline gráfico requer um programa de shader. Exemplo de um shader simples para desenhar um triângulo, que você pode salvar em render.wgsl:

struct VertexOutput {
  @builtin(position) pos: vec4<f32>,
  @location(0) color: vec4<f32>,
};

@vertex
fn main(@builtin(vertex_index) id: u32) -> VertexOutput {
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(0.0, 0.5),
    vec2<f32>(-0.5, -0.5),
    vec2<f32>(0.5, -0.5)
  );
  
  var output: VertexOutput;
  output.pos = vec4<f32>(pos[id], 0.0, 1.0);
  output.color = vec4<f32>(1.0, 0.0, 0.0, 1.0);
  return output;
}

@fragment
fn fragmentMain(@location(0) color: vec4<f32>) -> @location(0) vec4<f32> {
  return color;
}

Após a configuração, basta importar o arquivo WGSL em seu componente React e utilizá-lo para criar o GPUShaderModule através do device.createShaderModule(), prosseguindo com a criação do GPURenderPipeline para desenhar na tela.