@next2d/webgpu 3.0.0

package/src/WebGPUUtil.js

@@ -0,0 +1,157 @@
+/**
+ * @description 描画のサンプリング数（MSAA）
+ *              Number of samples for drawing (MSAA)
+ *
+ * @type {number}
+ * @default 4
+ * @protected
+ *
+ * @note WebGL版と同じくMSAA 4xをデフォルトで有効化
+ *       曲線のアンチエイリアス品質向上のため
+ */
+export let $samples = 4;
+/**
+ * @description 描画のサンプリング数を変更
+ *              Change the number of samples for drawing
+ *
+ * @param  {number} samples
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setSamples = (samples) => {
+    $samples = samples;
+};
+export class WebGPUUtil {
+    /**
+     * @description Set GPUDevice
+     * @param {GPUDevice} gpu_device
+     * @return {void}
+     */
+    static setDevice(gpu_device) {
+        WebGPUUtil.device = gpu_device;
+    }
+    /**
+     * @description Get GPUDevice
+     * @return {GPUDevice}
+     */
+    static getDevice() {
+        if (!WebGPUUtil.device) {
+            throw new Error("GPUDevice is not initialized");
+        }
+        return WebGPUUtil.device;
+    }
+    /**
+     * @description Set device pixel ratio
+     * @param {number} ratio
+     * @return {void}
+     */
+    static setDevicePixelRatio(ratio) {
+        WebGPUUtil.devicePixelRatio = ratio;
+    }
+    /**
+     * @description Get device pixel ratio
+     * @return {number}
+     */
+    static getDevicePixelRatio() {
+        return WebGPUUtil.devicePixelRatio;
+    }
+    /**
+     * @description Set render max size
+     * @param {number} size
+     * @return {void}
+     */
+    static setRenderMaxSize(size) {
+        WebGPUUtil.renderMaxSize = size;
+    }
+    /**
+     * @description Get render max size (for atlas)
+     * @return {number}
+     */
+    static getRenderMaxSize() {
+        return WebGPUUtil.renderMaxSize;
+    }
+    /**
+     * @description Create Float32Array
+     * @param {number} length
+     * @return {Float32Array}
+     */
+    static createFloat32Array(length) {
+        return new Float32Array(length);
+    }
+    /**
+     * @description Create generic array
+     * @return {Array}
+     */
+    static createArray() {
+        return [];
+    }
+    /**
+     * @description Get Float32Array(4) from pool
+     * @return {Float32Array}
+     */
+    static getFloat32Array4() {
+        return WebGPUUtil.float32Array4Pool.length > 0
+            ? WebGPUUtil.float32Array4Pool.pop()
+            : new Float32Array(4);
+    }
+    /**
+     * @description Return Float32Array(4) to pool
+     * @param {Float32Array} array
+     * @return {void}
+     */
+    static poolFloat32Array4(array) {
+        if (array.length === 4) {
+            WebGPUUtil.float32Array4Pool.push(array);
+        }
+    }
+}
+Object.defineProperty(WebGPUUtil, "device", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: null
+});
+Object.defineProperty(WebGPUUtil, "devicePixelRatio", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 1
+});
+Object.defineProperty(WebGPUUtil, "renderMaxSize", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 8192
+});
+Object.defineProperty(WebGPUUtil, "float32Array4Pool", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: []
+});
+/**
+ * @description グローバルコンテキスト（WebGLUtilの$contextに相当）
+ */
+export let $context = null;
+/**
+ * @description コンテキストを設定
+ * @param {any} context
+ */
+export const $setContext = (context) => {
+    $context = context;
+};
+/**
+ * @description Float32Array(4) をプールから取得
+ * @return {Float32Array}
+ */
+export const $getFloat32Array4 = () => {
+    return WebGPUUtil.getFloat32Array4();
+};
+/**
+ * @description Float32Array(4) をプールに返却
+ * @param {Float32Array} array
+ */
+export const $poolFloat32Array4 = (array) => {
+    WebGPUUtil.poolFloat32Array4(array);
+};

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./Context";

