@next2d/webgpu 3.0.0

package/src/Shader/BlendModeShader.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @description WebGPU用ブレンドモードシェーダー
+ *              Blend mode shaders for WebGPU
+ */
+export declare class BlendModeShader {
+    /**
+     * @description ブレンドモード用の頂点シェーダー
+     * @return {string}
+     */
+    static getVertexShader(): string;
+    /**
+     * @description Multiplyブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getMultiplyShader(): string;
+    /**
+     * @description Screenブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getScreenShader(): string;
+    /**
+     * @description Lightenブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getLightenShader(): string;
+    /**
+     * @description Darkenブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getDarkenShader(): string;
+    /**
+     * @description Overlayブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getOverlayShader(): string;
+    /**
+     * @description Hard Lightブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getHardLightShader(): string;
+    /**
+     * @description Differenceブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getDifferenceShader(): string;
+    /**
+     * @description Subtractブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getSubtractShader(): string;
+}

package/src/Shader/BlendModeShader.js

@@ -0,0 +1,71 @@
+import { BlendModeVertex } from "./wgsl/vertex/FilterVertex";
+import { MultiplyBlendFragment, ScreenBlendFragment, LightenBlendFragment, DarkenBlendFragment, OverlayBlendFragment, HardLightBlendFragment, DifferenceBlendFragment, SubtractBlendFragment } from "./wgsl/fragment/BlendFragment";
+/**
+ * @description WebGPU用ブレンドモードシェーダー
+ *              Blend mode shaders for WebGPU
+ */
+export class BlendModeShader {
+    /**
+     * @description ブレンドモード用の頂点シェーダー
+     * @return {string}
+     */
+    static getVertexShader() {
+        return BlendModeVertex;
+    }
+    /**
+     * @description Multiplyブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getMultiplyShader() {
+        return MultiplyBlendFragment;
+    }
+    /**
+     * @description Screenブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getScreenShader() {
+        return ScreenBlendFragment;
+    }
+    /**
+     * @description Lightenブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getLightenShader() {
+        return LightenBlendFragment;
+    }
+    /**
+     * @description Darkenブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getDarkenShader() {
+        return DarkenBlendFragment;
+    }
+    /**
+     * @description Overlayブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getOverlayShader() {
+        return OverlayBlendFragment;
+    }
+    /**
+     * @description Hard Lightブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getHardLightShader() {
+        return HardLightBlendFragment;
+    }
+    /**
+     * @description Differenceブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getDifferenceShader() {
+        return DifferenceBlendFragment;
+    }
+    /**
+     * @description Subtractブレンド用のフラグメントシェーダー
+     * @return {string}
+     */
+    static getSubtractShader() {
+        return SubtractBlendFragment;
+    }
+}

package/src/Shader/GradientLUTGenerator/service/GradientLUTCalculateResolutionService.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description グラデーションストップ数に応じた適応的解像度を計算
+ *              Calculate adaptive resolution based on number of gradient stops
+ *
+ * @param  {number} stopsCount - グラデーションストップの数
+ * @param  {number} [minResolution=64] - 最小解像度
+ * @param  {number} [maxResolution=512] - 最大解像度
+ * @return {number}
+ * @method
+ * @protected
+ */
+export declare const execute: (stopsCount: number, minResolution?: number, maxResolution?: number) => number;

package/src/Shader/GradientLUTGenerator/service/GradientLUTCalculateResolutionService.js

@@ -0,0 +1,28 @@
+/**
+ * @description グラデーションストップ数に応じた適応的解像度を計算
+ *              Calculate adaptive resolution based on number of gradient stops
+ *
+ * @param  {number} stopsCount - グラデーションストップの数
+ * @param  {number} [minResolution=64] - 最小解像度
+ * @param  {number} [maxResolution=512] - 最大解像度
+ * @return {number}
+ * @method
+ * @protected
+ */
+export const execute = (stopsCount, minResolution = 64, maxResolution = 512) => {
+    // ストップ数に応じて解像度を調整
+    // 2ストップ: 64px
+    // 3-4ストップ: 128px
+    // 5-8ストップ: 256px
+    // 9以上: 512px
+    if (stopsCount <= 2) {
+        return Math.max(minResolution, 64);
+    }
+    if (stopsCount <= 4) {
+        return Math.min(maxResolution, Math.max(minResolution, 128));
+    }
+    if (stopsCount <= 8) {
+        return Math.min(maxResolution, Math.max(minResolution, 256));
+    }
+    return maxResolution;
+};

package/src/Shader/GradientLUTGenerator/service/GradientLUTGeneratePixelsService.d.ts

@@ -0,0 +1,13 @@
+import type { IGradientStop } from "../../../interface/IGradientStop";
+/**
+ * @description グラデーションLUTのピクセルデータを生成
+ *              Generate pixel data for gradient LUT
+ *
+ * @param  {IGradientStop[]} stops - ソート済みのグラデーションストップ
+ * @param  {number} resolution - LUTの解像度（ピクセル数）
+ * @param  {number} interpolation - 0: RGB, 1: Linear RGB
+ * @return {Uint8Array}
+ * @method
+ * @protected
+ */
+export declare const execute: (stops: IGradientStop[], resolution: number, interpolation: number) => Uint8Array;

package/src/Shader/GradientLUTGenerator/service/GradientLUTGeneratePixelsService.js

@@ -0,0 +1,61 @@
+import { execute as gradientLUTInterpolateColorService } from "./GradientLUTInterpolateColorService";
+/**
+ * @description グラデーションLUTのピクセルデータを生成
+ *              Generate pixel data for gradient LUT
+ *
+ * @param  {IGradientStop[]} stops - ソート済みのグラデーションストップ
+ * @param  {number} resolution - LUTの解像度（ピクセル数）
+ * @param  {number} interpolation - 0: RGB, 1: Linear RGB
+ * @return {Uint8Array}
+ * @method
+ * @protected
+ */
+export const execute = (stops, resolution, interpolation) => {
+    const pixels = new Uint8Array(resolution * 4);
+    if (stops.length === 0) {
+        return pixels;
+    }
+    if (stops.length === 1) {
+        // 単一ストップの場合は全体を同じ色で塗る
+        const stop = stops[0];
+        for (let i = 0; i < resolution; i++) {
+            const offset = i * 4;
+            pixels[offset] = Math.round(stop.r * 255);
+            pixels[offset + 1] = Math.round(stop.g * 255);
+            pixels[offset + 2] = Math.round(stop.b * 255);
+            pixels[offset + 3] = Math.round(stop.a * 255);
+        }
+        return pixels;
+    }
+    for (let i = 0; i < resolution; i++) {
+        const ratio = i / (resolution - 1);
+        // 該当するストップ区間を見つける
+        let startStopIndex = 0;
+        for (let j = 0; j < stops.length - 1; j++) {
+            if (ratio >= stops[j].ratio && ratio <= stops[j + 1].ratio) {
+                startStopIndex = j;
+                break;
+            }
+            if (ratio > stops[j + 1].ratio) {
+                startStopIndex = j + 1;
+            }
+        }
+        const startStop = stops[startStopIndex];
+        const endStop = stops[Math.min(startStopIndex + 1, stops.length - 1)];
+        // 区間内での補間係数を計算
+        let t = 0;
+        const rangeWidth = endStop.ratio - startStop.ratio;
+        if (rangeWidth > 0) {
+            t = (ratio - startStop.ratio) / rangeWidth;
+            t = Math.max(0, Math.min(1, t));
+        }
+        // 色を補間
+        const color = gradientLUTInterpolateColorService(startStop, endStop, t, interpolation);
+        const offset = i * 4;
+        pixels[offset] = Math.round(color.r * 255);
+        pixels[offset + 1] = Math.round(color.g * 255);
+        pixels[offset + 2] = Math.round(color.b * 255);
+        pixels[offset + 3] = Math.round(color.a * 255);
+    }
+    return pixels;
+};

package/src/Shader/GradientLUTGenerator/service/GradientLUTInterpolateColorService.d.ts

@@ -0,0 +1,19 @@
+import type { IGradientStop } from "../../../interface/IGradientStop";
+/**
+ * @description 2つのストップ間で色を補間
+ *              Interpolate color between two stops
+ *
+ * @param  {IGradientStop} startStop
+ * @param  {IGradientStop} endStop
+ * @param  {number} t - 補間係数 (0-1)
+ * @param  {number} interpolation - 0: RGB, 1: Linear RGB
+ * @return {{ r: number, g: number, b: number, a: number }}
+ * @method
+ * @protected
+ */
+export declare const execute: (startStop: IGradientStop, endStop: IGradientStop, t: number, interpolation: number) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};

