Installation

Choose how you want to use the library:

If you want to use it now: use Manual Installation.
If you are waiting for package distribution: see NPM or CDN.

NPM

NOTE

This method is not yet available.

CDN

NOTE

This method is not yet available.

Manual Installation

1) Requirements

Install these first:

Git to clone the source code
Node.js 18+ (includes npm) to install dependencies and build
A browser with WebGL2 support to run your app/examples

2) Clone the repository and install dependencies

git clone https://github.com/waynemwashuma/webgl.git
cd webgl
npm install

3) Build the library files

npm run build-src

This creates build output in dist/, including:

dist/index.umd.js
dist/index.module.js

Optional: if you also want local docs/examples output, run:

npm run build

4) Copy files to your project

Copy one or both build files into your own project.

Use dist/index.module.js for ESM usage (recommended).
Use dist/index.umd.js for plain script-tag usage.

Example layout used below:

your-project/
  libs/
    webgl/
      index.module.js
      index.umd.js

5) Use in your project

ESM (recommended)

If you use a bundler, set an alias so your app can import from "webgl" directly.

Vite (`vite.config.js`)

import { defineConfig } from "vite";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default defineConfig({
  resolve: {
    alias: {
      webgl: path.resolve(__dirname, "libs/webgl/index.module.js")
    }
  }
});

Webpack (`webpack.config.js`)

const path = require("node:path");

module.exports = {
  resolve: {
    alias: {
      webgl: path.resolve(__dirname, "libs/webgl/index.module.js")
    }
  }
};

Then import in app code:

import { WebGLRenderer, MeshMaterialPlugin, CameraPlugin } from "webgl";

Plain HTML with browser import maps (no bundler)

Use the ESM file with an import map:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Webgllis - Import Map</title>
    <script type="importmap">
      {
        "imports": {
          "webgl": "./libs/webgl/index.module.js"
        }
      }
    </script>
  </head>
  <body>
    <canvas id="app"></canvas>
    <script type="module">
      import { WebGLRenderer, MeshMaterialPlugin, CameraPlugin } from "webgl";

      const canvas = document.getElementById("app");
      const renderer = new WebGLRenderer({
        canvas,
        plugins: [new MeshMaterialPlugin(), new CameraPlugin()]
      });
    </script>
  </body>
</html>

Plain HTML with script tag (UMD)

Use the UMD build if you do not want modules:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Webgllis - Plain HTML</title>
    <script src="./libs/webgl/index.umd.js"></script>
  </head>
  <body>
    <canvas id="app"></canvas>
    <script>
      const { WebGLRenderer, MeshMaterialPlugin, CameraPlugin } = window.WEBGL;
      const canvas = document.getElementById("app");

      const renderer = new WebGLRenderer({
        canvas,
        plugins: [new MeshMaterialPlugin(), new CameraPlugin()]
      });
    </script>
  </body>
</html>