JSPM – @thi.ng/shader-ast-js@0.4.22

Package Exports

@thi.ng/shader-ast-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@thi.ng/shader-ast-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm downloads

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

About
Installation
Dependencies
Usage examples
API
Authors
License

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

@thi.ng/shader-ast-glsl - Customizable GLSL code generator 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
<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:

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

@thi.ng/shader-ast-js