Nourished Personal Mucus

    @thi.ng/shader-ast-js
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.11 • Public • Published

    shader-ast-js

    npm version npm downloads Twitter Follow

    This project is part of the @thi.ng/umbrella monorepo.

    About

    Customizable JS codegen, compiler & runtime for @thi.ng/shader-ast.

    Due to the lack of native vector operations in JS, this compile target is much more involved than the @thi.ng/shader-ast-glsl code gen and uses a pluggable backend to perform all math ops. The default backend delegates all ops to @thi.ng/vectors and @thi.ng/matrices, which altogether provide ~750 optimized vector/matrix functions.

    Unsupported features

    • texture lookups (see texture tunnel demo for a monkey-patched solution)
    • derivatives (dFdx, dFdy, fwidth) - probably never supported in this env
    • out / inout function args (see #96 for discussion)

    Status

    STABLE - used in production

    Search or submit any issues for this package

    Related packages

    Installation

    yarn add @thi.ng/shader-ast-js

    ES module import:

    <script type="module" src="https://cdn.skypack.dev/@thi.ng/shader-ast-js"></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    
    > const shaderAstJs = await import("@thi.ng/shader-ast-js");
    

    Package sizes (gzipped, pre-treeshake): ESM: 7.21 KB

    Dependencies

    Usage examples

    Several demos in this repo's /examples directory are using this package.

    A selection:

    Screenshot Description Live demo Source
    2D canvas shader emulation Demo Source
    HOF shader procedural noise function composition Demo Source
    WebGL & JS canvas2D raymarch shader cross-compilation Demo Source
    WebGL & JS canvas 2D SDF Demo Source
    WebGL & Canvas2D textured tunnel shader Demo Source
    Fork-join worker-based raymarch renderer (JS/CPU only) Demo Source

    API

    Generated API docs

    // AST node functions from main shader-ast pkg
    import {
        mul,
        defn,
        float,
        ret,
        vec3
    } from "@thi.ng/shader-ast";
    
    // codegen / compiler
    import { targetJS } from "@thi.ng/shader-ast-js";
    
    const js = targetJS();
    
    const hello = defn("vec4", "hello", ["float"], (n) => [
        ret(vec4(mul(vec3(1, 2, 3), n), -1))
    ]);
    
    js(hello)
    
    const Module = js.compile(hello);
    Module.hello(10);
    // [10, 20, 30, -1]

    Authors

    Karsten Schmidt

    If this project contributes to an academic publication, please cite it as:

    @misc{thing-shader-ast-js,
      title = "@thi.ng/shader-ast-js",
      author = "Karsten Schmidt",
      note = "https://thi.ng/shader-ast-js",
      year = 2019
    }

    License

    © 2019 - 2022 Karsten Schmidt // Apache Software License 2.0

    Install

    npm i @thi.ng/shader-ast-js

    DownloadsWeekly Downloads

    232

    Version

    0.7.11

    License

    Apache-2.0

    Unpacked Size

    86.8 kB

    Total Files

    46

    Last publish

    Collaborators

    • thi.ng