@next2d/webgl 1.18.12 → 2.0.0

package/src/Blend/usecase/BlnedDrawDisplayObjectUseCase.js

@@ -0,0 +1,159 @@
+import { execute as variantsBlendInstanceShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendInstanceShaderService";
+import { execute as variantsBlendDrawShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendDrawShaderService";
+import { $getFloat32Array6, $RENDER_MAX_SIZE } from "../../WebGLUtil";
+import { $setActiveAtlasIndex } from "../../AtlasManager";
+import { execute as frameBufferManagerGetTextureFromNodeUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetTextureFromNodeUseCase";
+import { execute as textureManagerReleaseTextureObjectUseCase } from "../../TextureManager/usecase/TextureManagerReleaseTextureObjectUseCase";
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as textureManagerBind01UseCase } from "../../TextureManager/usecase/TextureManagerBind01UseCase";
+import { execute as frameBufferManagerGetTextureFromBoundsUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetTextureFromBoundsUseCase";
+import { execute as frameBufferManagerReleaseAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerReleaseAttachmentObjectUseCase";
+import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
+import { execute as shaderManagerDrawTextureUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerDrawTextureUseCase";
+import { execute as frameBufferManagerTransferTextureFromRectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerTransferTextureFromRectUseCase";
+import { execute as shaderManagerSetBlendWithColorTransformUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetBlendWithColorTransformUniformService";
+import { execute as variantsBlendMatrixTextureShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendMatrixTextureShaderService";
+import { execute as shaderManagerSetMatrixTextureUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMatrixTextureUniformService";
+import { $context, $getViewportHeight, $getViewportWidth } from "../../WebGLUtil";
+import { $getCurrentBlendMode, $setCurrentBlendMode } from "../../Blend";
+import { $getCurrentAtlasIndex, $setCurrentAtlasIndex } from "../../AtlasManager";
+import { renderQueue } from "@next2d/render-queue";
+/**
+ * @description DisplayObject単体の描画を実行
+ *              Execute drawing of a single DisplayObject
+ *
+ * @param  {Node} node
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @param  {Float32Array} color_transform
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node, x_min, y_min, x_max, y_max, color_transform) => {
+    const ct0 = color_transform[0];
+    const ct1 = color_transform[1];
+    const ct2 = color_transform[2];
+    const ct3 = $context.globalAlpha;
+    const ct4 = color_transform[4] / 255;
+    const ct5 = color_transform[5] / 255;
+    const ct6 = color_transform[6] / 255;
+    const ct7 = 0;
+    const matrix = $context.$matrix;
+    switch ($context.globalCompositeOperation) {
+        case "normal":
+        case "layer":
+        case "add":
+        case "screen":
+        case "alpha":
+        case "erase":
+        case "copy":
+            {
+                if ($getCurrentBlendMode() !== $context.globalCompositeOperation
+                    || $getCurrentAtlasIndex() !== node.index) {
+                    // 異なるフレームバッファになるので、切り替え前にメインバッファに描画を実行
+                    $setActiveAtlasIndex($getCurrentAtlasIndex());
+                    const currentOperation = $context.globalCompositeOperation;
+                    $context.globalCompositeOperation = $getCurrentBlendMode();
+                    $context.drawArraysInstanced();
+                    // ブレンドモードをセット
+                    $context.globalCompositeOperation = currentOperation;
+                    $setCurrentBlendMode($context.globalCompositeOperation);
+                    // indexをセット
+                    $setCurrentAtlasIndex(node.index);
+                    $setActiveAtlasIndex(node.index);
+                }
+                // 描画するまで配列に変数を保持
+                const shaderInstancedManager = variantsBlendInstanceShaderService();
+                renderQueue.push(
+                // texture rectangle (vec4)
+                node.x / $RENDER_MAX_SIZE, node.y / $RENDER_MAX_SIZE, node.w / $RENDER_MAX_SIZE, node.h / $RENDER_MAX_SIZE, 
+                // texture width, height and viewport width, height (vec4)
+                node.w, node.h, $getViewportWidth(), $getViewportHeight(), 
+                // matrix tx, ty (vec2)
+                matrix[6], matrix[7], 
+                // matrix scale0, rotate0, scale1, rotate1 (vec4)
+                matrix[0], matrix[1], matrix[3], matrix[4], 
+                // mulColor (vec4)
+                ct0, ct1, ct2, ct3, 
+                // addColor (vec4)
+                ct4, ct5, ct6, ct7);
+                shaderInstancedManager.count++;
+            }
+            break;
+        default:
+            {
+                const currentAttachmentObject = $context.currentAttachmentObject;
+                // これまでの描画を実行
+                $context.drawArraysInstanced();
+                const width = Math.ceil(Math.abs(x_max - x_min));
+                const height = Math.ceil(Math.abs(y_max - y_min));
+                let offsetX = 0;
+                let offsetY = 0;
+                let srcTextureObject = frameBufferManagerGetTextureFromNodeUseCase(node);
+                if (matrix[0] !== 1 || matrix[1] !== 0
+                    || matrix[3] !== 0 || matrix[4] !== 1) {
+                    const attachmentObject = frameBufferManagerGetAttachmentObjectUseCase(width, height, false);
+                    const a = $getFloat32Array6(matrix[0], matrix[1], matrix[3], matrix[4], width / 2, height / 2);
+                    const b = $getFloat32Array6(1, 0, 0, 1, -node.w / 2, -node.h / 2);
+                    const tMatrix = $getFloat32Array6(a[0] * b[0] + a[2] * b[1], a[1] * b[0] + a[3] * b[1], a[0] * b[2] + a[2] * b[3], a[1] * b[2] + a[3] * b[3], a[0] * b[4] + a[2] * b[5] + a[4], a[1] * b[4] + a[3] * b[5] + a[5]);
+                    $context.save();
+                    $context.bind(attachmentObject);
+                    $context.setTransform(tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], tMatrix[4], tMatrix[5]);
+                    offsetX = tMatrix[4];
+                    offsetY = tMatrix[5];
+                    // 元の描画をフィルター用のテクスチャに描画
+                    const shaderManager = variantsBlendMatrixTextureShaderService();
+                    shaderManagerSetMatrixTextureUniformService(shaderManager, srcTextureObject.width, srcTextureObject.height);
+                    textureManagerBind0UseCase(srcTextureObject, true);
+                    shaderManagerDrawTextureUseCase(shaderManager);
+                    // 元のテクスチャを解放
+                    textureManagerReleaseTextureObjectUseCase(srcTextureObject);
+                    // フィルター用のテクスチャをセットしてコピー用のAttachmentObjectをリリース
+                    srcTextureObject = attachmentObject.texture;
+                    frameBufferManagerReleaseAttachmentObjectUseCase(attachmentObject, false);
+                    if (currentAttachmentObject) {
+                        $context.bind(currentAttachmentObject);
+                    }
+                    $context.restore();
+                }
+                // offset値があれば、座標を移動
+                if (offsetX || offsetY) {
+                    matrix[6] -= offsetX;
+                    matrix[7] -= offsetY;
+                }
+                const dstTextureObject = frameBufferManagerGetTextureFromBoundsUseCase(matrix[6], matrix[7], width, height);
+                const attachmentObject = frameBufferManagerGetAttachmentObjectUseCase(width, height, false);
+                $context.bind(attachmentObject);
+                // ブレンドするテクスチャをバインド
+                textureManagerBind01UseCase(dstTextureObject, srcTextureObject);
+                // blend用のシェーダーを取得
+                const shaderManager = variantsBlendDrawShaderService($context.globalCompositeOperation, true);
+                shaderManagerSetBlendWithColorTransformUniformService(shaderManager, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7);
+                shaderManagerDrawTextureUseCase(shaderManager);
+                if (currentAttachmentObject) {
+                    $context.bind(currentAttachmentObject);
+                }
+                // ブレンドしたtextureを元の座標に描画
+                frameBufferManagerTransferTextureFromRectUseCase(attachmentObject.texture);
+                // matrixを元に戻す
+                if (offsetX || offsetY) {
+                    matrix[6] += offsetX;
+                    matrix[7] += offsetY;
+                }
+                // テクスチャを解放
+                textureManagerReleaseTextureObjectUseCase(srcTextureObject);
+                textureManagerReleaseTextureObjectUseCase(dstTextureObject);
+                // フレームバッファを解放
+                frameBufferManagerReleaseAttachmentObjectUseCase(attachmentObject);
+                // ブレンドモードをセット
+                $setCurrentBlendMode($context.globalCompositeOperation);
+                // indexをセット
+                $setCurrentAtlasIndex(node.index);
+                $setActiveAtlasIndex(node.index);
+            }
+            break;
+    }
+};

package/src/Blend.d.ts

@@ -0,0 +1,39 @@
+import type { IBlendMode } from "./interface/IBlendMode";
+/**
+ * @description ブレンドモード情報を更新
+ *              Update blend mode information
+ *
+ * @param  {string} blend_mode
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setCurrentBlendMode: (blend_mode: IBlendMode) => void;
+/**
+ * @description 現在設定されているブレンドモードを返却
+ *              Returns the currently set blend mode
+ *
+ * @return {IBlendMode}
+ * @method
+ * @protected
+ */
+export declare const $getCurrentBlendMode: () => IBlendMode;
+/**
+ * @description ブレンドモードの設定コードを更新
+ *              Update the blend mode setting code
+ *
+ * @param  {number} func_code
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setFuncCode: (func_code: number) => void;
+/**
+ * @description ブレンドモードの設定コードを返却
+ *              Returns the blend mode setting code
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const $getFuncCode: () => number;

package/src/Blend.js

@@ -0,0 +1,64 @@
+/**
+ * @description 現在設定されているブレンドモード
+ *              The currently set blend mode
+ *
+ * @type {IBlendMode}
+ * @default "normal"
+ * @private
+ */
+let $currentBlendMode = "normal";
+/**
+ * @description ブレンドモード情報を更新
+ *              Update blend mode information
+ *
+ * @param  {string} blend_mode
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setCurrentBlendMode = (blend_mode) => {
+    $currentBlendMode = blend_mode;
+};
+/**
+ * @description 現在設定されているブレンドモードを返却
+ *              Returns the currently set blend mode
+ *
+ * @return {IBlendMode}
+ * @method
+ * @protected
+ */
+export const $getCurrentBlendMode = () => {
+    return $currentBlendMode;
+};
+/**
+ * @description ブレンドモードの設定コード
+ *              Blend mode setting code
+ *
+ * @type {number}
+ * @default 600
+ * @private
+ */
+let $funcCode = 600;
+/**
+ * @description ブレンドモードの設定コードを更新
+ *              Update the blend mode setting code
+ *
+ * @param  {number} func_code
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setFuncCode = (func_code) => {
+    $funcCode = func_code;
+};
+/**
+ * @description ブレンドモードの設定コードを返却
+ *              Returns the blend mode setting code
+ *
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $getFuncCode = () => {
+    return $funcCode;
+};

package/src/ColorBufferObject/service/ColorBufferObjectCreateService.d.ts

@@ -0,0 +1,10 @@
+import type { IColorBufferObject } from "../../interface/IColorBufferObject";
+/**
+ * @description 新規のColorBufferObjectを生成する
+ *              Create a new ColorBufferObject
+ *
+ * @return {object}
+ * @method
+ * @protected
+ */
+export declare const execute: () => IColorBufferObject;

package/src/ColorBufferObject/service/ColorBufferObjectCreateService.js

@@ -0,0 +1,27 @@
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description 新規のColorBufferObjectを生成する
+ *              Create a new ColorBufferObject
+ *
+ * @return {object}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const stencilBufferObject = {
+        "id": 0,
+        "resource": $gl.createRenderbuffer(),
+        "width": 0,
+        "height": 0,
+        "area": 0,
+        "dirty": false
+    };
+    return {
+        "resource": $gl.createRenderbuffer(),
+        "stencil": stencilBufferObject,
+        "width": 0,
+        "height": 0,
+        "area": 0,
+        "dirty": false
+    };
+};

package/src/ColorBufferObject/service/ColorBufferObjectMeguruBinarySearchService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description めぐる式二分探索法でobject_poolを検索する
+ *              Search object_pool with Meguru binary search method
+ *
+ * @param  {number} area
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (area: number) => number;

package/src/ColorBufferObject/service/ColorBufferObjectMeguruBinarySearchService.js

@@ -0,0 +1,24 @@
+import { $objectPool } from "../../ColorBufferObject";
+/**
+ * @description めぐる式二分探索法でobject_poolを検索する
+ *              Search object_pool with Meguru binary search method
+ *
+ * @param  {number} area
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (area) => {
+    let ng = -1;
+    let ok = $objectPool.length;
+    while (Math.abs(ok - ng) > 1) {
+        const mid = Math.floor((ok + ng) / 2);
+        if (area <= $objectPool[mid].area) {
+            ok = mid;
+        }
+        else {
+            ng = mid;
+        }
+    }
+    return ok;
+};

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

@@ -0,0 +1,11 @@
+import type { IColorBufferObject } from "../../interface/IColorBufferObject";
+/**
+ * @description 指定サイズのobjectがpoolにあれば再利用、なければ新規作成する
+ *              If an object of the specified size is in the pool, reuse it, otherwise create a new one
+ *
+ * @param  {number} area
+ * @return {object}
+ * @method
+ * @protected
+ */
+export declare const execute: (area: number) => IColorBufferObject;

package/src/ColorBufferObject/usecase/ColorBufferObjectAcquireObjectUseCase.js

@@ -0,0 +1,28 @@
+import { execute as colorBufferObjectCreateService } from "../service/ColorBufferObjectCreateService";
+import { execute as colorBufferObjectMeguruBinarySearchService } from "../service/ColorBufferObjectMeguruBinarySearchService";
+import { $objectPool } from "../../ColorBufferObject";
+/**
+ * @description 指定サイズのobjectがpoolにあれば再利用、なければ新規作成する
+ *              If an object of the specified size is in the pool, reuse it, otherwise create a new one
+ *
+ * @param  {number} area
+ * @return {object}
+ * @method
+ * @protected
+ */
+export const execute = (area) => {
+    if (!$objectPool.length) {
+        return colorBufferObjectCreateService();
+    }
+    const index = colorBufferObjectMeguruBinarySearchService(area);
+    if (index < $objectPool.length) {
+        const colorBuffer = $objectPool[index];
+        $objectPool.splice(index, 1);
+        return colorBuffer;
+    }
+    const colorBuffer = $objectPool.shift();
+    if (!colorBuffer) {
+        throw new Error("the color buffer is void.");
+    }
+    return colorBuffer;
+};

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

@@ -0,0 +1,12 @@
+import type { IColorBufferObject } from "../../interface/IColorBufferObject";
+/**
+ * @description 指定サイズのColorBufferObjectを取得する
+ *              Get a ColorBufferObject of the specified size
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @return {object}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => IColorBufferObject;

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 } 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) => {
+    // 初期化範囲を設定
+    $gl.enable($gl.SCISSOR_TEST);
+    $gl.scissor(x, y, w + 1, h + 1);
+    // 初期化
+    $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,58 @@
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as textureManagerGetMainTextureFromBoundsUseCase } from "../../TextureManager/usecase/TextureManagerGetMainTextureFromBoundsUseCase";
+import { $readFrameBuffer, $getPixelFrameBuffer } from "../../FrameBufferManager";
+import { $context, $gl, $upperPowerOfTwo } from "../../WebGLUtil";
+/**
+ * @type {number}
+ * @private
+ */
+let $byteLength = 0;
+/**
+ * @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, $getPixelFrameBuffer());
+    $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);
+    const sync = $gl.fenceSync($gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    // 非同期 readPixels 用 PBO の設定
+    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);
+    // 描画用の OffscreenCanvas に pixelsを描画
+    const offscreenCanvas = new OffscreenCanvas(width, height);
+    const context = offscreenCanvas.getContext("2d");
+    const imageData = new ImageData(new Uint8ClampedArray(pixels), width, height);
+    context.putImageData(imageData, 0, 0);
+    // 反転してImageBitmapを返却
+    return await createImageBitmap(offscreenCanvas, {
+        "imageOrientation": "flipY"
+    });
+};

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 { $gl } from "../../WebGLUtil";
+/**
+ * @description アトラスへの描画終了
+ *              End drawing to the atlas
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    $gl.disable($gl.SCISSOR_TEST);
+};

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;