taichi.js - a modern GPU computing framework for Javascript

Last update: Dec 16, 2022

Overview

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.

Zoo

On Chrome v98+, visit https://amesingflank.github.io/taichi.js/zoo/index.html to see taichi.js in action. The webpage provides an interactive code editor that allows you to write, compile, and run taichi code.

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:

Set-up

Set-up WebGPU

taichi.js is based on WebGPU, but WebGPU is not publicly available yet. To enable WebGPU, the web browser must be either

Chrome v98+, with a correct WebGPU origin trial token for your host.

The origin trial token should look something like

/*token for 127.0.0.1:8080*/
<meta http-equiv="origin-trial" content="AmLeIKgIO7v4LsGlggOO+uPfu+0GtBaIufDglDXjaD3phTLW7aH6OrNqfgx67gTCplF0JnRVrI/xXOpFRACrLwIAAABJeyJvcmlnaW4iOiJodHRwOi8vMTI3LjAuMC4xOjgwODAiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjUyODMxOTk5fQ==">

Chrome Canary, Firefox Nightly, or Safary Technology Preview

Using `taichi.js` in your webpage

Clone the github repo, or npm install taichi.js
Locate zoo/ti.js, and include it in your html.
">
```
<script src="/path/to/ti.js">script>
```

Bangkit Capstone C22-KY05 Cloud Computing

Bangkit Capstone C22-KY05 Cloud Computing This project is using Fastify as the server. Stack Node.js TypeScript Fastify Prisma PostgreSQL Cloud SQL Co

Jun 13, 2022

🤖 GPU accelerated Neural networks in JavaScript for Browsers and Node.js

brain.js GPU accelerated Neural networks in JavaScript for Browsers and Node.js About brain.js is a GPU accelerated library for Neural Networks writte

Jan 7, 2023

Run Keras models in the browser, with GPU support using WebGL

**This project is no longer active. Please check out TensorFlow.js.** The Keras.js demos still work but is no longer updated. Run Keras models in the

Dec 29, 2022

playful fractal flames, GPU accelerated

$playful fractal flames, GPU accelerated$

JWildfire Swan - playful fractal flames, GPU accelerated This is an experimental project and work in progress. Project goals The basic idea is to use

Oct 20, 2022

Drawing Newton's fractal using pure js, rust-wasm, SIMDs, threads and GPU

$Drawing Newton's fractal using pure js, rust-wasm, SIMDs, threads and GPU$

Newton's fractal Runtime Newton's fractal renderer. Click to open in your browser Inspired by 3blue1brown's video about Newton's fractal. Drawing

Nov 17, 2022

GPU-accelerated Augmented Reality for the web.

MARTINS.js WebAR engine Create amazing Augmented Reality experiences with MARTINS.js, a GPU-accelerated Augmented Reality engine for the web. Get star

Dec 16, 2022

🐜 GPU-accelerated ant colony simulation

Ants simulation A simple ant colony GPU-accelerated simulation made with Three.js. Live demo Rules Ants can emit two types of pheromones: to-home pher

Nov 28, 2022

A flexible gateway for running ML inference jobs through cloud providers or your own GPU. Powered by Replicate and Cloudflare Workers.

Cogflare (Working title) Cogflare is a Cloudflare Workers application that aims to simplify running distributed ML inference jobs through a central AP

Dec 12, 2022

GPU Drops' captcha solving extension without affiliate tracking code injection

Noptcha, without affiliate link injection Noptcha is a reCaptcha and hCaptcha solving extension created by GPU Drops. This fork was made because I hat

Dec 26, 2022

GPU supercharged attraction-graph visualizations built on top of Three.js

Force Directed Graph GPU supercharged attraction-graph visualizations for the web built on top of Three.js. Importable as an ES6 module. Simulation co

Dec 9, 2022

Dojo Framework. A Progressive Framework for Modern Web Apps

@dojo/framework Dojo is a progressive framework for modern web applications built with TypeScript. Visit us at dojo.io for documentation, tutorials, c

Dec 25, 2022

Choosing a modern JavaScript UI framework, Pokemon-style.

ChooseYourFramework Choosing a modern JavaScript UI framework, Pokemon-style. Usage This is a hacked-together fork of FullScreenShenanigans/FullScreen

Nov 12, 2022

The epic event-driven, front-end only, reactive JavaScript framework with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?

Active CSS Power-up your CSS with actions! Is the CSS of the future a full-on programming language? Active CSS is a JavaScript plugin that adds event-

Dec 30, 2022

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

Jan 2, 2023

Comments

add vite config to serve zoo page
Changes

add vite config to serve zoo page local development

support hmr

Reference

https://vitejs.dev/

Next steps

add vite support to build ti.js

Thanks for reviewing~
opened by m1911star 0
Support missing compound assignment operators `*=`, `/=`, `%=`, `>>=`, `<<=`

We only support +=, &=, |=, ^= right now. These are translated into atomic operators (which will be demoted if possible). It would be great to support -=, *=, /=, %=, >>=, <<= and translate them into simple non-atomic operators.

opened by AmesingFlank 0
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.
opened by AmesingFlank 1
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.
opened by AmesingFlank 0