@next2d/renderer 2.0.0

package/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.js

@@ -0,0 +1,120 @@
+import { $context } from "../../RendererUtil";
+import { execute as shapeRenderUseCase } from "../../Shape/usecase/ShapeRenderUseCase";
+import { execute as shapeClipRenderUseCase } from "../../Shape/usecase/ShapeClipRenderUseCase";
+import { execute as textFieldRenderUseCase } from "../../TextField/usecase/TextFieldRenderUseCase";
+import { execute as videoRenderUseCase } from "../../Video/usecase/VideoRenderUseCase";
+import { execute as displayObjectContainerClipRenderUseCase } from "./DisplayObjectContainerClipRenderUseCase";
+/**
+ * @description DisplayObjectContainerの描画を実行します。
+ *              Execute the drawing of DisplayObjectContainer.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @param  {ImageBitmap[]} [image_bitmaps=null]
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (render_queue, index, image_bitmaps) => {
+    const useMaskDisplayObject = Boolean(render_queue[index++]);
+    if (useMaskDisplayObject) {
+        // これまでの描画データを描画して初期化
+        $context.drawArraysInstanced();
+        // 設定値を保存
+        $context.save();
+        // マスク描画の開始準備
+        $context.beginMask();
+        // マスクの範囲を設定
+        $context.setMaskBounds(render_queue[index++], render_queue[index++], render_queue[index++], render_queue[index++]);
+        const type = render_queue[index++];
+        switch (type) {
+            case 0x00: // container
+                index = displayObjectContainerClipRenderUseCase(render_queue, index);
+                break;
+            case 0x01: // shape
+                index = shapeClipRenderUseCase(render_queue, index);
+                break;
+            default:
+                break;
+        }
+        $context.endMask();
+    }
+    let endClipDepth = 0;
+    let canRenderMask = true;
+    const length = render_queue[index++];
+    for (let idx = 0; length > idx; idx++) {
+        const depth = render_queue[index++];
+        const clipDepth = render_queue[index++];
+        // end mask
+        if (endClipDepth && depth > endClipDepth) {
+            if (canRenderMask) {
+                $context.restore();
+                $context.leaveMask();
+            }
+            // reset
+            endClipDepth = 0;
+            canRenderMask = true;
+        }
+        if (!canRenderMask) {
+            continue;
+        }
+        // start mask
+        if (clipDepth) {
+            endClipDepth = clipDepth;
+            canRenderMask = Boolean(render_queue[index++]);
+            if (!canRenderMask) {
+                continue;
+            }
+            // これまでの描画データを描画して初期化
+            $context.drawArraysInstanced();
+            // 設定値を保存
+            $context.save();
+            // マスク描画の開始準備
+            $context.beginMask();
+            // マスクの範囲を設定
+            $context.setMaskBounds(render_queue[index++], render_queue[index++], render_queue[index++], render_queue[index++]);
+            const type = render_queue[index++];
+            switch (type) {
+                case 0x00: // container
+                    index = displayObjectContainerClipRenderUseCase(render_queue, index);
+                    break;
+                case 0x01: // shape
+                    index = shapeClipRenderUseCase(render_queue, index);
+                    break;
+                // text, videoはマスク対象外
+                default:
+                    break;
+            }
+            $context.endMask();
+            continue;
+        }
+        // hidden
+        if (!render_queue[index++]) {
+            continue;
+        }
+        const type = render_queue[index++];
+        switch (type) {
+            case 0x00: // container
+                index = execute(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;
+        }
+    }
+    // end mask
+    if (endClipDepth || useMaskDisplayObject) {
+        $context.restore();
+        $context.leaveMask();
+    }
+    return index;
+};

package/src/RendererUtil.d.ts

@@ -0,0 +1,136 @@
+import type { Context } from "@next2d/webgl";
+import type { IRGBA } from "./interface/IRGBA";
+/**
+ * @type {number}
+ * @public
+ */
+export declare const $samples: number;
+/**
+ * @type {Context}
+ * @public
+ */
+export declare let $context: Context;
+/**
+ * @description Next2DのWebGLの描画コンテキストを設定
+ *              Set the drawing context of Next2D's WebGL
+ *
+ * @param  {number} context
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const $setContext: (context: Context) => void;
+/**
+ * @type {CanvasToWebGLContext}
+ * @public
+ */
+export declare let $canvas: OffscreenCanvas;
+/**
+ * @description OffscreenCanvasをutilの変数のセット
+ *              Set OffscreenCanvas to util variable
+ *
+ * @param  {OffscreenCanvas} canvas
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const $setCanvas: (canvas: OffscreenCanvas) => void;
+/**
+ * @description 描画エリアの幅を返却
+ *              Returns the width of the drawing area
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const $getRendererWidth: () => number;
+/**
+ * @description 描画エリアの高さを返却
+ *              Returns the height of the drawing area
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const $getRendererHeight: () => number;
+/**
+ * @description 描画エリアの幅を設定
+ *              Set the width of the drawing area
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const $setRendererSize: (width: number, height: number) => void;
+/**
+ * @description リサイズ中かどうかを取得
+ *              Get whether it is being resized
+ *
+ * @return {boolean}
+ * @method
+ * @public
+ */
+export declare const $isResize: () => boolean;
+/**
+ * @description リサイズ処理完了
+ *              Resize processing complete
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const $resizeComplete: () => void;
+/**
+ * @description プールされたArrayがあればプールから、なければ新規作成して返却
+ *              If there is a pooled Array, return it from the pool,
+ *              otherwise create a new one and return it.
+ *
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @return {number[]}
+ * @method
+ * @protected
+ */
+export declare const $getBoundsArray: (x_min: number, y_min: number, x_max: number, y_max: number) => Float32Array;
+/**
+ * @description 使用済みになったBoundsのArrayをプール
+ *              Pool used Bounds Array.
+ *
+ * @param {Float32Array} array
+ * @method
+ * @protected
+ */
+export declare const $poolBoundsArray: (array: Float32Array) => void;
+/**
+ * @description プールされたArrayがあればプールから、なければ新規作成して返却
+ *              If there is a pooled Array, return it from the pool,
+ *              otherwise create a new one and return it.
+ *
+ * @param  {array} args
+ * @return {array}
+ * @method
+ * @protected
+ */
+export declare const $getArray: (...args: any[]) => any[];
+/**
+ * @description 使用済みになったArrayをプール
+ *              Pool used Array.
+ *
+ * @param  {array} array
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $poolArray: (array: any[]) => void;
+/**
+ * @param   {number} color
+ * @param   {number} [alpha=1]
+ * @returns {IRGBA}
+ * @method
+ * @static
+ */
+export declare const $intToRGBA: (color: number, alpha?: number) => IRGBA;

