AbsulitPOINTS
POINTS is a library that uses WebGPU and allows you to create shaders without worrying too much about the setup.
Gallery
ff8_20251021_115551_half2.mp4
Examples
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
- Requirements
- Workflow
- API docs
- Installation
- Steps after installing
- Repository Examples
- RenderPass
- Using the examples for a custom project
- Data Input and Output
- Debug (errors, warnings and logs)
- Default data available to read
- Send data into the shaders
- Uniforms
- Sampler - setSampler
- Texture - setTexture2d
- Texture Image - setTextureImage
- Texture Image - setTextureElement
- Texture Image - setTextureString
- Texture 2d Array - setTextureImageArray
- Storage - setStorage
- Storage Map - setStorageMap
- Binding Texture - setBindingTexture
- Video - setTextureVideo
- Webcam - setTextureWebcam
- DepthMap - setTextureDepth2d
- Audio - setAudio
- Cameras
- Retrieve data from the shaders
- UV Coordinates and Textures Considerations
- Support Modules
- RenderPasses for Post Processing
- Memory Management
- Legacy folder (original project)
Collaborators
- Documentation testing
- Verifying installation is understandable
more like this
dont-track-me-google
Firefox and Chrome extensions to prevent Google from making links ugly.