Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@thi.ng/shader-ast-js

0.4.25 • Public • Published

shader-ast-js

npm version npm downloads Twitter Follow

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

About

Customizable JS code generator, 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

Related packages

Installation

yarn add @thi.ng/shader-ast-js
// ES module
<script type="module" src="https://unpkg.com/@thi.ng/shader-ast-js?module" crossorigin></script>
 
// UMD
<script src="https://unpkg.com/@thi.ng/shader-ast-js/lib/index.umd.js" crossorigin></script>

Package sizes (gzipped, pre-treeshake): ESM: 4.90 KB / CJS: 4.45 KB / UMD: 4.39 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 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

License

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

Install

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

DownloadsWeekly Downloads

230

Version

0.4.25

License

Apache-2.0

Unpacked Size

211 kB

Total Files

48

Last publish

Collaborators

  • avatar