POINTS is a library that uses WebGPU and allows you to create shaders without worrying too much about the setup.
ff8_20251021_115551_half2.mp4
All examples are live here: https://absulit.github.io/points/examples/
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.
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*/`
@vertex
fn main(
@location(0) position:vec4f,
@location(1) color:vec4f,
@location(2) uv:vec2f,
@builtin(vertex_index) vertexIndex:u32
) -> Fragment {
return defaultVertexBody(position, color, uv);
}`,
/*wgsl*/`
@fragment
fn main(
@location(0) color:vec4f,
@location(1) uv:vec2f,
@location(2) ratio:vec2f, // relation between params.screen.x and params.screen.y
@location(3) uvr:vec2f, // uv with aspect ratio corrected
@location(4) mouse:vec2f,
@builtin(position) position:vec4f
) -> @location(0) vec4f {
return vec4f(uvr, 0, 1);
}
`,
/*wgsl*/`
@compute @workgroup_size(8,8,1)
fn main(
@builtin(global_invocation_id) GlobalId:vec3u,
@builtin(workgroup_id) WorkGroupID:vec3u,
@builtin(local_invocation_id) LocalInvocationID:vec3u
) {
let time = params.time;
}
`,
)
// call the POINTS init method and then the update method
await points.init([renderPass]);
update();
// call `points.update()` methods to render a new frame
function update() {
points.update();
requestAnimationFrame(update);
}
</script>
</body>
</html>- Requirements
- Workflow
- API docs
- Installation
- Steps after installing
- Repository Examples
- RenderPass
- Using the examples for a custom project
- Data Input and Output
- UV Coordinates and Textures Considerations
- Support Modules
- RenderPasses for Post Processing
- Legacy folder (original project)
- Documentation testing
- Verifying installation is understandable