#154 描画処理を改修(コール数の削減)

Next2D · Dec 18, 2024 · 4750ffc · 4750ffc
1 parent f61ef62
commit 4750ffc
Show file tree

Hide file tree

Showing 62 changed files with 992 additions and 671 deletions.
diff --git a/index.html b/index.html
@@ -10,26 +10,29 @@
 <script>
     window.addEventListener("DOMContentLoaded", async () => 
     {
-        next2d.load("develop");
-        // const { Sprite, Shape } = next2d.display;
-        // const root = await next2d.createRootMovieClip(480, 480);
-        // const shape = root.addChild(new Shape());
-        // shape.x = 75;
-        // shape.y = 75;
-        // shape
-        //     .graphics
-        //     .beginFill(0x0000ff)
-        //     .moveTo(0, 0).curveTo(50, -25, 100, 0).curveTo(125, 50, 100, 100).lineTo(0, 100).curveTo(20, 50, 0, 0)
-        //     .endFill()
+        // next2d.load("develop");
+        const { Sprite, Shape } = next2d.display;
+        const root = await next2d.createRootMovieClip(480, 480, 1);
+        const shape = root.addChild(new Shape());
+        shape.x = 75;
+        shape.y = 75;
+        shape
+            .graphics
+            .beginFill(0x0000ff)
+        //     // 半時計回り
+            .moveTo(75, 75).curveTo(65, 60, 75, 50).curveTo(60, 60, 50, 50).curveTo(60, 60, 50, 75).curveTo(60, 60, 75, 75)
+        // //     // 時計回り
+        // //     .moveTo(0, 0).curveTo(50, 25, 100, 0).curveTo(70, 50, 100, 100).curveTo(50, 50, 0, 100).curveTo(20, 50, 0, 0)
+            .endFill()
         //     // non-zero
         //     // .beginFill(0x00ff00)
-        //     .moveTo(75, 75).curveTo(170, 30, 75, 50).curveTo(50, 10, 50, 50).curveTo(95, 25+35/2, 50, 75).lineTo(75, 75)
+        //     // .moveTo(75, 75).curveTo(170, 30, 75, 50).curveTo(50, 10, 50, 50).curveTo(95, 25+35/2, 50, 75).lineTo(75, 75)
         //     // .endFill()
         //     // even-odd
-        //     // .beginFill(0xff0000)
-        //     // .moveTo(25, 25).lineTo(60, 25).lineTo(60, 60).lineTo(25, 60).curveTo(-55, 25+35/2, 25, 25)
-        //     // .beginFill(0x00ff00)
-        //     // .moveTo(35, 35).lineTo(70, 35).curveTo(100, 52, 70, 70).lineTo(35, 70).curveTo(100, 52, 35, 35)
+        //     .beginFill(0xff0000)
+        //     .moveTo(25, 25).lineTo(60, 25).lineTo(60, 60).lineTo(25, 60).curveTo(55, 25+35/2, 25, 25)
+        //     .beginFill(0x00ff00)
+        //     .moveTo(35, 35).lineTo(70, 35).curveTo(100, 52, 70, 70).lineTo(35, 70).curveTo(100, 52, 35, 35)
         //     .endFill();
     });
 </script>

diff --git a/packages/core/src/Canvas.ts b/packages/core/src/Canvas.ts
@@ -17,4 +17,4 @@ canvasInitializeService($canvas, $devicePixelRatio);
 canvasRegisterEventUseCase($canvas);
 
 // Boot offscreen canvas
-canvasBootOffscreenCanvasService($canvas, $devicePixelRatio);
+canvasBootOffscreenCanvasService($canvas);
diff --git a/packages/core/src/Canvas/service/CanvasBootOffscreenCanvasService.ts b/packages/core/src/Canvas/service/CanvasBootOffscreenCanvasService.ts
@@ -10,18 +10,13 @@ import { $rendererWorker } from "../../RendererWorker";
  * @method
  * @public
  */
-export const execute = (
-    canvas: HTMLCanvasElement,
-    ratio: number
-): void => {
-
+export const execute = (canvas: HTMLCanvasElement): void =>
+{
     const offscreenCanvas = canvas.transferControlToOffscreen();
-    const buffer = new Float32Array([ratio]);
 
     // postMessage
     $rendererWorker.postMessage({
         "command": "initialize",
-        "canvas": offscreenCanvas,
-        "buffer": buffer
-    }, [offscreenCanvas, buffer.buffer]);
+        "canvas": offscreenCanvas
+    }, [offscreenCanvas]);
 };
diff --git a/packages/core/src/Canvas/service/CanvasInitializeService.ts b/packages/core/src/Canvas/service/CanvasInitializeService.ts
@@ -3,6 +3,7 @@
  *              Initial setting of canvas style
  *
  * @param  {HTMLCanvasElement} canvas
+ * @param  {number} [ratio=1]
  * @return {void}
  * @method
  * @public
