#154 webglパッケージをv2に移行(WIP)

Next2D · Aug 30, 2024 · c217c95 · c217c95
1 parent 2d5673e
commit c217c95
Show file tree

Hide file tree

Showing 15 changed files with 159 additions and 162 deletions.
diff --git a/...ay/src/DisplayObjectContainer/usecase/DisplayObjectContainerGenerateRenderQueueUseCase.ts b/...ay/src/DisplayObjectContainer/usecase/DisplayObjectContainerGenerateRenderQueueUseCase.ts
@@ -129,53 +129,53 @@ export const execute = <P extends DisplayObjectContainer>(
             continue;
         }
 
-        // if (child.clipDepth) {
+        if (child.clipDepth) {
 
-        //     clipDepth = child.clipDepth;
-
-        //     // マスクの描画開始判定
-        //     const bounds = displayObjectIsMaskReflectedInDisplayUseCase(
-        //         child, 
-        //         tMatrix, 
-        //         rendererWidth, 
-        //         rendererHeight, 
-        //         point_x, 
-        //         point_y
-        //     );
-
-        //     canRenderMask = bounds ? true : false;
-        //     render_queue.push(+canRenderMask);
-
-        //     if (!bounds) {
-        //         continue;
-        //     }
-
-        //     render_queue.push(...bounds);
-        //     switch (true) {
-
-        //         case child.isContainerEnabled: // 0x00
-        //             break;
-
-        //         case child.isShape: // 0x01
-        //             shapeGenerateClipQueueUseCase(
-        //                 child as Shape, 
-        //                 render_queue, 
-        //                 tMatrix
-        //             );
-        //             break;
+            clipDepth = child.clipDepth;
+
+            // マスクの描画開始判定
+            const bounds = displayObjectIsMaskReflectedInDisplayUseCase(
+                child, 
+                tMatrix, 
+                rendererWidth, 
+                rendererHeight, 
+                point_x, 
+                point_y
+            );
+
+            canRenderMask = bounds ? true : false;
+            render_queue.push(+canRenderMask);
+
+            if (!bounds) {
+                continue;
+            }
+
+            render_queue.push(...bounds);
+            switch (true) {
+
+                case child.isContainerEnabled: // 0x00
+                    break;
+
+                case child.isShape: // 0x01
+                    shapeGenerateClipQueueUseCase(
+                        child as Shape, 
+                        render_queue, 
+                        tMatrix
+                    );
+                    break;
 
-        //         case child.isText: // 0x02
-        //             break;
+                case child.isText: // 0x02
+                    break;
 
-        //         case child.isVideo: // 0x03
-        //             break;
+                case child.isVideo: // 0x03
+                    break;
 
-        //         default:
-        //             break;
-        //     }
+                default:
+                    break;
+            }
 
-        //     continue;
-        // }
+            continue;
+        }
 
         switch (true) {
 

diff --git a/packages/display/src/Shape/service/ShapeGenerateHashService.test.ts b/packages/display/src/Shape/service/ShapeGenerateHashService.test.ts
@@ -0,0 +1,12 @@
+import { execute } from "./ShapeGenerateHashService";
+import { describe, expect, it } from "vitest";
+
+describe("ShapeGenerateHashService.js test", () =>
+{
+    it("execute test case1", () =>
+    {
+        expect(execute(
+            new Float32Array([0.25, 0.5, 0]),
+        )).toBe(1407893850);
+    });
+});
diff --git a/packages/display/src/Shape/service/ShapeGenerateHashService.ts b/packages/display/src/Shape/service/ShapeGenerateHashService.ts
@@ -10,12 +10,15 @@
 export const execute = (buffer: Float32Array): number =>
 {
     let hash = 0;
-    for (let idx: number = 0; idx < buffer.length; idx++) {
+    for (let idx = 0; idx < buffer.length; idx++) {
+        const value = `${buffer[idx]}`;
+        for (let idx = 0; idx < value.length; idx++) {
 
-        const chr: number = buffer[idx];
+            const chr = value.charCodeAt(idx);
 
-        hash  = (hash << 5) - hash + chr;
-        hash |= 0;
+            hash  = (hash << 5) - hash + chr;
+            hash |= 0;
+        }
     }
 
     return hash;

diff --git a/packages/display/src/Shape/usecase/ShapeGetCalcBoundsMatrixUseCase.ts b/packages/display/src/Shape/usecase/ShapeGetCalcBoundsMatrixUseCase.ts
@@ -1,6 +1,5 @@
 import type { Graphics } from "../../Graphics";
 import { execute as displayObjectCalcBoundsMatrixService } from "../../DisplayObject/service/DisplayObjectCalcBoundsMatrixService";
-import { execute as displayObjectGetRawMatrixUseCase } from "../../DisplayObject/usecase/DisplayObjectGetRawMatrixUseCase";
 
 /**
  * @description Graphicsの描画範囲を計算します。

diff --git a/packages/renderer/src/Command/usecase/CommandRenderUseCase.ts b/packages/renderer/src/Command/usecase/CommandRenderUseCase.ts
@@ -28,7 +28,7 @@ export const execute = (render_queue: Float32Array): void =>
     if ($color !== color) {
         $color = color;
         if ($color === -1) {
-            $context.updateBackgroundColor(0, 0, 0, 1);
+            $context.updateBackgroundColor(0, 0, 0, 0);
         } else {
             $context.updateBackgroundColor(
                 $color >> 16 & 0xff / 255,

diff --git a/packages/renderer/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.ts b/packages/renderer/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.ts
@@ -24,65 +24,67 @@ export const execute = (render_queue: Float32Array, index: number): number =>
 
         const depth = render_queue[index++];
         const clipDepth = render_queue[index++];
-        
+
         // end mask
         if (endClipDepth && depth > endClipDepth) {
+            if (canRenderMask) {
+                $context.restore();
+                $context.leaveMask();
+            }
+
+            // reset
             endClipDepth  = 0;
             canRenderMask = true;
-
-            $context.restore();
-            // $context.leaveMask();
         }
 
         if (!canRenderMask) {
             continue;
         }
 
         // start mask
-        // if (clipDepth) {
+        if (clipDepth) {
+            endClipDepth  = clipDepth;
+            canRenderMask = Boolean(render_queue[index++]);
+            if (!canRenderMask) {
+                continue;
+            }
 
-        //     endClipDepth  = clipDepth;
-        //     canRenderMask = Boolean(render_queue[index++]);
-        //     if (!canRenderMask) {
-        //         continue;
-        //     }
+            // これまでの描画データを描画して初期化
+            $context.drawArraysInstanced();
 
-        //     // これまでの描画データを描画して初期化
-        //     $context.drawArraysInstanced();
+            // 設定値を保存
+            $context.save();
 
-        //     // 設定値を保存
-        //     $context.save();
+            // マスク描画の開始準備
+            $context.beginMask();
 
-        //     // マスク描画の開始準備
-        //     $context.beginMask(
-        //         render_queue[index++],
-        //         render_queue[index++],
-        //         render_queue[index++],
-        //         render_queue[index++]
-        //     );
+            $context.startMask(
+                render_queue[index++],
+                render_queue[index++],
+                render_queue[index++],
+                render_queue[index++]
+            );
+            const type = render_queue[index++];
+            switch (type) {
 
-        //     // $context.startMask();
-        //     const type = render_queue[index++];
-        //     switch (type) {
+                case 0x00: // container
+                    break;
 
-        //         case 0x00: // container
-        //             break;
+                case 0x01: // shape
+                    index = shapeClipRenderUseCase(render_queue, index);
+                    break;
 
-        //         case 0x01: // shape
-        //             index = shapeClipRenderUseCase(render_queue, index);
-        //             break;
+                case 0x02: // text
+                    break;
 
-        //         case 0x02: // text
-        //             break;
+                case 0x03: // video
+                    break;
 
-        //         case 0x03: // video
-        //             break;
+            }
+            $context.endMask();
 
-        //     }
-        //     // $context.endMask();
-
-        //     continue;
-        // }
+            continue;
+        }
 
         // hidden
         if (!render_queue[index++]) {
@@ -118,7 +120,7 @@ export const execute = (render_queue: Float32Array, index: number): number =>
     // end mask
     if (endClipDepth) {
         $context.restore();
-        // $context.leaveMask();
+        $context.leaveMask();
     }
 
     return index;

diff --git a/packages/renderer/src/Shape/usecase/ShapeClipRenderUseCase.ts b/packages/renderer/src/Shape/usecase/ShapeClipRenderUseCase.ts
@@ -1,5 +1,6 @@
 import { execute as shapeCommandService } from "../service/ShapeCommandService"; 
 import { $context } from "../../RendererUtil"; 
+import type { IAttachmentObject } from "../../../../webgl/src/interface/IAttachmentObject";
 
 /**
  * @description シェイプクリップの描画を実行
@@ -26,11 +27,11 @@ export const execute = (render_queue: Float32Array, index: number): number =>
 
     const length = render_queue[index++];
     const commands = render_queue.subarray(index, index + length);
-    // shapeCommandService(commands, false, true);
+    shapeCommandService(commands, false, true);
 
     index += length;
 
     $context.clip(hasGrid);
-    
+
     return index;
 };
diff --git a/packages/webgl/src/Context.ts b/packages/webgl/src/Context.ts
@@ -37,7 +37,7 @@ import { execute as blendEnableUseCase } from "./Blend/usecase/BlendEnableUseCas
 import { execute as maskBeginMaskService } from "./Mask/service/MaskBeginMaskService";
 import { execute as maskStartMaskService } from "./Mask/service/MaskStartMaskService";
 import { execute as maskEndMaskService } from "./Mask/service/MaskEndMaskService";
-import { execute as maskLeaveMaskService } from "./Mask/usecase/MaskLeaveMaskUseCase";
+import { execute as maskLeaveMaskService } from "./Mask/service/MaskLeaveMaskService";
 import { $getAtlasAttachmentObject } from "./AtlasManager";
 import {
     $setReadFrameBuffer,
@@ -778,26 +778,30 @@ export class Context
      * @method
      * @public
      */
-    beginMask (
-        x_min: number, 
-        y_min: number, 
-        x_max: number, 
-        y_max: number
-    ): void {
-        //maskBeginMaskService(x_min, y_min, x_max, y_max);
+    beginMask (): void 
+    {
+        maskBeginMaskService();
     }
 
     /**
      * @description マスクの描画を開始
      *              Start drawing the mask
      * 
+     * @param  {number} x_min
+     * @param  {number} y_min
+     * @param  {number} x_max
+     * @param  {number} y_max
      * @return {void}
      * @method
      * @public
      */
-    startMask (): void
-    {
-        maskStartMaskService();
+    startMask (
+        x_min: number,
+        y_min: number,
+        x_max: number,
+        y_max: number
+    ): void {
+        maskStartMaskService(x_min, y_min, x_max, y_max);
     }
 
     /**

diff --git a/packages/webgl/src/Context/usecase/ContextBindUseCase.ts b/packages/webgl/src/Context/usecase/ContextBindUseCase.ts
@@ -56,5 +56,5 @@ export const execute = (context: Context, attachment_object: IAttachmentObject):
     }
 
     // mask bind
-    // maskBindUseCase(attachment_object.mask);
+    maskBindUseCase(attachment_object.mask);
 };
diff --git a/packages/webgl/src/Mask/service/MaskBeginMaskService.ts b/packages/webgl/src/Mask/service/MaskBeginMaskService.ts
@@ -15,30 +15,8 @@ import {
  * @method
  * @protected
  */
-export const execute = (
-    x_min: number, 
-    y_min: number, 
-    x_max: number, 
-    y_max: number
-): void => {
-
-    if (!$isMaskDrawing()) {
-        $setMaskDrawing(true);
-        $gl.enable($gl.STENCIL_TEST);
-
-        $context.maskBounds.xMin = x_min;
-        $context.maskBounds.yMin = y_min;
-        $context.maskBounds.xMax = x_max;
-        $context.maskBounds.yMax = y_max;
-
-        $gl.enable($gl.SCISSOR_TEST);
-        $gl.scissor(
-            x_min,
-            y_min,
-            Math.abs(x_max - x_min),
-            Math.abs(y_max - y_min),
-        );
-    }
+export const execute = (): void => 
+{
 
     const currentAttachmentObject = $context.currentAttachmentObject;
     if (!currentAttachmentObject) {
@@ -47,4 +25,9 @@ export const execute = (
 
     currentAttachmentObject.mask = true;
     currentAttachmentObject.clipLevel++;
+
+    if (!$isMaskDrawing()) {
+        $setMaskDrawing(true);
+        $gl.enable($gl.STENCIL_TEST);
+    }
 };