This commit is contained in:
Akko
2025-08-04 18:57:35 +02:00
parent 8cf6e78a79
commit 9495868c2e
5030 changed files with 518594 additions and 17609 deletions

View File

@@ -0,0 +1,139 @@
import { ExtensionType } from '../../../../extensions/Extensions';
import { Container } from '../../../../scene/container/Container';
import { Texture } from '../texture/Texture';
import type { ColorSource } from '../../../../color/Color';
import type { ICanvas } from '../../../../environment/canvas/ICanvas';
import type { Rectangle } from '../../../../maths/shapes/Rectangle';
import type { Renderer } from '../../types';
import type { System } from '../system/System';
import type { GetPixelsOutput } from '../texture/GenerateCanvas';
declare const imageTypes: {
png: string;
jpg: string;
webp: string;
};
type Formats = keyof typeof imageTypes;
/**
* Options for creating an image from a renderer.
* @memberof rendering
*/
export interface ImageOptions {
/** The format of the image. */
format?: Formats;
/** The quality of the image. */
quality?: number;
}
/**
* Options for extracting content from a renderer.
* @memberof rendering
*/
export interface BaseExtractOptions {
/** The target to extract. */
target: Container | Texture;
/** The region of the target to extract. */
frame?: Rectangle;
/** The resolution of the extracted content. */
resolution?: number;
/** The color used to clear the extracted content. */
clearColor?: ColorSource;
/** Whether to enable anti-aliasing. This may affect performance. */
antialias?: boolean;
}
/**
* Options for extracting an HTMLImage from the renderer.
* @memberof rendering
*/
export type ExtractImageOptions = BaseExtractOptions & ImageOptions;
/**
* Options for extracting and downloading content from a renderer.
* @memberof rendering
*/
export type ExtractDownloadOptions = BaseExtractOptions & {
/** The filename to use when downloading the content. */
filename: string;
};
/**
* Options for extracting content from a renderer.
* @memberof rendering
*/
export type ExtractOptions = BaseExtractOptions | ExtractImageOptions | ExtractDownloadOptions;
/**
* This class provides renderer-specific plugins for exporting content from a renderer.
* For instance, these plugins can be used for saving an Image, Canvas element or for exporting the raw image data (pixels).
*
* Do not instantiate these plugins directly. It is available from the `renderer.extract` property.
* @example
* import { Application, Graphics } from 'pixi.js';
*
* // Create a new application (extract will be auto-added to renderer)
* const app = new Application();
* await app.init();
*
* // Draw a red circle
* const graphics = new Graphics()
* .circle(0, 0, 50);
* .fill(0xFF0000)
*
* // Render the graphics as an HTMLImageElement
* const image = await app.renderer.extract.image(graphics);
* document.body.appendChild(image);
* @memberof rendering
*/
export declare class ExtractSystem implements System {
/** @ignore */
static extension: {
readonly type: readonly [ExtensionType.WebGLSystem, ExtensionType.WebGPUSystem];
readonly name: "extract";
};
/** Default options for creating an image. */
static defaultImageOptions: ImageOptions;
private _renderer;
/** @param renderer - The renderer this System works for. */
constructor(renderer: Renderer);
private _normalizeOptions;
/**
* Will return a HTML Image of the target
* @param options - The options for creating the image, or the target to extract
* @returns - HTML Image of the target
*/
image(options: ExtractImageOptions | Container | Texture): Promise<HTMLImageElement>;
/**
* Will return a base64 encoded string of this target. It works by calling
* `Extract.canvas` and then running toDataURL on that.
* @param options - The options for creating the image, or the target to extract
*/
base64(options: ExtractImageOptions | Container | Texture): Promise<string>;
/**
* Creates a Canvas element, renders this target to it and then returns it.
* @param options - The options for creating the canvas, or the target to extract
* @returns - A Canvas element with the texture rendered on.
*/
canvas(options: ExtractOptions | Container | Texture): ICanvas;
/**
* Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
* order, with integer values between 0 and 255 (included).
* @param options - The options for extracting the image, or the target to extract
* @returns - One-dimensional array containing the pixel data of the entire texture
*/
pixels(options: ExtractOptions | Container | Texture): GetPixelsOutput;
/**
* Will return a texture of the target
* @param options - The options for creating the texture, or the target to extract
* @returns - A texture of the target
*/
texture(options: ExtractOptions | Container | Texture): Texture;
/**
* Will extract a HTMLImage of the target and download it
* @param options - The options for downloading and extracting the image, or the target to extract
*/
download(options: ExtractDownloadOptions | Container | Texture): void;
/**
* Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.
* @param options - The options for logging the image, or the target to log
*/
log(options: (ExtractOptions & {
width?: number;
}) | Container | Texture): void;
destroy(): void;
}
export {};

