{"id":19132462,"url":"https://github.com/taichi-dev/taichi.js","last_synced_at":"2025-05-06T18:11:55.226Z","repository":{"id":92122050,"uuid":"284299929","full_name":"taichi-dev/taichi.js","owner":"taichi-dev","description":"Run compiled Taichi kernels in JavaScript and WASM","archived":false,"fork":false,"pushed_at":"2020-10-04T03:12:14.000Z","size":351,"stargazers_count":64,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T13:44:36.520Z","etag":null,"topics":["graphics","javascript","taichi","wasm"],"latest_commit_sha":null,"homepage":"https://taichi-dev.github.io/taichi.js","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taichi-dev.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-01T16:45:38.000Z","updated_at":"2025-02-18T11:06:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"4933ac8c-6ccc-4e0f-944c-27526c9ae66b","html_url":"https://github.com/taichi-dev/taichi.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taichi-dev%2Ftaichi.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taichi-dev%2Ftaichi.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taichi-dev%2Ftaichi.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taichi-dev%2Ftaichi.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taichi-dev","download_url":"https://codeload.github.com/taichi-dev/taichi.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252741458,"owners_count":21797027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphics","javascript","taichi","wasm"],"created_at":"2024-11-09T06:18:21.739Z","updated_at":"2025-05-06T18:11:55.212Z","avatar_url":"https://github.com/taichi-dev.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"Taichi.js\n=========\n\nPlay Taichi kernels online by Emscripten and Taichi's C backend.\n\n\nTaichiHub\n---------\n\nTaichiHub is a website where you can create and share your creativity by writting\nshaders using `the Taichi programming langurage \u003chttps://github.com/taichi-dev/taichi\u003e`_.\n\nIf you're familiar with `Shadertoy \u003chttps://shadertoy.com\u003e`_, then\n**Taichihub is to Taichi just as Shadertoy is to GLSL**.\n\nPreview it online at https://142857.red:3389/.\n\n.. warning::\n\n    As the port abuse of ``:3389`` suggested, the server is still at its early development stage.\n    So there's no warranty, it might be buggy, and may temporary shutdown for maintainance.\n\n.. note::\n\n    Your browser needs to support WebAssembly (WASM) to make this site functional.\n\nHow to browse and edit artworks?\n++++++++++++++++++++++++++++++++\n\nEntering the website, you'll see several artworks created by users. Hovering on them to preview\nthe animation. Click one of them and you'll be redirected to its 'EDIT' page.\n\nThe source code is on the left side, and the result is on the right side. You may edit the source\ncode, then press the 'RUN' button to get the new result (may take a couple of time to compile).\n\nOr, if you'd like to create a new artwork from scratch, press the 'CREATE NEW' button to get a\nblank one. It should gives you a pre-written template rendering a colorful animation.\n\nOnce your artwork is done, press the 'SAVE' button, give your artwork a 'title', and it will be\ndisplayed on the homepage.\n\n.. note::\n\n    In fact till now there're only administrator's artworks in the database...\n    so please feel free to create and share your own one if you'd like to :)\n\nDifference between TaichiHub and ordinary Taichi\n++++++++++++++++++++++++++++++++++++++++++++++++\n\nDirectly copy-and-paste an ordinary Taichi program in https://github.com/taichi-dev/taichi/tree/master/examples\nwon't work, cause they're using Taichi's builtin GUI event loop, which is deeply embed in Python.\nHowever TaichiHub is hosted on the web, its frontend is Javascript..\n\nBackground\n::::::::::\n\nAs we all know, Taichi is a langurage embed in Python, while the browsers only support Javascript.\nBut with the power of Taichi's C backend, we can export Taichi kernels to C source, and then compile\nthem into Javascript and WebAssembly using `Emscripten \u003chttps://github.com/emscripten-core/emscripten\u003e`_.\n\nBut **we can only export the computations in Taichi-scope, not Python-scope** this way.\nSo computations *must* resides in Taichi kernels to write a functional TaichiHub artwork.\nThe code in Python-scope are only executed on compile-time, only Taichi-scope code are called on run-time.\n\nKernels\n:::::::\n\nSo, in order to let the compiler know *what kernels shall I export*, we need to invoke the kernels\nto trigger JIT compilation. To do this, please invoke all the kernels required at runtime.\n\nOr, equivalently, we provide a handy decorator to execute the kernel right after declaration:\n\n.. code-block:: python\n\n    import hub\n\n    @hub.kernel\n    def render():\n        ...\n\n    # is equivalent to:\n\n    @ti.kernel\n    def render():\n        ...\n\n    render()\n\nYou could replace all ``@ti.kernel`` to ``@hub.kernel`` while porting a program from ordinary Taichi\nto TaichiHub shaders.\n\nKernel names\n::::::::::::\n\nTaichiHub will search kernels by name, for example:\n\n- ``reset()`` will be called on initialization, or when 'RESET' button pressed.\n- ``render(t: float)`` will be called on each frame, ``t`` is the current time in seconds.\n- ``substep()`` will be called ``n``-times per frame before ``render``, ``hub.substep_nr(n)`` to specify ``n``.\n- ``onclick(x: float, y: float)`` will be called when LMB is clicked, ``x``, ``y`` is the mouse position.\n\nRendering\n:::::::::\n\nSo, we've pre-built the frontend GUI system and logic infrastructure in Javascript, which render the\n**HTML5 canvas** instead of Taichi GUI which is not available in browsers. Some changes are required\nto adapt to it:\n\n1. To render **images**:\n\nOrdinary:\n\n.. code-block:: python\n\n    img = ti.Vector.field(3, float, (512, 512))\n    ...\n\n    while gui.running:\n        ...\n        gui.set_image(img)\n        gui.show()\n\nTaichiHub:\n\n.. code-block:: python\n\n    import hub\n\n    img = ti.Vector.field(3, float, (512, 512))\n    ...\n\n    hub.bind_image(img)\n\n2. To render **particles**:\n\nOrdinary:\n\n.. code-block:: python\n\n    pos = ti.Vector.field(2, float, 8192)\n\n    while gui.running:\n        ...\n        gui.circles(pos.to_numpy())\n        gui.show()\n\nTaichiHub:\n\n.. code-block:: python\n\n    import hub\n\n    pos = ti.Vector.field(2, float, 8192)\n    ...\n\n    hub.bind_particles(pos)\n\n\nHow to setup a TaichiHub server\n-------------------------------\n\n1. Install Emscripten SDK according to `their official documentation \u003chttps://emscripten.org/docs/getting_started/downloads.html\u003e`_:\n\n.. code-block:: bash\n\n    git clone https://github.com/emscripten-core/emsdk.git\n    cd emsdk\n    ./emsdk install latest\n    ./emsdk activate latest\n    source ./emsdk_env.sh\n    cd ..\n    emcc --version\n\n2. Install requirements:\n\n.. code-block:: bash\n\n    python3 -m pip install pymongo\n    python3 -m pip install flask\n    python3 -m pip install taichi\n    apt install mongodb\n\n3. Clone this repo:\n\n.. code-block:: bash\n\n    git clone https://github.com/taichi-dev/taichi.js.git\n    cd taichi.js\n\n4. Build the container for executing user Python code:\n\n.. code-block:: bash\n\n    docker build . -t taichihub\n\n5. Start the server:\n\n.. code-block:: bash\n\n    source /path/to/emsdk/emsdk_env.sh  # add `emcc` to PATH\n    cd taichihub\n    python3 -m flask run -h 0.0.0.0 -p 80\n\n\nAcknowledgements\n----------------\n\n`MDUI \u003chttps://github.com/zdhxiong/mdui\u003e`_ and `jQuery \u003chttp://jquery.com\u003e`_ are used in frontend page design.\n\n`Codemirror \u003chttp://codemirror.net\u003e`_ is used for the source editor.\n\n`BootCDN \u003cbootcdn.cn\u003e`_ is used for hosting and accelerating their Javascript / CSS.\n\nFlask is used as an infrastructure for a HTTP server.\n\nMongoDB is used for storing database and artworks.\n\n`Emscripten \u003chttps://github.com/emscripten-core/emscripten\u003e`_ is used for compiling C source emitted ny Taichi.\n\nDocker is used for creating secure container executing user code.\n\n`Shadertoy \u003chttps://shadertoy.com\u003e`_ is taken as a good reference for TaichiHub.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaichi-dev%2Ftaichi.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaichi-dev%2Ftaichi.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaichi-dev%2Ftaichi.js/lists"}