/** * 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; /** * Saved projection matrix for begin/endPostEffect. * @type {Matrix3d} * @ignore */ _savedEffectProjection: Matrix3d; /** * 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; }[]; _clipAABB: Bounds; _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} */ batchers: Map; _scissorActive: boolean; cache: TextureCache; /** * The WebGL version used by this renderer (1 or 2) * @type {number} * @default 1 */ get WebGLVersion(): number; _lightShader: RadialGradientEffect | undefined; _lightAtlas: TextureAtlas | undefined; _orthogonalTMXGPURenderer: OrthogonalTMXLayerGPURenderer | null | undefined; /** * Draw a TMX tile layer through whichever path the layer's `renderMode` * resolves to. WebGL2-eligible layers (`renderMode === "shader"`) take * the procedural shader path — one quad per tileset, GID lookup in a * per-layer data texture. All other layers fall through to the base * `Renderer.drawTileLayer` (preRender blit or per-tile loop). * @param {object} layer - the TMXLayer to draw * @param {object} rect - the visible region in world coords */ drawTileLayer(layer: object, rect: object): void; /** * Lazy-init the orientation-specific GPU tilemap renderer. * @param {string} orientation * @returns {object|undefined} * @ignore */ _getTMXGPURendererFor(orientation: string): object | undefined; /** * 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="no-repeat"] - Define how the pattern should be repeated. One of `"repeat"` / `"repeat-x"` / `"repeat-y"` / `"no-repeat"`. * @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; _lightUniformsScratch: import("./lighting/pack.ts").LightUniformScratch | undefined; /** * Lazy-init a shared 1×1 white `TextureAtlas` used as the source * texture for `drawLight`'s procedural shader. The shader ignores * the sampled color, but `addQuad`'s vertex format includes a * texture-unit attribute so we still need a real texture; sharing * one across every light keeps them on the same multi-texture slot * (no flush on light switch). * @returns {TextureAtlas} * @ignore */ _getLightAtlas(): TextureAtlas; /** @ignore */ endPostEffect(renderable: any): 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.
* All renderers support:
* - "normal" : draws new content on top of the existing content
*
* - "add", "additive", or "lighter" : color values are added together
*
* - "multiply" : pixels are multiplied, resulting in a darker picture
*
* - "screen" : pixels are inverted, multiplied, and inverted again (opposite of multiply)
*
* WebGL2 additionally supports:
* - "darken" : retains the darkest pixels of both layers
*
* - "lighten" : retains the lightest pixels of both layers
*
* 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.
* @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; /** * 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; /** * 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; /** * 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; /** * 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. * (this is an experimental feature !) * @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 { Bounds } from "../../physics/bounds.ts"; import type { Batcher } from "./batchers/batcher.js"; import TextureCache from "./../texture/cache.js"; import RadialGradientEffect from "./effects/radialGradient.js"; import { TextureAtlas } from "./../texture/atlas.js"; import OrthogonalTMXLayerGPURenderer from "./renderers/tmxlayer/orthogonal.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