@fnet/shader-toy

Introduction

@fnet/shader-toy is a simple and straightforward library designed for users interested in experimenting with shader programming using WebGL. This project provides an environment where you can create, compile, and display shader effects directly in the browser. It's an accessible tool for those who want to explore computer graphics, enabling easy integration of shaders into web applications.

How It Works

The library operates by setting up a WebGL context within a canvas element, compiling the user's vertex and fragment shaders, and rendering the output using the Graphics Processor Unit (GPU). It supports WebGL 2, and gracefully falls back to earlier versions if needed. The project also offers mouse interaction capabilities, allowing for dynamic and interactive visual effects.

Key Features

• Shader Compilation and Rendering: Compiles user-defined vertex and fragment shaders, providing real-time visual feedback on the canvas.
• WebGL Context Management: Handles the setup and management of a WebGL context, ensuring compatibility and seamless operation across different browsers.
• Mouse Interaction: Offers mouse input handling to interact with the shader environment, enabling dynamic effects based on user input.
• Performance Monitoring: Integrates with performance stats to provide insights into rendering performance, useful for optimization and learning.
• Responsive Design: Adjusts canvas rendering to the size of the container, ensuring consistent display across different device sizes.

Conclusion

@fnet/shader-toy is a useful tool for developers and enthusiasts interested in shader programming with WebGL. It simplifies the process of creating interactive graphics, offering a starting point for further exploration in web-based GPU programming. The project is designed to be easy to use, making it accessible for experimentation and learning.

Developer Guide for @fnet/shader-toy

Overview

The @fnet/shader-toy library is designed for developers who wish to integrate and render GLSL shaders directly in their web applications. It provides an easy-to-use interface for setting up a WebGL context, compiling and utilizing vertex and fragment shaders, and handling real-time animation and interactivity. The library aims to streamline the creation of shader-based animations or visual effects, allowing developers to focus on shader code without handling the intricate setup of WebGL rendering from scratch.

Installation

To install @fnet/shader-toy, use either npm or yarn. This will automatically handle the installation of any required dependencies.

Using npm:

npm install @fnet/shader-toy

Using yarn:

yarn add @fnet/shader-toy

Usage

To use the library, you will create a container element in your HTML where the canvas will render the shader. You then call the default export with the required configuration parameters, including shaders and input settings.

Here is a basic example demonstrating the setup and use of the shader-toy library:

Example Setup

In your HTML:

<div id="shader-container" style="width: 800px; height: 600px;"></div>

In your JavaScript:

import createShaderApp from '@fnet/shader-toy';

const container = document.getElementById('shader-container');

const dispose = createShaderApp({
    container,
    canvas: { backgroundColor: '#000000' },
    mouse: { enabled: true },
    stats: { enabled: true },
    fshader: `
        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
            vec2 uv = fragCoord.xy / iResolution.xy;
            fragColor = vec4(uv.x, uv.y, 0.5 + 0.5 * sin(iTime), 1.0);
        }
    `,
});

// When you need to stop and cleanup (e.g. on component unmount in React)
dispose();

This setup initializes a shader rendering in a specific HTML element and allows interactivity with mouse movements.

Custom Shaders

You can provide your own GLSL shaders in the configuration object to render custom effects. The library handles GLSL versioning, compiling shaders, and managing shader programs.

Examples

Basic Shader with Mouse Interaction

import createShaderApp from '@fnet/shader-toy';

const container = document.getElementById('shader-container');

const dispose = createShaderApp({
    container,
    fshader: `
        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
            vec2 p = (2.0 * fragCoord.xy - iResolution.xy) / iResolution.y;
            float d = length(p - (iMouse.xy / iResolution.xy) + 0.5);
            fragColor = vec4(vec3(d), 1.0);
        }
    `,
    mouse: { enabled: true },
});

Animated Shader Example

import createShaderApp from '@fnet/shader-toy';

const container = document.getElementById('shader-container');

createShaderApp({
    container,
    fshader: `
        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
            float time = iTime;
            vec2 uv = fragCoord.xy / iResolution.xy;
            vec3 col = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0, 2, 4));
            fragColor = vec4(col, 1.0);
        }
    `,
});

These examples demonstrate simple usages for creating interactive and animated visuals using the library. Modify the fshader parameter to try out different GLSL fragment shader effects.

Acknowledgement

This library utilizes stats.js for performance monitoring, allowing developers to evaluate the rendering performance of their shaders in real time.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  container:
    type: object
    description: The DOM element that acts as the container for stats and canvas.
  stats:
    type: object
    properties:
      enabled:
        type: boolean
        default: true
        description: Indicates if stats are enabled.
    description: Configuration object for the stats.
  canvas:
    type: object
    properties:
      backgroundColor:
        type: string
        default: "#000000"
        description: Background color for the canvas.
    description: Configuration object for the canvas.
  mouse:
    type: object
    properties:
      enabled:
        type: boolean
        default: true
        description: Indicates if mouse input is enabled.
    description: Configuration object for mouse interaction.
  fshader:
    type: string
    description: Fragment shader source code.
  vshader:
    type: string
    description: Vertex shader source code.
required:
  - container