@next2d/webgpu 3.0.0

package/src/PathCommand.d.ts

@@ -0,0 +1,123 @@
+import type { IPoint } from "./interface/IPoint";
+import type { IPath } from "./interface/IPath";
+/**
+ * @description WebGPU用パスコマンド（WebGL互換形式）
+ *              Path commands for WebGPU (WebGL compatible format)
+ *
+ * パス形式: [x, y, isControlPoint, x, y, isControlPoint, ...]
+ * - isControlPoint = true: 二次ベジェ曲線の制御点
+ * - isControlPoint = false: 通常の頂点または終点
+ */
+export declare class PathCommand {
+    private $currentPath;
+    private $vertices;
+    private $currentX;
+    private $currentY;
+    private $startX;
+    private $startY;
+    /**
+     * @constructor
+     */
+    constructor();
+    /**
+     * @description パスを開始
+     * @return {void}
+     */
+    beginPath(): void;
+    /**
+     * @description パスを移動
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    moveTo(x: number, y: number): void;
+    /**
+     * @description 直線を描画
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    lineTo(x: number, y: number): void;
+    /**
+     * @description 二次ベジェ曲線を描画（Loop-Blinn方式対応）
+     * @param {number} cx
+     * @param {number} cy
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    quadraticCurveTo(cx: number, cy: number, x: number, y: number): void;
+    /**
+     * @description フラットネス閾値（スケールに応じて調整可能）
+     *              Flatness threshold for adaptive tessellation
+     *              0.25 = 0.5px squared（滑らかなストローク描画用）
+     */
+    private $flatnessThreshold;
+    /**
+     * @description フラットネス閾値を設定
+     *              Set flatness threshold for adaptive bezier tessellation
+     * @param {number} scale - 現在のスケール（行列のスケール成分）
+     * @return {void}
+     */
+    setScale(scale: number): void;
+    /**
+     * @description 三次ベジェ曲線を二次ベジェ曲線に適応的に近似
+     *              Adaptively approximate cubic bezier with quadratic beziers
+     *
+     * フラットネス（平坦度）に基づいて動的に分割数を決定。
+     * 単純な曲線は少ない分割、複雑な曲線は多い分割を行う。
+     *
+     * @param {number} cx1
+     * @param {number} cy1
+     * @param {number} cx2
+     * @param {number} cy2
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    bezierCurveTo(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): void;
+    /**
+     * @description 円弧を描画（WebGL版と同じ実装: 4つの三次ベジェ曲線を使用）
+     * @param {number} x
+     * @param {number} y
+     * @param {number} radius
+     * @return {void}
+     */
+    arc(x: number, y: number, radius: number): void;
+    /**
+     * @description パスを閉じる
+     * @return {void}
+     */
+    closePath(): void;
+    /**
+     * @description 頂点データを取得（fill用: 3点以上が必要）
+     * @return {IPath[]}
+     */
+    get $getVertices(): IPath[];
+    /**
+     * @description パスから頂点配列を生成（従来互換用・単純なfan triangulation）
+     * @return {Float32Array}
+     */
+    generateVertices(): Float32Array;
+    /**
+     * @description 現在のパスを取得（ストローク用）
+     * @return {IPoint[]}
+     */
+    getCurrentPath(): IPoint[];
+    /**
+     * @description すべてのパスを取得（ストローク用）
+     * @return {IPoint[][]}
+     */
+    getAllPaths(): IPoint[][];
+    /**
+     * @description WebGL互換形式でパスを取得（ストローク用）
+     *              [x, y, isCurve, x, y, isCurve, ...] 形式
+     * @return {IPath[]}
+     */
+    getVerticesForStroke(): IPath[];
+    /**
+     * @description リセット
+     * @return {void}
+     */
+    reset(): void;
+}

package/src/PathCommand.js

