#154 webglパッケージをv2へ移行

packages/renderer/src/Command/usecase/CommandRenderUseCase.ts

@@ -83,12 +83,6 @@ export const execute = (render_queue: Float32Array): void =>
         }
     }
 
-    console.log("debug");
-    $context.debug();
-
-    // excute
-    // $context.drawInstacedArray();
-    // $context
-    //     .frameBuffer
-    //     .transferToMainTexture();
+    $context.drawInstacedArray();
+    $context.transferMainCanvas();
 };

packages/renderer/src/Shape/usecase/ShapeRenderUseCase.ts

@@ -145,11 +145,11 @@ export const execute = (render_queue: Float32Array, index: number): number =>
     $context.globalCompositeOperation = "normal";
 
     // 描画範囲をinstanced arrayに設定
-    // $context.drawInstance(
-    //     node,
-    //     bounds[0], bounds[1], bounds[2], bounds[3],
-    //     colorTransform
-    // );
+    $context.drawDisplayObject(
+        node,
+        bounds[0], bounds[1], bounds[2], bounds[3],
+        colorTransform
+    );
 
     $poolArray(bounds);
 

packages/webgl/src/Blend.ts

@@ -0,0 +1,75 @@
+import type { IBlendMode } from "./interface/IBlendMode";
+
+/**
+ * @description 現在設定されているブレンドモード
+ *              The currently set blend mode
+ * 
+ * @type {IBlendMode}
+ * @default "normal"
+ * @private
+ */
+let $currentBlendMode: IBlendMode = "normal";
+
+/**
+ * @description ブレンドモード情報を更新
+ *              Update blend mode information
+ *
+ * @param {string} blend_mode
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setCurrentBlendMode = (blend_mode: IBlendMode): void =>
+{
+    $currentBlendMode = blend_mode;
+};
+
+/**
+ * @description 現在設定されているブレンドモードを返却
+ *              Returns the currently set blend mode
+ * 
+ * @return {IBlendMode}
+ * @method
+ * @protected
+ */
+export const $getCurrentBlendMode = (): IBlendMode =>
+{
+    return $currentBlendMode;
+};
+
+/**
+ * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値
+ *              Index value of the currently set atlas attachment object
+ * 
+ * @type {number}
+ * @default 0
+ * @private
+ */
+let $currentAtlasIndex: number = 0;
+
+/**
+ * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値をセット
+ *              Set the index value of the currently set atlas attachment object
+ *
+ * @param {number} index
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setCurrentAtlasIndex = (index: number): void =>
+{
+    $currentAtlasIndex = index;
+};
+
+/**
+ * @description 現在設定されているアトラスアタッチメントオブジェクトのインデックス値を返却
+ *              Returns the index value of the currently set atlas attachment object
+ * 
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const $getCurrentAtlasIndex = (): number =>
+{
+    return $currentAtlasIndex;
+};

packages/webgl/src/Blend/usecase/BlnedDrawDisplayObjectUseCase.ts

@@ -0,0 +1,94 @@
+import type { Node } from "@next2d/texture-packer";
+import { execute as variantsBlendInstanceShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendInstanceShaderService";
+import { $RENDER_MAX_SIZE } from "../../WebGLUtil";
+import {
+    $context,
+    $getViewportHeight,
+    $getViewportWidth
+} from "../../WebGLUtil";
+import { 
+    $getCurrentBlendMode,
+    $setCurrentBlendMode,
+    $getCurrentAtlasIndex,
+    $setCurrentAtlasIndex,
+ } from "../../Blend";
+
+/**
+ * @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: Node,
+    x_min: number, 
+    y_min: number,
+    x_max: number,
+    y_max: number, 
+    color_transform: Float32Array
+): void => {
+
+    const ct0: number = color_transform[0];
+    const ct1: number = color_transform[1];
+    const ct2: number = color_transform[2];
+    const ct3: number = $context.globalAlpha;
+    const ct4: number = color_transform[4] / 255;
+    const ct5: number = color_transform[5] / 255;
+    const ct6: number = color_transform[6] / 255;
+    const ct7: number = 0;
+
+    switch ($context.globalCompositeOperation) {
+
+        case "normal":
+        case "layer":
+        case "add":
+        case "screen":
+        case "alpha":
+        case "erase":
+        case "copy":
+            {
+                if ($getCurrentBlendMode() !== $context.globalCompositeOperation
+                    || $getCurrentAtlasIndex() !== node.index
+                ) {
+                    // todo 一度描画を実行
+
+                    // ブレンドモードをセット
+                    $setCurrentBlendMode($context.globalCompositeOperation);
+                    $setCurrentAtlasIndex(node.index);
+                }
+
+                // 描画するまで配列に変数を保持
+                const shaderInstancedManager = variantsBlendInstanceShaderService();
+                shaderInstancedManager.attributes.push(
+                    // texture rectangle
+                    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
+                    node.w, node.h, $getViewportWidth(), $getViewportHeight(),
+                    // matrix tx, ty and with_color_transform
+                    $context.$matrix[6], $context.$matrix[7],
+                    // matrix scale0, rotate0, scale1, rotate1
+                    $context.$matrix[0], $context.$matrix[1], 
+                    $context.$matrix[3], $context.$matrix[4],
+                    // mulColor
+                    ct0, ct1, ct2, ct3,
+                    // addColor
+                    ct4, ct5, ct6, ct7
+                );
+                shaderInstancedManager.count++;
+            }
+            break;
+
+        default:
+            break;
+
+    }
+};

packages/webgl/src/Blend/usecase/BlnedDrawInstancedArrayUseCase.ts

@@ -0,0 +1,4 @@
+export const execute = (): void =>
+{
+    // todo
+};

packages/webgl/src/CanvasToWebGLContext.ts

@@ -1029,6 +1029,7 @@ export class CanvasToWebGLContext
                         this._$matrix,
                         this._$imageSmoothingEnabled
                     );
+
                     break;
 
                 default:

packages/webgl/src/Context.ts

@@ -23,9 +23,11 @@ import { execute as contextResetService } from "./Context/service/ContextResetSe
 import { execute as contextResetStyleService } from "./Context/service/ContextResetStyleService";
 import { execute as contextBeginNodeRenderingService } from "./Context/service/ContextBeginNodeRenderingService";
 import { execute as contextEndNodeRenderingService } from "./Context/service/ContextEndNodeRenderingService";
-import { execute as contextDebugService } from "./Context/service/ContextDebugService";
 import { execute as contextFillUseCase } from "./Context/usecase/ContextFillUseCase";
 import { execute as atlasManagerCreateNodeService } from "./AtlasManager/service/AtlasManagerCreateNodeService";
+import { execute as blnedDrawDisplayObjectUseCase } from "./Blend/usecase/BlnedDrawDisplayObjectUseCase";
+import { execute as blnedDrawInstancedArrayUseCase } from "./Blend/usecase/BlnedDrawInstancedArrayUseCase";
+import { execute as frameBufferManagerTransferMainCanvasService } from "./FrameBufferManager/service/FrameBufferManagerTransferMainCanvasService";
 import { $getAtlasAttachmentObject } from "./AtlasManager";
 import {
     $setReadFrameBuffer,
@@ -110,7 +112,7 @@ export class Context
      * @type {IAttachmentObject}
      * @protected
      */
