@next2d/webgl 3.0.5 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/webgl",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "Next2D Webgl Package",
   "author": "Toshiyuki Ienaga<ienaga@next2d.app> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "dependencies": {
-    "@next2d/texture-packer": "3.0.5",
-    "@next2d/render-queue": "3.0.5"
+    "@next2d/texture-packer": "3.1.0",
+    "@next2d/render-queue": "3.1.0"
   }
 }

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

@@ -0,0 +1,13 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description コンテナのアトラスノードへの描画を終了し、
+ *              temp FBOの内容をアトラスのノード領域にコピーします。
+ *              End container atlas node rendering,
+ *              copy temp FBO contents to atlas node region.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node) => void;

package/src/Context/usecase/ContextContainerEndAtlasNodeUseCase.js

@@ -0,0 +1,61 @@
+import { $containerLayerStack } from "./ContextContainerBeginLayerUseCase";
+import { execute as frameBufferManagerReleaseAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerReleaseAttachmentObjectUseCase";
+import { execute as variantsBlendMatrixTextureShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendMatrixTextureShaderService";
+import { execute as shaderManagerSetMatrixTextureWithColorTransformUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMatrixTextureWithColorTransformUniformService";
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as shaderManagerDrawTextureUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerDrawTextureUseCase";
+import { execute as textureManagerReleaseTextureObjectUseCase } from "../../TextureManager/usecase/TextureManagerReleaseTextureObjectUseCase";
+import { execute as blendOperationUseCase } from "../../Blend/usecase/BlendOperationUseCase";
+import { $context } from "../../WebGLUtil";
+import { $getAtlasAttachmentObject } from "../../AtlasManager";
+/**
+ * @description コンテナ用のカラー変換（恒等変換）
+ *              Identity color transform for container copy
+ *
+ * @type {Float32Array}
+ * @private
+ */
+const $identityColorTransform = new Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);
+/**
+ * @description コンテナのアトラスノードへの描画を終了し、
+ *              temp FBOの内容をアトラスのノード領域にコピーします。
+ *              End container atlas node rendering,
+ *              copy temp FBO contents to atlas node region.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node) => {
+    // temp FBOへの描画をフラッシュ
+    $context.drawArraysInstanced();
+    const tempAttachment = $context.$mainAttachmentObject;
+    const textureObject = tempAttachment.texture;
+    // mainを復元（$containerLayerStackから）
+    $context.$mainAttachmentObject = $containerLayerStack.pop();
+    // temp FBOを解放（テクスチャは保持してアトラスコピーに使用）
+    frameBufferManagerReleaseAttachmentObjectUseCase(tempAttachment, false);
+    if (textureObject) {
+        // アトラスにバインド
+        const atlas = $getAtlasAttachmentObject();
+        $context.bind(atlas);
+        // ノード領域を設定（scissor + clear + transfer bounds登録）
+        $context.beginNodeRendering(node);
+        // ブレンドモード設定（premultiplied alpha用: ONE, ONE_MINUS_SRC_ALPHA）
+        blendOperationUseCase("normal");
+        // テクスチャをノード位置に描画（Y軸反転: WebGLはbottom-left原点）
+        const offsetY = atlas.height - node.y - node.h;
+        $context.setTransform(1, 0, 0, 1, node.x, offsetY);
+        const shaderManager = variantsBlendMatrixTextureShaderService(false);
+        shaderManagerSetMatrixTextureWithColorTransformUniformService(shaderManager, $identityColorTransform, node.w, node.h);
+        textureManagerBind0UseCase(textureObject);
+        shaderManagerDrawTextureUseCase(shaderManager);
+        // ノード描画終了
+        $context.endNodeRendering();
+        // テクスチャを解放
+        textureManagerReleaseTextureObjectUseCase(textureObject);
+    }
+    // mainをバインド
+    $context.bind($context.$mainAttachmentObject);
+};

package/src/Context.d.ts

@@ -22,6 +22,7 @@ export declare class Context {
     joints: number;
     miterLimit: number;
     newDrawState: boolean;
+    private readonly _pendingAtlasNodes;
     constructor(gl: WebGL2RenderingContext, samples: number, device_pixel_ratio?: number);
     clearTransferBounds(): void;
     updateBackgroundColor(red: number, green: number, blue: number, alpha: number): void;
@@ -71,6 +72,8 @@ export declare class Context {
     applyFilter(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;
     containerBeginLayer(width: number, height: number): void;
     containerEndLayer(blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array | null, use_filter: boolean, filter_bounds: Float32Array | null, filter_params: Float32Array | null, unique_key: string, filter_key: string): void;
+    containerBeginAtlasNode(width: number, height: number): Node;
+    containerEndAtlasNode(): void;
     containerDrawCachedFilter(blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array, filter_bounds: Float32Array, unique_key: string, filter_key: string): void;
     createImageBitmap(width: number, height: number): Promise<ImageBitmap>;
 }

package/src/Context.js

@@ -43,6 +43,7 @@ import { execute as contextStrokeUseCase } from "./Context/usecase/ContextStroke
 import { execute as contextApplyFilterUseCase } from "./Context/usecase/ContextApplyFilterUseCase";
 import { execute as contextContainerBeginLayerUseCase } from "./Context/usecase/ContextContainerBeginLayerUseCase";
 import { execute as contextContainerEndLayerUseCase } from "./Context/usecase/ContextContainerEndLayerUseCase";
+import { execute as contextContainerEndAtlasNodeUseCase } from "./Context/usecase/ContextContainerEndAtlasNodeUseCase";
 import { execute as contextContainerDrawCachedFilterUseCase } from "./Context/usecase/ContextContainerDrawCachedFilterUseCase";
 import { execute as contextUpdateTransferBoundsService } from "./Context/service/ContextUpdateTransferBoundsService";
 import { execute as contextDrawFillUseCase } from "./Context/usecase/ContextDrawFillUseCase";
@@ -167,6 +168,12 @@ export class Context {
             writable: true,
             value: false
         });
+        Object.defineProperty(this, "_pendingAtlasNodes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         $setWebGL2RenderingContext(gl);
         $setRenderMaxSize(gl.getParameter(gl.MAX_TEXTURE_SIZE));
         $setSamples(samples);
@@ -379,6 +386,19 @@ export class Context {
     containerEndLayer(blend_mode, matrix, color_transform, use_filter, filter_bounds, filter_params, unique_key, filter_key) {
         contextContainerEndLayerUseCase(blend_mode, matrix, color_transform, use_filter, filter_bounds, filter_params, unique_key, filter_key);
     }
+    containerBeginAtlasNode(width, height) {
+        this.drawArraysInstanced();
+        // アトラスノードを確保（後でコピー先として使用）
+        const node = atlasManagerCreateNodeService(width, height);
+        this._pendingAtlasNodes.push(node);
+        // temp FBOを作成して子要素の描画先として設定
+        contextContainerBeginLayerUseCase(width, height);
+        return node;
+    }
+    containerEndAtlasNode() {
+        const node = this._pendingAtlasNodes.pop();
+        contextContainerEndAtlasNodeUseCase(node);
+    }
     containerDrawCachedFilter(blend_mode, matrix, color_transform, filter_bounds, unique_key, filter_key) {
         contextContainerDrawCachedFilterUseCase(blend_mode, matrix, color_transform, filter_bounds, unique_key, filter_key);
     }