/** * 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 * @type {WebGLRenderingContext} */ gl: WebGLRenderingContext; /** * 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 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 {WebGLBatcher} */ currentBatcher: WebGLBatcher; set currentProgram(value: WebGLProgram | undefined); /** * Returns the WebGLContext instance for the renderer * return a reference to the system 2d Context * @returns {WebGLRenderingContext} the current WebGL context */ /** * The shader program the GL context actually has bound. * * Backed by the CONTEXT rather than by a field on this renderer, because * `GLShader` binds programs too — writing a uniform calls `useProgram`, * and a freshly linked program is left bound — and it is constructed with * a bare `gl`, so it cannot reach a renderer-owned cache. A field here * would silently drift out of step with GL, and every batcher that * compares against it (`syncProgram`, the mesh and primitive paths) would * skip a rebind it actually needed, drawing a pending batch through the * wrong program. * @type {WebGLProgram|undefined} */ get currentProgram(): WebGLProgram | undefined; /** * The list of active batchers * @type {Map} */ batchers: Map; cache: TextureCache; onGameReset: () => void; onContextRestoredInvalidate: (renderer: any) => void; onCanvasResize: (width: any, height: any) => void; /** * The WebGL version used by this renderer. * @type {number} * @default 2 * @deprecated since 20.0.0 — the WebGL renderer is WebGL 2 only, this is always `2` */ get WebGLVersion(): number; /** * Reset context state */ /** * Tear down this renderer and free GPU/event resources. Walks every * registered batcher's `destroy()` so cross-renderer subscriptions * (`GPU_TEXTURE_CACHE_RESET` on `MaterialBatcher`, etc.) don't * leak across `Application.destroy()` cycles. Safe to call multiple * times — subsequent calls are no-ops. */ /** * Release any GPU geometry retained for the given mesh. Called when a mesh * is destroyed; harmless if it never had any. * @param {object} mesh - the mesh whose geometry should be freed */ deleteMeshGeometry(mesh: object): void; /** * 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; /** * add a new batcher to this renderer * @param {WebGLBatcher} batcher - a batcher instance (must extend WebGLBatcher) * @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: WebGLBatcher, 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 {WebGLBatcher} an instance to the current active batcher */ setBatcher(name?: string, shader?: GLShader): WebGLBatcher; /** * 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; /** * Upload per-frame Light2d uniforms used by the lit sprite pipeline. * * Packs the active lights into pre-allocated scratch buffers, then * forwards to `LitQuadBatcher`. Light positions are translated from * world-space (where `light.getBounds().centerX/Y` lives) into the * renderer's pre-projection coords by subtracting `(translateX, translateY)`, * matching what `Stage.drawLighting` does for the cutout pass — so * the lit fragment's `lightPos - vWorldPos` math lines up with the * camera's view. * * Lights past `MAX_LIGHTS` are silently dropped. Also caches the * active light count on the renderer so `drawImage` can dispatch * normal-mapped sprites to the lit batcher only when there's * something to light them with. * @param {Iterable} [lights] - active `Light2d` instances; falsy/empty no-ops the lit pipeline * @param {object} [ambient] - ambient lighting color (0..255 RGB); defaults to black * @param {number} [translateX=0] - world-to-screen X translate (matches `Camera2d.draw()`) * @param {number} [translateY=0] - world-to-screen Y translate */ setLightUniforms(lights?: Iterable, ambient?: object, translateX?: number, translateY?: 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; drawInstancedShadow(mesh: any, shadowMatrix: any, quad: any): void; drawMesh(mesh: any, modelMatrix: any): 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} radii - The corner radius. */ roundRect(x: number, y: number, width: number, height: number, radii: number): 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; getContext(): WebGLRenderingContext; /** * set the current blend mode for this renderer.
* Both GPU renderers support the full set — the Canvas fallback supports * every mode below except `"none"`:
* - "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)
*
* - "darken" : retains the darkest pixels of both layers
*
* - "lighten" : retains the lightest pixels of both layers
*
* - "overlay" : multiplies or screens, depending on the backdrop
*
* - "hard-light" : overlay with the layers swapped — a harsh spotlight
*
* - "soft-light" : a diffused spotlight, gentler than hard-light
*
* - "color-dodge" : brightens the backdrop to reflect the source
*
* - "color-burn" : darkens the backdrop to reflect the source
*
* - "difference" : the absolute difference of the two layers
*
* - "exclusion" : like difference, but lower in contrast
*
* - "none" : blending disabled — the source replaces the destination * outright, alpha included
* A few draw types cannot honour every mode — 3D meshes, and fills using * a {@link Gradient} — and fall back to "normal" with a one-time console * warning. `setBlendMode` returns what it actually applied, so comparing * the result against your request detects that case. * @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 the 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; omitted when `a` is a matrix * @param {number} [c] - the c component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [d] - the d component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [e] - the e component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [f] - the f component to multiply the current matrix by; omitted when `a` is a matrix */ 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; omitted when `a` is a matrix * @param {number} [c] - the c component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [d] - the d component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [e] - the e component to multiply the current matrix by; omitted when `a` is a matrix * @param {number} [f] - the f component to multiply the current matrix by; omitted when `a` is a matrix */ transform(a: Matrix2d | Matrix3d | number, b?: number, c?: number, d?: number, e?: number, f?: number): void; #private; } import Renderer from "./../renderer.js"; import RenderTargetPool from "../rendertarget/render_target_pool.js"; import BlendEffect from "../effects/blendEffect.js"; import WebGLRenderTarget from "../rendertarget/webglrendertarget.js"; import { GLSamplerCache } from "./utils/samplercache.js"; import { Bounds } from "../../physics/bounds.ts"; import { Matrix3d } from "../../math/matrix3d.ts"; import { WebGLBatcher } 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 { FrameTexture } from "./../texture/frametexture.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