package/src/Shader/GradientLUTGenerator/service/GradientLUTInterpolateColorService.js

@@ -0,0 +1,37 @@
+/**
+ * @description 2つのストップ間で色を補間
+ *              Interpolate color between two stops
+ *
+ * @param  {IGradientStop} startStop
+ * @param  {IGradientStop} endStop
+ * @param  {number} t - 補間係数 (0-1)
+ * @param  {number} interpolation - 0: RGB, 1: Linear RGB
+ * @return {{ r: number, g: number, b: number, a: number }}
+ * @method
+ * @protected
+ */
+export const execute = (startStop, endStop, t, interpolation) => {
+    let r;
+    let g;
+    let b;
+    if (interpolation === 1) {
+        // Linear RGB補間（ガンマ補正あり）
+        const sr = Math.pow(startStop.r, 2.2);
+        const sg = Math.pow(startStop.g, 2.2);
+        const sb = Math.pow(startStop.b, 2.2);
+        const er = Math.pow(endStop.r, 2.2);
+        const eg = Math.pow(endStop.g, 2.2);
+        const eb = Math.pow(endStop.b, 2.2);
+        r = Math.pow(sr + (er - sr) * t, 1 / 2.2);
+        g = Math.pow(sg + (eg - sg) * t, 1 / 2.2);
+        b = Math.pow(sb + (eb - sb) * t, 1 / 2.2);
+    }
+    else {
+        // 通常のRGB補間
+        r = startStop.r + (endStop.r - startStop.r) * t;
+        g = startStop.g + (endStop.g - startStop.g) * t;
+        b = startStop.b + (endStop.b - startStop.b) * t;
+    }
+    const a = startStop.a + (endStop.a - startStop.a) * t;
+    return { r, g, b, a };
+};

