#154 塗りの9slice実装をv2へ移行(WIP)

Next2D · Sep 30, 2024 · 5dfdd20 · 5dfdd20
1 parent 3871a5e
commit 5dfdd20
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.11.1",
-    "@types/node": "^22.7.3",
+    "@types/node": "^22.7.4",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "@vitest/web-worker": "^2.1.1",

diff --git a/packages/renderer/src/Command/usecase/CommandRenderUseCase.ts b/packages/renderer/src/Command/usecase/CommandRenderUseCase.ts
@@ -82,7 +82,7 @@ export const execute = (render_queue: Float32Array): void =>
         }
     }
 
-    $context.drawArraysInstanced();
+    // $context.drawArraysInstanced();
 
     if ($isResize()) {
         $resizeComplete();

diff --git a/packages/renderer/src/Shape/usecase/ShapeRenderUseCase.ts b/packages/renderer/src/Shape/usecase/ShapeRenderUseCase.ts
@@ -80,7 +80,7 @@ export const execute = (render_queue: Float32Array, index: number): number =>
         const length = render_queue[index++];
         const commands = render_queue.subarray(index, index + length);
 
-        if (isBitmap) {
+        if (isBitmap && !isGridEnabled) {
 
             // Bitmapなので、スケールなし
             const width  = Math.ceil(Math.abs(xMax - xMin));
@@ -103,10 +103,6 @@ export const execute = (render_queue: Float32Array, index: number): number =>
                 offsetY
             );
 
-            if (isGridEnabled) {
-                $context.setGridOffset(node.x, offsetY);
-            }
-
             if (isDrawable) {
                 shapeCommandService(commands);
             } else {
@@ -156,10 +152,10 @@ export const execute = (render_queue: Float32Array, index: number): number =>
                 $context.bind(currentAttachment);
             }
 
-        }
+            if (isGridEnabled) {
+                $context.endGrid();
+            }
 
-        if (isGridEnabled) {
-            $context.endGrid();
         }
 
         index += length;

diff --git a/packages/webgl/src/Context/service/ContextBeginNodeRenderingService.ts b/packages/webgl/src/Context/service/ContextBeginNodeRenderingService.ts
@@ -1,5 +1,5 @@
 
-import { $gl, $setViewportSize } from "../../WebGLUtil";
+import { $gl } from "../../WebGLUtil";
 
 /**
  * @description アトラスへの描画範囲を設定

diff --git a/packages/webgl/src/Context/usecase/ContextBitmapFillUseCase.ts b/packages/webgl/src/Context/usecase/ContextBitmapFillUseCase.ts
@@ -19,7 +19,6 @@ import { $gl } from "../../WebGLUtil";
  * @param  {number} width 
  * @param  {number} height 
  * @param  {boolean} repeat 
- * @param  {boolean} smooth 
  * @return {void}
  * @method
  * @protected
@@ -32,18 +31,15 @@ export const execute = (
     smooth: boolean
 ): void => {
 
-    const textureObject = textureManagerCreateFromPixelsUseCase(width, height, pixels);
+    const textureObject = textureManagerCreateFromPixelsUseCase(
+        width, height, pixels, smooth
+    );
 
     const vertices = $getVertices();
     if (!vertices.length) {
         return ;
     }
 
-    const shaderManager = variantsBitmapShaderService(false, Boolean(repeat), Boolean(smooth));
-    shaderManagerSetBitmapFillUniformService(
-        shaderManager, width, height
-    );
-
     const vertexArrayObject = vertexArrayObjectCreateFillObjectUseCase(vertices);
 
     // mask on
@@ -56,15 +52,20 @@ export const execute = (
     $gl.stencilOp($gl.KEEP, $gl.INVERT, $gl.INVERT);
     $gl.colorMask(false, false, false, false);
 
-    const coverageShader = variantsShapeMaskShaderService(false, has_grid);
-    shaderManagerSetMaskUniformService(coverageShader, has_grid);
+    const coverageShader = variantsShapeMaskShaderService(false);
+    shaderManagerSetMaskUniformService(coverageShader);
     shaderManagerFillUseCase(coverageShader, vertexArrayObject);
     $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
 
     // draw shape range
     $gl.stencilFunc($gl.NOTEQUAL, 0, 0xff);
     $gl.stencilOp($gl.KEEP, $gl.ZERO, $gl.ZERO);
     $gl.colorMask(true, true, true, true);
+
+    const shaderManager = variantsBitmapShaderService(false, Boolean(repeat));
+    shaderManagerSetBitmapFillUniformService(
+        shaderManager, width, height
+    );
     shaderManagerFillUseCase(shaderManager as ShaderManager, vertexArrayObject);
 
     // mask off

diff --git a/packages/webgl/src/FrameBufferManager/service/FrameBufferManagerTransferMainCanvasService.ts b/packages/webgl/src/FrameBufferManager/service/FrameBufferManagerTransferMainCanvasService.ts
@@ -15,7 +15,8 @@ import {
  */
 export const execute = (): void =>
 {
-    const mainAttachmentObject = $context.$mainAttachmentObject as IAttachmentObject;
+    const mainAttachmentObject = $context.atlasAttachmentObject as IAttachmentObject;
+    // const mainAttachmentObject = $context.$mainAttachmentObject as IAttachmentObject;
     $context.bind(mainAttachmentObject);
 
     // use main Framebuffer

diff --git a/packages/webgl/src/TextureManager/service/TextureManagerInitializeBindService.ts b/packages/webgl/src/TextureManager/service/TextureManagerInitializeBindService.ts
@@ -11,11 +11,12 @@ import {
  *              Initialize the texture.
  *
  * @param  {ITextureObject} textrue_object
+ * @param  {boolean} [smooth=false]
  * @return {void}
  * @method
  * @protected
  */
-export const execute = (textrue_object: ITextureObject): void =>
+export const execute = (textrue_object: ITextureObject, smooth: boolean = false): void =>
 {
     if ($activeTextureUnit !== $gl.TEXTURE0) {
         $setActiveTextureUnit($gl.TEXTURE0);
@@ -27,8 +28,8 @@ export const execute = (textrue_object: ITextureObject): void =>
 
     $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_WRAP_S, $gl.CLAMP_TO_EDGE);
     $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_WRAP_T, $gl.CLAMP_TO_EDGE);
-    $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_MIN_FILTER, $gl.NEAREST);
-    $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_MAG_FILTER, $gl.NEAREST);
+    $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_MIN_FILTER, smooth ? $gl.LINEAR : $gl.NEAREST);
+    $gl.texParameteri($gl.TEXTURE_2D, $gl.TEXTURE_MAG_FILTER, smooth ? $gl.LINEAR : $gl.NEAREST);
 
     $gl.texStorage2D($gl.TEXTURE_2D, 1, $gl.RGBA8, textrue_object.width, textrue_object.height);
 };
