Overshader

Overshader is a simple library for building beatiful animations using WebGL Shaders. This package built with TypeScript so you can explore all available options right in your IDE.

Highlights

• Responsive out of the box
• No external dependencies
• Fully typed
• Small size (gzip ~ 3 KB)
• Few lines of code - and your shader is rendering in a browser
• Load textures by url
• Builtin uniforms for time, resolution and textures
• Explore shaders demos at Demo Shaders
• Convenient and fast standalone development via Vite

Install

yarn add overshader

Verify it is working

Just provide CSS selector for canvas container

import { runWebglProgram } from 'overshader';

runWebglProgram({
    canvasContainer: '.responsive-canvas-container',
});

And you should see the default shader rendered inside specified container:

Run your own shader

import { runWebglProgram } from 'overshader';

runWebglProgram({
    canvasContainer: '.responsive-canvas-container',
    // provide source as raw string
    fragmentShader: `precision highp float;
uniform vec2 u_resolution;
...`,
    // OR load source via URL
    fragmentShaderURL: 'path/to/fragment.glsl',
    // specify textures to use
    textures: ['/assets/textures/texture-font.png', '/assets/textures/texture-noise.png'],
    // control opacity and other WebGLContextAttributes
    contextAttributes: {
      alpha: true,
      premultipliedAlpha: false,
    },
    // randmoize time so every run looks different
    initialTimeShift: Math.random() * 1e3 * 1,
    // add event listeners to have u_mouse coordinates
    listenForMouse: true,
    // by default, devicePixelRatio = window.devicePixelRatio
    devicePixelRatio: 1,
    // react to first render
    onFirstRender(controls) {
        // e.g. update uniform
        controls.setUniform1f('u_value', 1.2323);
        // ...
    },
});

Builtin uniforms

| Uniform | Type | Meaning | | ----------------------------- | --------- | - | | u_resolution | vec2 | Resolution of canvas in pixels | | u_time | float | Time elapsed since start | | u_mouse | vec2 | Coordinates of mouse | | u_texture_${index} | sampler2D | Texture by index from textures array | | u_texture_resolution_${index} | vec2 | Texture resolution in pixels |

Local development

git clone https://github.com/overshom/overshader.git

cd overshader

yarn

yarn dev