@next2d/player 1.14.7 → 1.14.9

package/dist/renderer/RenderPlayer.d.ts

@@ -0,0 +1,164 @@
+import { CacheStore } from "../player/util/CacheStore";
+import { CanvasToWebGLContext } from "../webgl/CanvasToWebGLContext";
+import type { RenderDisplayObjectImpl } from "../interface/RenderDisplayObjectImpl";
+import type { PropertyContainerMessageImpl } from "../interface/PropertyContainerMessageImpl";
+import type { PropertyShapeMessageImpl } from "../interface/PropertyShapeMessageImpl";
+import type { PropertyTextMessageImpl } from "../interface/PropertyTextMessageImpl";
+import type { PropertyVideoMessageImpl } from "../interface/PropertyVideoMessageImpl";
+/**
+ * @class
+ */
+export declare class RenderPlayer {
+    private readonly _$instances;
+    private readonly _$cacheStore;
+    private readonly _$matrix;
+    private readonly _$colorTransform;
+    private _$context;
+    private _$canvas;
+    private _$samples;
+    private _$width;
+    private _$height;
+    private readonly _$stage;
+    private _$attachment;
+    /**
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @return {Map}
+     * @readonly
+     * @public
+     */
+    get instances(): Map<number, RenderDisplayObjectImpl<any>>;
+    /**
+     * @return {CacheStore}
+     * @readonly
+     * @public
+     */
+    get cacheStore(): CacheStore;
+    /**
+     * @return {CanvasToWebGLContext}
+     * @readonly
+     * @public
+     */
+    get context(): CanvasToWebGLContext | null;
+    /**
+     * @return {number}
+     * @readonly
+     * @public
+     */
+    get scaleX(): number;
+    /**
+     * @description 描画の停止
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    stop(): void;
+    /**
+     * @description WebGLを起動
+     *
+     * @param  {OffscreenCanvas} canvas
+     * @param  {number} [samples=4]
+     * @param  {number} [device_pixel_ratio=2]
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$initialize(canvas: OffscreenCanvas, samples?: number, device_pixel_ratio?: number): void;
+    /**
+     * @description 背景色をセット
+     *
+     * @param  {string} [background_color="transparent"]
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$setBackgroundColor(background_color?: string): void;
+    /**
+     * @description 指定canvasに転写
+     *
+     * @param  {RenderDisplayObject} source
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @param  {OffscreenCanvas} canvas
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$bitmapDraw(source: RenderDisplayObjectImpl<any>, matrix: Float32Array, color_transform: Float32Array, canvas: OffscreenCanvas): void;
+    /**
+     * @description 描画処理を実行
+     *
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$draw(): void;
+    /**
+     * @description 描画範囲のサイズを変更
+     *
+     * @param  {number} width
+     * @param  {number} height
+     * @param  {number} scale
+     * @param  {number} [tx = 0]
+     * @param  {number} [ty = 0]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$resize(width: number, height: number, scale: number, tx?: number, ty?: number): void;
+    /**
+     * @param  {number} instance_id
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setStage(instance_id: number): void;
+    /**
+     * @description Stageの更新情報をセット
+     *
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$updateStage(): void;
+    /**
+     * @description DisplayObjectContainerクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createDisplayObjectContainer(object: PropertyContainerMessageImpl): void;
+    /**
+     * @description Shapeクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createShape(object: PropertyShapeMessageImpl): void;
+    /**
+     * @description Videoクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createVideo(object: PropertyVideoMessageImpl): void;
+    /**
+     * @description TextFieldクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createTextField(object: PropertyTextMessageImpl): void;
+}

package/dist/renderer/RenderPlayer.js

@@ -0,0 +1,421 @@
+import { CacheStore } from "../player/util/CacheStore";
+import { RenderDisplayObjectContainer } from "./RenderDisplayObjectContainer";
+import { Rectangle } from "../player/next2d/geom/Rectangle";
+import { CanvasToWebGLContext } from "../webgl/CanvasToWebGLContext";
+import { $COLOR_ARRAY_IDENTITY, $Float32Array, $getFloat32Array6, $toColorInt, $uintToRGBA } from "../player/util/RenderUtil";
+import { $getDisplayObjectContainer, $getShape, $getTextField, $getVideo, $setDevicePixelRatio } from "./RenderGlobal";
+/**
+ * @class
+ */
+export class RenderPlayer {
+    _$instances;
+    _$cacheStore;
+    _$matrix;
+    _$colorTransform;
+    _$context;
+    _$canvas;
+    _$samples;
+    _$width;
+    _$height;
+    _$stage;
+    _$attachment;
+    /**
+     * @constructor
+     * @public
+     */
+    constructor() {
+        /**
+         * @type {Map}
+         * @private
+         */
+        this._$instances = new Map();
+        /**
+         * @type {CacheStore}
+         * @private
+         */
+        this._$cacheStore = new CacheStore();
+        /**
+         * @type {Float32Array}
+         * @default null
+         * @private
+         */
+        this._$matrix = $getFloat32Array6(1, 0, 0, 1, 0, 0);
+        /**
+         * @type {Float32Array}
+         * @default null
+         * @private
+         */
+        this._$colorTransform = new $Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$width = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$height = 0;
+        /**
+         * @type {RenderDisplayObjectContainer}
+         * @default null
+         * @private
+         */
+        this._$stage = new RenderDisplayObjectContainer();
+        /**
+         * @type {number}
+         * @default 4
+         * @private
+         */
+        this._$samples = 4;
+        /**
+         * @type {OffscreenCanvas}
+         * @default null
+         * @private
+         */
+        this._$canvas = null;
+        /**
+         * @type {CanvasToWebGLContext}
+         * @default null
+         * @private
+         */
+        this._$context = null;
+        /**
+         * @type {object}
+         * @default null
+         * @private
+         */
+        this._$attachment = null;
+    }
+    /**
+     * @return {Map}
+     * @readonly
+     * @public
+     */
+    get instances() {
+        return this._$instances;
+    }
+    /**
+     * @return {CacheStore}
+     * @readonly
+     * @public
+     */
+    get cacheStore() {
+        return this._$cacheStore;
+    }
+    /**
+     * @return {CanvasToWebGLContext}
+     * @readonly
+     * @public
+     */
+    get context() {
+        return this._$context;
+    }
+    /**
+     * @return {number}
+     * @readonly
+     * @public
+     */
+    get scaleX() {
+        return this._$matrix[0];
+    }
+    /**
+     * @description 描画の停止
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    stop() {
+        this._$cacheStore.reset();
+    }
+    /**
+     * @description WebGLを起動
+     *
+     * @param  {OffscreenCanvas} canvas
+     * @param  {number} [samples=4]
+     * @param  {number} [device_pixel_ratio=2]
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$initialize(canvas, samples = 4, device_pixel_ratio = 2) {
+        // update
+        $setDevicePixelRatio(device_pixel_ratio);
+        this._$samples = samples;
+        this._$canvas = canvas;
+        const gl = canvas.getContext("webgl2", {
+            "stencil": true,
+            "premultipliedAlpha": true,
+            "antialias": false,
+            "depth": false,
+            "preserveDrawingBuffer": true
+        });
+        if (gl) {
+            const context = new CanvasToWebGLContext(gl, samples);
+            this._$context = context;
+            this._$cacheStore.context = context;
+        }
+    }
+    /**
+     * @description 背景色をセット
+     *
+     * @param  {string} [background_color="transparent"]
+     * @return {void}
+     * @method
+     * @public
+     */
+    _$setBackgroundColor(background_color = "transparent") {
+        if (!this._$context) {
+            return;
+        }
+        if (background_color === "transparent") {
+            this._$context._$setColor(0, 0, 0, 0);
+        }
+        else {
+            const color = $uintToRGBA($toColorInt(background_color));
+            this._$context._$setColor(color.R / 255, color.G / 255, color.B / 255, 1);
+        }
+    }
+    /**
+     * @description 指定canvasに転写
+     *
+     * @param  {RenderDisplayObject} source
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @param  {OffscreenCanvas} canvas
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$bitmapDraw(source, matrix, color_transform, canvas) {
+        const context = this._$context;
+        if (!context) {
+            return;
+        }
+        context._$bind(this._$attachment);
+        // reset
+        context.reset();
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, this._$width, this._$height);
+        context.beginPath();
+        source._$draw(context, matrix, color_transform);
+        const manager = context.frameBuffer;
+        const texture = manager.getTextureFromCurrentAttachment();
+        manager.unbind();
+        // reset and draw to main canvas
+        context.reset();
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, this._$width, this._$height);
+        context.drawImage(texture, 0, 0, this._$width, this._$height);
+        // re bind
+        context._$bind(this._$attachment);
+        const ctx = canvas.getContext("2d");
+        if (ctx && this._$canvas) {
+            ctx.drawImage(this._$canvas, 0, 0);
+        }
+    }
+    /**
+     * @description 描画処理を実行
+     *
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$draw() {
+        if (!this._$width || !this._$height) {
+            return;
+        }
+        // if (!this._$stage._$updated) {
+        //     return ;
+        // }
+        const context = this._$context;
+        if (!context) {
+            return;
+        }
+        context._$bind(this._$attachment);
+        // reset
+        context.reset();
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, this._$width, this._$height);
+        context.beginPath();
+        this._$stage._$draw(context, this._$matrix, $COLOR_ARRAY_IDENTITY);
+        // stage end
+        this._$stage._$updated = false;
+        const manager = context.frameBuffer;
+        const texture = manager.getTextureFromCurrentAttachment();
+        manager.unbind();
+        // reset and draw to main canvas
+        context.reset();
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.clearRect(0, 0, this._$width, this._$height);
+        context.drawImage(texture, 0, 0, this._$width, this._$height);
+        // re bind
+        context._$bind(this._$attachment);
+    }
+    /**
+     * @description 描画範囲のサイズを変更
+     *
+     * @param  {number} width
+     * @param  {number} height
+     * @param  {number} scale
+     * @param  {number} [tx = 0]
+     * @param  {number} [ty = 0]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$resize(width, height, scale, tx = 0, ty = 0) {
+        this._$width = width;
+        this._$height = height;
+        if (!this._$canvas) {
+            return;
+        }
+        this._$canvas.width = width;
+        this._$canvas.height = height;
+        const context = this._$context;
+        if (!context) {
+            return;
+        }
+        context._$gl.viewport(0, 0, width, height);
+        const manager = context.frameBuffer;
+        if (this._$attachment) {
+            manager.unbind();
+            manager.releaseAttachment(this._$attachment, true);
+        }
+        this._$attachment = manager
+            .createCacheAttachment(width, height, false);
+        this._$matrix[0] = scale;
+        this._$matrix[3] = scale;
+        this._$matrix[4] = tx;
+        this._$matrix[5] = ty;
+        // update cache max size
+        manager.setMaxSize(width, height);
+        this._$stage._$updated = true;
+        this._$cacheStore.reset();
+    }
+    /**
+     * @param  {number} instance_id
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setStage(instance_id) {
+        this._$stage._$instanceId = instance_id;
+        this._$instances.set(instance_id, this._$stage);
+    }
+    /**
+     * @description Stageの更新情報をセット
+     *
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$updateStage() {
+        this._$stage._$updated = true;
+    }
+    /**
+     * @description DisplayObjectContainerクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createDisplayObjectContainer(object) {
+        const sprite = $getDisplayObjectContainer();
+        sprite._$instanceId = object.instanceId;
+        if (object.recodes) {
+            sprite._$recodes = object.recodes;
+            sprite._$maxAlpha = object.maxAlpha || 1;
+            sprite._$canDraw = object.canDraw || true;
+            sprite._$xMin = object.xMin || 0;
+            sprite._$yMin = object.yMin || 0;
+            sprite._$xMax = object.xMax || 0;
+            sprite._$yMax = object.yMax || 0;
+        }
+        if (object.grid) {
+            sprite._$scale9Grid = new Rectangle(object.grid.x, object.grid.y, object.grid.w, object.grid.h);
+        }
+        this._$instances.set(sprite._$instanceId, sprite);
+    }
+    /**
+     * @description Shapeクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createShape(object) {
+        const shape = $getShape();
+        shape._$instanceId = object.instanceId;
+        shape._$parentId = object.parentId;
+        if (object.recodes) {
+            shape._$recodes = object.recodes;
+        }
+        shape._$maxAlpha = object.maxAlpha || 1;
+        shape._$canDraw = object.canDraw || true;
+        shape._$xMin = object.xMin || 0;
+        shape._$yMin = object.yMin || 0;
+        shape._$xMax = object.xMax || 0;
+        shape._$yMax = object.yMax || 0;
+        if (object.characterId) {
+            shape._$characterId = object.characterId;
+        }
+        if ("loaderInfoId" in object) {
+            shape._$loaderInfoId = object.loaderInfoId || 0;
+        }
+        if (object.grid) {
+            shape._$scale9Grid = new Rectangle(object.grid.x, object.grid.y, object.grid.w, object.grid.h);
+        }
+        this._$instances.set(shape._$instanceId, shape);
+    }
+    /**
+     * @description Videoクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createVideo(object) {
+        const video = $getVideo();
+        video._$instanceId = object.instanceId;
+        if (object.characterId) {
+            video._$characterId = object.characterId;
+        }
+        if ("loaderInfoId" in object) {
+            video._$loaderInfoId = object.loaderInfoId || 0;
+        }
+        video._$updateProperty(object);
+        this._$instances.set(video._$instanceId, video);
+    }
+    /**
+     * @description TextFieldクラスを生成
+     *
+     * @param  {object} object
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$createTextField(object) {
+        const textField = $getTextField();
+        textField._$instanceId = object.instanceId;
+        // bounds
+        textField._$xMin = object.xMin || 0;
+        textField._$yMin = object.yMin || 0;
+        textField._$xMax = object.xMax || 0;
+        textField._$yMax = object.yMax || 0;
+        if (object.characterId) {
+            textField._$characterId = object.characterId;
+        }
+        if ("loaderInfoId" in object) {
+            textField._$loaderInfoId = object.loaderInfoId || 0;
+        }
+        textField._$updateProperty(object);
+        this._$instances.set(textField._$instanceId, textField);
+    }
+}

package/dist/renderer/RenderShape.d.ts

@@ -0,0 +1,32 @@
+import { RenderGraphics } from "./RenderGraphics";
+import type { CanvasToWebGLContext } from "../webgl/CanvasToWebGLContext";
+/**
+ * @class
+ */
+export declare class RenderShape extends RenderGraphics {
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$clip(context: CanvasToWebGLContext, matrix: Float32Array): void;
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$draw(context: CanvasToWebGLContext, matrix: Float32Array, color_transform: Float32Array): void;
+    /**
+     * @description Playerから登録を削除
+     *
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$remove(): void;
+}

package/dist/renderer/RenderShape.js

@@ -0,0 +1,104 @@
+import { RenderGraphics } from "./RenderGraphics";
+import { $shapes } from "./RenderGlobal";
+import { $boundsMatrix, $clamp, $Infinity, $Math, $multiplicationColor, $multiplicationMatrix, $poolBoundsObject, $poolFloat32Array6, $poolFloat32Array8 } from "../player/util/RenderUtil";
+/**
+ * @class
+ */
+export class RenderShape extends RenderGraphics {
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$clip(context, matrix) {
+        let multiMatrix = matrix;
+        const rawMatrix = this._$matrix;
+        if (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+            || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+            || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
+            multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+        }
+        // size
+        const baseBounds = this._$getBounds();
+        const bounds = $boundsMatrix(baseBounds, multiMatrix);
+        $poolBoundsObject(baseBounds);
+        const width = $Math.ceil($Math.abs(bounds.xMax - bounds.xMin));
+        const height = $Math.ceil($Math.abs(bounds.yMax - bounds.yMin));
+        $poolBoundsObject(bounds);
+        switch (true) {
+            case width === 0:
+            case height === 0:
+            case width === 0 - $Infinity:
+            case height === 0 - $Infinity:
+            case width === $Infinity:
+            case height === $Infinity:
+                return;
+            default:
+                break;
+        }
+        super._$clip(context, multiMatrix);
+        if (multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$draw(context, matrix, color_transform) {
+        if (!this._$visible || !this._$maxAlpha || !this._$canDraw) {
+            return;
+        }
+        let multiColor = color_transform;
+        const rawColor = this._$colorTransform;
+        if (rawColor[0] !== 1 || rawColor[1] !== 1
+            || rawColor[2] !== 1 || rawColor[3] !== 1
+            || rawColor[4] !== 0 || rawColor[5] !== 0
+            || rawColor[6] !== 0 || rawColor[7] !== 0) {
+            multiColor = $multiplicationColor(color_transform, rawColor);
+        }
+        const alpha = $clamp(multiColor[3] + multiColor[7] / 255, 0, 1, 0);
+        if (!alpha) {
+            if (multiColor !== color_transform) {
+                $poolFloat32Array8(multiColor);
+            }
+            return;
+        }
+        let multiMatrix = matrix;
+        const rawMatrix = this._$matrix;
+        if (rawMatrix[0] !== 1 || rawMatrix[1] !== 0
+            || rawMatrix[2] !== 0 || rawMatrix[3] !== 1
+            || rawMatrix[4] !== 0 || rawMatrix[5] !== 0) {
+            multiMatrix = $multiplicationMatrix(matrix, rawMatrix);
+        }
+        super._$draw(context, multiMatrix, multiColor, this._$blendMode, this._$filters);
+        if (multiMatrix !== matrix) {
+            $poolFloat32Array6(multiMatrix);
+        }
+        if (multiColor !== color_transform) {
+            $poolFloat32Array8(multiColor);
+        }
+    }
+    /**
+     * @description Playerから登録を削除
+     *
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$remove() {
+        this._$xMin = 0;
+        this._$yMin = 0;
+        this._$xMax = 0;
+        this._$yMax = 0;
+        this._$recodes = null;
+        super._$remove();
+        $shapes.push(this);
+    }
+}