-    public $mainAttachment: IAttachmentObject | null;
+    public $mainAttachmentObject: IAttachmentObject | null;
 
     /**
      * @description グローバルアルファ
@@ -202,7 +204,7 @@ export class Context
         this.$clearColorA = 0;
 
         // メインのアタッチメントオブジェクト
-        this.$mainAttachment = null;
+        this.$mainAttachmentObject = null;
 
         // グローバルアルファ、合成モード、イメージのスムージング設定
         this.globalAlpha              = 1;
@@ -654,19 +656,42 @@ export class Context
      * @method
      * @public
      */
-    drawInstance (
+    drawDisplayObject (
         node: Node,
         x_min: number, 
         y_min: number,
         x_max: number,
         y_max: number, 
         color_transform: Float32Array
     ): void {
-        console.log("drawInstance", node, x_min, y_min, x_max, y_max, color_transform);
+        blnedDrawDisplayObjectUseCase(
+            node, x_min, y_min, x_max, y_max, color_transform
+        );
+    }
+
+    /**
+     * @description インスタンス配列を描画
+     *              Draw an instance array
+     * 
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstacedArray (): void
+    {
+        blnedDrawInstancedArrayUseCase();
     }
 
-    debug = (): void =>
+    /**
+     * @description フレームバッファの描画情報をキャンバスに転送
+     *              Transfer the drawing information of the frame buffer to the canvas
+     * 
+     * @return {void}
+     * @method
+     * @public
+     */
+    transferMainCanvas (): void
     {
-        contextDebugService();
+        frameBufferManagerTransferMainCanvasService();
     }
 }

