amesingflank / taichi.js Goto Github PK

Modern GPU Compute and Rendering in Javascript

JavaScript 0.43% HTML 0.18% TypeScript 99.39%

gpu gpu-computing gpu-programming javascript webgpu-api webgpu webgpu-shaders

taichi.js's Introduction

taichi.js

taichi.js is a modern GPU computing framework for Javascript. It transforms Javascript functions into WebGPU Compute Shaders for massive parallelization. It is a Javascript version of the Python library Taichi.

Playground

On Chrome v113+, visit https://taichi-js.com/playground/ to see taichi.js in action. The webpage provides an interactive code editor that allows you to write, compile, and run taichi.js code.

Documentation

https://taichi-js.com/docs/docs/basics/getting-started

Sample Program

Provided that there exists a HTML canvas with id result_canvas, the following Javascript code will compute and animate a Julia Set fractal using WebGPU:

let fractal = async () => {
    await ti.init();

    let n = 320;
    let pixels = ti.Vector.field(4, ti.f32, [2 * n, n]);

    let complex_sqr = (z) => {
        return [z[0] ** 2 - z[1] ** 2, z[1] * z[0] * 2];
    };

    ti.addToKernelScope({ pixels, n, complex_sqr });

    let kernel = ti.kernel((t) => {
        for (let I of ndrange(n * 2, n)) {
            // Automatically parallelized
            let i = I[0];
            let j = I[1];
            let c = [-0.8, cos(t) * 0.2];
            let z = [i / n - 1, j / n - 0.5] * 2;
            let iterations = 0;
            while (z.norm() < 20 && iterations < 50) {
                z = complex_sqr(z) + c;
                iterations = iterations + 1;
            }
            pixels[(i, j)] = 1 - iterations * 0.02;
            pixels[(i, j)][3] = 1;
        }
    });

    let htmlCanvas = document.getElementById('result_canvas');
    htmlCanvas.width = 2 * n;
    htmlCanvas.height = n;
    let canvas = new ti.Canvas(htmlCanvas);

    let i = 0;
    async function frame() {
        kernel(i * 0.03);
        i = i + 1;
        canvas.setImage(pixels);
        requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);
};
fractal();

The canvas will show the following animation:

taichi.js's People

Contributors

Stargazers

Watchers

Forkers

rodenluo m1911star 15051107253 juniorrojas aioolia callmedanieldaniel bdfe davidar jonham 542774114 talentzxf asford devrsi0n jorjun stormwild cloned-repos

taichi.js's Issues

Support `for(let i = start; i < begin; i += stride)` in kernels

Taichi.js currently only supports range-for loops:

for(let i of range(n)){
  ...
}

and while-loops:

while(cond){
 ...
}

A top-level range-for loop in a kernel will be parallelised. All while-loops will be serial.

We should also support traditional for loops of the form

for(let i = start; i < begin; i += stride){
...
}

And we should implement them by translating this into a while-loop.

Replace `let` with `const` where possible

Export Python kernels to taichi.js?

I have kernels already written and developed in taichi Python that I want to export to use in a web app.

I really would like to be able to create the canvas in taichi.js like:

  let htmlCanvas = document.getElementById('result_canvas');
  htmlCanvas.width = 512;
  htmlCanvas.height = 512;
  let renderTarget = ti.canvasTexture(htmlCanvas);

and pass the renderTarget to the exported taichi Python kernels running on a WebGPU backend.

In your post announcing your plan for taichi.js, you said

I have hacked up a WebGPU Taichi runtime and used Taichi AOT and Tint to generate some WGSL kernels

When I look at the taichi-aot-demo, I see that you need to select a specific taichi arch for your AOT runtime:

    runtime_ = ti::Runtime(arch_);

I don't see WebGPU as an officially supported architecture: https://docs.taichi-lang.org/docs/taichi_core#enumeration-tiarch

How can I make my taichi Python code interoperable with taichi.js? Is it possible with existing tooling? Would you consider exposing a Python API for orchestrating this exporting?

cc: @kurtisdavid @CandiedCode

Remove unused imports

Support conditional expression `b? x:y`

Use `deno.ts` for running tests

taichi.js heavily depends on WebGPU, which makes running tests very difficult.

Currently, the only way to run test is via the browser. More specifically, you need to do

npm run build_dev
npm run start

and then visit 127.0.0.1:8080/tests

Very recently, deno.ts has introduced WebGPU support, so it would be great if we could use that to run tests locally via a npm run tests command.

If we take this piece of code

let render = ti.kernel(() => {
  ti.clearColor(renderTarget, [0.0, 0.0, 0.0, 1.0]);
  for (let v of ti.inputVertices(vertices)) {
    ti.outputPosition([v.x, v.y, 0.0, 1.0]);
    ti.outputVertex(v);
  }
  for (let f of ti.inputFragments()) {
    let coord = (f + 1) / 2.0;
    let cellIndex = ti.i32(coord * (liveness.dimensions - 1));
    let live = ti.f32(liveness[cellIndex]);
    ti.outputColor(renderTarget, [live, live, live, 1.0]);
  }
});

And let's say I don't want game of life but I want to fill the canvas with red pixel.

let render = ti.kernel(() => {
  ti.clearColor(renderTarget, [0.0, 0.0, 0.0, 1.0]);
  for (let v of ti.inputVertices(vertices)) {
    ti.outputPosition([v.x, v.y, 0.0, 1.0]);
    ti.outputVertex(v);
  }
  for (let f of ti.inputFragments()) {
    // let coord = (f + 1) / 2.0;
    // let cellIndex = ti.i32(coord * (liveness.dimensions - 1));
    // let live = ti.f32(liveness[cellIndex]);
    ti.outputColor(renderTarget, [1.0, 0.0, 0.0, 1.0]);
  }
});

I get black canvas and in the console :

Bind group layout index (0) doesn't correspond to a bind group for this pipeline.
 - While Validating GetBindGroupLayout (0) on [RenderPipeline]

If i uncomment the lines and keep my red pixel, then it work

let render = ti.kernel(() => {
  ti.clearColor(renderTarget, [0.0, 0.0, 0.0, 1.0]);
  for (let v of ti.inputVertices(vertices)) {
    ti.outputPosition([v.x, v.y, 0.0, 1.0]);
    ti.outputVertex(v);
  }
  for (let f of ti.inputFragments()) {
    let coord = (f + 1) / 2.0;
    let cellIndex = ti.i32(coord * (liveness.dimensions - 1));
    let live = ti.f32(liveness[cellIndex]);
    ti.outputColor(renderTarget, [1.0, 0.0, 0.0, 1.0]);
  }
});

I've also attempted with removing the lines instead of commenting it.