@@ -13,7 +14,7 @@ export const execute = (
 ): void => {
 
     // Set canvas style
-    let style: string = "";
+    let style = "";
     style += "-webkit-tap-highlight-color: rgba(0,0,0,0);";
     style += "backface-visibility: hidden;";
     style += "touch-action: none;";

diff --git a/packages/core/src/Next2D/usecase/CreateRootMovieClipUseCase.ts b/packages/core/src/Next2D/usecase/CreateRootMovieClipUseCase.ts
@@ -45,13 +45,13 @@ export const execute = async (
     // ready complete
     playerReadyCompleteUseCase();
 
-    // remove loading
+    // // remove loading
     playerRemoveLoadingElementService();
 
-    // append canvas
+    // // append canvas
     playerAppendElementService();
 
-    // set position
+    // // set position
     canvasSetPositionService();
 
     return root;

diff --git a/packages/core/src/Next2D/usecase/LoadUseCase.ts b/packages/core/src/Next2D/usecase/LoadUseCase.ts
@@ -76,15 +76,15 @@ export const execute = async (url: string, options: IPlayerOptions | null = null
     // resize
     playerResizeEventUseCase();
 
-    // ready complete
+    // // ready complete
     playerReadyCompleteUseCase();
 
-    // remove loading
+    // // remove loading
     playerRemoveLoadingElementService();
 
-    // append canvas
+    // // append canvas
     playerAppendCanvasElementService();
 
-    // set position
+    // // set position
     canvasSetPositionService();
 };
diff --git a/packages/core/src/Player/usecase/PlayerReadyCompleteUseCase.ts b/packages/core/src/Player/usecase/PlayerReadyCompleteUseCase.ts
@@ -13,6 +13,7 @@ export const execute = (): void =>
 
     // postMessage
     playerRenderingPostMessageService();
+    stage.changed = false;
 
     // run player
     $player.play();

diff --git a/packages/renderer/src/Command/service/CommandInitializeContextService.test.ts b/packages/renderer/src/Command/service/CommandInitializeContextService.test.ts
@@ -1,5 +1,4 @@
 import { execute } from "./CommandInitializeContextService";
-import { $devicePixelRatio } from "../../RendererUtil";
 import { describe, expect, it, vi } from "vitest";
 
 describe("CommandInitializeContextService.js test", () =>
@@ -16,7 +15,6 @@ describe("CommandInitializeContextService.js test", () =>
                     expect(options.premultipliedAlpha).toBe(true);
                     expect(options.antialias).toBe(false);
                     expect(options.depth).toBe(false);
-                    expect(options.preserveDrawingBuffer).toBe(true);
 
                     return {
                         "clearColor": vi.fn(),
@@ -64,8 +62,6 @@ describe("CommandInitializeContextService.js test", () =>
             } as unknown as HTMLCanvasElement;
         });
 
-        expect($devicePixelRatio).toBe(1);
-        execute(new MockCanvas(), 2);
-        expect($devicePixelRatio).toBe(2);
+        execute(new MockCanvas());
     });
 });
diff --git a/packages/renderer/src/Command/service/CommandInitializeContextService.ts b/packages/renderer/src/Command/service/CommandInitializeContextService.ts
@@ -2,8 +2,6 @@ import { Context } from "@next2d/webgl";
 import {
     $setCanvas,
     $setContext,
-    $setDevicePixelRatio,
-    $setWebGL2RenderingContext,
     $samples
 } from "../../RendererUtil";
 
