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

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

Documentation

- Requirements
- A compatible WebGPU browser since it's currently in development
- Syntax highlight and IDE
- Workflow
- API docs
- Installation
- cdn (importmap)
- npm
- bun
- Steps after installing
- Repository Examples
- index.html
- main.js
- RenderPass
- Meshes
- Clear or preserve previous RenderPass output
- Lines, points, triangles (wireframe)
- Instances
- Discarding Triangles - CullMode
- Face Direction - FrontFace
- Using the examples for a custom project
- Data Input and Output
- Debug (errors, warnings and logs)
- Default data available to read
- Params Uniform
- Parameters in vert.js that go to frag.js
- vert.js
- frag.js
- 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
- Perspective Camera - setCameraPerspective
- Orthographic Camera - setCameraOrthographic
- Retrieve data from the shaders
- Read Storage - readStorage
- Events - addEventListener
- UV Coordinates and Textures Considerations
- Support Modules
- How to use them
- Import code to all RenderPass shaders - Points.import()
- RenderPasses for Post Processing
- Memory Management
- Switch to a new set of RenderPass - Points.reset()
- Remove Points instance - Points.destroy()
- Legacy folder (original project)

Collaborators

@juulio
- Documentation testing
- Verifying installation is understandable