taichi.js

Modern GPU Compute and Rendering in Javascript

GPU
AmesingFlank/taichi.jstaichi-js.comtaichi.js

README

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:

  1. ```js
  2. let fractal = async () => {
  3.     await ti.init();

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

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

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

  14.     let kernel = ti.kernel((t) => {
  15.         for (let I of ndrange(n * 2, n)) {
  16.             // Automatically parallelized
  17.             let i = I[0];
  18.             let j = I[1];
  19.             let c = [-0.8, cos(t) * 0.2];
  20.             let z = [i / n - 1, j / n - 0.5] * 2;
  21.             let iterations = 0;
  22.             while (z.norm() < 20 && iterations < 50) {
  23.                 z = complex_sqr(z) + c;
  24.                 iterations = iterations + 1;
  25.             }
  26.             pixels[(i, j)] = 1 - iterations * 0.02;
  27.             pixels[(i, j)][3] = 1;
  28.         }
  29.     });

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

  36.     let i = 0;
  37.     async function frame() {
  38.         kernel(i * 0.03);
  39.         i = i + 1;
  40.         canvas.setImage(pixels);
  41.         requestAnimationFrame(frame);
  42.     }
  43.     requestAnimationFrame(frame);
  44. };
  45. fractal();
  46. ```

The canvas will show the following animation: