@next2d/webgl 1.18.12 → 2.0.0

package/src/Context/usecase/ContextBitmapStrokeUseCase.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description パスコマンドの線のビットマップの描画を実行します。
+ *              Execute drawing of bitmap of line of path command.
+ *
+ * @param  {Uint8Array} pixels
+ * @param  {Float32Array} matrix
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} repeat
+ * @param  {boolean} smooth
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean) => void;

package/src/Context/usecase/ContextBitmapStrokeUseCase.js

@@ -0,0 +1,31 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshStrokeGenerateUseCase } from "../../Mesh/usecase/MeshStrokeGenerateUseCase";
+import { $bitmapData } from "../../Bitmap";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description パスコマンドの線のビットマップの描画を実行します。
+ *              Execute drawing of bitmap of line of path command.
+ *
+ * @param  {Uint8Array} pixels
+ * @param  {Float32Array} matrix
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} repeat
+ * @param  {boolean} smooth
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (pixels, matrix, width, height, repeat, smooth) => {
+    const vertices = $getVertices(true);
+    if (!vertices.length) {
+        return;
+    }
+    // 塗りの種類を追加
+    $fillTypes.push("bitmap");
+    const mesh = meshStrokeGenerateUseCase(vertices);
+    $addFillBuffer(mesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(mesh.indexCount);
+    $bitmapData.push(pixels, matrix, width, height, repeat, smooth);
+};

package/src/Context/usecase/ContextClearRectUseCase.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 指定範囲をクリアする
+ *              Clear the specified range
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, w: number, h: number) => void;

package/src/Context/usecase/ContextClearRectUseCase.js

@@ -0,0 +1,20 @@
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description 指定範囲をクリアする
+ *              Clear the specified range
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, w, h) => {
+    // 指定範囲をクリア
+    $gl.enable($gl.SCISSOR_TEST);
+    $gl.scissor(x, y, w, h);
+    $gl.clear($gl.COLOR_BUFFER_BIT | $gl.STENCIL_BUFFER_BIT);
+    $gl.disable($gl.SCISSOR_TEST);
+};

package/src/Context/usecase/ContextClipUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description Contextのパスコマンドのマスク描画を実行します。
+ *              Execute Context path command mask drawing.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Context/usecase/ContextClipUseCase.js

@@ -0,0 +1,66 @@
+import { execute as vertexArrayObjectCreateFillObjectUseCase } from "../../VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase";
+import { execute as vertexArrayObjectReleaseVertexArrayObjectService } from "../../VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService";
+import { execute as variantsShapeMaskShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeMaskShaderService";
+import { execute as shaderManagerSetMaskUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMaskUniformService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as maskUnionMaskService } from "../../Mask/service/MaskUnionMaskService";
+import { $clipLevels, $clipBounds } from "../../Mask";
+import { $gl, $context } from "../../WebGLUtil";
+import { $fillBufferIndexes, $clearFillBufferSetting } from "../../Mesh";
+import { $terminateGrid, $gridDataMap } from "../../Grid";
+/**
+ * @description Contextのパスコマンドのマスク描画を実行します。
+ *              Execute Context path command mask drawing.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    // レベルと描画範囲をセット
+    const bounds = $clipBounds.get(currentAttachmentObject.clipLevel);
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const xMax = bounds[2];
+    const yMax = bounds[3];
+    const width = Math.ceil(Math.abs(xMax - xMin));
+    const height = Math.ceil(Math.abs(yMax - yMin));
+    $gl.enable($gl.SCISSOR_TEST);
+    $gl.scissor(xMin, currentAttachmentObject.height - yMin - height, width, height);
+    const vertexArrayObject = vertexArrayObjectCreateFillObjectUseCase();
+    let level = $clipLevels.get(currentAttachmentObject.clipLevel);
+    let offset = 0;
+    let gridData = null;
+    const length = $fillBufferIndexes.length;
+    for (let idx = 0; idx < length; idx++) {
+        $gl.stencilMask(1 << level - 1);
+        const indexCount = $fillBufferIndexes[idx];
+        if ($gridDataMap.has(idx)) {
+            gridData = $gridDataMap.get(idx);
+        }
+        const useGrid = !!gridData;
+        const shaderManager = variantsShapeMaskShaderService(useGrid);
+        if (gridData) {
+            shaderManagerSetMaskUniformService(shaderManager, gridData);
+        }
+        shaderManagerFillUseCase(shaderManager, vertexArrayObject, offset, indexCount);
+        offset += indexCount;
+        ++level;
+        if (level > 7) {
+            maskUnionMaskService();
+            level = currentAttachmentObject.clipLevel + 1;
+        }
+    }
+    // update clip level
+    $clipLevels.set(currentAttachmentObject.clipLevel, level);
+    // release vertex array
+    vertexArrayObjectReleaseVertexArrayObjectService(vertexArrayObject);
+    // clear fill buffer setting
+    $clearFillBufferSetting();
+    $terminateGrid();
+    $gl.disable($gl.SCISSOR_TEST);
+};

package/src/Context/usecase/ContextDrawElementUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description OffscreenCanvasを描画します。
+ *              Draw OffscreenCanvas.
+ *
+ * @param  {Node} node
+ * @param  {OffscreenCanvas | ImageBitmap} element
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node, element: OffscreenCanvas | ImageBitmap) => void;

package/src/Context/usecase/ContextDrawElementUseCase.js

@@ -0,0 +1,26 @@
+import { execute as textureManagerCreateFromCanvasUseCase } from "../../TextureManager/usecase/TextureManagerCreateFromCanvasUseCase";
+import { execute as textureManagerReleaseTextureObjectUseCase } from "../../TextureManager/usecase/TextureManagerReleaseTextureObjectUseCase";
+import { execute as variantsBlendTextureShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendTextureShaderService";
+import { execute as shaderManagerSetTextureUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetTextureUniformService";
+import { execute as shaderManagerDrawTextureUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerDrawTextureUseCase";
+import { execute as blendResetService } from "../../Blend/service/BlendResetService";
+/**
+ * @description OffscreenCanvasを描画します。
+ *              Draw OffscreenCanvas.
+ *
+ * @param  {Node} node
+ * @param  {OffscreenCanvas | ImageBitmap} element
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node, element) => {
+    const textureObject = textureManagerCreateFromCanvasUseCase(node.w, node.h, element);
+    const shaderManager = variantsBlendTextureShaderService();
+    shaderManagerSetTextureUniformService(shaderManager, node.w, node.h);
+    // テクスチャを描画
+    blendResetService();
+    shaderManagerDrawTextureUseCase(shaderManager);
+    // テクスチャオブジェクトを解放
+    textureManagerReleaseTextureObjectUseCase(textureObject);
+};

package/src/Context/usecase/ContextDrawFillUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description Contextのパスコマンドの塗り実行します。
+ *              Execute Context path command painting.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Context/usecase/ContextDrawFillUseCase.js

@@ -0,0 +1,69 @@
+import { execute as vertexArrayObjectBindFillMeshUseCase } from "../../VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase";
+import { execute as vertexArrayObjectReleaseVertexArrayObjectService } from "../../VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService";
+import { execute as contextNormalFillUseCase } from "./ContextNormalFillUseCase";
+import { execute as contextLinearGradientFillUseCase } from "./ContextLinearGradientFillUseCase";
+import { execute as contextRadialGradientFillUseCase } from "./ContextRadialGradientFillUseCase";
+import { execute as contextPatternBitmapFillUseCase } from "./ContextPatternBitmapFillUseCase";
+import { $gl } from "../../WebGLUtil";
+import { $terminateGrid, $gridDataMap } from "../../Grid";
+import { $fillBufferIndexes, $fillTypes, $clearFillBufferSetting } from "../../Mesh";
+/**
+ * @description Contextのパスコマンドの塗り実行します。
+ *              Execute Context path command painting.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const fillVertexArrayObject = vertexArrayObjectBindFillMeshUseCase();
+    // mask on
+    $gl.enable($gl.STENCIL_TEST);
+    $gl.frontFace($gl.CCW);
+    $gl.stencilMask(0xff);
+    let fillOffset = 0;
+    let gridData = null;
+    for (let idx = 0; idx < $fillTypes.length; idx++) {
+        if ($gridDataMap.has(idx)) {
+            gridData = $gridDataMap.get(idx);
+        }
+        const type = $fillTypes[idx];
+        switch (type) {
+            case "fill": // 通常のShapeの塗り
+                {
+                    const count = $fillBufferIndexes.shift();
+                    contextNormalFillUseCase(fillVertexArrayObject, fillOffset, count, gridData);
+                    fillOffset += count;
+                }
+                break;
+            case "linear": // 線形グラデーションの塗り
+                {
+                    const count = $fillBufferIndexes.shift();
+                    contextLinearGradientFillUseCase(fillVertexArrayObject, fillOffset, count, gridData);
+                    fillOffset += count;
+                }
+                break;
+            case "radial": // 円形グラデーションの塗り
+                {
+                    const count = $fillBufferIndexes.shift();
+                    contextRadialGradientFillUseCase(fillVertexArrayObject, fillOffset, count, gridData);
+                    fillOffset += count;
+                }
+                break;
+            case "bitmap": // 画像の塗りつぶし
+                {
+                    const count = $fillBufferIndexes.shift();
+                    contextPatternBitmapFillUseCase(fillVertexArrayObject, fillOffset, count, gridData);
+                    fillOffset += count;
+                }
+                break;
+        }
+    }
+    // mask off
+    $gl.disable($gl.STENCIL_TEST);
+    // release vertex array
+    vertexArrayObjectReleaseVertexArrayObjectService(fillVertexArrayObject);
+    // 設定値を初期化
+    $clearFillBufferSetting();
+    $terminateGrid();
+};

package/src/Context/usecase/ContextDrawPixelsUseCase.d.ts

@@ -0,0 +1,12 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description ピクセルを描画します。
+ *              Draw pixels.
+ *
+ * @param  {Node} node
+ * @param  {Uint8Array} pixels
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node, pixels: Uint8Array) => void;

package/src/Context/usecase/ContextDrawPixelsUseCase.js

@@ -0,0 +1,26 @@
+import { execute as textureManagerCreateFromPixelsUseCase } from "../../TextureManager/usecase/TextureManagerCreateFromPixelsUseCase";
+import { execute as textureManagerReleaseTextureObjectUseCase } from "../../TextureManager/usecase/TextureManagerReleaseTextureObjectUseCase";
+import { execute as variantsBlendTextureShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendTextureShaderService";
+import { execute as shaderManagerSetTextureUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetTextureUniformService";
+import { execute as shaderManagerDrawTextureUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerDrawTextureUseCase";
+import { execute as blendResetService } from "../../Blend/service/BlendResetService";
+/**
+ * @description ピクセルを描画します。
+ *              Draw pixels.
+ *
+ * @param  {Node} node
+ * @param  {Uint8Array} pixels
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node, pixels) => {
+    const textureObject = textureManagerCreateFromPixelsUseCase(node.w, node.h, pixels);
+    const shaderManager = variantsBlendTextureShaderService();
+    shaderManagerSetTextureUniformService(shaderManager, node.w, node.h);
+    // テクスチャを描画
+    blendResetService();
+    shaderManagerDrawTextureUseCase(shaderManager);
+    // テクスチャオブジェクトを解放
+    textureManagerReleaseTextureObjectUseCase(textureObject);
+};

package/src/Context/usecase/ContextFillUseCase.d.ts

@@ -0,0 +1,10 @@
+import type { IFillType } from "../../interface/IFillType";
+/**
+ * @description Contextのパスコマンドの塗り実行します。
+ *              Execute Context path command painting.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (type: IFillType) => void;

package/src/Context/usecase/ContextFillUseCase.js

@@ -0,0 +1,23 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description Contextのパスコマンドの塗り実行します。
+ *              Execute Context path command painting.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (type) => {
+    const vertices = $getVertices();
+    if (!vertices.length) {
+        return;
+    }
+    // 塗りの種類を追加
+    $fillTypes.push(type);
+    const mesh = meshFillGenerateUseCase(vertices);
+    $addFillBuffer(mesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(mesh.indexCount);
+};

package/src/Context/usecase/ContextGradientFillUseCase.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description グラデーション塗りを描画
+ *              Draw a gradient fill
+ *
+ * @param  {number} type
+ * @param  {array} stops
+ * @param  {Float32Array} matrix
+ * @param  {number} spread
+ * @param  {number} interpolation
+ * @param  {number} focal
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (type: number, stops: number[], matrix: Float32Array, spread: number, interpolation: number, focal: number) => void;

package/src/Context/usecase/ContextGradientFillUseCase.js

@@ -0,0 +1,34 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
+import { $gradientData } from "../../Gradient";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description グラデーション塗りを描画
+ *              Draw a gradient fill
+ *
+ * @param  {number} type
+ * @param  {array} stops
+ * @param  {Float32Array} matrix
+ * @param  {number} spread
+ * @param  {number} interpolation
+ * @param  {number} focal
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (type, stops, matrix, spread, interpolation, focal) => {
+    const vertices = $getVertices();
+    if (!vertices.length) {
+        return;
+    }
+    // 塗りの種類を追加
+    $fillTypes.push(type === 0 ? "linear" : "radial");
+    const fillMesh = meshFillGenerateUseCase(vertices);
+    $addFillBuffer(fillMesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(fillMesh.indexCount);
+    $gradientData.push(stops, matrix, spread, interpolation);
+    if (type === 1) {
+        $gradientData.push(focal);
+    }
+};

package/src/Context/usecase/ContextGradientStrokeUseCase.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description 線のグラデーションを実行
+ *              Execute gradient of line
+ *
+ * @param  {number} type
+ * @param  {array} stops
+ * @param  {Float32Array} matrix
+ * @param  {number} spread
+ * @param  {number} interpolation
+ * @param  {number} focal
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (type: number, stops: number[], matrix: Float32Array, spread: number, interpolation: number, focal: number) => void;

package/src/Context/usecase/ContextGradientStrokeUseCase.js

@@ -0,0 +1,34 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshStrokeGenerateUseCase } from "../../Mesh/usecase/MeshStrokeGenerateUseCase";
+import { $gradientData } from "../../Gradient";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description 線のグラデーションを実行
+ *              Execute gradient of line
+ *
+ * @param  {number} type
+ * @param  {array} stops
+ * @param  {Float32Array} matrix
+ * @param  {number} spread
+ * @param  {number} interpolation
+ * @param  {number} focal
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (type, stops, matrix, spread, interpolation, focal) => {
+    const vertices = $getVertices();
+    if (!vertices.length) {
+        return;
+    }
+    // 塗りの種類を追加
+    $fillTypes.push(type === 0 ? "linear" : "radial");
+    const mesh = meshStrokeGenerateUseCase(vertices);
+    $addFillBuffer(mesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(mesh.indexCount);
+    $gradientData.push(stops, matrix, spread, interpolation);
+    if (type === 1) {
+        $gradientData.push(focal);
+    }
+};

package/src/Context/usecase/ContextLinearGradientFillUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description 線形グラデーションのシェーダーを実行します。
+ *              Execute the linear gradient shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex_array_object: IVertexArrayObject, offset: number, index_count: number, grid_data: Float32Array | null) => void;

package/src/Context/usecase/ContextLinearGradientFillUseCase.js

@@ -0,0 +1,56 @@
+import { execute as gradientLUTGenerateShapeTextureUseCase } from "../../Shader/GradientLUTGenerator/usecase/GradientLUTGenerateShapeTextureUseCase";
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as variantsShapeMaskShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeMaskShaderService";
+import { execute as shaderManagerSetMaskUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMaskUniformService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as variantsGradientShapeShaderUseCase } from "../../Shader/Variants/Gradient/usecase/VariantsGradientShapeShaderUseCase";
+import { execute as shaderManagerSetGradientFillUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetGradientFillUniformService";
+import { $gradientData } from "../../Gradient";
+import { $gl, $linearGradientXY, $inverseMatrix, $context, $poolFloat32Array6, $poolFloat32Array4 } from "../../WebGLUtil";
+/**
+ * @description 線形グラデーションのシェーダーを実行します。
+ *              Execute the linear gradient shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (vertex_array_object, offset, index_count, grid_data) => {
+    const stops = $gradientData.shift();
+    const matrix = $gradientData.shift();
+    const spread = $gradientData.shift();
+    const interpolation = $gradientData.shift();
+    $gl.disable($gl.STENCIL_TEST);
+    const textureObject = gradientLUTGenerateShapeTextureUseCase(stops, interpolation);
+    textureManagerBind0UseCase(textureObject);
+    $gl.enable($gl.STENCIL_TEST);
+    $gl.frontFace($gl.CCW);
+    $gl.stencilMask(0xff);
+    // mask setting
+    $gl.stencilFunc($gl.ALWAYS, 0, 0xff);
+    $gl.stencilOpSeparate($gl.FRONT, $gl.KEEP, $gl.KEEP, $gl.INCR_WRAP);
+    $gl.stencilOpSeparate($gl.BACK, $gl.KEEP, $gl.KEEP, $gl.DECR_WRAP);
+    $gl.colorMask(false, false, false, false);
+    const useGrid = !!grid_data;
+    const coverageShader = variantsShapeMaskShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetMaskUniformService(coverageShader, grid_data);
+    }
+    $gl.enable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    shaderManagerFillUseCase(coverageShader, vertex_array_object, offset, index_count);
+    $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    $gl.stencilFunc($gl.NOTEQUAL, 0, 0xff);
+    $gl.stencilOp($gl.KEEP, $gl.ZERO, $gl.ZERO);
+    $gl.colorMask(true, true, true, true);
+    const shaderManager = variantsGradientShapeShaderUseCase(false, false, spread, useGrid);
+    const points = $linearGradientXY(matrix);
+    const inverseMatrix = $inverseMatrix($context.$matrix);
+    shaderManagerSetGradientFillUniformService(shaderManager, 0, $context.$matrix, inverseMatrix, 0, points, grid_data);
+    $poolFloat32Array4(points);
+    $poolFloat32Array6(inverseMatrix);
+    shaderManagerFillUseCase(shaderManager, vertex_array_object, offset, index_count);
+};

package/src/Context/usecase/ContextNormalFillUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description 塗りのシェーダーを実行します。
+ *              Execute the fill shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex_array_object: IVertexArrayObject, offset: number, index_count: number, grid_data: Float32Array | null) => void;

package/src/Context/usecase/ContextNormalFillUseCase.js

@@ -0,0 +1,42 @@
+import { execute as variantsShapeMaskShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeMaskShaderService";
+import { execute as shaderManagerSetMaskUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMaskUniformService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as variantsShapeSolidColorShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeSolidColorShaderService";
+import { execute as shaderManagerSetFillUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetFillUniformService";
+import { $gl } from "../../WebGLUtil";
+/**
+ * @description 塗りのシェーダーを実行します。
+ *              Execute the fill shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (vertex_array_object, offset, index_count, grid_data) => {
+    // mask setting
+    $gl.stencilFunc($gl.ALWAYS, 0, 0xff);
+    $gl.stencilOpSeparate($gl.FRONT, $gl.KEEP, $gl.KEEP, $gl.INCR_WRAP);
+    $gl.stencilOpSeparate($gl.BACK, $gl.KEEP, $gl.KEEP, $gl.DECR_WRAP);
+    $gl.colorMask(false, false, false, false);
+    const useGrid = !!grid_data;
+    const coverageShader = variantsShapeMaskShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetMaskUniformService(coverageShader, grid_data);
+    }
+    $gl.enable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    shaderManagerFillUseCase(coverageShader, vertex_array_object, offset, index_count);
+    $gl.disable($gl.SAMPLE_ALPHA_TO_COVERAGE);
+    // draw shape setting
+    $gl.stencilFunc($gl.NOTEQUAL, 0, 0xff);
+    $gl.stencilOp($gl.KEEP, $gl.ZERO, $gl.ZERO);
+    $gl.colorMask(true, true, true, true);
+    const shaderManager = variantsShapeSolidColorShaderService(useGrid);
+    if (grid_data) {
+        shaderManagerSetFillUniformService(shaderManager, grid_data);
+    }
+    shaderManagerFillUseCase(shaderManager, vertex_array_object, offset, index_count);
+};

package/src/Context/usecase/ContextPatternBitmapFillUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { IVertexArrayObject } from "../../interface/IVertexArrayObject";
+/**
+ * @description 放射状グラデーションのシェーダーを実行します。
+ *              Execute the radial gradient shader.
+ *
+ * @param  {IVertexArrayObject} vertex_array_object
+ * @param  {number} offset
+ * @param  {number} index_count
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (vertex_array_object: IVertexArrayObject, offset: number, index_count: number, grid_data: Float32Array | null) => void;