View File

@@ -0,0 +1,179 @@
'use strict';
var Extensions = require('../../../../extensions/Extensions.js');
var Container = require('../../../../scene/container/Container.js');
var Texture = require('../texture/Texture.js');
"use strict";
const imageTypes = {
png: "image/png",
jpg: "image/jpeg",
webp: "image/webp"
};
const _ExtractSystem = class _ExtractSystem {
/** @param renderer - The renderer this System works for. */
constructor(renderer) {
this._renderer = renderer;
}
_normalizeOptions(options, defaults = {}) {
if (options instanceof Container.Container || options instanceof Texture.Texture) {
return {
target: options,
...defaults
};
}
return {
...defaults,
...options
};
}
/**
* Will return a HTML Image of the target
* @param options - The options for creating the image, or the target to extract
* @returns - HTML Image of the target
*/
async image(options) {
const image = new Image();
image.src = await this.base64(options);
return image;
}
/**
* Will return a base64 encoded string of this target. It works by calling
* `Extract.canvas` and then running toDataURL on that.
* @param options - The options for creating the image, or the target to extract
*/
async base64(options) {
options = this._normalizeOptions(
options,
_ExtractSystem.defaultImageOptions
);
const { format, quality } = options;
const canvas = this.canvas(options);
if (canvas.toBlob !== void 0) {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error("ICanvas.toBlob failed!"));
return;
}
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
}, imageTypes[format], quality);
});
}
if (canvas.toDataURL !== void 0) {
return canvas.toDataURL(imageTypes[format], quality);
}
if (canvas.convertToBlob !== void 0) {
const blob = await canvas.convertToBlob({ type: imageTypes[format], quality });
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
throw new Error("Extract.base64() requires ICanvas.toDataURL, ICanvas.toBlob, or ICanvas.convertToBlob to be implemented");
}
/**
* Creates a Canvas element, renders this target to it and then returns it.
* @param options - The options for creating the canvas, or the target to extract
* @returns - A Canvas element with the texture rendered on.
*/
canvas(options) {
options = this._normalizeOptions(options);
const target = options.target;
const renderer = this._renderer;
if (target instanceof Texture.Texture) {
return renderer.texture.generateCanvas(target);
}
const texture = renderer.textureGenerator.generateTexture(options);
const canvas = renderer.texture.generateCanvas(texture);
texture.destroy();
return canvas;
}
/**
* Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
* order, with integer values between 0 and 255 (included).
* @param options - The options for extracting the image, or the target to extract
* @returns - One-dimensional array containing the pixel data of the entire texture
*/
pixels(options) {
options = this._normalizeOptions(options);
const target = options.target;
const renderer = this._renderer;
const texture = target instanceof Texture.Texture ? target : renderer.textureGenerator.generateTexture(options);
const pixelInfo = renderer.texture.getPixels(texture);
if (target instanceof Container.Container) {
texture.destroy();
}
return pixelInfo;
}
/**
* Will return a texture of the target
* @param options - The options for creating the texture, or the target to extract
* @returns - A texture of the target
*/
texture(options) {
options = this._normalizeOptions(options);
if (options.target instanceof Texture.Texture)
return options.target;
return this._renderer.textureGenerator.generateTexture(options);
}
/**
* Will extract a HTMLImage of the target and download it
* @param options - The options for downloading and extracting the image, or the target to extract
*/
download(options) {
options = this._normalizeOptions(options);
const canvas = this.canvas(options);
const link = document.createElement("a");
link.download = options.filename ?? "image.png";
link.href = canvas.toDataURL("image/png");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.
* @param options - The options for logging the image, or the target to log
*/
log(options) {
const width = options.width ?? 200;
options = this._normalizeOptions(options);
const canvas = this.canvas(options);
const base64 = canvas.toDataURL();
console.log(`[Pixi Texture] ${canvas.width}px ${canvas.height}px`);
const style = [
"font-size: 1px;",
`padding: ${width}px ${300}px;`,
`background: url(${base64}) no-repeat;`,
"background-size: contain;"
].join(" ");
console.log("%c ", style);
}
destroy() {
this._renderer = null;
}
};
/** @ignore */
_ExtractSystem.extension = {
type: [
Extensions.ExtensionType.WebGLSystem,
Extensions.ExtensionType.WebGPUSystem
],
name: "extract"
};
/** Default options for creating an image. */
_ExtractSystem.defaultImageOptions = {
/** The format of the image. */
format: "png",
/** The quality of the image. */
quality: 1
};
let ExtractSystem = _ExtractSystem;
exports.ExtractSystem = ExtractSystem;
//# sourceMappingURL=ExtractSystem.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,177 @@
import { ExtensionType } from '../../../../extensions/Extensions.mjs';
import { Container } from '../../../../scene/container/Container.mjs';
import { Texture } from '../texture/Texture.mjs';
"use strict";
const imageTypes = {
png: "image/png",
jpg: "image/jpeg",
webp: "image/webp"
};
const _ExtractSystem = class _ExtractSystem {
/** @param renderer - The renderer this System works for. */
constructor(renderer) {
this._renderer = renderer;
}
_normalizeOptions(options, defaults = {}) {
if (options instanceof Container || options instanceof Texture) {
return {
target: options,
...defaults
};
}
return {
...defaults,
...options
};
}
/**
* Will return a HTML Image of the target
* @param options - The options for creating the image, or the target to extract
* @returns - HTML Image of the target
*/
async image(options) {
const image = new Image();
image.src = await this.base64(options);
return image;
}
/**
* Will return a base64 encoded string of this target. It works by calling
* `Extract.canvas` and then running toDataURL on that.
* @param options - The options for creating the image, or the target to extract
*/
async base64(options) {
options = this._normalizeOptions(
options,
_ExtractSystem.defaultImageOptions
);
const { format, quality } = options;
const canvas = this.canvas(options);
if (canvas.toBlob !== void 0) {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error("ICanvas.toBlob failed!"));
return;
}
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
}, imageTypes[format], quality);
});
}
if (canvas.toDataURL !== void 0) {
return canvas.toDataURL(imageTypes[format], quality);
}
if (canvas.convertToBlob !== void 0) {
const blob = await canvas.convertToBlob({ type: imageTypes[format], quality });
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
throw new Error("Extract.base64() requires ICanvas.toDataURL, ICanvas.toBlob, or ICanvas.convertToBlob to be implemented");
}
/**
* Creates a Canvas element, renders this target to it and then returns it.
* @param options - The options for creating the canvas, or the target to extract
* @returns - A Canvas element with the texture rendered on.
*/
canvas(options) {
options = this._normalizeOptions(options);
const target = options.target;
const renderer = this._renderer;
if (target instanceof Texture) {
return renderer.texture.generateCanvas(target);
}
const texture = renderer.textureGenerator.generateTexture(options);
const canvas = renderer.texture.generateCanvas(texture);
texture.destroy();
return canvas;
}
/**
* Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
* order, with integer values between 0 and 255 (included).
* @param options - The options for extracting the image, or the target to extract
* @returns - One-dimensional array containing the pixel data of the entire texture
*/
pixels(options) {
options = this._normalizeOptions(options);
const target = options.target;
const renderer = this._renderer;
const texture = target instanceof Texture ? target : renderer.textureGenerator.generateTexture(options);
const pixelInfo = renderer.texture.getPixels(texture);
if (target instanceof Container) {
texture.destroy();
}
return pixelInfo;
}
/**
* Will return a texture of the target
* @param options - The options for creating the texture, or the target to extract
* @returns - A texture of the target
*/
texture(options) {
options = this._normalizeOptions(options);
if (options.target instanceof Texture)
return options.target;
return this._renderer.textureGenerator.generateTexture(options);
}
/**
* Will extract a HTMLImage of the target and download it
* @param options - The options for downloading and extracting the image, or the target to extract
*/
download(options) {
options = this._normalizeOptions(options);
const canvas = this.canvas(options);
const link = document.createElement("a");
link.download = options.filename ?? "image.png";
link.href = canvas.toDataURL("image/png");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.
* @param options - The options for logging the image, or the target to log
*/
log(options) {
const width = options.width ?? 200;
options = this._normalizeOptions(options);
const canvas = this.canvas(options);
const base64 = canvas.toDataURL();
console.log(`[Pixi Texture] ${canvas.width}px ${canvas.height}px`);
const style = [
"font-size: 1px;",
`padding: ${width}px ${300}px;`,
`background: url(${base64}) no-repeat;`,
"background-size: contain;"
].join(" ");
console.log("%c ", style);
}
destroy() {
this._renderer = null;
}
};
/** @ignore */
_ExtractSystem.extension = {
type: [
ExtensionType.WebGLSystem,
ExtensionType.WebGPUSystem
],
name: "extract"
};
/** Default options for creating an image. */
_ExtractSystem.defaultImageOptions = {
/** The format of the image. */
format: "png",
/** The quality of the image. */
quality: 1
};
let ExtractSystem = _ExtractSystem;
export { ExtractSystem };
//# sourceMappingURL=ExtractSystem.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,59 @@
import { type ColorSource } from '../../../../color/Color';
import { ExtensionType } from '../../../../extensions/Extensions';
import { Rectangle } from '../../../../maths/shapes/Rectangle';
import { Container } from '../../../../scene/container/Container';
import { RenderTexture } from '../texture/RenderTexture';
import type { Renderer } from '../../types';
import type { System } from '../system/System';
import type { TextureSourceOptions } from '../texture/sources/TextureSource';
export type GenerateTextureSourceOptions = Omit<TextureSourceOptions, 'resource' | 'width' | 'height' | 'resolution'>;
/**
* Options for generating a texture from a container.
* @memberof rendering
*/
export type GenerateTextureOptions = {
/** The container to generate the texture from */
target: Container;
/**
* The region of the container, that shall be rendered,
* if no region is specified, defaults to the local bounds of the container.
*/
frame?: Rectangle;
/** The resolution of the texture being generated. */
resolution?: number;
/** The color used to clear the texture. */
clearColor?: ColorSource;
/** Whether to enable anti-aliasing. This may affect performance. */
antialias?: boolean;
/** The options passed to the texture source. */
textureSourceOptions?: GenerateTextureSourceOptions;
};
/**
* System that manages the generation of textures from the renderer
*
*
* Do not instantiate these plugins directly. It is available from the `renderer.textureGenerator` property.
* @memberof rendering
*/
export declare class GenerateTextureSystem implements System {
/** @ignore */
static extension: {
readonly type: readonly [ExtensionType.WebGLSystem, ExtensionType.WebGPUSystem];
readonly name: "textureGenerator";
};
private readonly _renderer;
constructor(renderer: Renderer);
/**
* A Useful function that returns a texture of the display object that can then be used to create sprites
* This can be quite useful if your container is complicated and needs to be reused multiple times.
* @param {GenerateTextureOptions | Container} options - Generate texture options.
* @param {Container} [options.container] - If not given, the renderer's resolution is used.
* @param {Rectangle} options.region - The region of the container, that shall be rendered,
* @param {number} [options.resolution] - The resolution of the texture being generated.
* if no region is specified, defaults to the local bounds of the container.
* @param {GenerateTextureSourceOptions} [options.textureSourceOptions] - Texture options for GPU.
* @returns a shiny new texture of the container passed in
*/
generateTexture(options: GenerateTextureOptions | Container): RenderTexture;
destroy(): void;
}

