@next2d/webgl 1.18.12 → 3.0.0

package/src/ColorBufferObject/usecase/ColorBufferObjectGetColorBufferObjectUseCase.js

@@ -0,0 +1,32 @@
+import { execute as colorBufferObjectAcquireObjectUseCase } from "./ColorBufferObjectAcquireObjectUseCase";
+import { $gl, $samples, $upperPowerOfTwo } from "../../WebGLUtil";
+/**
+ * @description 指定サイズのColorBufferObjectを取得する
+ *              Get a ColorBufferObject of the specified size
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {object}
+ * @method
+ * @protected
+ */
+export const execute = (width, height) => {
+    // 128以下で描画崩れが発生する場合がある？ため、256を最小サイズにする
+    width = Math.max(256, $upperPowerOfTwo(width));
+    height = Math.max(256, $upperPowerOfTwo(height));
+    const colorBufferObject = colorBufferObjectAcquireObjectUseCase(width * height);
+    if (colorBufferObject.width < width
+        || colorBufferObject.height < height) {
+        width = Math.max(width, colorBufferObject.width);
+        height = Math.max(height, colorBufferObject.height);
+        colorBufferObject.width = width;
+        colorBufferObject.height = height;
+        colorBufferObject.area = width * height;
+        $gl.bindRenderbuffer($gl.RENDERBUFFER, colorBufferObject.resource);
+        $gl.renderbufferStorageMultisample($gl.RENDERBUFFER, $samples, $gl.RGBA8, width, height);
+        $gl.bindRenderbuffer($gl.RENDERBUFFER, colorBufferObject.stencil.resource);
+        $gl.renderbufferStorageMultisample($gl.RENDERBUFFER, $samples, $gl.STENCIL_INDEX8, width, height);
+    }
+    colorBufferObject.dirty = true;
+    return colorBufferObject;
+};

package/src/ColorBufferObject/usecase/ColorBufferObjectReleaseColorBufferObjectUseCase.d.ts

@@ -0,0 +1,11 @@
+import type { IColorBufferObject } from "../../interface/IColorBufferObject";
+/**
+ * @description 利用済みのColorBufferObjectを再利用するためにプールに保管する
+ *              Store the used ColorBufferObject in the pool for reuse
+ *
+ * @param  {object} color_buffer_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (color_buffer_object: IColorBufferObject) => void;

package/src/ColorBufferObject/usecase/ColorBufferObjectReleaseColorBufferObjectUseCase.js

@@ -0,0 +1,19 @@
+import { execute as colorBufferObjectMeguruBinarySearchService } from "../service/ColorBufferObjectMeguruBinarySearchService";
+import { $objectPool } from "../../ColorBufferObject";
+/**
+ * @description 利用済みのColorBufferObjectを再利用するためにプールに保管する
+ *              Store the used ColorBufferObject in the pool for reuse
+ *
+ * @param  {object} color_buffer_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (color_buffer_object) => {
+    if ($objectPool.indexOf(color_buffer_object) > -1) {
+        return;
+    }
+    const index = colorBufferObjectMeguruBinarySearchService(color_buffer_object.area);
+    color_buffer_object.dirty = true;
+    $objectPool.splice(index, 0, color_buffer_object);
+};

package/src/ColorBufferObject.d.ts

@@ -0,0 +1,9 @@
+import type { IColorBufferObject } from "./interface/IColorBufferObject";
+/**
+ * @description ColorBufferObjectの再利用のための配列のオブジェクトプール、
+ *              Object pool of array for reusing ColorBufferObject
+ *
+ * @type {IColorBufferObject[]}
+ * @private
+ */
+export declare const $objectPool: IColorBufferObject[];

package/src/ColorBufferObject.js

@@ -0,0 +1,8 @@
+/**
+ * @description ColorBufferObjectの再利用のための配列のオブジェクトプール、
+ *              Object pool of array for reusing ColorBufferObject
+ *
+ * @type {IColorBufferObject[]}
+ * @private
+ */
+export const $objectPool = [];

package/src/Context/service/ContextBeginNodeRenderingService.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 描画範囲を設定
+ *              Set the drawing range.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, w: number, h: number) => void;

package/src/Context/service/ContextBeginNodeRenderingService.js

