tiny-helix

A lightweight TypeScript library for WebGPU, built as an ES6 module.

Quickstart

Install:

npm install tiny-helix

Or for development from source:

git clone https://github.com/DerSchmale/tiny-helix.git
cd tiny-helix
npm install
npm run build:debug   # builds non-minified debug bundles with source maps

Usage (browser)

Basic example showing initialization and a simple render loop:

import TinyHelix from 'tiny-helix';

const app = new TinyHelix();
await app.initialize({ canvas: document.querySelector('canvas')! });

function frame() {
  app.startFrame();
  const encoder = app.createCommandEncoder('frame-encoder');

  // Simple clear pass: create a render pass, set the clear color and end the pass.
  // This uses the backbuffer as the default target.
  const clearPass = encoder.createRenderPass()
    .withLabel('clear-pass')
    .withClearColor(0.1, 0.12, 0.15, 1.0) // r,g,b,a
    .build();

  clearPass.end();

  encoder.submit();
  requestAnimationFrame(frame);
}

frame();

Debug build and source maps

A development-friendly debug build is included. It produces readable, non-minified bundles with full source maps. The debug builds output the following files into dist/:

• tiny-helix.debug.js + tiny-helix.debug.js.map (UMD / CommonJS-like build)
• tiny-helix.esm.debug.js + tiny-helix.esm.debug.js.map (ESM build)

To create the debug bundles run:

npm run build:debug

The webpack configuration is set up so source maps use file:///... absolute file URLs instead of the webpack:// scheme. This prevents browsers from attempting to resolve webpack:// sources when consuming the package as a module.

API overview

This project exposes a small set of helpers and wrappers for working with WebGPU in TypeScript. The main entry points are:

• TinyHelix (default export): High-level manager for a WebGPU context, backbuffer and helpers for creating render targets, shaders, meshes and render pipelines.
• WebGPUContext: Low-level context manager that handles adapter/device initialization and canvas configuration.
• CommandEncoder: Helper for recording and submitting GPU commands per-frame.
• RenderPass, RenderPipeline, RenderTarget, Shader, Mesh, Texture, and buffer helpers.

See the inline JSDoc comments in src/ for detailed method and type information. TypeScript consumers will get typings from the dist/index.d.ts entry.

Development notes

• Use npm run build to produce production bundles (minified, optimized).
• Use npm run build:debug to produce debug bundles with full source maps.
• For TypeScript projects, install @webgpu/types for better type completion:

npm install --save-dev @webgpu/types

Requirements

• A browser with WebGPU support
• For TypeScript projects, you may want to install @webgpu/types for full type definitions

License

MIT License - see LICENSE for details.