package/src/Shader/GradientLUTGenerator/service/GradientLUTParseStopsService.d.ts

@@ -0,0 +1,11 @@
+import type { IGradientStop } from "../../../interface/IGradientStop";
+/**
+ * @description グラデーションストップ配列をパースしてソート
+ *              Parse and sort gradient stops array
+ *
+ * @param  {number[]} stops - [ratio, r, g, b, a, ratio, r, g, b, a, ...]
+ * @return {IGradientStop[]}
+ * @method
+ * @protected
+ */
+export declare const execute: (stops: number[]) => IGradientStop[];

package/src/Shader/GradientLUTGenerator/service/GradientLUTParseStopsService.js

@@ -0,0 +1,24 @@
+/**
+ * @description グラデーションストップ配列をパースしてソート
+ *              Parse and sort gradient stops array
+ *
+ * @param  {number[]} stops - [ratio, r, g, b, a, ratio, r, g, b, a, ...]
+ * @return {IGradientStop[]}
+ * @method
+ * @protected
+ */
+export const execute = (stops) => {
+    const gradientStops = [];
+    for (let i = 0; i < stops.length; i += 5) {
+        gradientStops.push({
+            "ratio": stops[i],
+            "r": stops[i + 1],
+            "g": stops[i + 2],
+            "b": stops[i + 3],
+            "a": stops[i + 4]
+        });
+    }
+    // ストップポイントをratio順にソート
+    gradientStops.sort((a, b) => a.ratio - b.ratio);
+    return gradientStops;
+};

package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGenerateDataUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { IGradientLUTData } from "../../../interface/IGradientLUTData";
+/**
+ * @description グラデーションLUTのピクセルデータを生成
+ *              Generate gradient LUT pixel data
+ *
+ * @param  {number[]} stops - [ratio, r, g, b, a, ratio, r, g, b, a, ...]
+ * @param  {number} interpolation - 0: RGB, 1: Linear RGB
+ * @param  {number} [minResolution=64] - 最小解像度
+ * @param  {number} [maxResolution=512] - 最大解像度
+ * @return {IGradientLUTData}
+ * @method
+ * @protected
+ */
+export declare const execute: (stops: number[], interpolation: number, minResolution?: number, maxResolution?: number) => IGradientLUTData;

