taichi.js

taichi.js是一个现代化的Javascript GPU计算框架。它将Javascript函数转换为WebGPU计算着色器，以实现大规模并行化。这是Python库Taichi的Javascript版本。

在线体验

在Chrome v113+版本上，访问https://taichi-js.com/playground/ 可以体验taichi.js的实际效果。该网页提供了一个交互式代码编辑器，允许您编写、编译和运行taichi.js代码。

文档

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

示例程序

假设存在一个id为result_canvas的HTML画布，以下Javascript代码将使用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)) {
            // 自动并行化
            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();

画布将显示以下动画：

<img src="https://yellow-cdn.veclightyear.com/ab5030c0/a3be50ae-b909-411f-9055-b45e717a1298.gif" height="270px">