@@ -12,37 +10,27 @@ import {
  *              Get WebGL2 context from OffscreenCanvas
  *
  * @param  {OffscreenCanvas} canvas
- * @param  {number} ratio
  * @return {void}
  * @method
  * @public
  */
-export const execute = (
-    canvas: OffscreenCanvas,
-    ratio: number
-): void => {
-
+export const execute = (canvas: OffscreenCanvas): void =>
+{
     // Set OffscreenCanvas
     $setCanvas(canvas);
 
-    // // Set Device Pixel Ratio
-    $setDevicePixelRatio(ratio);
-
     const gl: WebGL2RenderingContext | null = canvas.getContext("webgl2", {
         "stencil": true,
         "premultipliedAlpha": true,
         "antialias": false,
-        "depth": false,
-        "preserveDrawingBuffer": true
+        "depth": false
+        // "preserveDrawingBuffer": true
     });
 
     if (!gl) {
         throw new Error("webgl2 is not supported.");
     }
 
-    // Set WebGL2 context
-    $setWebGL2RenderingContext(gl);
-
     // Set CanvasToWebGLContext
     $setContext(new Context(gl, $samples));
 };
diff --git a/packages/renderer/src/Command/service/CommandResizeService.test.ts b/packages/renderer/src/Command/service/CommandResizeService.test.ts
@@ -1,8 +1,8 @@
 import { execute } from "./CommandResizeService";
 import { $cacheStore } from "@next2d/cache";
 import {
-    $rendererWidth,
-    $rendererHeight,
+    $getRendererWidth,
+    $getRendererHeight,
 } from "../../RendererUtil";
 import { describe, expect, it, vi } from "vitest";
 
@@ -36,8 +36,8 @@ describe("CommandResizeService.js test", () =>
         });
         const spyResetFunction = vi.spyOn($cacheStore, "reset");
 
-        expect($rendererWidth).toBe(0);
-        expect($rendererHeight).toBe(0);
+        expect($getRendererWidth()).toBe(0);
+        expect($getRendererHeight()).toBe(0);
         execute(500, 600);
 
 

diff --git a/packages/renderer/src/Command/service/CommandResizeService.ts b/packages/renderer/src/Command/service/CommandResizeService.ts
@@ -2,8 +2,8 @@ import { $cacheStore } from "@next2d/cache";
 import {
     $setRendererSize,
     $context,
-    $rendererWidth,
-    $rendererHeight
+    $getRendererWidth,
+    $getRendererHeight
 } from "../../RendererUtil";
 
 /**
@@ -21,8 +21,8 @@ export const execute = (
     renderer_height: number
 ): void => {
 
-    if ($rendererWidth === renderer_width
-        && $rendererHeight === renderer_height
+    if ($getRendererWidth() === renderer_width
+        && $getRendererHeight() === renderer_height
     ) {
         return ;
     }

diff --git a/packages/renderer/src/CommandController.ts b/packages/renderer/src/CommandController.ts
@@ -73,8 +73,7 @@ export class CommandController
 
                 case "initialize":
                     commandInitializeContextService(
-                        object.canvas as OffscreenCanvas,
-                        object.buffer[0] as number
+                        object.canvas as OffscreenCanvas
                     );
                     break;
 

diff --git a/...es/renderer/src/DisplayObjectContainer/usecase/DisplayObjectContainerClipRenderUseCase.ts b/...es/renderer/src/DisplayObjectContainer/usecase/DisplayObjectContainerClipRenderUseCase.ts
@@ -0,0 +1,41 @@
+import { execute as shapeClipRenderUseCase } from "../../Shape/usecase/ShapeClipRenderUseCase";
+
+/**
+ * @description DisplayObjectContainerのマスク描画を実行します。
+ *              Execute the mask drawing of DisplayObjectContainer.
+ *
+ * @param  {Float32Array} render_queue
+ * @param  {number} index
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (render_queue: Float32Array, index: number): number =>
+{
+    const length = render_queue[index++];
+    for (let idx = 0; idx < length; ++idx) {
+
+        const type = render_queue[index++];
+        switch (type) {
+
+            case 0x00: // container
+                index = execute(render_queue, index);
+                break;
+
+            case 0x01: // shape
+                index = shapeClipRenderUseCase(render_queue, index);
+                break;
+
+            case 0x02: // text
+                // todo
+                break;
+
+            case 0x03: // video
+                // todo
+                break;
+
+        }
+    }
+
+    return index;
+};
diff --git a/packages/renderer/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.ts b/packages/renderer/src/DisplayObjectContainer/usecase/DisplayObjectContainerRenderUseCase.ts
@@ -3,6 +3,7 @@ import { execute as shapeRenderUseCase } from "../../Shape/usecase/ShapeRenderUs
 import { execute as shapeClipRenderUseCase } from "../../Shape/usecase/ShapeClipRenderUseCase";
 import { execute as textFieldRenderUseCase } from "../../TextField/usecase/TextFieldRenderUseCase";
 import { execute as videoRenderUseCase } from "../../Video/usecase/VideoRenderUseCase";
+import { execute as displayObjectContainerClipRenderUseCase } from "./DisplayObjectContainerClipRenderUseCase";
 
 /**
  * @description DisplayObjectContainerの描画を実行します。
@@ -21,7 +22,7 @@ export const execute = (
     image_bitmaps: ImageBitmap[] | null
 ): number => {
 
-    const useMaskDisplayObject = render_queue[index++];
+    const useMaskDisplayObject = Boolean(render_queue[index++]);
     if (useMaskDisplayObject) {
 
         // これまでの描画データを描画して初期化
@@ -44,7 +45,10 @@ export const execute = (
         switch (type) {
 
             case 0x00: // container
-                console.log("container");
+                $context.containerClip = true;
+                index = displayObjectContainerClipRenderUseCase(render_queue, index);
+                $context.clip();
+                $context.containerClip = false;
                 break;
 
             case 0x01: // shape
@@ -90,6 +94,7 @@ export const execute = (
 
         // start mask
         if (clipDepth) {
+
             endClipDepth  = clipDepth;
             canRenderMask = Boolean(render_queue[index++]);
             if (!canRenderMask) {
@@ -111,11 +116,15 @@ export const execute = (
                 render_queue[index++],
                 render_queue[index++]
             );
+
             const type = render_queue[index++];
             switch (type) {
 
                 case 0x00: // container
-                    console.log("container");
+                    $context.containerClip = true;
+                    index = displayObjectContainerClipRenderUseCase(render_queue, index);
+                    $context.clip();
+                    $context.containerClip = false;
                     break;
 
                 case 0x01: // shape