#154 ブレンドモードをv2に実装(WIP)

packages/display/src/DisplayObject/service/DisplayObjectBlendToNumberService.ts

@@ -0,0 +1,65 @@
+import type { IBlendMode } from "../../interface/IBlendMode";
+
+/**
+ * @description ブレンドモードを数値に変換します。
+ *              Converts the blend mode to a number.
+ *
+ * @param {IBlendMode} blend_mode
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (blend_mode: IBlendMode): number =>
+{
+    switch (blend_mode) {
+
+        case "copy":
+            return 0;
+
+        case "add":
+            return 1;
+
+        case "alpha":
+            return 2;
+
+        case "darken":
+            return 3;
+
+        case "difference":
+            return 4;
+
+        case "erase":
+            return 5;
+
+        case "hardlight":
+            return 6;
+
+        case "invert":
+            return 7;
+
+        case "layer":
+            return 8;
+
+        case "lighten":
+            return 9;
+
+        case "multiply":
+            return 10;
+
+        case "normal":
+            return 11;
+
+        case "overlay":
+            return 12;
+
+        case "screen":
+            return 13;
+
+        case "subtract":
+            return 14;
+
+        default:
+            return 11; // normal
+
+    }
+};

packages/display/src/Shape/usecase/ShapeGenerateRenderQueueUseCase.ts

@@ -4,6 +4,7 @@ import { execute as displayObjectGetRawColorTransformUseCase } from "../../Displ
 import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
 import { execute as displayObjectCalcBoundsMatrixService } from "../../DisplayObject/service/DisplayObjectCalcBoundsMatrixService";
 import { execute as shapeGenerateHashService } from "../service/ShapeGenerateHashService";
+import { execute as displayObjectBlendToNumberService } from "../../DisplayObject/service/DisplayObjectBlendToNumberService";
 import { $stage } from "../../Stage";
 import { $cacheStore } from "@next2d/cache";
 import {
@@ -324,6 +325,8 @@ export const execute = (
         render_queue.push(1);
     }
 
+    render_queue.push(displayObjectBlendToNumberService(shape.blendMode));
+
     if (tColorTransform !== color_transform) {
         ColorTransform.release(tColorTransform);
     }

packages/renderer/src/DisplayObject/service/DisplayObjectGetBlendModeService.ts

@@ -0,0 +1,65 @@
+import type { IBlendMode } from "../../../../webgl/src/interface/IBlendMode";
+
+/**
+ * @description ブレンドモードを取得します。
+ *              Get the blend mode.
+ * 
+ * @param  {number} blend_number 
+ * @return {IBlendMode}
+ * @method
+ * @protected
+ */
+export const execute = (blend_number: number): IBlendMode =>
+{
+    switch (blend_number) {
+
+        case 0:
+            return "copy";
+
+        case 1:
+            return "add";
+
+        case 2:
+            return "alpha";
+
+        case 3:
+            return "darken";
+
+        case 4:
+            return "difference";
+
+        case 5:
+            return "erase";
+
+        case 6:
+            return "hardlight";
+
+        case 7:
+            return "invert";
+
+        case 8:
+            return "layer";
+
+        case 9:
+            return "lighten";
+
+        case 10:
+            return "multiply";
+
+        case 11:
+            return "normal";
+
+        case 12:
+            return "overlay";
+
+        case 13:
+            return "screen";
+
+        case 14:
+            return "subtract";
+
+        default:
+            return "normal"; // normal
+
+    }
+};

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

@@ -2,6 +2,7 @@ import type { Node } from "@next2d/texture-packer";
 import { $cacheStore } from "@next2d/cache";
 import { execute as shapeCommandService } from "../service/ShapeCommandService"; 
 import { execute as displayObjectCalcBoundsMatrixService } from "../../DisplayObject/service/DisplayObjectCalcBoundsMatrixService"; 
+import { execute as displayObjectGetBlendModeService } from "../../DisplayObject/service/DisplayObjectGetBlendModeService"; 
 import { $clamp } from "../../../../webgl/src/WebGLUtil";
 import {
     $context,
@@ -167,10 +168,11 @@ export const execute = (render_queue: Float32Array, index: number): number =>
         }
     }
 
