@next2d/renderer 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Next2D
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+@next2d/renderer
+=============
+
+## Installation
+
+```
+npm install @next2d/renderer
+```
+
+## License
+This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@next2d/renderer",
+  "version": "2.0.0",
+  "description": "Next2D Renderer Package",
+  "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
+  "license": "MIT",
+  "homepage": "https://next2d.app",
+  "bugs": "https://github.com/Next2D/Player/issues",
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    }
+  },
+  "keywords": [
+    "Next2D",
+    "Next2D Renderer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Next2D/Player.git"
+  },
+  "dependencies": {
+    "@next2d/webgl": "2.0.0",
+    "@next2d/cache": "2.0.0",
+    "@next2d/texture-packer": "2.0.0"
+  }
+}

package/src/Command/service/CommandInitializeContextService.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description OffscreenCanvasからWebGL2のコンテキストを取得
+ *              Get WebGL2 context from OffscreenCanvas
+ *
+ * @param  {OffscreenCanvas} canvas
+ * @param  {number} device_pixel_ratio
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (canvas: OffscreenCanvas, device_pixel_ratio: number) => void;

package/src/Command/service/CommandInitializeContextService.js

@@ -0,0 +1,27 @@
+import { Context } from "@next2d/webgl";
+import { $setCanvas, $setContext, $samples } from "../../RendererUtil";
+/**
+ * @description OffscreenCanvasからWebGL2のコンテキストを取得
+ *              Get WebGL2 context from OffscreenCanvas
+ *
+ * @param  {OffscreenCanvas} canvas
+ * @param  {number} device_pixel_ratio
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (canvas, device_pixel_ratio) => {
+    // Set OffscreenCanvas
+    $setCanvas(canvas);
+    const gl = canvas.getContext("webgl2", {
+        "stencil": true,
+        "premultipliedAlpha": true,
+        "antialias": false,
+        "depth": false
+    });
+    if (!gl) {
+        throw new Error("webgl2 is not supported.");
+    }
+    // Set CanvasToWebGLContext
+    $setContext(new Context(gl, $samples, device_pixel_ratio));
+};

package/src/Command/service/CommandRemoveCacheService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description キャッシュキーを削除
+ *              Remove cache key
+ *
+ * @param  {Float32Array} remove_cache_keys
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (remove_cache_keys: Float32Array) => void;

package/src/Command/service/CommandRemoveCacheService.js

@@ -0,0 +1,24 @@
+import { $cacheStore } from "@next2d/cache";
+import { $context } from "../../RendererUtil";
+/**
+ * @description キャッシュキーを削除
+ *              Remove cache key
+ *
+ * @param  {Float32Array} remove_cache_keys
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (remove_cache_keys) => {
+    for (let idx = 0; idx < remove_cache_keys.length; ++idx) {
+        const cacheKey = `${remove_cache_keys[idx]}`;
+        if (!$cacheStore.has(cacheKey)) {
+            continue;
+        }
+        const cache = $cacheStore.getById(cacheKey);
+        for (const node of cache.values()) {
+            $context.removeNode(node);
+        }
+        $cacheStore.removeById(cacheKey);
+    }
+};

package/src/Command/service/CommandResizeService.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description 画面リサイズ時にcanvasのリサイズ、内部情報の更新を行う
+ *              Resize the canvas when resizing the screen and update internal information
+ *
+ * @param  {number} renderer_width
+ * @param  {number} renderer_height
+ * @param  {boolean} cache_clear
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (renderer_width: number, renderer_height: number, cache_clear?: boolean) => void;

package/src/Command/service/CommandResizeService.js

@@ -0,0 +1,27 @@
+import { $cacheStore } from "@next2d/cache";
+import { $setRendererSize, $context, $getRendererWidth, $getRendererHeight } from "../../RendererUtil";
+/**
+ * @description 画面リサイズ時にcanvasのリサイズ、内部情報の更新を行う
+ *              Resize the canvas when resizing the screen and update internal information
+ *
+ * @param  {number} renderer_width
+ * @param  {number} renderer_height
+ * @param  {boolean} cache_clear
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (renderer_width, renderer_height, cache_clear = true) => {
+    if ($getRendererWidth() === renderer_width
+        && $getRendererHeight() === renderer_height) {
+        return;
+    }
+    // resize
+    $setRendererSize(renderer_width, renderer_height);
+    // context reset and update
+    $context.resize(renderer_width, renderer_height, cache_clear);
+    // cache clear
+    if (cache_clear) {
+        $cacheStore.reset();
+    }
+};

package/src/Command/usecase/CommandCaptureUseCase.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 描画コマンドから描画を実行してcanvasに描画して返却
+ *              Execute drawing from drawing command and draw to canvas and return
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {ImageBitmap[]} [image_bitmaps=null]
+ * @return {Promise<ImageBitmap>}
+ * @method
+ * @protected
+ */
+export declare const execute: (render_queue: Float32Array, width: number, height: number, image_bitmaps: ImageBitmap[] | null) => Promise<ImageBitmap>;