package/src/index.js

@@ -0,0 +1 @@
+export * from "./Context";

package/src/interface/IAttachmentObject.d.ts

@@ -0,0 +1,41 @@
+import type { IColorBufferObject } from "./IColorBufferObject";
+import type { ITextureObject } from "./ITextureObject";
+import type { IStencilBufferObject } from "./IStencilBufferObject";
+/**
+ * @description WebGL互換のアタッチメントオブジェクトインターフェース
+ *              WebGL-compatible attachment object interface
+ *
+ * WebGLと同じ構造を持つことで、rendererパッケージで両方のContextを
+ * 同じように扱うことができます。
+ */
+export interface IAttachmentObject {
+    id: number;
+    width: number;
+    height: number;
+    clipLevel: number;
+    msaa: boolean;
+    mask: boolean;
+    color: IColorBufferObject | null;
+    texture: ITextureObject | null;
+    stencil: IStencilBufferObject | null;
+    /**
+     * @description MSAAテクスチャ（sampleCount > 1 の場合に使用）
+     *              MSAA texture (used when sampleCount > 1)
+     */
+    msaaTexture: ITextureObject | null;
+    /**
+     * @description MSAAステンシルテクスチャ（sampleCount > 1 の場合に使用）
+     *              MSAA stencil texture (used when sampleCount > 1)
+     */
+    msaaStencil: IStencilBufferObject | null;
+    /**
+     * @description ステンシルバッファのクリアが必要かどうか（マスク終了時）
+     *              Whether stencil buffer needs to be cleared (on mask end)
+     */
+    needsStencilClear?: boolean;
+    /**
+     * @description クリアが必要なステンシルレベル（ネストマスク終了時）
+     *              Stencil level that needs to be cleared (on nested mask end)
+     */
+    pendingStencilClearLevel?: number;
+}

package/src/interface/IAttachmentObject.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IBlendMode.d.ts

@@ -0,0 +1 @@
+export type IBlendMode = "normal" | "layer" | "multiply" | "screen" | "lighten" | "darken" | "difference" | "add" | "subtract" | "invert" | "alpha" | "erase" | "overlay" | "hardlight" | "copy";

package/src/interface/IBlendMode.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IBlendState.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description WebGPUブレンドステート定義
+ *              WebGPU blend state definitions
+ */
+export interface IBlendState {
+    color: GPUBlendComponent;
+    alpha: GPUBlendComponent;
+}

package/src/interface/IBlendState.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IBounds.d.ts

@@ -0,0 +1,6 @@
+export interface IBounds {
+    xMin: number;
+    yMin: number;
+    xMax: number;
+    yMax: number;
+}

package/src/interface/IBounds.js

@@ -0,0 +1 @@
+export {};

package/src/interface/ICachedBindGroup.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description キャッシュされたBindGroup
+ *              Cached bind group interface
+ */
+export interface ICachedBindGroup {
+    bindGroup: GPUBindGroup;
+    lastUsedFrame: number;
+}

package/src/interface/ICachedBindGroup.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IColorBufferObject.d.ts

@@ -0,0 +1,17 @@
+import type { IStencilBufferObject } from "./IStencilBufferObject";
+/**
+ * @description WebGPU用カラーバッファオブジェクトインターフェース
+ *              WebGPU color buffer object interface
+ *
+ * WebGLのIColorBufferObjectと同様の構造を持ちますが、
+ * リソースはGPUTextureを使用します。
+ */
+export interface IColorBufferObject {
+    resource: GPUTexture;
+    view: GPUTextureView;
+    stencil: IStencilBufferObject;
+    width: number;
+    height: number;
+    area: number;
+    dirty: boolean;
+}

package/src/interface/IColorBufferObject.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IComplexBlendItem.d.ts

@@ -0,0 +1,19 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description 複雑なブレンドモードの描画キュー
+ *              Complex blend mode rendering queue
+ */
+export interface IComplexBlendItem {
+    node: Node;
+    x_min: number;
+    y_min: number;
+    x_max: number;
+    y_max: number;
+    color_transform: Float32Array;
+    matrix: Float32Array;
+    blend_mode: string;
+    viewport_width: number;
+    viewport_height: number;
+    render_max_size: number;
+    global_alpha: number;
+}