diff --git a/packages/webgl/src/TextureManager/usecase/TextureManagerCreateFromPixelsUseCase.ts b/packages/webgl/src/TextureManager/usecase/TextureManagerCreateFromPixelsUseCase.ts
@@ -6,16 +6,22 @@ import { $gl } from "../../WebGLUtil";
  * @description ピクセルデータからテクスチャを作成します。
  *              Create a texture from pixel data.
  * 
- * @param {number} width
- * @param {number} height
- * @param {Uint8Array} pixels
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {Uint8Array} pixels
+ * @param  {boolean} [smooth=false]
  * @return {ITextureObject}
  * @method
  * @protected
  */
-export const execute = (width: number, height: number, pixels: Uint8Array): ITextureObject =>
-{
-    const textureObject = textureManagerGetTextureUseCase(width, height);
+export const execute = (
+    width: number,
+    height: number,
+    pixels: Uint8Array,
+    smooth: boolean = false
+): ITextureObject => {
+
+    const textureObject = textureManagerGetTextureUseCase(width, height, smooth);
 
     $gl.texSubImage2D(
         $gl.TEXTURE_2D, 0, 0, 0, width, height,

diff --git a/packages/webgl/src/TextureManager/usecase/TextureManagerGetTextureUseCase.ts b/packages/webgl/src/TextureManager/usecase/TextureManagerGetTextureUseCase.ts
@@ -9,13 +9,14 @@ import { execute as textureManagerInitializeBindService } from "../service/Textu
  *
  * @param  {number} width
  * @param  {number} height
+ * @param  {boolean} [smooth=false]
  * @return {ITextureObject}
  * @method
  * @protected
  */
-export const execute = (width: number, height: number): ITextureObject =>
+export const execute = (width: number, height: number, smooth: boolean = false): ITextureObject =>
 {
     const textureObject = textureManagerCreateTextureObjectService(width, height);
-    textureManagerInitializeBindService(textureObject);
+    textureManagerInitializeBindService(textureObject, smooth);
     return textureObject;
 };
diff --git a/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetBitmapFillUniformService.ts b/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetBitmapFillUniformService.ts
@@ -1,5 +1,8 @@
 import type { ShaderManager } from "../../ShaderManager";
-import { $gridEnabled } from "../../../Grid";
+import {
+    $gridEnabled,
+    $gridData
+} from "../../../Grid";
 import {
     $context,
     $inverseMatrix,
@@ -22,8 +25,8 @@ export const execute = (
     shader_manager: ShaderManager, 
     width: number,
     height: number
-): void =>
-{
+): void => {
+
     const highp = shader_manager.highp;
 
     // vertex: u_matrix
@@ -58,10 +61,54 @@ export const execute = (
     highp[3] = $getViewportWidth();
     highp[7] = $getViewportHeight();
 
-    let index = 20;
-    const isGridEnabled = $gridEnabled();
-    if (isGridEnabled) {
-        index += 52;
+    if ($gridEnabled()) {
+        // vertex: u_parent_matrix
+        highp[20]  = $gridData[0];
+        highp[21]  = $gridData[1];
+        highp[22]  = 0;
+
+        highp[24]  = $gridData[2];
+        highp[25]  = $gridData[3];
+        highp[26]  = 0;
+
+        highp[28]  = $gridData[4];
+        highp[29]  = $gridData[5];
+        highp[30] = 1;
+
+        // vertex: u_ancestor_matrix
+        highp[32] = $gridData[6];
+        highp[33] = $gridData[7];
+        highp[34] = 0;
+
+        highp[36] = $gridData[8];
+        highp[37] = $gridData[9];
+        highp[38] = 0;
+
+        highp[40] = $gridData[10];
+        highp[41] = $gridData[11];
+        highp[42] = 1;
+
+        // vertex: u_parent_viewport
+        highp[31] = $gridData[12];
+        highp[35] = $gridData[13];
+        highp[39] = $gridData[14];
+        highp[43] = $gridData[15];
+
+        // vertex: u_grid_min
+        highp[44] = $gridData[16];
+        highp[45] = $gridData[17];
+        highp[46] = $gridData[18];
+        highp[47] = $gridData[19];
+
+        // vertex: u_grid_max
+        highp[48] = $gridData[20];
+        highp[49] = $gridData[21];
+        highp[50] = $gridData[22];
+        highp[51] = $gridData[23];
+
+        // vertex: u_offset
+        highp[52] = $gridData[24];
+        highp[53] = $gridData[25];
     }
 
     const mediump = shader_manager.mediump;

diff --git a/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetTextureUniformService.ts b/packages/webgl/src/shader/ShaderManager/service/ShaderManagerSetTextureUniformService.ts
@@ -18,7 +18,7 @@ import {
  */
 export const execute = (shader_manager: ShaderManager, width: number, height: number): void =>
 {
-    const highp = shader_manager.highp;
+    const highp  = shader_manager.highp;
     const matrix = $context.$matrix;
 
     // vertex: u_offset

diff --git a/packages/webgl/src/shader/fragment/FragmentShaderSource.ts b/packages/webgl/src/shader/fragment/FragmentShaderSource.ts
@@ -46,7 +46,7 @@ export const BITMAP_CLIPPED = (): string =>
 precision mediump float;
 
 uniform sampler2D u_texture;
-uniform vec4 u_mediump[3];
+uniform vec4 u_mediump[1];
 
 in vec2 v_uv;
 out vec4 o_color;
@@ -70,7 +70,7 @@ export const BITMAP_PATTERN = (): string =>
 precision mediump float;
 
 uniform sampler2D u_texture;
-uniform vec4 u_mediump[3];
+uniform vec4 u_mediump[1];
 
 in vec2 v_uv;
 out vec4 o_color;

diff --git a/packages/webgl/src/shader/fragment/FragmentShaderSourceGradient.ts b/packages/webgl/src/shader/fragment/FragmentShaderSourceGradient.ts
@@ -43,9 +43,9 @@ const STATEMENT_GRADIENT_TYPE_RADIAL = (index: number, has_focal_point: boolean)
         : STATEMENT_FOCAL_POINT_OFF();
 
     return `
-float radius = u_highp[${index}][0];
-vec2 coord = p / radius;
-${focalPointStatement}
+    float radius = u_highp[${index}][0];
+    vec2 coord = p / radius;
+    ${focalPointStatement}
 `;
 };