View File

@@ -0,0 +1,84 @@
'use strict';
var Color = require('../../../../color/Color.js');
var Extensions = require('../../../../extensions/Extensions.js');
var Matrix = require('../../../../maths/matrix/Matrix.js');
var Rectangle = require('../../../../maths/shapes/Rectangle.js');
var Bounds = require('../../../../scene/container/bounds/Bounds.js');
var getLocalBounds = require('../../../../scene/container/bounds/getLocalBounds.js');
var Container = require('../../../../scene/container/Container.js');
var RenderTexture = require('../texture/RenderTexture.js');
"use strict";
const tempRect = new Rectangle.Rectangle();
const tempBounds = new Bounds.Bounds();
const noColor = [0, 0, 0, 0];
class GenerateTextureSystem {
constructor(renderer) {
this._renderer = renderer;
}
/**
* A Useful function that returns a texture of the display object that can then be used to create sprites
* This can be quite useful if your container is complicated and needs to be reused multiple times.
* @param {GenerateTextureOptions | Container} options - Generate texture options.
* @param {Container} [options.container] - If not given, the renderer's resolution is used.
* @param {Rectangle} options.region - The region of the container, that shall be rendered,
* @param {number} [options.resolution] - The resolution of the texture being generated.
* if no region is specified, defaults to the local bounds of the container.
* @param {GenerateTextureSourceOptions} [options.textureSourceOptions] - Texture options for GPU.
* @returns a shiny new texture of the container passed in
*/
generateTexture(options) {
if (options instanceof Container.Container) {
options = {
target: options,
frame: void 0,
textureSourceOptions: {},
resolution: void 0
};
}
const resolution = options.resolution || this._renderer.resolution;
const antialias = options.antialias || this._renderer.view.antialias;
const container = options.target;
let clearColor = options.clearColor;
if (clearColor) {
const isRGBAArray = Array.isArray(clearColor) && clearColor.length === 4;
clearColor = isRGBAArray ? clearColor : Color.Color.shared.setValue(clearColor).toArray();
} else {
clearColor = noColor;
}
const region = options.frame?.copyTo(tempRect) || getLocalBounds.getLocalBounds(container, tempBounds).rectangle;
region.width = Math.max(region.width, 1 / resolution) | 0;
region.height = Math.max(region.height, 1 / resolution) | 0;
const target = RenderTexture.RenderTexture.create({
...options.textureSourceOptions,
width: region.width,
height: region.height,
resolution,
antialias
});
const transform = Matrix.Matrix.shared.translate(-region.x, -region.y);
this._renderer.render({
container,
transform,
target,
clearColor
});
target.source.updateMipmaps();
return target;
}
destroy() {
this._renderer = null;
}
}
/** @ignore */
GenerateTextureSystem.extension = {
type: [
Extensions.ExtensionType.WebGLSystem,
Extensions.ExtensionType.WebGPUSystem
],
name: "textureGenerator"
};
exports.GenerateTextureSystem = GenerateTextureSystem;
//# sourceMappingURL=GenerateTextureSystem.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,82 @@
import { Color } from '../../../../color/Color.mjs';
import { ExtensionType } from '../../../../extensions/Extensions.mjs';
import { Matrix } from '../../../../maths/matrix/Matrix.mjs';
import { Rectangle } from '../../../../maths/shapes/Rectangle.mjs';
import { Bounds } from '../../../../scene/container/bounds/Bounds.mjs';
import { getLocalBounds } from '../../../../scene/container/bounds/getLocalBounds.mjs';
import { Container } from '../../../../scene/container/Container.mjs';
import { RenderTexture } from '../texture/RenderTexture.mjs';
"use strict";
const tempRect = new Rectangle();
const tempBounds = new Bounds();
const noColor = [0, 0, 0, 0];
class GenerateTextureSystem {
constructor(renderer) {
this._renderer = renderer;
}
/**
* A Useful function that returns a texture of the display object that can then be used to create sprites
* This can be quite useful if your container is complicated and needs to be reused multiple times.
* @param {GenerateTextureOptions | Container} options - Generate texture options.
* @param {Container} [options.container] - If not given, the renderer's resolution is used.
* @param {Rectangle} options.region - The region of the container, that shall be rendered,
* @param {number} [options.resolution] - The resolution of the texture being generated.
* if no region is specified, defaults to the local bounds of the container.
* @param {GenerateTextureSourceOptions} [options.textureSourceOptions] - Texture options for GPU.
* @returns a shiny new texture of the container passed in
*/
generateTexture(options) {
if (options instanceof Container) {
options = {
target: options,
frame: void 0,
textureSourceOptions: {},
resolution: void 0
};
}
const resolution = options.resolution || this._renderer.resolution;
const antialias = options.antialias || this._renderer.view.antialias;
const container = options.target;
let clearColor = options.clearColor;
if (clearColor) {
const isRGBAArray = Array.isArray(clearColor) && clearColor.length === 4;
clearColor = isRGBAArray ? clearColor : Color.shared.setValue(clearColor).toArray();
} else {
clearColor = noColor;
}
const region = options.frame?.copyTo(tempRect) || getLocalBounds(container, tempBounds).rectangle;
region.width = Math.max(region.width, 1 / resolution) | 0;
region.height = Math.max(region.height, 1 / resolution) | 0;
const target = RenderTexture.create({
...options.textureSourceOptions,
width: region.width,
height: region.height,
resolution,
antialias
});
const transform = Matrix.shared.translate(-region.x, -region.y);
this._renderer.render({
container,
transform,
target,
clearColor
});
target.source.updateMipmaps();
return target;
}
destroy() {
this._renderer = null;
}
}
/** @ignore */
GenerateTextureSystem.extension = {
type: [
ExtensionType.WebGLSystem,
ExtensionType.WebGPUSystem
],
name: "textureGenerator"
};
export { GenerateTextureSystem };
//# sourceMappingURL=GenerateTextureSystem.mjs.map

File diff suppressed because one or more lines are too long