@fnet/shader-toy

The @fnet/shader-toy project is a JavaScript library that provides a user-friendly and interactive interface for visualizing and experimenting with graphical shaders, the small programs that run on a GPU (Graphics Processing Unit). This tool allows developers to create, control, and animate shader programs in a WebGL context, making it suitable for both learning and prototyping purposes in computer graphics.

Key Features & Functionality

1. Statistical Monitoring: The library uses the Stats.js package to measure and display the rendering performance. Users can toggle the stats interface and observe how adjustments to the shaders influence the rendering speed.

2. Canvas Creation and Control: This tool allows the creation of a canvas and manages its properties. It also detects WebGL support in the user's browser and switches between WebGL 1, WebGL 2, and experimental-webgl modes accordingly.

3. Mouse Interactions: The library offers mouse support, allowing users to interact with the shaders. They can enable or disable the interactive mouse feature as per their requirements.

4. Shader Source Creation and Compilation: Apart from creating default shader sources if none are provided, the tool also compiles both vertex and fragment shader programs. The implementation is tightly bound with WebGL API and involves error handling for failed shader compilation or program initialization.

5. Animation: The library provides an animation functionality, experiencing the shaders in motion, with properties like frame rates and time Delta available.

6. Responsive Canvas Size: The dynamic canvas size ensures its adjustment according to the browser window size. When the browser window is resized, the canvases' width and height respond accurately.

To use this library in a project, developers create a new instance with the desired configuration and attach it to an element in their HTML code. The instance then creates a WebGL canvas in that element, allows the user to control WebGL shaders, and sets up performance metrics display functionality.

Note that developers need to ensure that they have a decent understanding of WebGL and shaders to effectively use this library. It does not provide a high-level abstraction over WebGL but offers an environment for writing and running shaders within a webpage.