@thi.ng/shader-ast-js

@thi.ng/shader-ast-js

npm versionnpm downloads Mastodon Follow

[!NOTE] This is one of 190 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

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:

const shaderAstJs = await import("@thi.ng/shader-ast-js");

Package sizes (brotli'd, pre-treeshake): ESM: 6.59 KB

Dependencies

Usage examples

Several projects in this repo's /examples directory are using this package:

ScreenshotDescriptionLive demoSource
ASCII art raymarching with thi.ng/shader-ast & thi.ng/text-canvasDemoSource
2D canvas shader emulationDemoSource
HOF shader procedural noise function compositionDemoSource
WebGL & JS canvas2D raymarch shader cross-compilationDemoSource
WebGL & JS canvas 2D SDFDemoSource
WebGL & Canvas2D textured tunnel shaderDemoSource
Fork-join worker-based raymarch renderer (JS/CPU only)DemoSource

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

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 - 2024 Karsten Schmidt // Apache License 2.0

Generated using TypeDoc