package/src/Command/usecase/CommandCaptureUseCase.js

@@ -0,0 +1,53 @@
+import { execute as displayObjectContainerRenderUseCase } from "../../DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase";
+import { execute as shapeRenderUseCase } from "../../Shape/usecase/ShapeRenderUseCase";
+import { execute as textFieldRenderUseCase } from "../../TextField/usecase/TextFieldRenderUseCase";
+import { execute as videoRenderUseCase } from "../../Video/usecase/VideoRenderUseCase";
+import { $context } from "../../RendererUtil";
+/**
+ * @description 描画コマンドから描画を実行してcanvasに描画して返却
+ *              Execute drawing from drawing command and draw to canvas and return
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {ImageBitmap[]} [image_bitmaps=null]
+ * @return {Promise<ImageBitmap>}
+ * @method
+ * @protected
+ */
+export const execute = async (render_queue, width, height, image_bitmaps) => {
+    // reset transfer bounds
+    $context.clearTransferBounds();
+    let index = 1;
+    // reset
+    $context.reset();
+    $context.setTransform(1, 0, 0, 1, 0, 0);
+    $context.fillBackgroundColor();
+    while (render_queue.length > index) {
+        // hidden
+        if (!render_queue[index++]) {
+            continue;
+        }
+        // display object type
+        const type = render_queue[index++];
+        switch (type) {
+            case 0x00: // container
+                index = displayObjectContainerRenderUseCase(render_queue, index, image_bitmaps);
+                break;
+            case 0x01: // shape
+                index = shapeRenderUseCase(render_queue, index);
+                break;
+            case 0x02: // text
+                index = textFieldRenderUseCase(render_queue, index);
+                break;
+            case 0x03: // video
+                index = videoRenderUseCase(render_queue, index, image_bitmaps);
+                break;
+            default:
+                console.error("unknown type", type);
+                break;
+        }
+    }
+    $context.drawArraysInstanced();
+    return await $context.createImageBitmap(width, height);
+};