package/src/interface/IComplexBlendItem.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IFilterConfig.d.ts

@@ -0,0 +1,29 @@
+import type { IAttachmentObject } from "./IAttachmentObject";
+import type { ComputePipelineManager } from "../Compute/ComputePipelineManager";
+/**
+ * @description フィルター処理の共通設定
+ *              Common filter processing configuration
+ */
+export interface IFilterConfig {
+    device: GPUDevice;
+    commandEncoder: GPUCommandEncoder;
+    bufferManager?: {
+        acquireUniformBuffer(requiredSize: number): GPUBuffer;
+        acquireAndWriteUniformBuffer(data: Float32Array, byteLength?: number): GPUBuffer;
+    };
+    frameBufferManager: {
+        createTemporaryAttachment(width: number, height: number): IAttachmentObject;
+        releaseTemporaryAttachment(attachment: IAttachmentObject): void;
+        createRenderPassDescriptor(view: GPUTextureView, r: number, g: number, b: number, a: number, loadOp: GPULoadOp): GPURenderPassDescriptor;
+    };
+    pipelineManager: {
+        getPipeline(name: string): GPURenderPipeline | undefined;
+        getFilterPipeline(baseName: string, constants: Record<string, number>): GPURenderPipeline | undefined;
+        getBindGroupLayout(name: string): GPUBindGroupLayout | undefined;
+    };
+    textureManager: {
+        createSampler(name: string, smooth: boolean): GPUSampler;
+    };
+    computePipelineManager?: ComputePipelineManager;
+    frameTextures: GPUTexture[];
+}

package/src/interface/IFilterConfig.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IGradientLUTData.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description グラデーションLUTデータを生成する結果型
+ *              Result type for generated gradient LUT data
+ */
+export interface IGradientLUTData {
+    pixels: Uint8Array;
+    resolution: number;
+}

package/src/interface/IGradientLUTData.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IGradientStop.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description グラデーションストップの型定義
+ *              Gradient stop type definition
+ */
+export interface IGradientStop {
+    ratio: number;
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}

package/src/interface/IGradientStop.js

@@ -0,0 +1 @@
+export {};

package/src/interface/ILocalFilterConfig.d.ts

@@ -0,0 +1,21 @@
+import type { IAttachmentObject } from "./IAttachmentObject";
+import type { BufferManager } from "../BufferManager";
+import type { FrameBufferManager } from "../FrameBufferManager";
+import type { PipelineManager } from "../Shader/PipelineManager";
+import type { TextureManager } from "../TextureManager";
+import type { ComputePipelineManager } from "../Compute/ComputePipelineManager";
+/**
+ * @description フィルター適用時のローカル設定（ContextApplyFilterUseCase用）
+ *              Local filter configuration for ContextApplyFilterUseCase
+ */
+export interface ILocalFilterConfig {
+    device: GPUDevice;
+    commandEncoder: GPUCommandEncoder;
+    bufferManager: BufferManager;
+    frameBufferManager: FrameBufferManager;
+    pipelineManager: PipelineManager;
+    textureManager: TextureManager;
+    mainAttachment?: IAttachmentObject;
+    computePipelineManager?: ComputePipelineManager;
+    frameTextures: GPUTexture[];
+}

package/src/interface/ILocalFilterConfig.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IMeshResult.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description メッシュ生成結果の共通インターフェース
+ *              Common interface for mesh generation results
+ */
+export interface IMeshResult {
+    buffer: Float32Array;
+    indexCount: number;
+}

package/src/interface/IMeshResult.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IPath.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description パスの型定義
+ *              Path type definition
+ *
+ * @type {array}
+ * @public
+ */
+export type IPath = (number | boolean)[];

package/src/interface/IPath.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IPoint.d.ts

