blok.js v0.2.1

blok.js

A simple WebGPU library.

⚠️ WARNING: Blok.js is still in its very early stages of development. Do not use it for production.

❗ Requirements

• A browser that preferably supports WebGPU natively.

Supported Browser Versions

• Chrome 113 and above (Chrome 80 to 112 with enable-unsafe-webgpu flag enabled)
• Edge 113 and above (Edge 80 to 112 with enable-unsafe-webgpu flag enabled)
• Safari Technology Preview (Safari 11.4 to 14.1 and Safari 17.4 to 18.0 with WebGPU flag enabled)
• Opera 99 and above (Opera 73 to 98 with enable-unsafe-webgpu flag enabled)

For other browsers, view the full compatibility table for WebGPU.

Installation

You can either install it via npm, download it from the dist folder or use a CDN.

Using npm

npm install blok.js

In Node.js

const BLOK = require("blok.js");

In a browser

<!-- use it as a IIFE module-->
<script src="blok.js/dist/blok.iife.js"></script>

<!-- or import it as a ES module -->
<script type="module">
    import BLOK from "blok.js";
</script>

Downloading from the dist folder

In Node.js

const BLOK = require("path/to/blok.js");

In a browser

<!-- use it as a IIFE module-->
<script src="path/to/blok.iife.js"></script>

<!-- or import it as a ES module -->
<script type="module">
    import BLOK from "path/to/blok.es.js";
</script>

Using a CDN

In Node.js

const BLOK = require("https://cdn.jsdelivr.net/npm/blok.js@latest/dist/blok.js");

In a browser

<!-- use it as a IIFE module-->
<script src="https://cdn.jsdelivr.net/npm/blok.js@latest/dist/blok.iife.js"></script>

<!-- or import it as a ES module -->
<script type="module">
    import BLOK from "https://cdn.jsdelivr.net/npm/blok.js@latest/dist/blok.es.js";
</script>

Getting Started

start();
async function start() {
    // setup WebGPU and core features
    const { display, stage, view } = await BLOK.Director.init();
    
    // set size of renderer
    display.width = window.innerWidth;
    display.height = window.innerHeight;

    // move the camera
    view.aspect = display.width / display.height;
    vec3.set(0.0, 0.0, 5.0, view.position);
    
    // create cube
    const geometry = new BLOK.BoxGeometry();
    const material = new BLOK.BasicMaterial({ color: new BLOK.Color(0.0, 1.0, 0.0) });
    
    // add cube to the scene
    const cube = new BLOK.Mesh({ geometry, material });
    stage.add(cube);

    // set render loop
    setInterval(() => {
        // rotates the cube
        vec3.add(cube.rotation, vec3.create(0.01, 0.01, 0.0), cube.rotation);

        // renders the scene from the camera's perspective
        display.draw(stage, view);
    }, 1000 / 60);
}