package/src/Command/usecase/CommandRenderUseCase.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description 描画コマンドから描画を実行
+ *              Execute drawing from drawing command
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {ImageBitmap[]} [image_bitmaps=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (render_queue: Float32Array, image_bitmaps: ImageBitmap[] | null) => void;

package/src/Command/usecase/CommandRenderUseCase.js

@@ -0,0 +1,70 @@
+import { execute as displayObjectContainerRenderUseCase } from "../../DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase";
+import { execute as shapeRenderUseCase } from "../../Shape/usecase/ShapeRenderUseCase";
+import { execute as textFieldRenderUseCase } from "../../TextField/usecase/TextFieldRenderUseCase";
+import { execute as videoRenderUseCase } from "../../Video/usecase/VideoRenderUseCase";
+import { $context, $isResize, $resizeComplete } from "../../RendererUtil";
+/**
+ * @type {number}
+ * @private
+ */
+let $color = -1;
+/**
+ * @description 描画コマンドから描画を実行
+ *              Execute drawing from drawing command
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {ImageBitmap[]} [image_bitmaps=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (render_queue, image_bitmaps) => {
+    // reset transfer bounds
+    $context.clearTransferBounds();
+    let index = 0;
+    // update background color
+    const color = render_queue[index++];
+    if ($color !== color) {
+        $color = color;
+        if ($color === -1) {
+            $context.updateBackgroundColor(0, 0, 0, 0);
+        }
+        else {
+            $context.updateBackgroundColor($color >> 16 & 0xff / 255, $color >> 8 & 0xff / 255, $color & 0xff / 255, 1);
+        }
+    }
+    // reset
+    $context.reset();
+    $context.setTransform(1, 0, 0, 1, 0, 0);
+    $context.fillBackgroundColor();
+    while (render_queue.length > index) {
+        // hidden
+        if (!render_queue[index++]) {
+            continue;
+        }
+        // display object type
+        const type = render_queue[index++];
+        switch (type) {
+            case 0x00: // container
+                index = displayObjectContainerRenderUseCase(render_queue, index, image_bitmaps);
+                break;
+            case 0x01: // shape
+                index = shapeRenderUseCase(render_queue, index);
+                break;
+            case 0x02: // text
+                index = textFieldRenderUseCase(render_queue, index);
+                break;
+            case 0x03: // video
+                index = videoRenderUseCase(render_queue, index, image_bitmaps);
+                break;
+            default:
+                console.error("unknown type", type);
+                break;
+        }
+    }
+    $context.drawArraysInstanced();
+    if ($isResize()) {
+        $resizeComplete();
+    }
+    $context.transferMainCanvas();
+};

package/src/CommandController.d.ts

@@ -0,0 +1,38 @@
+import type { IMessage } from "./interface/IMessage";
+/**
+ * @class
+ */
+export declare class CommandController {
+    /**
+     * @description workerの実行状態
+     *              Execution status of worker
+     *
+     * @type {string}
+     * @default "deactivate"
+     * @public
+     */
+    state: string;
+    /**
+     * @description 受け取ったメッセージ配列
+     *              Received message array
+     *
+     * @type {array}
+     * @default []
+     * @public
+     */
+    queue: IMessage[];
+    /**
+     * @constructor
+     * @public
+     */
+    constructor();
+    /**
+     * @description 処理を実行
+     *              Execute process
+     *
+     * @return {Promise<void>}
+     * @method
+     * @public
+     */
+    execute(): Promise<void>;
+}

package/src/CommandController.js

@@ -0,0 +1,102 @@
+import { execute as commandInitializeContextService } from "./Command/service/CommandInitializeContextService";
+import { execute as commandResizeService } from "./Command/service/CommandResizeService";
+import { execute as commandRenderUseCase } from "./Command/usecase/CommandRenderUseCase";
+import { execute as commandRemoveCacheService } from "./Command/service/CommandRemoveCacheService";
+import { execute as commandCaptureUseCase } from "./Command/usecase/CommandCaptureUseCase";
+import { $cacheStore } from "@next2d/cache";
+/**
+ * @class
+ */
+export class CommandController {
+    /**
+     * @constructor
+     * @public
+     */
+    constructor() {
+        /**
+         * @description workerの実行状態
+         *              Execution status of worker
+         *
+         * @type {string}
+         * @default "deactivate"
+         * @public
+         */
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description 受け取ったメッセージ配列
+         *              Received message array
+         *
+         * @type {array}
+         * @default []
+         * @public
+         */
+        Object.defineProperty(this, "queue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.state = "deactivate";
+        this.queue = [];
+    }
+    /**
+     * @description 処理を実行
+     *              Execute process
+     *
+     * @return {Promise<void>}
+     * @method
+     * @public
+     */
+    async execute() {
+        this.state = "active";
+        while (this.queue.length) {
+            const object = this.queue.shift();
+            if (!object) {
+                continue;
+            }
+            switch (object.command) {
+                case "render":
+                    commandRenderUseCase(object.buffer.subarray(0, object.length), object.imageBitmaps);
+                    // 描画完了したらメインスレッドにbufferを返却する
+                    globalThis.postMessage({
+                        "message": "render",
+                        "buffer": object.buffer
+                        // @ts-ignore
+                    }, [object.buffer.buffer]);
+                    break;
+                case "resize":
+                    commandResizeService(object.buffer[0], object.buffer[1], Boolean(object.buffer[2]));
+                    break;
+                case "initialize":
+                    commandInitializeContextService(object.canvas, object.devicePixelRatio);
+                    break;
+                case "removeCache":
+                    commandRemoveCacheService(object.buffer);
+                    break;
+                case "cacheClear":
+                    $cacheStore.reset();
+                    break;
+                case "capture":
+                    {
+                        const imageBitmap = await commandCaptureUseCase(object.buffer.subarray(0, object.length), object.width, object.height, object.imageBitmaps);
+                        // 描画完了したらメインスレッドにbufferを返却する
+                        globalThis.postMessage({
+                            "message": "capture",
+                            "buffer": object.buffer,
+                            "imageBitmap": imageBitmap
+                            // @ts-ignore
+                        }, [object.buffer.buffer, imageBitmap]);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+        this.state = "deactivate";
+    }
+}

package/src/DisplayObject/service/DisplayObjectGetBlendModeService.d.ts

@@ -0,0 +1,11 @@
+import type { IBlendMode } from "../../interface/IBlendMode";
+/**
+ * @description ブレンドモードを取得します。
+ *              Get the blend mode.
+ *
+ * @param  {number} blend_number
+ * @return {IBlendMode}
+ * @method
+ * @protected
+ */
+export declare const execute: (blend_number: number) => IBlendMode;

package/src/DisplayObject/service/DisplayObjectGetBlendModeService.js

@@ -0,0 +1,45 @@
+/**
+ * @description ブレンドモードを取得します。
+ *              Get the blend mode.
+ *
+ * @param  {number} blend_number
+ * @return {IBlendMode}
+ * @method
+ * @protected
+ */
+export const execute = (blend_number) => {
+    switch (blend_number) {
+        case 0:
+            return "copy";
+        case 1:
+            return "add";
+        case 2:
+            return "alpha";
+        case 3:
+            return "darken";
+        case 4:
+            return "difference";
+        case 5:
+            return "erase";
+        case 6:
+            return "hardlight";
+        case 7:
+            return "invert";
+        case 8:
+            return "layer";
+        case 9:
+            return "lighten";
+        case 10:
+            return "multiply";
+        case 11:
+            return "normal";
+        case 12:
+            return "overlay";
+        case 13:
+            return "screen";
+        case 14:
+            return "subtract";
+        default:
+            return "normal"; // normal
+    }
+};

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerClipRenderUseCase.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description DisplayObjectContainerのマスク描画を実行します。
+ *              Execute the mask drawing of DisplayObjectContainer.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (render_queue: Float32Array, index: number) => number;

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerClipRenderUseCase.js

@@ -0,0 +1,29 @@
+import { execute as shapeClipRenderUseCase } from "../../Shape/usecase/ShapeClipRenderUseCase";
+/**
+ * @description DisplayObjectContainerのマスク描画を実行します。
+ *              Execute the mask drawing of DisplayObjectContainer.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (render_queue, index) => {
+    const length = render_queue[index++];
+    for (let idx = 0; idx < length; ++idx) {
+        const type = render_queue[index++];
+        switch (type) {
+            case 0x00: // container
+                index = execute(render_queue, index);
+                break;
+            case 0x01: // shape
+                index = shapeClipRenderUseCase(render_queue, index);
+                break;
+            // text, videoはマスク対象外
+            default:
+                break;
+        }
+    }
+    return index;
+};

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description DisplayObjectContainerの描画を実行します。
+ *              Execute the drawing of DisplayObjectContainer.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @param  {ImageBitmap[]} [image_bitmaps=null]
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (render_queue: Float32Array, index: number, image_bitmaps: ImageBitmap[] | null) => number;