@thi.ng/shader-ast-js NPM

npm downloads

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

@thi.ng/shader-ast-glsl - Customizable GLSL codegen for @thi.ng/shader-ast
@thi.ng/shader-ast-stdlib - Function collection for modular GPGPU / shader programming with @thi.ng/shader-ast

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: 5.75 KB

Dependencies

Usage examples

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

A selection:

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

2d 3d 4d argb ast canvas codegen compiler dsl emulator glsl headless pixel render rgb565 runtime shader texture transpiler typescript webgl

@thi.ng/api @thi.ng/checks @thi.ng/errors @thi.ng/math @thi.ng/matrices @thi.ng/pixel @thi.ng/shader-ast @thi.ng/vectors

@everything-registry/sub-chunk-914

3 days ago

5 days ago

8 days ago

17 days ago

20 days ago

30 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

6 months ago

8 months ago

6 months ago

8 months ago

6 months ago

9 months ago

6 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

7 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago