Note
This is one of 199 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! ❤️
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.
- 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)
STABLE - used in production
Search or submit any issues for this package
- @thi.ng/pixel - Typedarray integer & float pixel buffers w/ customizable formats, blitting, drawing, convolution
- @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
yarn add @thi.ng/shader-ast-js
ESM import:
import * as js from "@thi.ng/shader-ast-js";
Browser ESM import:
<script type="module" src="https://esm.run/@thi.ng/shader-ast-js"></script>
For Node.js REPL:
const js = await import("@thi.ng/shader-ast-js");
Package sizes (brotli'd, pre-treeshake): ESM: 6.56 KB
- @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
Note: @thi.ng/api is in most cases a type-only import (not used at runtime)
Eight projects in this repo's /examples directory are using this package:
Screenshot | Description | Live demo | Source |
---|---|---|---|
ASCII art raymarching with thi.ng/shader-ast & thi.ng/text-canvas | 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 | |
Interactive ridge-line plot | Demo | Source |
// 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]
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
}
© 2019 - 2024 Karsten Schmidt // Apache License 2.0