Package Exports

@absulit/points
@absulit/points/build/points.min.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 (@absulit/points) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

POINTS

POINTS is a library that uses WebGPU and allows you to create shaders without worrying too much about the setup.

Gallery

https://github.com/user-attachments/assets/e61d8af1-a549-40bc-a790-221a3f8a41c7

Examples

$Mandelbrot fractal with zoom$

Instanced particles on top of a mesh vertices

Instanced glb model of Lucy textured and with depth of field

All examples are live here: https://absulit.github.io/points/examples/

Main Audience

The library is for Generative Art, so in general for Creative Coders, for Programmers/Software people who like the arts, and Artists who like to code.

People who just want to create nice live graphics and use mathematics to achieve this.

There's also a strong case for people who wants to create an application that harness the power of a Compute Shader. So a Software Engineer or Mathematician who has to make heavy calculations can do it with this library.

You can code freely without the use of any of the provided support modules (math, color, image, effects, noise, sdf, etc) or you can use them and have a little bit less of code in the shader. You can of course create your own modules and import them in the same way.

Quick Setup

A simple one page boilerplate. ( 🔗 click to expand )

<html>

<head>
    <title>POINTS Quick Setup</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800">
        Oops ... your browser doesn't support the HTML5 canvas element
    </canvas>

    <script type="importmap">
        {
            "imports": {
                "points": "https://cdn.jsdelivr.net/npm/@absulit/points/build/points.min.js"
            }
        }
    </script>

    <script type="module">
        // import the `Points` class
        import Points, { RenderPass } from 'points';

        // reference the canvas in the constructor
        const points = new Points('canvas');

        // create your render pass with three shaders as follow
        const renderPass =
            new RenderPass(/*wgsl*/`
                /**
                 * VertexIn
                 * position: vec4f,
                 * color: vec4f,
                 * uv: vec2f,
                 * normal: vec3f,
                 * id: u32,       // mesh id
                 * vertexIndex: u32,
                 * instanceIndex: u32,
                 */
                @vertex
                fn main(in:VertexIn) -> FragmentIn {
                    return defaultVertexBody(in.position, in.color, in.uv, in.normal);
                }`,
                /*wgsl*/`
                /**
                 * VertexIn
                 * position: vec4f,
                 * color: vec4f,
                 * uv: vec2f,
                 * ratio: vec2f,  // relation between params.screen.x and params.screen.y
                 * uvr: vec2f,    // uv with aspect ratio corrected
                 * mouse: vec2f,
                 * normal: vec3f,
                 * id: u32,       // mesh or instance id
                 * barycentrics: vec3f,
                 */
                @fragment
                fn main(in:FragmentIn) -> @location(0) vec4f {
                    return vec4f(in.uvr, 0, 1);
                }
                `,
                /*wgsl*/`
                // ComputeIn
                // @builtin(global_invocation_id) GID: vec3u,
                // @builtin(workgroup_id)  in.WID: vec3u,
                // @builtin(local_invocation_id) LID: vec3u
                @compute @workgroup_size(8,8,1)
                fn main(in:ComputeIn) {
                    let time = params.time;
                }
                `,
            )


        // call the POINTS init method and then the update method
        await points.init([renderPass]);
        // call `points.update()` methods to render a new frame
        points.update(update)

        function update() {
            // update uniforms, etc
        }
    </script>

</body>

</html>

Documentation

Collaborators

@juulio

Documentation testing
Verifying installation is understandable