@@ -0,0 +1,22 @@
+import { $gl, $enableScissorTest } from "../../WebGLUtil";
+/**
+ * @description 描画範囲を設定
+ *              Set the drawing range.
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, w, h) => {
+    // 初期化範囲を設定
+    $enableScissorTest();
+    $gl.scissor(x, y, w + 1, h + 1);
+    // 初期化（clearColorは初期化時に(0,0,0,0)設定済み）
+    $gl.clear($gl.COLOR_BUFFER_BIT | $gl.STENCIL_BUFFER_BIT);
+    // 描画領域をあらためて設定
+    $gl.scissor(x, y, w, h);
+};

package/src/Context/service/ContextCreateImageBitmapService.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description OffscreenCanvas に描画して返却
+ *              Draw to OffscreenCanvas and return
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Promise<ImageBitmap>}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => Promise<ImageBitmap>;

package/src/Context/service/ContextCreateImageBitmapService.js

@@ -0,0 +1,78 @@
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as textureManagerGetMainTextureFromBoundsUseCase } from "../../TextureManager/usecase/TextureManagerGetMainTextureFromBoundsUseCase";
+import { $readFrameBuffer, $pixelFrameBuffer } from "../../FrameBufferManager";
+import { $context, $gl, $upperPowerOfTwo } from "../../WebGLUtil";
+/**
+ * @type {number}
+ * @private
+ */
+let $byteLength = 0;
+/**
+ * @description 0..255 の逆数テーブル（255/a）
+ *              Inverse table of 0..255 (255/a)
+ *
+ * @type {Float32Array}
+ * @private
+ */
+const $inv = new Float32Array(256);
+for (let a = 1; a < 256; a++) {
+    $inv[a] = 255 / a;
+}
+/**
+ * @description OffscreenCanvas に描画して返却
+ *              Draw to OffscreenCanvas and return
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {Promise<ImageBitmap>}
+ * @method
+ * @protected
+ */
+export const execute = async (width, height) => {
+    // fixed logic
+    const mainTextureObject = textureManagerGetMainTextureFromBoundsUseCase(0, 0, width, height);
+    textureManagerBind0UseCase(mainTextureObject);
+    $gl.bindFramebuffer($gl.FRAMEBUFFER, $pixelFrameBuffer);
+    $gl.framebufferTexture2D($gl.FRAMEBUFFER, $gl.COLOR_ATTACHMENT0, $gl.TEXTURE_2D, mainTextureObject.resource, 0);
+    const pixels = new Uint8Array(width * height * 4);
+    const $mainAttachmentObject = $context.$mainAttachmentObject;
+    if (pixels.byteLength > $byteLength) {
+        $byteLength = $upperPowerOfTwo(pixels.byteLength);
+        $gl.bufferData($gl.PIXEL_PACK_BUFFER, $byteLength, $gl.STREAM_READ);
+    }
+    $gl.readPixels(0, $mainAttachmentObject.height - height, width, height, $gl.RGBA, $gl.UNSIGNED_BYTE, 0);
+    // 非同期 readPixels 用 PBO の設定
+    const sync = $gl.fenceSync($gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    await new Promise((resolve) => {
+        const wait = () => {
+            const status = $gl.clientWaitSync(sync, $gl.SYNC_FLUSH_COMMANDS_BIT, 0);
+            if (status === $gl.TIMEOUT_EXPIRED) {
+                requestAnimationFrame(wait);
+                return;
+            }
+            $gl.deleteSync(sync);
+            $gl.getBufferSubData($gl.PIXEL_PACK_BUFFER, 0, pixels);
+            return resolve();
+        };
+        wait();
+    });
+    $gl.bindFramebuffer($gl.FRAMEBUFFER, $readFrameBuffer);
+    // アルファ補正
+    for (let idx = 0; idx < pixels.length; idx += 4) {
+        const alpha = pixels[idx + 3];
+        // a=0は何もしない / a=255は既にストレートと同等
+        if (alpha === 0 || alpha === 255) {
+            continue;
+        }
+        const f = $inv[alpha];
+        pixels[idx] = Math.min(255, Math.round(pixels[idx] * f));
+        pixels[idx + 1] = Math.min(255, Math.round(pixels[idx + 1] * f));
+        pixels[idx + 2] = Math.min(255, Math.round(pixels[idx + 2] * f));
+    }
+    // 反転してImageBitmapを返却
+    return await createImageBitmap(new ImageData(new Uint8ClampedArray(pixels), width, height), {
+        "imageOrientation": "flipY",
+        "premultiplyAlpha": "none",
+        "colorSpaceConversion": "none"
+    });
+};

package/src/Context/service/ContextEndNodeRenderingService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description アトラスへの描画終了
+ *              End drawing to the atlas
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Context/service/ContextEndNodeRenderingService.js

@@ -0,0 +1,12 @@
+import { $disableScissorTest } from "../../WebGLUtil";
+/**
+ * @description アトラスへの描画終了
+ *              End drawing to the atlas
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    $disableScissorTest();
+};

package/src/Context/service/ContextFillBackgroundColorService.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 背景色を更新
+ *              Update background color
+ *
+ * @param  {number} red
+ * @param  {number} green
+ * @param  {number} blue
+ * @param  {number} alpha
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (red: number, green: number, blue: number, alpha: number) => void;

package/src/Context/service/ContextFillBackgroundColorService.js

@@ -0,0 +1,18 @@
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description 背景色を更新
+ *              Update background color
+ *
+ * @param  {number} red
+ * @param  {number} green
+ * @param  {number} blue
+ * @param  {number} alpha
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (red, green, blue, alpha) => {
+    $gl.clearColor(red, green, blue, alpha);
+    $gl.clear($gl.COLOR_BUFFER_BIT | $gl.STENCIL_BUFFER_BIT);
+    $gl.clearColor(0, 0, 0, 0);
+};

package/src/Context/service/ContextResetService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description コンテキストの値を初期化する
+ *              Initialize the values of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextResetService.js

@@ -0,0 +1,14 @@
+/**
+ * @description コンテキストの値を初期化する
+ *              Initialize the values of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    context.globalAlpha = 1;
+    context.globalCompositeOperation = "normal";
+    context.imageSmoothingEnabled = false;
+};

package/src/Context/service/ContextResetStyleService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description コンテキストのカラースタイル設定を初期化する
+ *              Initialize the color style settings of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextResetStyleService.js

@@ -0,0 +1,13 @@
+/**
+ * @description コンテキストのカラースタイル設定を初期化する
+ *              Initialize the color style settings of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    context.$fillStyle.fill(1);
+    context.$strokeStyle.fill(1);
+};

package/src/Context/service/ContextRestoreService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description 2D変換行列をスタックから復元します
+ *              Restore the 2D transformation matrix from the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextRestoreService.js

@@ -0,0 +1,23 @@
+import { $poolFloat32Array9 } from "../../WebGLUtil";
+/**
+ * @description 2D変換行列をスタックから復元します
+ *              Restore the 2D transformation matrix from the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    if (!context.$stack.length) {
+        return;
+    }
+    const matrix = context.$stack.pop();
+    context.$matrix[0] = matrix[0];
+    context.$matrix[1] = matrix[1];
+    context.$matrix[3] = matrix[3];
+    context.$matrix[4] = matrix[4];
+    context.$matrix[6] = matrix[6];
+    context.$matrix[7] = matrix[7];
+    $poolFloat32Array9(matrix);
+};

package/src/Context/service/ContextSaveService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description 2D変換行列をスタックに保存します
+ *              Save the 2D transformation matrix to the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextSaveService.js

@@ -0,0 +1,13 @@
+import { $getFloat32Array9 } from "../../WebGLUtil";
+/**
+ * @description 2D変換行列をスタックに保存します
+ *              Save the 2D transformation matrix to the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    context.$stack.push($getFloat32Array9(...context.$matrix));
+};

package/src/Context/service/ContextSetTransformService.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description 2D変換行列を設定します
+ *              Set the 2D transformation matrix
+ *
+ * @param  {Float32Array} matrix
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (matrix: Float32Array, a: number, b: number, c: number, d: number, e: number, f: number) => void;

package/src/Context/service/ContextSetTransformService.js

@@ -0,0 +1,23 @@
+/**
+ * @description 2D変換行列を設定します
+ *              Set the 2D transformation matrix
+ *
+ * @param  {Float32Array} matrix
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (matrix, a, b, c, d, e, f) => {
+    matrix[0] = a;
+    matrix[1] = b;
+    matrix[3] = c;
+    matrix[4] = d;
+    matrix[6] = e;
+    matrix[7] = f;
+};

package/src/Context/service/ContextTransformService.d.ts

@@ -0,0 +1,17 @@
+import type { Context } from "../../Context";
+/**
+ * @description 2D変換行列の乗算を行います
+ *              Multiply the 2D transformation matrix
+ *
+ * @param  {Context} context
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context, a: number, b: number, c: number, d: number, e: number, f: number) => void;

package/src/Context/service/ContextTransformService.js

@@ -0,0 +1,29 @@
+/**
+ * @description 2D変換行列の乗算を行います
+ *              Multiply the 2D transformation matrix
+ *
+ * @param  {Context} context
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context, a, b, c, d, e, f) => {
+    const a00 = context.$matrix[0];
+    const a01 = context.$matrix[1];
+    const a10 = context.$matrix[3];
+    const a11 = context.$matrix[4];
+    const a20 = context.$matrix[6];
+    const a21 = context.$matrix[7];
+    context.$matrix[0] = a * a00 + b * a10;
+    context.$matrix[1] = a * a01 + b * a11;
+    context.$matrix[3] = c * a00 + d * a10;
+    context.$matrix[4] = c * a01 + d * a11;
+    context.$matrix[6] = e * a00 + f * a10 + a20;
+    context.$matrix[7] = e * a01 + f * a11 + a21;
+};

package/src/Context/service/ContextUpdateBackgroundColorService.d.ts

@@ -0,0 +1,15 @@
+import type { Context } from "../../Context";
+/**
+ * @description 背景色を設定を更新
+ *              Update background color setting
+ *
+ * @param  {Context} context
+ * @param  {number} red
+ * @param  {number} green
+ * @param  {number} blue
+ * @param  {number} alpha
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context, red: number, green: number, blue: number, alpha: number) => void;

package/src/Context/service/ContextUpdateBackgroundColorService.js

@@ -0,0 +1,20 @@
+import { $clamp } from "../../WebGLUtil";
+/**
+ * @description 背景色を設定を更新
+ *              Update background color setting
+ *
+ * @param  {Context} context
+ * @param  {number} red
+ * @param  {number} green
+ * @param  {number} blue
+ * @param  {number} alpha
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context, red, green, blue, alpha) => {
+    context.$clearColorR = $clamp(red, 0, 1, 0);
+    context.$clearColorG = $clamp(green, 0, 1, 0);
+    context.$clearColorB = $clamp(blue, 0, 1, 0);
+    context.$clearColorA = $clamp(alpha, 0, 1, 0);
+};

package/src/Context/service/ContextUpdateTransferBoundsService.d.ts

@@ -0,0 +1,11 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description 転写範囲を更新します。
+ *              Update the transfer range.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node) => void;

package/src/Context/service/ContextUpdateTransferBoundsService.js

@@ -0,0 +1,21 @@
+import { $getActiveTransferBounds } from "../../AtlasManager";
+/**
+ * @description 転写範囲を更新します。
+ *              Update the transfer range.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node) => {
+    const bounds = $getActiveTransferBounds(node.index);
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const xMax = bounds[2];
+    const yMax = bounds[3];
+    bounds[0] = Math.min(node.x, xMin);
+    bounds[1] = Math.min(node.y, yMin);
+    bounds[2] = Math.max(node.x + node.w + 1, xMax);
+    bounds[3] = Math.max(node.y + node.h + 1, yMax);
+};

package/src/Context/service/ContextUseGridService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description Gridデータを設定
+ *              Set Grid data
+ *
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (grid_data: Float32Array | null) => void;

package/src/Context/service/ContextUseGridService.js

@@ -0,0 +1,14 @@
+import { $gridDataMap } from "../../Grid";
+import { $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description Gridデータを設定
+ *              Set Grid data
+ *
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (grid_data) => {
+    $gridDataMap.set($fillBufferIndexes.length, grid_data);
+};

package/src/Context/usecase/ContextApplyFilterUseCase.d.ts

@@ -0,0 +1,21 @@
+import type { Node } from "@next2d/texture-packer";
+import type { IBlendMode } from "../../interface/IBlendMode";
+/**
+ * @description フィルターを適用します。
+ *              Apply the filter.
+ *
+ * @param  {Node} node
+ * @param  {string} unique_key
+ * @param  {boolean} updated
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @param  {IBlendMode} blend_mode
+ * @param  {Float32Array} bounds
+ * @param  {Float32Array} params
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node, unique_key: string, updated: boolean, width: number, height: number, is_bitmap: boolean, matrix: Float32Array, color_transform: Float32Array, blend_mode: IBlendMode, bounds: Float32Array, params: Float32Array) => void;