@@ -0,0 +1,4 @@
+export interface IPoint {
+    x: number;
+    y: number;
+}

package/src/interface/IPoint.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IPooledBuffer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description プールされたバッファのエントリ
+ *              Pooled buffer entry
+ */
+export interface IPooledBuffer {
+    buffer: GPUBuffer;
+    size: number;
+}

package/src/interface/IPooledBuffer.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IPooledTexture.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @description プールされたテクスチャ
+ *              Pooled texture interface
+ */
+export interface IPooledTexture {
+    texture: GPUTexture;
+    width: number;
+    height: number;
+    format: GPUTextureFormat;
+    lastUsedFrame: number;
+    inUse: boolean;
+}
+/**
+ * @description バケットキーからテクスチャ配列へのマップ
+ *              キーは "${po2Width}_${po2Height}_${format}" 形式
+ */
+export type ITexturePoolBuckets = Map<string, IPooledTexture[]>;

package/src/interface/IPooledTexture.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IQuadraticSegment.d.ts

@@ -0,0 +1,9 @@
+import type { IPoint } from "./IPoint";
+/**
+ * @description 二次ベジェ近似のセグメント
+ *              Quadratic bezier segment approximation
+ */
+export interface IQuadraticSegment {
+    ctrl: IPoint;
+    end: IPoint;
+}

package/src/interface/IQuadraticSegment.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IRectangleInfo.d.ts

@@ -0,0 +1,13 @@
+import type { IPoint } from "./IPoint";
+import type { IPath } from "./IPath";
+/**
+ * @description 矩形の情報を保持する型
+ *              Rectangle info type for stroke generation
+ */
+export interface IRectangleInfo {
+    path: IPath;
+    startUp: IPoint;
+    startDown: IPoint;
+    endUp: IPoint;
+    endDown: IPoint;
+}

package/src/interface/IRectangleInfo.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IStencilBufferObject.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description WebGPU用ステンシルバッファオブジェクトインターフェース
+ *              WebGPU stencil buffer object interface
+ *
+ * WebGLのIStencilBufferObjectと同様の構造を持ちますが、
+ * リソースはGPUTextureを使用します。
+ */
+export interface IStencilBufferObject {
+    id: number;
+    resource: GPUTexture;
+    view: GPUTextureView;
+    width: number;
+    height: number;
+    area: number;
+    dirty: boolean;
+}

package/src/interface/IStencilBufferObject.js

@@ -0,0 +1 @@
+export {};

package/src/interface/IStorageBufferConfig.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @description Storage Buffer設定インターフェース
+ *              Storage Buffer configuration interface
+ */
+export interface IStorageBufferConfig {
+    /**
+     * @description バッファサイズ（バイト）
+     */
+    size: number;
+    /**
+     * @description 使用目的
+     */
+    usage: GPUBufferUsageFlags;
+    /**
+     * @description ラベル（デバッグ用）
+     */
+    label?: string;
+}
+/**
+ * @description プールされたStorage Buffer
+ *              Pooled storage buffer
+ */
+export interface IPooledStorageBuffer {
+    /**
+     * @description GPUバッファ
+     */
+    buffer: GPUBuffer;
+    /**
+     * @description バッファサイズ（バイト）
+     */
+    size: number;
+    /**
+     * @description 使用中フラグ
+     */
+    inUse: boolean;
+    /**
+     * @description 最後に使用されたフレーム番号
+     */
+    lastUsedFrame: number;
+}

package/src/interface/IStorageBufferConfig.js

@@ -0,0 +1 @@
+export {};

package/src/interface/ITextureObject.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description テクスチャオブジェクトのインターフェース
+ *              Texture object interface for WebGPU
+ *
+ * WebGLのITextureObjectと互換性を持つために
+ * resourceプロパティを持ちます。
+ */
+export interface ITextureObject {
+    id: number;
+    resource: GPUTexture;
+    view: GPUTextureView;
+    width: number;
+    height: number;
+    area: number;
+    smooth: boolean;
+}

package/src/interface/ITextureObject.js

@@ -0,0 +1 @@
+export {};