package/src/RendererUtil.js

@@ -0,0 +1,214 @@
+/**
+ * @type {number}
+ * @public
+ */
+export const $samples = 4;
+/**
+ * @type {Context}
+ * @public
+ */
+export let $context;
+/**
+ * @description Next2DのWebGLの描画コンテキストを設定
+ *              Set the drawing context of Next2D's WebGL
+ *
+ * @param  {number} context
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $setContext = (context) => {
+    $context = context;
+};
+/**
+ * @type {CanvasToWebGLContext}
+ * @public
+ */
+export let $canvas;
+/**
+ * @description OffscreenCanvasをutilの変数のセット
+ *              Set OffscreenCanvas to util variable
+ *
+ * @param  {OffscreenCanvas} canvas
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $setCanvas = (canvas) => {
+    $canvas = canvas;
+};
+/**
+ * @type {number}
+ * @public
+ */
+let $rendererWidth = 0;
+/**
+ * @description 描画エリアの幅を返却
+ *              Returns the width of the drawing area
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $getRendererWidth = () => {
+    return $rendererWidth;
+};
+/**
+ * @type {number}
+ * @public
+ */
+let $rendererHeight = 0;
+/**
+ * @description 描画エリアの高さを返却
+ *              Returns the height of the drawing area
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $getRendererHeight = () => {
+    return $rendererHeight;
+};
+/**
+ * @type {boolean}
+ * @private
+ */
+let $resizeState = false;
+/**
+ * @description 描画エリアの幅を設定
+ *              Set the width of the drawing area
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $setRendererSize = (width, height) => {
+    $resizeState = true;
+    $rendererWidth = width;
+    $rendererHeight = height;
+};
+/**
+ * @description リサイズ中かどうかを取得
+ *              Get whether it is being resized
+ *
+ * @return {boolean}
+ * @method
+ * @public
+ */
+export const $isResize = () => {
+    return $resizeState;
+};
+/**
+ * @description リサイズ処理完了
+ *              Resize processing complete
+ *
+ * @return {void}
+ * @method
+ * @public
+ */
+export const $resizeComplete = () => {
+    $canvas.width = $rendererWidth;
+    $canvas.height = $rendererHeight;
+    $resizeState = false;
+};
+/**
+ * @description 使用済みになったBoundsのArrayのプール配列
+ *              Pool array of used Bounds Array.
+ *
+ * @type {Float32Array[]}
+ * @const
+ * @private
+ */
+const $boundsArrays = [];
+/**
+ * @description プールされたArrayがあればプールから、なければ新規作成して返却
+ *              If there is a pooled Array, return it from the pool,
+ *              otherwise create a new one and return it.
+ *
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @return {number[]}
+ * @method
+ * @protected
+ */
+export const $getBoundsArray = (x_min, y_min, x_max, y_max) => {
+    const array = $boundsArrays.length
+        ? $boundsArrays.pop()
+        : new Float32Array(4);
+    array[0] = x_min;
+    array[1] = y_min;
+    array[2] = x_max;
+    array[3] = y_max;
+    return array;
+};
+/**
+ * @description 使用済みになったBoundsのArrayをプール
+ *              Pool used Bounds Array.
+ *
+ * @param {Float32Array} array
+ * @method
+ * @protected
+ */
+export const $poolBoundsArray = (array) => {
+    $boundsArrays.push(array);
+};
+/**
+ * @description 使用済みになったArrayのプール配列
+ *              Pool array of used Array.
+ *
+ * @type {array[]}
+ * @const
+ * @private
+ */
+const $arrays = [];
+/**
+ * @description プールされたArrayがあればプールから、なければ新規作成して返却
+ *              If there is a pooled Array, return it from the pool,
+ *              otherwise create a new one and return it.
+ *
+ * @param  {array} args
+ * @return {array}
+ * @method
+ * @protected
+ */
+export const $getArray = (...args) => {
+    const array = $arrays.pop() || [];
+    if (args.length) {
+        array.push(...args);
+    }
+    return array;
+};
+/**
+ * @description 使用済みになったArrayをプール
+ *              Pool used Array.
+ *
+ * @param  {array} array
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $poolArray = (array) => {
+    if (array.length) {
+        array.length = 0;
+    }
+    $arrays.push(array);
+};
+/**
+ * @param   {number} color
+ * @param   {number} [alpha=1]
+ * @returns {IRGBA}
+ * @method
+ * @static
+ */
+export const $intToRGBA = (color, alpha = 1) => {
+    return {
+        "R": (color & 0xff0000) >> 16,
+        "G": (color & 0x00ff00) >> 8,
+        "B": color & 0x0000ff,
+        "A": alpha * 255
+    };
+};

package/src/Shape/service/ShapeCommandService.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description Shapeのグラフィックコマンドを実行します。
+ *              Execute the graphic commands of Shape.
+ *
+ * @param  {Float32Array} commands
+ * @param  {boolean} [is_clip=false]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (commands: Float32Array, is_clip?: boolean) => void;