-    // todo
+    const blendMode = render_queue[index++];
+
     $context.globalAlpha = $clamp(colorTransform[3] + colorTransform[7] / 255, 0, 1, 0);
     $context.imageSmoothingEnabled = true;
-    $context.globalCompositeOperation = "normal";
+    $context.globalCompositeOperation = displayObjectGetBlendModeService(blendMode);
 
     if (isBitmap && !isGridEnabled) {
         $context.setTransform(

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

@@ -1,15 +1,8 @@
-import type { IAttachmentObject } from "../../interface/IAttachmentObject";
 import { execute as variantsBlendInstanceShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendInstanceShaderService";
 import { execute as shaderInstancedManagerDrawArraysInstancedUseCase } from "../../Shader/ShaderInstancedManager/usecase/ShaderInstancedManagerDrawArraysInstancedUseCase";
 import { execute as blendOperationUseCase } from "../../Blend/usecase/BlendOperationUseCase";
-import {
-    $gl,
-    $context
-} from "../../WebGLUtil";
-import {
-    $atlasFrameBuffer,
-    $setFramebufferBound
-} from "../../FrameBufferManager";
+import { execute as frameBufferManagerTransferAtlasTextureService } from "../../FrameBufferManager/service/FrameBufferManagerTransferAtlasTextureService";
+import { $context } from "../../WebGLUtil";
 
 /**
  * @description インスタンス描画を実行します。
@@ -26,34 +19,13 @@ export const execute = (): void =>
         return ;
     }
 
-    const currentAttachmentObject = $context.currentAttachmentObject;
+    // Transfer to atlas texture.
+    frameBufferManagerTransferAtlasTextureService();
 
-    const atlasAttachmentObject = $context.atlasAttachmentObject;
-    $context.bind(atlasAttachmentObject);
-
-    $gl.bindFramebuffer(
-        $gl.DRAW_FRAMEBUFFER,
-        $atlasFrameBuffer
-    );
-    $setFramebufferBound(false);
-
-    $gl.blitFramebuffer(
-        0, 0, atlasAttachmentObject.width, atlasAttachmentObject.height,
-        0, 0, atlasAttachmentObject.width, atlasAttachmentObject.height,
-        $gl.COLOR_BUFFER_BIT,
-        $gl.NEAREST
-    );
-
-    $context.bind($context.$mainAttachmentObject as IAttachmentObject);
     blendOperationUseCase($context.globalCompositeOperation);
-
     shaderInstancedManagerDrawArraysInstancedUseCase(
         shaderInstancedManager
     );
 
     shaderInstancedManager.clear();
-
-    if (currentAttachmentObject) {
-        $context.bind(currentAttachmentObject);
-    }
 };

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

@@ -1,6 +1,18 @@
 import type { Node } from "@next2d/texture-packer";
+import type { ITextureObject } from "../../interface/ITextureObject";
 import { execute as variantsBlendInstanceShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendInstanceShaderService";
+import { execute as variantsBlendDrawShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendDrawShaderService";
 import { $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 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 frameBufferManagerTransferTextureFromRectService } from "../../FrameBufferManager/service/FrameBufferManagerTransferTextureFromRectService";
+import { execute as shaderManagerSetBlendUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetBlendUniformService";
 import {
     $context,
     $getViewportHeight,
@@ -12,7 +24,6 @@ import {
     $getCurrentAtlasIndex,
     $setCurrentAtlasIndex
 } from "../../Blend";
-import { $setActiveAtlasIndex } from "../../AtlasManager";
 
 /**
  * @description DisplayObject単体の描画を実行
@@ -61,10 +72,16 @@ export const execute = (
                 ) {
                     // 異なるフレームバッファになるので、切り替え前にメインバッファに描画を実行
                     $setActiveAtlasIndex($getCurrentAtlasIndex());
+
+                    const currentOperation = $context.globalCompositeOperation;
+                    $context.globalCompositeOperation = $getCurrentBlendMode();
                     $context.drawArraysInstanced();
 
                     // ブレンドモードをセット
+                    $context.globalCompositeOperation = currentOperation;
                     $setCurrentBlendMode($context.globalCompositeOperation);
+
+                    // indexをセット
                     $setCurrentAtlasIndex(node.index);
                     $setActiveAtlasIndex(node.index);
                 }
@@ -93,8 +110,58 @@ export const execute = (
             break;
 
         default:
-            $context.drawArraysInstanced();
-            // todo
+            {
+                // これまでの描画を実行
+                $context.drawArraysInstanced();
+
+                const srcTextureObject = frameBufferManagerGetTextureFromNodeUseCase(node);
+
+                const x = x_min | 0;
+                const y = y_min | 0;
+                const width  = Math.ceil(Math.abs(x_max - x_min));
+                const height = Math.ceil(Math.abs(y_max - y_min));
+
+                const dstTextureObject = frameBufferManagerGetTextureFromBoundsUseCase(x, y, width, height);
+
+                const currentAttachmentObject = $context.currentAttachmentObject;
+                const attachmentObject = frameBufferManagerGetAttachmentObjectUseCase(width, height, false);
+                $context.bind(attachmentObject);
+
+                // ブレンドするテクスチャをバインド
+                textureManagerBind01UseCase(dstTextureObject, srcTextureObject);
+
+                // blend用のシェーダーを取得
+                const shaderManager = variantsBlendDrawShaderService($context.globalCompositeOperation, true);
+                shaderManagerSetBlendUniformService(
+                    shaderManager,
+                    ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7
+                );
+
+                shaderManagerDrawTextureUseCase(shaderManager);
+
+                if (currentAttachmentObject) {
+                    $context.bind(currentAttachmentObject);
+                }
+
+                // ブレンドしたtextureを元の座標に描画
+                frameBufferManagerTransferTextureFromRectService(
+                    x, y, attachmentObject.texture as ITextureObject
+                );
+
+                // テクスチャを解放
+                textureManagerReleaseTextureObjectUseCase(srcTextureObject);
+                textureManagerReleaseTextureObjectUseCase(dstTextureObject);
+
+                // フレームバッファを解放
+                frameBufferManagerReleaseAttachmentObjectUseCase(attachmentObject);
+
+                // ブレンドモードをセット
+                $setCurrentBlendMode($context.globalCompositeOperation);
+
+                // indexをセット
+                $setCurrentAtlasIndex(node.index);
+                $setActiveAtlasIndex(node.index);
+            }
             break;
 
     }

packages/webgl/src/Context.ts

@@ -51,7 +51,8 @@ import {
     $setReadFrameBuffer,
     $setDrawFrameBuffer,
     $getCurrentAttachment,
-    $setAtlasFrameBuffer
+    $setAtlasFrameBuffer,
+    $setBitmapFrameBuffer
 } from "./FrameBufferManager";
 import {
     $setRenderMaxSize,
@@ -133,6 +134,15 @@ export class Context
      */
     public $mainAttachmentObject: IAttachmentObject | null;
 
+    /**
+     * @description アタッチメントオブジェクトを保持するスタック
+     *             Stack to hold attachment objects
+     * 
+     * @type {IAttachmentObject[]}
+     * @protected
+     */
+    public readonly $stackAttachmentObject: IAttachmentObject[];
+
     /**
      * @description グローバルアルファ
      *              Global alpha
@@ -238,7 +248,8 @@ export class Context
         $setRenderMaxSize(gl.getParameter(gl.MAX_TEXTURE_SIZE));
         $setSamples(samples);
 
-        this.$stack  = $getArray();
+        this.$stack = $getArray();
+        this.$stackAttachmentObject = $getArray();
         this.$matrix = $getFloat32Array9(1, 0, 0, 0, 1, 0, 0, 0, 1);
 
         // bakground color
@@ -281,6 +292,7 @@ export class Context
         $setReadFrameBuffer(gl);
         $setDrawFrameBuffer(gl);
         $setAtlasFrameBuffer(gl);
+        $setBitmapFrameBuffer(gl);
 
         // VertexArrayObjectの初期起動
         vertexArrayObjectBootUseCase(gl);