@thi.ng/shader-ast-glsl
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.32 • Public • Published

    shader-ast-glsl

    npm version npm downloads Twitter Follow

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

    About

    GLSL code generator for @thi.ng/shader-ast. Currently supports GLSL ES 1.00 (WebGL) & GLSL ES 3.00 (WebGL 2).

    This package is also used for shader assembly by @thi.ng/webgl.

    Status

    STABLE - used in production

    Search or submit any issues for this package

    Related packages

    Installation

    yarn add @thi.ng/shader-ast-glsl

    ES module import:

    <script type="module" src="https://cdn.skypack.dev/@thi.ng/shader-ast-glsl"></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    
    > const shaderAstGlsl = await import("@thi.ng/shader-ast-glsl");
    

    Package sizes (brotli'd, pre-treeshake): ESM: 1.27 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
    Entity Component System w/ 100k 3D particles Demo Source

    API

    Generated API docs

    Basic GLSL code generation

    import { assign, defMain, output, program, uniform, vec4 } from "@thi.ng/shader-ast";
    import { GLSLVersion, targetGLSL } from "@thi.ng/shader-ast-glsl";
    
    const glsl = targetGLSL({
        // target WebGL2
        version: GLSLVersion.GLSL_300,
        // emit #version pragma
        versionPragma: true,
        // fragment shader
        type: "fs",
        // custom prelude
        prelude: `
    // custom GLSL source string injection, e.g.
    #define PI 3.1415926`
    });
    
    let color: Vec3Symbol;
    let fragColor: Vec4Symbol;
    
    glsl(
        program([
            color = uniform("vec3", "color"),
            fragColor = output("vec4", "fragColor", { loc: 0 }),
            defMain(()=> [
                assign(fragColor, vec4(color, 1))
            ])
        ])
    )
    #version 300 es
    
    // custom GLSL source string injection, e.g.
    #define PI 3.1415926
    uniform vec3 color;
    layout(location=0) out vec4 fragColor;
    void main() {
    fragColor = vec4(color, 1.0);
    }

    Authors

    Karsten Schmidt

    If this project contributes to an academic publication, please cite it as:

    @misc{thing-shader-ast-glsl,
      title = "@thi.ng/shader-ast-glsl",
      author = "Karsten Schmidt",
      note = "https://thi.ng/shader-ast-glsl",
      year = 2019
    }

    License

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

    Install

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

    DownloadsWeekly Downloads

    95

    Version

    0.4.32

    License

    Apache-2.0

    Unpacked Size

    34.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • thi.ng