@@ -0,0 +1,317 @@
+import { adaptiveCubicToQuad, calculateAdaptiveThreshold } from "./BezierConverter/BezierConverter";
+/**
+ * @description WebGPU用パスコマンド（WebGL互換形式）
+ *              Path commands for WebGPU (WebGL compatible format)
+ *
+ * パス形式: [x, y, isControlPoint, x, y, isControlPoint, ...]
+ * - isControlPoint = true: 二次ベジェ曲線の制御点
+ * - isControlPoint = false: 通常の頂点または終点
+ */
+export class PathCommand {
+    /**
+     * @constructor
+     */
+    constructor() {
+        Object.defineProperty(this, "$currentPath", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "$vertices", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "$currentX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "$currentY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "$startX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "$startY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description フラットネス閾値（スケールに応じて調整可能）
+         *              Flatness threshold for adaptive tessellation
+         *              0.25 = 0.5px squared（滑らかなストローク描画用）
+         */
+        Object.defineProperty(this, "$flatnessThreshold", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0.25
+        });
+        this.$currentPath = [];
+        this.$vertices = [];
+        this.$currentX = 0;
+        this.$currentY = 0;
+        this.$startX = 0;
+        this.$startY = 0;
+    }
+    /**
+     * @description パスを開始
+     * @return {void}
+     */
+    beginPath() {
+        this.$currentPath = [];
+        this.$vertices = [];
+        this.$currentX = 0;
+        this.$currentY = 0;
+        this.$startX = 0;
+        this.$startY = 0;
+    }
+    /**
+     * @description パスを移動
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    moveTo(x, y) {
+        // stroke用は2点以上（6要素）、fill用は3点以上（9要素）が必要
+        // WebGL版と同じ: stroke描画に対応するため6要素以上で保存
+        if (this.$currentPath.length >= 6) {
+            this.$vertices.push(this.$currentPath);
+        }
+        this.$currentPath = [x, y, false];
+        this.$currentX = x;
+        this.$currentY = y;
+        this.$startX = x;
+        this.$startY = y;
+    }
+    /**
+     * @description 直線を描画
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    lineTo(x, y) {
+        // 同じ点への移動は無視
+        if (x === this.$currentX && y === this.$currentY) {
+            return;
+        }
+        this.$currentPath.push(x, y, false);
+        this.$currentX = x;
+        this.$currentY = y;
+    }
+    /**
+     * @description 二次ベジェ曲線を描画（Loop-Blinn方式対応）
+     * @param {number} cx
+     * @param {number} cy
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    quadraticCurveTo(cx, cy, x, y) {
+        // 制御点 (isControlPoint = true)
+        this.$currentPath.push(cx, cy, true);
+        // 終点 (isControlPoint = false)
+        this.$currentPath.push(x, y, false);
+        this.$currentX = x;
+        this.$currentY = y;
+    }
+    /**
+     * @description フラットネス閾値を設定
+     *              Set flatness threshold for adaptive bezier tessellation
+     * @param {number} scale - 現在のスケール（行列のスケール成分）
+     * @return {void}
+     */
+    setScale(scale) {
+        this.$flatnessThreshold = calculateAdaptiveThreshold(scale);
+    }
+    /**
+     * @description 三次ベジェ曲線を二次ベジェ曲線に適応的に近似
+     *              Adaptively approximate cubic bezier with quadratic beziers
+     *
+     * フラットネス（平坦度）に基づいて動的に分割数を決定。
+     * 単純な曲線は少ない分割、複雑な曲線は多い分割を行う。
+     *
+     * @param {number} cx1
+     * @param {number} cy1
+     * @param {number} cx2
+     * @param {number} cy2
+     * @param {number} x
+     * @param {number} y
+     * @return {void}
+     */
+    bezierCurveTo(cx1, cy1, cx2, cy2, x, y) {
+        // 適応的テッセレーションで三次ベジェを二次ベジェ群に変換
+        const p0 = { "x": this.$currentX, "y": this.$currentY };
+        const p1 = { "x": cx1, "y": cy1 };
+        const p2 = { "x": cx2, "y": cy2 };
+        const p3 = { "x": x, "y": y };
+        const segments = adaptiveCubicToQuad(p0, p1, p2, p3, this.$flatnessThreshold);
+        // 各二次ベジェセグメントをパスに追加
+        for (const segment of segments) {
+            this.$currentPath.push(segment.ctrl.x, segment.ctrl.y, true);
+            this.$currentPath.push(segment.end.x, segment.end.y, false);
+        }
+        this.$currentX = x;
+        this.$currentY = y;
+    }
+    /**
+     * @description 円弧を描画（WebGL版と同じ実装: 4つの三次ベジェ曲線を使用）
+     * @param {number} x
+     * @param {number} y
+     * @param {number} radius
+     * @return {void}
+     */
+    arc(x, y, radius) {
+        const r = radius;
+        const k = radius * 0.5522847498307936; // 円を三次ベジェで近似するための定数
+        // 4つの三次ベジェ曲線で円を描画
+        // 始点: (x + r, y)
+        // 各象限を1つの三次ベジェ曲線で描画
+        // 第1象限: (x + r, y) -> (x, y + r)
+        this.bezierCurveTo(x + r, y + k, x + k, y + r, x, y + r);
+        // 第2象限: (x, y + r) -> (x - r, y)
+        this.bezierCurveTo(x - k, y + r, x - r, y + k, x - r, y);
+        // 第3象限: (x - r, y) -> (x, y - r)
+        this.bezierCurveTo(x - r, y - k, x - k, y - r, x, y - r);
+        // 第4象限: (x, y - r) -> (x + r, y) - 終点は始点と同じ
+        this.bezierCurveTo(x + k, y - r, x + r, y - k, x + r, y);
+        // 閉じた円の終点を始点座標で強制上書き（浮動小数点誤差を排除）
+        // ストロークのjoin処理で始点と終点が完全一致する必要があるため
+        const pathLength = this.$currentPath.length;
+        if (pathLength >= 3) {
+            this.$currentPath[pathLength - 3] = this.$startX;
+            this.$currentPath[pathLength - 2] = this.$startY;
+        }
+        this.$currentX = this.$startX;
+        this.$currentY = this.$startY;
+    }
+    /**
+     * @description パスを閉じる
+     * @return {void}
+     */
+    closePath() {
+        if (this.$currentPath.length >= 3) {
+            // 始点に戻る直線
+            if (this.$currentX !== this.$startX || this.$currentY !== this.$startY) {
+                this.$currentPath.push(this.$startX, this.$startY, false);
+            }
+        }
+    }
+    /**
+     * @description 頂点データを取得（fill用: 3点以上が必要）
+     * @return {IPath[]}
+     */
+    get $getVertices() {
+        const vertices = [...this.$vertices];
+        // fill用は3点以上（9要素）が必要
+        if (this.$currentPath.length >= 9) {
+            vertices.push(this.$currentPath);
+        }
+        return vertices;
+    }
+    /**
+     * @description パスから頂点配列を生成（従来互換用・単純なfan triangulation）
+     * @return {Float32Array}
+     */
+    generateVertices() {
+        const vertices = this.$getVertices;
+        const triangles = [];
+        for (const path of vertices) {
+            if (path.length < 9) {
+                continue;
+            } // 最低3点（9要素）必要
+            // 点を抽出
+            const points = [];
+            for (let i = 0; i < path.length; i += 3) {
+                points.push({ "x": path[i], "y": path[i + 1] });
+            }
+            // Fan triangulation
+            for (let i = 1; i < points.length - 1; i++) {
+                triangles.push(points[0].x, points[0].y, points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
+            }
+        }
+        return new Float32Array(triangles);
+    }
+    /**
+     * @description 現在のパスを取得（ストローク用）
+     * @return {IPoint[]}
+     */
+    getCurrentPath() {
+        const points = [];
+        for (let i = 0; i < this.$currentPath.length; i += 3) {
+            points.push({
+                "x": this.$currentPath[i],
+                "y": this.$currentPath[i + 1]
+            });
+        }
+        return points;
+    }
+    /**
+     * @description すべてのパスを取得（ストローク用）
+     * @return {IPoint[][]}
+     */
+    getAllPaths() {
+        const allPaths = [];
+        for (const path of this.$vertices) {
+            const points = [];
+            for (let i = 0; i < path.length; i += 3) {
+                points.push({
+                    "x": path[i],
+                    "y": path[i + 1]
+                });
+            }
+            if (points.length > 0) {
+                allPaths.push(points);
+            }
+        }
+        if (this.$currentPath.length >= 3) {
+            const points = [];
+            for (let i = 0; i < this.$currentPath.length; i += 3) {
+                points.push({
+                    "x": this.$currentPath[i],
+                    "y": this.$currentPath[i + 1]
+                });
+            }
+            if (points.length > 0) {
+                allPaths.push(points);
+            }
+        }
+        return allPaths;
+    }
+    /**
+     * @description WebGL互換形式でパスを取得（ストローク用）
+     *              [x, y, isCurve, x, y, isCurve, ...] 形式
+     * @return {IPath[]}
+     */
+    getVerticesForStroke() {
+        const vertices = [...this.$vertices];
+        if (this.$currentPath.length >= 6) {
+            vertices.push(this.$currentPath);
+        }
+        return vertices;
+    }
+    /**
+     * @description リセット
+     * @return {void}
+     */
+    reset() {
+        this.$currentPath = [];
+        this.$vertices = [];
+        this.$currentX = 0;
+        this.$currentY = 0;
+        this.$startX = 0;
+        this.$startY = 0;
+    }
+}

package/src/SamplerCache/service/SamplerCacheCreateCommonSamplersService.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description 頻繁に使用されるサンプラーを事前に作成
+ *              Pre-create commonly used samplers
+ *
+ * @param  {GPUDevice} device
+ * @param  {Map<string, GPUSampler>} cache
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (device: GPUDevice, cache: Map<string, GPUSampler>) => void;

package/src/SamplerCache/service/SamplerCacheCreateCommonSamplersService.js

@@ -0,0 +1,35 @@
+import { execute as samplerCacheGenerateKeyService } from "./SamplerCacheGenerateKeyService";
+/**
+ * @description 頻繁に使用されるサンプラーを事前に作成
+ *              Pre-create commonly used samplers
+ *
+ * @param  {GPUDevice} device
+ * @param  {Map<string, GPUSampler>} cache
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (device, cache) => {
+    const createAndCache = (minFilter, magFilter, addressModeU, addressModeV) => {
+        const key = samplerCacheGenerateKeyService(minFilter, magFilter, addressModeU, addressModeV);
+        if (!cache.has(key)) {
+            const sampler = device.createSampler({
+                minFilter,
+                magFilter,
+                addressModeU,
+                addressModeV
+            });
+            cache.set(key, sampler);
+        }
+    };
+    // リニアクランプ（最も一般的）
+    createAndCache("linear", "linear", "clamp-to-edge", "clamp-to-edge");
+    // ニアレストクランプ
+    createAndCache("nearest", "nearest", "clamp-to-edge", "clamp-to-edge");
+    // リニアリピート
+    createAndCache("linear", "linear", "repeat", "repeat");
+    // ニアレストリピート
+    createAndCache("nearest", "nearest", "repeat", "repeat");
+    // リニアミラーリピート
+    createAndCache("linear", "linear", "mirror-repeat", "mirror-repeat");
+};

package/src/SamplerCache/service/SamplerCacheGenerateKeyService.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description サンプラーのキーを生成
+ *              Generate sampler cache key
+ *
+ * @param  {GPUFilterMode} minFilter
+ * @param  {GPUFilterMode} magFilter
+ * @param  {GPUAddressMode} addressModeU
+ * @param  {GPUAddressMode} addressModeV
+ * @return {string}
+ * @method
+ * @protected
+ */
+export declare const execute: (minFilter: GPUFilterMode, magFilter: GPUFilterMode, addressModeU: GPUAddressMode, addressModeV: GPUAddressMode) => string;

package/src/SamplerCache/service/SamplerCacheGenerateKeyService.js

@@ -0,0 +1,15 @@
+/**
+ * @description サンプラーのキーを生成
+ *              Generate sampler cache key
+ *
+ * @param  {GPUFilterMode} minFilter
+ * @param  {GPUFilterMode} magFilter
+ * @param  {GPUAddressMode} addressModeU
+ * @param  {GPUAddressMode} addressModeV
+ * @return {string}
+ * @method
+ * @protected
+ */
+export const execute = (minFilter, magFilter, addressModeU, addressModeV) => {
+    return `${minFilter}_${magFilter}_${addressModeU}_${addressModeV}`;
+};

package/src/SamplerCache/service/SamplerCacheGetOrCreateService.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description サンプラーを取得または作成
+ *              Get or create sampler
+ *
+ * @param  {GPUDevice} device
+ * @param  {Map<string, GPUSampler>} cache
+ * @param  {GPUFilterMode} minFilter
+ * @param  {GPUFilterMode} magFilter
+ * @param  {GPUAddressMode} addressModeU
+ * @param  {GPUAddressMode} addressModeV
+ * @return {GPUSampler}
+ * @method
+ * @protected
+ */
+export declare const execute: (device: GPUDevice, cache: Map<string, GPUSampler>, minFilter: GPUFilterMode, magFilter: GPUFilterMode, addressModeU: GPUAddressMode, addressModeV: GPUAddressMode) => GPUSampler;

package/src/SamplerCache/service/SamplerCacheGetOrCreateService.js

@@ -0,0 +1,30 @@
+import { execute as samplerCacheGenerateKeyService } from "./SamplerCacheGenerateKeyService";
+/**
+ * @description サンプラーを取得または作成
+ *              Get or create sampler
+ *
+ * @param  {GPUDevice} device
+ * @param  {Map<string, GPUSampler>} cache
+ * @param  {GPUFilterMode} minFilter
+ * @param  {GPUFilterMode} magFilter
+ * @param  {GPUAddressMode} addressModeU
+ * @param  {GPUAddressMode} addressModeV
+ * @return {GPUSampler}
+ * @method
+ * @protected
+ */
+export const execute = (device, cache, minFilter, magFilter, addressModeU, addressModeV) => {
+    const key = samplerCacheGenerateKeyService(minFilter, magFilter, addressModeU, addressModeV);
+    const cached = cache.get(key);
+    if (cached) {
+        return cached;
+    }
+    const sampler = device.createSampler({
+        minFilter,
+        magFilter,
+        addressModeU,
+        addressModeV
+    });
+    cache.set(key, sampler);
+    return sampler;
+};

package/src/SamplerCache.d.ts

@@ -0,0 +1,18 @@
+export declare class SamplerCache {
+    private device;
+    private cache;
+    constructor(device: GPUDevice);
+    getOrCreate(minFilter: GPUFilterMode, magFilter: GPUFilterMode, addressModeU: GPUAddressMode, addressModeV: GPUAddressMode): GPUSampler;
+    getLinearClamp(): GPUSampler;
+    getNearestClamp(): GPUSampler;
+    getLinearRepeat(): GPUSampler;
+    getNearestRepeat(): GPUSampler;
+    getBySmoothRepeat(smooth: boolean, repeat: boolean): GPUSampler;
+    getStats(): {
+        size: number;
+    };
+    dispose(): void;
+}
+export declare const initSamplerCache: (device: GPUDevice) => void;
+export declare const getSamplerCache: () => SamplerCache | null;
+export declare const clearSamplerCache: () => void;

package/src/SamplerCache.js

@@ -0,0 +1,61 @@
+import { execute as samplerCacheGetOrCreateService } from "./SamplerCache/service/SamplerCacheGetOrCreateService";
+import { execute as samplerCacheCreateCommonSamplersService } from "./SamplerCache/service/SamplerCacheCreateCommonSamplersService";
+export class SamplerCache {
+    constructor(device) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.device = device;
+        this.cache = new Map();
+        samplerCacheCreateCommonSamplersService(device, this.cache);
+    }
+    getOrCreate(minFilter, magFilter, addressModeU, addressModeV) {
+        return samplerCacheGetOrCreateService(this.device, this.cache, minFilter, magFilter, addressModeU, addressModeV);
+    }
+    getLinearClamp() {
+        return this.getOrCreate("linear", "linear", "clamp-to-edge", "clamp-to-edge");
+    }
+    getNearestClamp() {
+        return this.getOrCreate("nearest", "nearest", "clamp-to-edge", "clamp-to-edge");
+    }
+    getLinearRepeat() {
+        return this.getOrCreate("linear", "linear", "repeat", "repeat");
+    }
+    getNearestRepeat() {
+        return this.getOrCreate("nearest", "nearest", "repeat", "repeat");
+    }
+    getBySmoothRepeat(smooth, repeat) {
+        const filter = smooth ? "linear" : "nearest";
+        const addressMode = repeat ? "repeat" : "clamp-to-edge";
+        return this.getOrCreate(filter, filter, addressMode, addressMode);
+    }
+    getStats() {
+        return {
+            "size": this.cache.size
+        };
+    }
+    dispose() {
+        this.cache.clear();
+    }
+}
+let $samplerCache = null;
+export const initSamplerCache = (device) => {
+    $samplerCache = new SamplerCache(device);
+};
+export const getSamplerCache = () => {
+    return $samplerCache;
+};
+export const clearSamplerCache = () => {
+    if ($samplerCache) {
+        $samplerCache.dispose();
+    }
+};