GFXLiteModern 3D Renderer for the Web

A lightweight, GPU-driven 3D rendering library built on WebGPU

Get Started

GitHub

🚀

GPU-Driven Rendering

Utilizes storage buffers, indirect drawing, and compute shader culling for efficient rendering of complex scenes.

🎨

Multiple Material Types

Basic, Lambert, Phong, and Standard (PBR) materials with support for textures, transparency, and reflections.

💡

Lighting & Shadows

Directional lights with PCF soft shadows and HDR environment map support for realistic lighting.

📦

GLTF Support

Load 3D models in GLTF/GLB format with full material and texture support.

Hello Cube

Quick Start

bash

npm install gfxlite

typescript

import {
  Renderer,
  Scene,
  Mesh,
  BoxGeometry,
  BasicMaterial,
  PerspectiveCamera,
  Vector3,
} from "gfxlite";

// Create renderer with canvas
const renderer = new Renderer(canvas);

// Create scene and camera
const scene = new Scene();
const camera = new PerspectiveCamera(60, 800 / 600, 0.1, 1000);
camera.position = new Vector3(0, 0, 3);

// Create a mesh
const cube = new Mesh(
  new BoxGeometry({
    width: 1,
    height: 1,
    depth: 1,
  }),
  new BasicMaterial({ color: new Vector3(0.2, 0.5, 1.0) }),
);
scene.add(cube);

// Render loop
function animate() {
  cube.rotateX(0.01);
  cube.rotateY(0.01);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();