package/src/Shader/GradientLUTGenerator/usecase/GradientLUTGenerateDataUseCase.js

@@ -0,0 +1,24 @@
+import { execute as gradientLUTParseStopsService } from "../service/GradientLUTParseStopsService";
+import { execute as gradientLUTCalculateResolutionService } from "../service/GradientLUTCalculateResolutionService";
+import { execute as gradientLUTGeneratePixelsService } from "../service/GradientLUTGeneratePixelsService";
+/**
+ * @description グラデーションLUTのピクセルデータを生成
+ *              Generate gradient LUT pixel data
+ *
+ * @param  {number[]} stops - [ratio, r, g, b, a, ratio, r, g, b, a, ...]
+ * @param  {number} interpolation - 0: RGB, 1: Linear RGB
+ * @param  {number} [minResolution=64] - 最小解像度
+ * @param  {number} [maxResolution=512] - 最大解像度
+ * @return {IGradientLUTData}
+ * @method
+ * @protected
+ */
+export const execute = (stops, interpolation, minResolution = 64, maxResolution = 512) => {
+    // ストップ配列をパースしてソート
+    const parsedStops = gradientLUTParseStopsService(stops);
+    // ストップ数に応じた解像度を計算
+    const resolution = gradientLUTCalculateResolutionService(parsedStops.length, minResolution, maxResolution);
+    // ピクセルデータを生成
+    const pixels = gradientLUTGeneratePixelsService(parsedStops, resolution, interpolation);
+    return { pixels, resolution };
+};

package/src/Shader/PipelineManager.d.ts

@@ -0,0 +1,57 @@
+export declare class PipelineManager {
+    private device;
+    private format;
+    private pipelines;
+    private bindGroupLayouts;
+    private sampleCount;
+    private shaderModuleCache;
+    private filterBindGroupLayouts;
+    constructor(device: GPUDevice, format: GPUTextureFormat);
+    private getOrCreateShaderModule;
+    private initialize;
+    private lazyInitGroups;
+    private readonly lazyGroupMap;
+    private ensureLazyGroup;
+    preloadLazyGroups(): void;
+    private createFillPipeline;
+    private createStencilFillPipelines;
+    private createClipPipeline;
+    private createMaskUnionPipelines;
+    private createMaskPipeline;
+    private createBasicPipeline;
+    private createTexturePipeline;
+    private createInstancedPipeline;
+    private createGradientPipeline;
+    private createBitmapFillPipeline;
+    private createBlendPipeline;
+    private createBlurFilterPipeline;
+    private createTextureCopyPipeline;
+    private createPositionedTexturePipeline;
+    private createTextureScalePipeline;
+    private createBitmapSyncPipeline;
+    private createColorMatrixFilterPipeline;
+    private createComplexBlendPipelines;
+    private createComplexBlendCopyPipeline;
+    private createComplexBlendOutputPipeline;
+    private createFilterPipelineWithLayout;
+    private createFullscreenQuadPipeline;
+    getPipeline(name: string): GPURenderPipeline | undefined;
+    /**
+     * @description フィルターパイプラインのoverride定数バリアントを取得
+     *              GPU warp divergenceを排除するコンパイル時分岐特殊化
+     */
+    getFilterPipeline(baseName: string, constants: Record<string, number>): GPURenderPipeline | undefined;
+    /**
+     * @description グラデーションタイプとスプレッドモードに応じた特殊化パイプラインを取得
+     *              override定数でGPU warp divergenceを排除
+     */
+    getGradientPipeline(baseName: string, gradientType: number, spreadMode: number): GPURenderPipeline | undefined;
+    private gradientPipelineLayout;
+    private gradientVertexShaderModule;
+    private gradientFragmentShaderModule;
+    private gradientStencilFragmentShaderModule;
+    private createGradientVariant;
+    getBindGroupLayout(name: string): GPUBindGroupLayout | undefined;
+    private createNodeClearPipeline;
+    dispose(): void;
+}