@web-engine-dev/render-graph

WebGPU render graph system for organizing render passes.

Features

• Automatic Resource Management: Texture/buffer allocation
• Pass Dependencies: Automatic ordering and barriers
• Resource Pooling: Efficient transient resource reuse
• Backend-Agnostic API: Generic backend interface (engine runtime uses WebGPU)
• Debug Visualization: Graph visualization tools

Installation

npm install @web-engine-dev/render-graph
# or
pnpm add @web-engine-dev/render-graph

Quick Start

import { RenderGraph, RenderPass, ResourceHandle } from '@web-engine-dev/render-graph';

// Create render graph
const graph = new RenderGraph(device);

// Define resources
const gbuffer = graph.createTexture('gbuffer', {
  width: 1920,
  height: 1080,
  format: 'rgba16float',
});

const depth = graph.createTexture('depth', {
  width: 1920,
  height: 1080,
  format: 'depth24plus',
});

// Add passes
graph.addPass('geometry', {
  outputs: [gbuffer, depth],
  execute: (ctx) => {
    // Render geometry
    renderScene(ctx);
  },
});

graph.addPass('lighting', {
  inputs: [gbuffer, depth],
  outputs: [graph.backbuffer],
  execute: (ctx) => {
    // Deferred lighting
    applyLighting(ctx);
  },
});

// Compile and execute
graph.compile();
graph.execute();

API Overview

Resource Creation

// Texture
const tex = graph.createTexture('name', {
  width,
  height,
  format: 'rgba8unorm',
  usage: 'render-target',
});

// Buffer
const buf = graph.createBuffer('name', {
  size: 1024,
  usage: 'uniform',
});

// Imported external resource
const imported = graph.importTexture('external', existingTexture);

Pass Definition

graph.addPass('passName', {
  // Resource dependencies
  inputs: [texture1, buffer1],
  outputs: [texture2],

  // Optional settings
  colorAttachments: [
    {
      texture: texture2,
      loadOp: 'clear',
      storeOp: 'store',
      clearValue: [0, 0, 0, 1],
    },
  ],

  depthAttachment: {
    texture: depthTex,
    loadOp: 'clear',
    storeOp: 'store',
  },

  // Execution callback
  execute: (ctx) => {
    const encoder = ctx.encoder;
    // Draw commands
  },
});

Graph Compilation

// Compile (call once or when structure changes)
graph.compile();

// Execute each frame
graph.execute();

// Resize resources
graph.resize(newWidth, newHeight);