packages/webgl/src/Context/usecase/ContextResizeUseCase.test.ts

@@ -26,25 +26,25 @@ describe("ContextResizeUseCase.js method test", () =>
         } as unknown as WebGL2RenderingContext;
 
         const context = new Context(mockGL, 4);
-        expect(context.$mainAttachment).toBe(null);
+        expect(context.$mainAttachmentObject).toBe(null);
         execute(context, 100, 200);
 
-        if (!context.$mainAttachment)
+        if (!context.$mainAttachmentObject)
         {
             throw new Error("context.$mainAttachment is null");
         }
 
-        expect(context.$mainAttachment.width).toBe(100);
-        expect(context.$mainAttachment.height).toBe(200);
-        expect(context.$mainAttachment.clipLevel).toBe(0);
-        expect(context.$mainAttachment.msaa).toBe(true);
-        expect(context.$mainAttachment.mask).toBe(false);
-        expect(context.$mainAttachment.texture).toBe(null);
-        expect(context.$mainAttachment.color?.resource).toBe("createRenderbuffer");
-        expect(context.$mainAttachment.color?.width).toBe(256);
-        expect(context.$mainAttachment.color?.height).toBe(256);
-        expect(context.$mainAttachment.stencil?.resource).toBe("createRenderbuffer");
-        expect(context.$mainAttachment.stencil?.width).toBe(0);
-        expect(context.$mainAttachment.stencil?.height).toBe(0);
+        expect(context.$mainAttachmentObject.width).toBe(100);
+        expect(context.$mainAttachmentObject.height).toBe(200);
+        expect(context.$mainAttachmentObject.clipLevel).toBe(0);
+        expect(context.$mainAttachmentObject.msaa).toBe(true);
+        expect(context.$mainAttachmentObject.mask).toBe(false);
+        expect(context.$mainAttachmentObject.texture).toBe(null);
+        expect(context.$mainAttachmentObject.color?.resource).toBe("createRenderbuffer");
+        expect(context.$mainAttachmentObject.color?.width).toBe(256);
+        expect(context.$mainAttachmentObject.color?.height).toBe(256);
+        expect(context.$mainAttachmentObject.stencil?.resource).toBe("createRenderbuffer");
+        expect(context.$mainAttachmentObject.stencil?.width).toBe(0);
+        expect(context.$mainAttachmentObject.stencil?.height).toBe(0);
     });
 });

packages/webgl/src/Context/usecase/ContextResizeUseCase.ts

@@ -19,16 +19,16 @@ export const execute = (context: Context, width: number, height: number): void =
 {
     // todo clearInstacedArray
 
-    if (context.$mainAttachment) {
-        frameBufferManagerReleaseAttachmentObjectUseCase(context.$mainAttachment);
+    if (context.$mainAttachmentObject) {
+        frameBufferManagerReleaseAttachmentObjectUseCase(context.$mainAttachmentObject);
 
         // unbind
-        if (context.$mainAttachment === $getCurrentAttachment()) {
+        if (context.$mainAttachmentObject === $getCurrentAttachment()) {
             frameBufferManagerUnBindAttachmentObjectService();
         }
     }
 
     // new attachment object
-    context.$mainAttachment = frameBufferManagerGetAttachmentObjectUseCase(width, height, true);
-    context.bind(context.$mainAttachment);
+    context.$mainAttachmentObject = frameBufferManagerGetAttachmentObjectUseCase(width, height, true);
+    context.bind(context.$mainAttachmentObject);
 };