Never Paint Mohawks

    @thi.ng/webgl-shadertoy
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.39 • Public • Published

    webgl-shadertoy

    npm version npm downloads Twitter Follow

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

    About

    Basic WebGL scaffolding for running interactive fragment shaders via @thi.ng/shader-ast. This is a support package for @thi.ng/webgl.

    Status

    ALPHA - bleeding edge / work-in-progress

    Search or submit any issues for this package

    Related packages

    Installation

    yarn add @thi.ng/webgl-shadertoy

    ES module import:

    <script type="module" src="https://cdn.skypack.dev/@thi.ng/webgl-shadertoy"></script>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    
    > const webglShadertoy = await import("@thi.ng/webgl-shadertoy");
    

    Package sizes (brotli'd, pre-treeshake): ESM: 666 bytes

    Dependencies

    Usage examples

    Several demos in this repo's /examples directory are using this package.

    A selection:

    Screenshot Description Live demo Source
    Evolutionary shader generation using genetic programming Demo Source
    Shadertoy-like WebGL setup Demo Source

    API

    Generated API docs

    import {
        $xy, add, distance, eq, float, FloatSym, fract,
        int, min, mix, mul, neg, ret, sin, sym,
        Vec2Sym, Vec2Term, vec3, Vec3Sym, vec4
    } from "@thi.ng/shader-ast";
    import { aspectCorrectedUV, fit1101 } from "@thi.ng/shader-ast-stdlib";
    import { glCanvas } from "@thi.ng/webgl";
    import { MainImageFn, shaderToy } from "@thi.ng/webgl-shadertoy";
    
    const mainImage: MainImageFn = (gl, unis) => {
        // predeclare local vars / symbols
        let uv: Vec2Sym;
        let mp: Vec2Sym;
        let d1: FloatSym;
        let d2: FloatSym;
        let col: Vec3Sym;
    
        // Inline function to create ring pattern with center at `p`
        const rings = (p: Vec2Term, speed = 0.25, freq = 50) =>
            sin(mul(add(distance(uv, p), fract(mul(unis.time, speed))), freq));
    
        return [
            // let's work in [-1..+1] range (based on vertical resolution)
            (uv = sym(aspectCorrectedUV($xy(gl.gl_FragCoord), unis.resolution))),
            (mp = sym(aspectCorrectedUV(unis.mouse, unis.resolution))),
            // compute ring colors
            (d1 = sym(rings(mp))),
            (d2 = sym(rings(neg(mp)))),
            // combine rings and multiply with target color based on
            // mouse button state
            (col = sym(
                mul(
                    vec3(fit1101(min(d1, d2))),
                    mix(
                        vec3(1),
                        vec3(d1, 0, d2),
                        float(eq(unis.mouseButtons, int(1)))
                    )
                )
            )),
            // return as vec4 (mandatory)
            ret(vec4(col, 1))
        ];
    };
    
    // create WebGL canvas
    const canvas = glCanvas({
        width: window.innerWidth,
        height: window.innerHeight,
        parent: document.body,
        version: 1
    });
    
    // init shader toy with canvas & shader fn
    const toy = shaderToy({
        canvas: canvas.canvas,
        gl: canvas.gl,
        main: mainImage
    });
    
    toy.start();

    Authors

    Karsten Schmidt

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

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

    License

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

    Install

    npm i @thi.ng/webgl-shadertoy

    DownloadsWeekly Downloads

    44

    Version

    0.4.39

    License

    Apache-2.0

    Unpacked Size

    29.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • thi.ng