/**
 * a WebGL renderer object
 * @category Rendering
 */
export default class WebGLRenderer extends Renderer {
    /**
     * The vendor string of the underlying graphics driver.
     * @type {string}
     * @default undefined
     * @readonly
     */
    readonly GPUVendor: string;
    /**
     * The WebGL context
     * @name gl
     * @type {WebGLRenderingContext}
     */
    gl: WebGLRenderingContext;
    /**
     * sets or returns the thickness of lines for shape drawing
     * @type {number}
     * @default 1
     */
    lineWidth: number;
    /**
     * sets or returns the shape used to join two line segments where they meet.
     * Out of the three possible values for this property: "round", "bevel", and "miter", only "round" is supported for now in WebGL
     * @type {string}
     * @default "round"
     */
    lineJoin: string;
    /**
     * the vertex buffer used by this WebGL Renderer
     * @type {WebGLBuffer}
     */
    vertexBuffer: WebGLBuffer;
    /**
     * Maximum number of texture unit supported under the current context
     * @type {number}
     * @readonly
     */
    readonly maxTextures: number;
    /**
     * the default shader precision based on application settings
     * @type {string}
     * @ignore
     */
    shaderPrecision: string;
    /**
     * reusable scratch array for fillRect (2 triangles = 6 vertices)
     * @ignore
     */
    _rectTriangles: {
        x: number;
        y: number;
    }[];
    _polyVerts: any[];
    _currentGradient: any;
    /**
     * The current transformation matrix used for transformations on the overall scene
     * (alias to renderState.currentTransform for backward compatibility)
     * @type {Matrix3d}
     */
    currentTransform: Matrix3d;
    /**
     * The current batcher used by the renderer
     * @type {Batcher}
     */
    currentBatcher: Batcher;
    /**
     * a reference to the current shader program used by the renderer
     * @type {WebGLProgram}
     */
    currentProgram: WebGLProgram;
    /**
     * The list of active batchers
     * @type {Map<Batcher>}
     */
    batchers: Map<Batcher, any>;
    _scissorActive: boolean;
    cache: TextureCache;
    /**
     * The WebGL version used by this renderer (1 or 2)
     * @type {number}
     * @default 1
     */
    get WebGLVersion(): number;
    /**
     * add a new batcher to this renderer
     * @param {Batcher} batcher - a batcher instance
     * @param {string} name - a name uniquely identifying this batcher
     * @param {boolean} [activate=false] - true if the given batcher should be set as the active one
     */
    addBatcher(batcher: Batcher, name?: string, activate?: boolean): void;
    /**
     * set the active batcher for this renderer
     * @param {string} name - a batcher name
     * @param {GLShader} [shader] - an optional shader program to be used, instead of the default one, when activating the batcher
     * @returns {Batcher} an instance to the current active batcher
     */
    setBatcher(name?: string, shader?: GLShader): Batcher;
    /**
     * Reset the gl transform to identity
     */
    resetTransform(): void;
    /**
     * Create a pattern with the specified repetition
     * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - Source image to be used as the pattern's image
     * @param {string} repeat - Define how the pattern should be repeated
     * @returns {TextureAtlas} the patterned texture created
     * @see ImageLayer#repeat
     * @example
     * let tileable   = renderer.createPattern(image, "repeat");
     * let horizontal = renderer.createPattern(image, "repeat-x");
     * let vertical   = renderer.createPattern(image, "repeat-y");
     * let basic      = renderer.createPattern(image, "no-repeat");
     */
    createPattern(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, repeat: string): TextureAtlas;
    /**
     * Sets the WebGL viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates
     * @param {number} [x = 0] - x the horizontal coordinate for the lower left corner of the viewport origin
     * @param {number} [y = 0] - y the vertical coordinate for the lower left corner of the viewport origin
     * @param {number} [w = width of the canvas] - the width of viewport
     * @param {number} [h = height of the canvas] - the height of viewport
     */
    setViewport(x?: number, y?: number, w?: number, h?: number): void;
    /**
     * Clears the gl context with the given color.
     * @param {Color|string} [color="#000000"] - CSS color.
     * @param {boolean} [opaque=false] - Allow transparency [default] or clear the surface completely [true]
     */
    clearColor(color?: Color | string, opaque?: boolean): void;
    /**
     * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
     * @param {number} x - x axis of the coordinate for the rectangle starting point.
     * @param {number} y - y axis of the coordinate for the rectangle starting point.
     * @param {number} width - The rectangle's width.
     * @param {number} height - The rectangle's height.
     */
    clearRect(x: number, y: number, width: number, height: number): void;
    /**
     * Draw an image to the gl context
     * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame|CompressedImage} image - An element to draw into the context.
     * @param {number} sx - The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
     * @param {number} sy - The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
     * @param {number} sw - The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
     * @param {number} sh - The height of the sub-rectangle of the source image to draw into the destination context.
     * @param {number} dx - The X coordinate in the destination canvas at which to place the top-left corner of the source image.
     * @param {number} dy - The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
     * @param {number} dw - The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
     * @param {number} dh - The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
     * @example
     * // Position the image on the canvas:
     * renderer.drawImage(image, dx, dy);
     * // Position the image on the canvas, and specify width and height of the image:
     * renderer.drawImage(image, dx, dy, dWidth, dHeight);
     * // Clip the image and position the clipped part on the canvas:
     * renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
     */
    drawImage(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame | CompressedImage, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
    /**
     * Draw a pattern within the given rectangle.
     * @param {TextureAtlas} pattern - Pattern object
     * @param {number} x - x position where to draw the pattern
     * @param {number} y - y position where to draw the pattern
     * @param {number} width - width of the pattern
     * @param {number} height - height of the pattern
     * @see WebGLRenderer#createPattern
     */
    drawPattern(pattern: TextureAtlas, x: number, y: number, width: number, height: number): void;
    /**
     * starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path
     * @example
     * // First path
     * renderer.beginPath();
     * renderer.setColor("blue");
     * renderer.moveTo(20, 20);
     * renderer.lineTo(200, 20);
     * renderer.stroke();
     * // Second path
     * renderer.beginPath();
     * renderer.setColor("green");
     * renderer.moveTo(20, 20);
     * renderer.lineTo(120, 120);
     * renderer.stroke();
     */
    beginPath(): void;
    /**
     * begins a new sub-path at the point specified by the given (x, y) coordinates.
     * @param {number} x - The x axis of the point.
     * @param {number} y - The y axis of the point.
     */
    moveTo(x: number, y: number): void;
    /**
     * adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
     */
    lineTo(x: any, y: any): void;
    /**
     * Adds a quadratic Bezier curve to the current sub-path.
     * The curve is tessellated into line segments for WebGL rendering.
     * @param {number} cpx - The x-axis coordinate of the control point.
     * @param {number} cpy - The y-axis coordinate of the control point.
     * @param {number} x - The x-axis coordinate of the end point.
     * @param {number} y - The y-axis coordinate of the end point.
     */
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    /**
     * Adds a cubic Bezier curve to the current sub-path.
     * The curve is tessellated into line segments for WebGL rendering.
     * @param {number} cp1x - The x-axis coordinate of the first control point.
     * @param {number} cp1y - The y-axis coordinate of the first control point.
     * @param {number} cp2x - The x-axis coordinate of the second control point.
     * @param {number} cp2y - The y-axis coordinate of the second control point.
     * @param {number} x - The x-axis coordinate of the end point.
     * @param {number} y - The y-axis coordinate of the end point.
     */
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
    /**
     * Adds a circular arc to the current sub-path, using the given control points and radius.
     * The arc is tessellated into line segments for WebGL rendering.
     * @param {number} x1 - The x-axis coordinate of the first control point.
     * @param {number} y1 - The y-axis coordinate of the first control point.
     * @param {number} x2 - The x-axis coordinate of the second control point.
     * @param {number} y2 - The y-axis coordinate of the second control point.
     * @param {number} radius - The arc's radius. Must be non-negative.
     */
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    /**
     * creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.
     * @param {number} x - The x axis of the coordinate for the rectangle starting point.
     * @param {number} y - The y axis of the coordinate for the rectangle starting point.
     * @param {number} width - The rectangle's width.
     * @param {number} height - The rectangle's height.
     */
    rect(x: number, y: number, width: number, height: number): void;
    /**
     * adds a rounded rectangle to the current path.
     * @param {number} x - The x axis of the coordinate for the rectangle starting point.
     * @param {number} y - The y axis of the coordinate for the rectangle starting point.
     * @param {number} width - The rectangle's width.
     * @param {number} height - The rectangle's height.
     * @param {number} radius - The corner radius.
     */
    roundRect(x: number, y: number, width: number, height: number, radii: any): void;
    /**
     * stroke the given shape or the current defined path
     * @param {Rect|RoundRect|Polygon|Line|Ellipse|Bounds} [shape] - a shape object to stroke
     * @param {boolean} [fill=false] - fill the shape with the current color if true
     */
    stroke(shape?: Rect | RoundRect | Polygon | Line | Ellipse | Bounds, fill?: boolean): void;
    /**
     * fill the given shape or the current defined path
     * @param {Rect|RoundRect|Polygon|Line|Ellipse|Bounds} [shape] - a shape object to fill
     */
    fill(shape?: Rect | RoundRect | Polygon | Line | Ellipse | Bounds): void;
    /**
     * add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing
     */
    closePath(): void;
    /**
     * Returns the WebGLContext instance for the renderer
     * return a reference to the system 2d Context
     * @returns {WebGLRenderingContext} the current WebGL context
     */
    getContext(): WebGLRenderingContext;
    /**
     * set the current blend mode for this renderer. <br>
     * All renderers support: <br>
     * - "normal" : draws new content on top of the existing content <br>
     * <img src="../images/normal-blendmode.png" width="180"/> <br>
     * - "add", "additive", or "lighter" : color values are added together <br>
     * <img src="../images/add-blendmode.png" width="180"/> <br>
     * - "multiply" : pixels are multiplied, resulting in a darker picture <br>
     * <img src="../images/multiply-blendmode.png" width="180"/> <br>
     * - "screen" : pixels are inverted, multiplied, and inverted again (opposite of multiply) <br>
     * <img src="../images/screen-blendmode.png" width="180"/> <br>
     * WebGL2 additionally supports: <br>
     * - "darken" : retains the darkest pixels of both layers <br>
     * <img src="../images/darken-blendmode.png" width="180"/> <br>
     * - "lighten" : retains the lightest pixels of both layers <br>
     * <img src="../images/lighten-blendmode.png" width="180"/> <br>
     * Other CSS blend modes ("overlay", "color-dodge", "color-burn", "hard-light", "soft-light",
     * "difference", "exclusion") may be supported by the Canvas renderer (browser-dependent)
     * and will always fall back to "normal" in WebGL. <br>
     * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
     * @param {string} [mode="normal"] - blend mode
     * @param {boolean} [premultipliedAlpha=true] - whether textures use premultiplied alpha (affects source blend factor)
     * @returns {string} the blend mode actually applied (may differ if the requested mode is unsupported)
     */
    setBlendMode(mode?: string, premultipliedAlpha?: boolean): string;
    currentPremultipliedAlpha: any;
    /**
     * restores the most recently saved renderer state by popping the top entry in the drawing state stack
     * @example
     * // Save the current state
     * renderer.save();
     *
     * // apply a transform and draw a rect
     * renderer.tranform(matrix);
     * renderer.fillRect(10, 10, 100, 100);
     *
     * // Restore to the state saved by the most recent call to save()
     * renderer.restore();
     */
    restore(): void;
    /**
     * saves the entire state of the renderer by pushing the current state onto a stack.
     * @example
     * // Save the current state
     * renderer.save();
     *
     * // apply a transform and draw a rect
     * renderer.tranform(matrix);
     * renderer.fillRect(10, 10, 100, 100);
     *
     * // Restore to the state saved by the most recent call to save()
     * renderer.restore();
     */
    save(): void;
    /**
     * adds a rotation to the transformation matrix.
     * @param {number} angle - the rotation angle, clockwise in radians
     * @example
     * // Rotated rectangle
     * renderer.rotate((45 * Math.PI) / 180);
     * renderer.setColor("red");
     * renderer.fillRect(10, 10, 100, 100);
     *
     * // Reset transformation matrix to the identity matrix
     * renderer.setTransform(1, 0, 0, 1, 0, 0);
     */
    rotate(angle: number): void;
    /**
     * adds a scaling transformation to the renderer units horizontally and/or vertically
     * @param {number} x - Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
     * @param {number} y - Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling
     */
    scale(x: number, y: number): void;
    /**
     * Set the global alpha
     * @param {number} alpha - 0.0 to 1.0 values accepted.
     */
    setGlobalAlpha(alpha: number): void;
    /**
     * Return the global alpha
     * @returns {number} global alpha value
     */
    getGlobalAlpha(): number;
    /**
     * Stroke an arc at the specified coordinates with given radius, start and end points
     * @param {number} x - arc center point x-axis
     * @param {number} y - arc center point y-axis
     * @param {number} radius - arc radius
     * @param {number} start - start angle in radians
     * @param {number} end - end angle in radians
     * @param {boolean} [antiClockwise=false] - draw arc anti-clockwise
     * @param {boolean} [fill=false] - also fill the shape with the current color if true
     */
    strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise?: boolean, fill?: boolean): void;
    /**
     * Fill an arc at the specified coordinates with given radius, start and end points
     * @param {number} x - arc center point x-axis
     * @param {number} y - arc center point y-axis
     * @param {number} radius - arc radius
     * @param {number} start - start angle in radians
     * @param {number} end - end angle in radians
     * @param {boolean} [antiClockwise=false] - draw arc anti-clockwise
     */
    fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise?: boolean): void;
    /**
     * Stroke an ellipse at the specified coordinates with given radius
     * @param {number} x - ellipse center point x-axis
     * @param {number} y - ellipse center point y-axis
     * @param {number} w - horizontal radius of the ellipse
     * @param {number} h - vertical radius of the ellipse
     * @param {boolean} [fill=false] - also fill the shape with the current color if true
     */
    strokeEllipse(x: number, y: number, w: number, h: number, fill?: boolean): void;
    /**
     * Fill an ellipse at the specified coordinates with given radius
     * @param {number} x - ellipse center point x-axis
     * @param {number} y - ellipse center point y-axis
     * @param {number} w - horizontal radius of the ellipse
     * @param {number} h - vertical radius of the ellipse
     */
    fillEllipse(x: number, y: number, w: number, h: number): void;
    /**
     * Stroke a line of the given two points
     * @param {number} startX - the start x coordinate
     * @param {number} startY - the start y coordinate
     * @param {number} endX - the end x coordinate
     * @param {number} endY - the end y coordinate
     */
    strokeLine(startX: number, startY: number, endX: number, endY: number): void;
    /**
     * Fill a line of the given two points
     * @param {number} startX - the start x coordinate
     * @param {number} startY - the start y coordinate
     * @param {number} endX - the end x coordinate
     * @param {number} endY - the end y coordinate
     */
    fillLine(startX: number, startY: number, endX: number, endY: number): void;
    /**
     * Stroke a Polygon on the screen with a specified color
     * @param {Polygon} poly - the shape to draw
     * @param {boolean} [fill=false] - also fill the shape with the current color if true
     */
    strokePolygon(poly: Polygon, fill?: boolean): void;
    /**
     * Fill a me.Polygon on the screen
     * @param {Polygon} poly - the shape to draw
     */
    fillPolygon(poly: Polygon): void;
    /**
     * Draw a stroke rectangle at the specified coordinates
     * @param {number} x - x axis of the coordinate for the rectangle starting point.
     * @param {number} y - y axis of the coordinate for the rectangle starting point.
     * @param {number} width - The rectangle's width.
     * @param {number} height - The rectangle's height.
     * @param {boolean} [fill=false] - also fill the shape with the current color if true
     */
    strokeRect(x: number, y: number, width: number, height: number, fill?: boolean): void;
    /**
     * Draw a filled rectangle at the specified coordinates
     * @param {number} x - x axis of the coordinate for the rectangle starting point.
     * @param {number} y - y axis of the coordinate for the rectangle starting point.
     * @param {number} width - The rectangle's width.
     * @param {number} height - The rectangle's height.
     */
    fillRect(x: number, y: number, width: number, height: number): void;
    /**
     * Stroke a rounded rectangle at the specified coordinates
     * @param {number} x - x axis of the coordinate for the rounded rectangle starting point.
     * @param {number} y - y axis of the coordinate for the rounded rectangle starting point.
     * @param {number} width - The rounded rectangle's width.
     * @param {number} height - The rounded rectangle's height.
     * @param {number} radius - The rounded corner's radius.
     * @param {boolean} [fill=false] - also fill the shape with the current color if true
     */
    strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill?: boolean): void;
    /**
     * Draw a rounded filled rectangle at the specified coordinates
     * @param {number} x - x axis of the coordinate for the rounded rectangle starting point.
     * @param {number} y - y axis of the coordinate for the rounded rectangle starting point.
     * @param {number} width - The rounded rectangle's width.
     * @param {number} height - The rounded rectangle's height.
     * @param {number} radius - The rounded corner's radius.
     */
    fillRoundRect(x: number, y: number, width: number, height: number, radius: number): void;
    /**
     * Stroke a Point at the specified coordinates
     * @param {number} x - x axis of the coordinate for the point.
     * @param {number} y - y axis of the coordinate for the point.
     */
    strokePoint(x: number, y: number): void;
    /**
     * Draw a point at the specified coordinates
     * @param {number} x - x axis of the coordinate for the point.
     * @param {number} y - y axis of the coordinate for the point.
     */
    fillPoint(x: number, y: number): void;
    /**
     * Reset (overrides) the renderer transformation matrix to the
     * identity one, and then apply the given transformation matrix.
     * @param {Matrix2d|Matrix3d|number} a - a matrix to transform by, or the a component to multiply the current matrix by
     * @param {number} b - the b component to multiply the current matrix by
     * @param {number} c - the c component to multiply the current matrix by
     * @param {number} d - the d component to multiply the current matrix by
     * @param {number} e - the e component to multiply the current matrix by
     * @param {number} f - the f component to multiply the current matrix by
     */
    setTransform(a: Matrix2d | Matrix3d | number, b: number, c: number, d: number, e: number, f: number): void;
    /**
     * Multiply given matrix into the renderer tranformation matrix
     * @see {@link WebGLRenderer.setTransform} which will reset the current transform matrix prior to performing the new transformation
     * @param {Matrix2d|Matrix3d|number} a - a matrix to transform by, or the a component to multiply the current matrix by
     * @param {number} b - the b component to multiply the current matrix by
     * @param {number} c - the c component to multiply the current matrix by
     * @param {number} d - the d component to multiply the current matrix by
     * @param {number} e - the e component to multiply the current matrix by
     * @param {number} f - the f component to multiply the current matrix by
     */
    transform(a: Matrix2d | Matrix3d | number, b: number, c: number, d: number, e: number, f: number): void;
    /**
     * adds a translation transformation to the current matrix.
     * @param {number} x - Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
     * @param {number} y - Distance to move in the vertical direction. Positive values are down, and negative are up.
     */
    translate(x: number, y: number): void;
    /**
     * clip the given region from the original canvas. Once a region is clipped,
     * all future drawing will be limited to the clipped region.
     * You can however save the current region using the save(),
     * and restore it (with the restore() method) any time in the future.
     * (<u>this is an experimental feature !</u>)
     * @param {number} x - x axis of the coordinate for the upper-left corner of the rectangle to start clipping from.
     * @param {number} y - y axis of the coordinate for the upper-left corner of the rectangle to start clipping from.
     * @param {number} width - the width of the rectangle to start clipping from.
     * @param {number} height - the height of the rectangle to start clipping from.
     */
    clipRect(x: number, y: number, width: number, height: number): void;
    /**
     * A mask limits rendering elements to the shape and position of the given mask object.
     * If the drawing or rendering area is larger than the mask, only the intersecting part of the renderable will be visible.
     * (Note Mask are not preserved through renderer context save and restore and need so be manually cleared)
     * @see CanvasRenderer#clearMask
     * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] - a shape defining the mask to be applied
     * @param {boolean} [invert=false] - either the given shape should define what is visible (default) or the opposite
     */
    setMask(mask?: Rect | RoundRect | Polygon | Line | Ellipse, invert?: boolean): void;
    #private;
}
import Renderer from "./../renderer.js";
import { Matrix3d } from "../../math/matrix3d.ts";
import type { Batcher } from "./batchers/batcher.js";
import TextureCache from "./../texture/cache.js";
import { TextureAtlas } from "./../texture/atlas.js";
import { Color } from "./../../math/color.ts";
import type { Rect } from "./../../geometries/rectangle.ts";
import type { RoundRect } from "./../../geometries/roundrect.ts";
import type { Polygon } from "../../geometries/polygon.ts";
import type { Line } from "./../../geometries/line.ts";
import type { Ellipse } from "./../../geometries/ellipse.ts";
import type { Matrix2d } from "../../math/matrix2d.ts";
//# sourceMappingURL=webgl_renderer.d.ts.map