@terrazzo/react-color-picker/dist/lib/webgl.d.ts

React color picker that supports Color Module 4, wide color gamut (WCG), and Display-P3 using WebGL for monitor-accurate colors. Powered by Culori.

import type { Oklab } from '@terrazzo/use-color';
/** create a WebGL2 rendering context and throw errors if needed */
export declare function createRenderingContext(canvas: HTMLCanvasElement): WebGL2RenderingContext;
export interface CreateProgramOptions {
    gl: WebGL2RenderingContext;
    vShaderSrc: string;
    fShaderSrc: string;
}
/** create a WebGL program from vertex shader & fragment shader sources */
export declare function createProgram({ gl, vShaderSrc, fShaderSrc }: CreateProgramOptions): WebGLProgram;
/**
 * Create a pixel-perfect gradient blend in Oklab space using WebGL
 */
export declare const GRADIENT_RGB_SHADERS: {
    attrs: {
        a_position: string;
        a_resolution: string;
        a_start_color: string;
        a_end_color: string;
    };
    vShader: string;
    fShader: string;
};
/**
 * Create a gradient from A to B, blended in Oklab space.
 */
export declare class GradientOklab {
    gl: WebGL2RenderingContext;
    startColor: Oklab;
    endColor: Oklab;
    program: WebGLProgram;
    attr: Record<keyof typeof GRADIENT_RGB_SHADERS.attrs, number>;
    ro: ResizeObserver;
    private lastFrame;
    constructor({ canvas, startColor, endColor }: {
        canvas: HTMLCanvasElement;
        startColor: Oklab;
        endColor: Oklab;
    });
    setColors(startColor: Oklab, endColor: Oklab): void;
    setSize(rect: DOMRect): void;
    /** render the canvas */
    render(): void;
}
/**
 * Generate a perceptually-uniform rainbow gradient in the Oklab space.
 */
export declare const HUE_SHADERS: {
    attrs: {
        a_position: string;
        a_resolution: string;
    };
    vShader: string;
    fShader: string;
};
export declare class HueWheel {
    gl: WebGL2RenderingContext;
    program: WebGLProgram;
    gamut: 'srgb' | 'p3';
    attr: Record<keyof typeof HUE_SHADERS.attrs, number>;
    ro: ResizeObserver;
    private lastFrame;
    constructor({ canvas, gamut }: {
        canvas: HTMLCanvasElement;
        gamut?: 'srgb' | 'p3';
    });
    setGamut(gamut: 'srgb' | 'p3'): void;
    setSize(rect: DOMRect): void;
    /** render the canvas */
    render(): void;
}
//# sourceMappingURL=webgl.d.ts.map