@web-engine-dev/renderer

Scene-graph agnostic web rendering library with full render graph, PBR materials, clustered lighting, shadow mapping, and post-processing. WebGPU-first with automatic WebGL 2 fallback.

Layer 6 · Visual Output

Features

• WebGPU-First: Modern GPU API with automatic WebGL 2 fallback
• PBR Materials: Metallic-roughness workflow with clearcoat, subsurface, and transmission extensions
• Clustered Lighting: Forward+ clustered pipeline supporting hundreds of dynamic lights
• Shadow Mapping: Cascaded shadow maps (CSM) for directional, cube maps for point, perspective for spot
• HDR Pipeline: Full HDR rendering with ACES tone mapping and auto-exposure
• Post-Processing: Bloom, FXAA, TAA, SSAO, depth of field, motion blur
• Image-Based Lighting: HDRI skyboxes with diffuse irradiance and specular prefiltering
• Instancing: Hardware instancing with per-instance attributes
• WGSL + GLSL: Dual shader pipeline via @web-engine-dev/shader-compiler
• Draw Call Batching: Automatic merging of compatible draw calls

Installation

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

Quick Start

import { Renderer, Camera, Material, Mesh, DirectionalLight } from '@web-engine-dev/renderer';

// Create renderer
const renderer = await Renderer.create(canvas, {
  preferWebGPU: true,
  antialias: true,
});

// Create camera
const camera = new Camera({
  fov: 60,
  near: 0.1,
  far: 1000,
});

// Create material
const material = new Material({
  type: 'pbr',
  albedo: '#cc8844',
  metallic: 0.0,
  roughness: 0.5,
});

// Create mesh
const mesh = new Mesh(geometry, material);

// Add light
const sun = new DirectionalLight({
  color: '#ffffff',
  intensity: 1.0,
  castShadows: true,
});

// Render
renderer.render(scene, camera);

API Overview

Materials

// PBR Material
new Material({
  type: 'pbr',
  albedo: '#ffffff',
  albedoMap: texture,
  metallic: 0.0,
  roughness: 0.5,
  normalMap: normalTex,
  emissive: '#000000',
});

// Unlit Material
new Material({
  type: 'unlit',
  color: '#ff0000',
  map: texture,
});

Lighting

// Directional light
new DirectionalLight({
  direction: [0, -1, 0],
  color: '#ffffee',
  intensity: 1.0,
  castShadows: true,
  shadowMapSize: 2048,
});

// Point light
new PointLight({
  position: [0, 5, 0],
  color: '#ffffff',
  intensity: 10,
  range: 20,
});

// Spot light
new SpotLight({
  position: [0, 5, 0],
  direction: [0, -1, 0],
  angle: 45,
  penumbra: 0.2,
});

Post-Processing

renderer.addEffect(
  new BloomEffect({
    threshold: 1.0,
    intensity: 0.5,
    radius: 0.5,
  })
);

renderer.addEffect(
  new ToneMappingEffect({
    type: 'aces',
    exposure: 1.0,
  })
);

renderer.addEffect(new FXAAEffect());

Environment

renderer.setEnvironment({
  skybox: cubeTexture,
  irradiance: irradianceMap,
  prefiltered: prefilteredMap,
  brdfLUT: brdfTexture,
});

Dependencies

• @web-engine-dev/math - Vector/matrix math
• @web-engine-dev/render-graph - Render pass management