@uoa-css-lab/duckscatter 1.3.0

package/dist/renderer/gpu-layer.js

@@ -0,0 +1,611 @@
+import { WebGPUContext } from './webgpu-context.js';
+import { scatterVertexShader, filterComputeShader, updateIndirectShader } from './shaders.js';
+// ビューポート境界のマージン（クリップ空間）
+const VIEWPORT_MARGIN = 0.1;
+/**
+ * WebGPUレンダリングを担当するレイヤー
+ * 責務:
+ * - WebGPUコンテキストとパイプラインの管理
+ * - GPUバッファの作成と管理
+ * - コンピュートシェーダーによるLODフィルタリング
+ * - Indirect Drawingによるレンダリング
+ */
+export class GpuLayer {
+    /**
+     * GpuLayerインスタンスを作成する
+     * @param options 設定オプション
+     */
+    constructor(options) {
+        /** レンダーパイプライン */
+        this.renderPipeline = null;
+        /** フィルタリング用コンピュートパイプライン */
+        this.filterPipeline = null;
+        /** Indirect Buffer更新用コンピュートパイプライン */
+        this.updateIndirectPipeline = null;
+        /** クワッド頂点バッファ（stepMode: 'vertex'） */
+        this.quadVertexBuffer = null;
+        /** 全ポイントデータバッファ (Storage) */
+        this.allPointsBuffer = null;
+        /** 可視ポイントインデックスバッファ (Storage) */
+        this.visibleIndicesBuffer = null;
+        /** アトミックカウンターバッファ (Storage) */
+        this.atomicCounterBuffer = null;
+        /** Indirect Drawingパラメータバッファ */
+        this.indirectBuffer = null;
+        /** インデックスバッファ */
+        this.indexBuffer = null;
+        /** レンダリング用ユニフォームバッファ */
+        this.renderUniformBuffer = null;
+        /** コンピュート用ユニフォームバッファ */
+        this.computeUniformBuffer = null;
+        /** GPUフィルターカラムデータバッファ */
+        this.filterColumnsBuffer = null;
+        /** GPUフィルター条件 */
+        this.gpuFilterConditions = [];
+        /** GPUフィルターカラム数 */
+        this.gpuFilterColumnCount = 0;
+        /** レンダリング用バインドグループ */
+        this.renderBindGroup = null;
+        /** フィルタリング用バインドグループ */
+        this.filterBindGroup = null;
+        /** Indirect更新用バインドグループ */
+        this.updateIndirectBindGroup = null;
+        /** 全ポイント数 */
+        this.totalPointCount = 0;
+        /** 背景色 */
+        this.backgroundColor = { r: 0, g: 0, b: 0, a: 0 };
+        /** 表示可能なポイントの最大数 */
+        this.visiblePointLimit = 5000000;
+        /** フィルタリング結果が有効かどうか */
+        this.filterResultValid = false;
+        /** 現在のズームレベル */
+        this.zoom = 1.0;
+        /** 現在のX方向パンオフセット */
+        this.panX = 0.0;
+        /** 現在のY方向パンオフセット */
+        this.panY = 0.0;
+        /** グローバル透明度 (0.0-1.0) */
+        this.pointAlpha = 1.0;
+        /** グローバルサイズスケール */
+        this.pointSizeScale = 1.0;
+        this.canvas = options.canvas;
+        this.context = new WebGPUContext();
+        this.backgroundColor = options.backgroundColor ?? { r: 0, g: 0, b: 0, a: 0 };
+        this.visiblePointLimit = options.visiblePointLimit ?? 5000000;
+    }
+    /**
+     * WebGPUを初期化し、レンダリングリソースを作成する
+     * @param initialData 初期データ
+     */
+    async initialize(initialData) {
+        await this.context.initialize(this.canvas);
+        this.createPipelines();
+        await this.createBuffers(initialData);
+        this.createBindGroups();
+    }
+    /**
+     * パイプラインを作成する
+     */
+    createPipelines() {
+        if (!this.context.device) {
+            throw new Error('WebGPU device not initialized');
+        }
+        const filterShaderModule = this.context.device.createShaderModule({
+            code: filterComputeShader,
+        });
+        this.filterPipeline = this.context.device.createComputePipeline({
+            layout: 'auto',
+            compute: {
+                module: filterShaderModule,
+                entryPoint: 'main',
+            },
+        });
+        const updateIndirectShaderModule = this.context.device.createShaderModule({
+            code: updateIndirectShader,
+        });
+        this.updateIndirectPipeline = this.context.device.createComputePipeline({
+            layout: 'auto',
+            compute: {
+                module: updateIndirectShaderModule,
+                entryPoint: 'main',
+            },
+        });
+        const renderShaderModule = this.context.device.createShaderModule({
+            code: scatterVertexShader,
+        });
+        const quadVertexBufferLayout = {
+            arrayStride: 8,
+            stepMode: 'vertex',
+            attributes: [
+                {
+                    format: 'float32x2',
+                    offset: 0,
+                    shaderLocation: 0,
+                },
+            ],
+        };
+        this.renderPipeline = this.context.device.createRenderPipeline({
+            layout: 'auto',
+            vertex: {
+                module: renderShaderModule,
+                entryPoint: 'vertexMain',
+                buffers: [quadVertexBufferLayout],
+            },
+            fragment: {
+                module: renderShaderModule,
+                entryPoint: 'fragmentMain',
+                targets: [
+                    {
+                        format: this.context.format,
+                        blend: {
+                            color: {
+                                srcFactor: 'src-alpha',
+                                dstFactor: 'one-minus-src-alpha',
+                                operation: 'add',
+                            },
+                            alpha: {
+                                srcFactor: 'one',
+                                dstFactor: 'one-minus-src-alpha',
+                                operation: 'add',
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: {
+                topology: 'triangle-list',
+            },
+        });
+    }
+    /**
+     * バッファを作成する
+     * @param data 初期データ
+     */
+    async createBuffers(data) {
+        if (!this.context.device)
+            return;
+        this.totalPointCount = data.totalCount;
+        const quadVertices = new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0]);
+        this.quadVertexBuffer = this.context.device.createBuffer({
+            size: quadVertices.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this.context.device.queue.writeBuffer(this.quadVertexBuffer, 0, quadVertices);
+        const pointsBufferSize = data.totalCount * 16;
+        this.allPointsBuffer = this.context.device.createBuffer({
+            size: pointsBufferSize,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+        this.context.device.queue.writeBuffer(this.allPointsBuffer, 0, data.instanceData.buffer, data.instanceData.byteOffset, data.instanceData.byteLength);
+        const indicesBufferSize = data.totalCount * 4;
+        this.visibleIndicesBuffer = this.context.device.createBuffer({
+            size: indicesBufferSize,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX,
+        });
+        this.atomicCounterBuffer = this.context.device.createBuffer({
+            size: 4,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+        this.indirectBuffer = this.context.device.createBuffer({
+            size: 20,
+            usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+        const indices = new Uint16Array([0, 1, 2, 2, 1, 3]);
+        this.indexBuffer = this.context.device.createBuffer({
+            size: indices.byteLength,
+            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        });
+        this.context.device.queue.writeBuffer(this.indexBuffer, 0, indices);
+        this.renderUniformBuffer = this.context.device.createBuffer({
+            size: 96,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.computeUniformBuffer = this.context.device.createBuffer({
+            size: 64,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        const filterColumnsBufferSize = Math.max(16, data.totalCount * 16);
+        this.filterColumnsBuffer = this.context.device.createBuffer({
+            size: filterColumnsBufferSize,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+        this.updateUniforms();
+    }
+    /**
+     * バインドグループを作成する
+     */
+    createBindGroups() {
+        if (!this.context.device ||
+            !this.filterPipeline ||
+            !this.updateIndirectPipeline ||
+            !this.renderPipeline ||
+            !this.allPointsBuffer ||
+            !this.visibleIndicesBuffer ||
+            !this.atomicCounterBuffer ||
+            !this.indirectBuffer ||
+            !this.computeUniformBuffer ||
+            !this.renderUniformBuffer ||
+            !this.filterColumnsBuffer) {
+            return;
+        }
+        this.filterBindGroup = this.context.device.createBindGroup({
+            layout: this.filterPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.allPointsBuffer } },
+                { binding: 1, resource: { buffer: this.visibleIndicesBuffer } },
+                { binding: 2, resource: { buffer: this.atomicCounterBuffer } },
+                { binding: 3, resource: { buffer: this.computeUniformBuffer } },
+                { binding: 4, resource: { buffer: this.filterColumnsBuffer } },
+            ],
+        });
+        this.updateIndirectBindGroup = this.context.device.createBindGroup({
+            layout: this.updateIndirectPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.atomicCounterBuffer } },
+                { binding: 1, resource: { buffer: this.indirectBuffer } },
+            ],
+        });
+        this.renderBindGroup = this.context.device.createBindGroup({
+            layout: this.renderPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.renderUniformBuffer } },
+                { binding: 1, resource: { buffer: this.allPointsBuffer } },
+                { binding: 2, resource: { buffer: this.visibleIndicesBuffer } },
+            ],
+        });
+    }
+    /**
+     * 全ポイントデータをアップロードする
+     * @param data 新しいポイントデータ
+     */
+    uploadAllPoints(data) {
+        if (!this.context.device)
+            return;
+        const newTotalCount = data.totalCount;
+        if (newTotalCount > this.totalPointCount) {
+            this.allPointsBuffer?.destroy();
+            this.visibleIndicesBuffer?.destroy();
+            const pointsBufferSize = newTotalCount * 16;
+            this.allPointsBuffer = this.context.device.createBuffer({
+                size: pointsBufferSize,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            });
+            const indicesBufferSize = newTotalCount * 4;
+            this.visibleIndicesBuffer = this.context.device.createBuffer({
+                size: indicesBufferSize,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX,
+            });
+            this.createBindGroups();
+        }
+        this.totalPointCount = newTotalCount;
+        this.filterResultValid = false;
+        if (this.allPointsBuffer) {
+            this.context.device.queue.writeBuffer(this.allPointsBuffer, 0, data.instanceData.buffer, data.instanceData.byteOffset, data.instanceData.byteLength);
+        }
+    }
+    /**
+     * ビュー行列を作成する
+     */
+    createViewMatrix() {
+        const aspectRatio = this.canvas.width / this.canvas.height;
+        return new Float32Array([
+            this.zoom / aspectRatio,
+            0,
+            0,
+            0,
+            0,
+            this.zoom,
+            0,
+            0,
+            0,
+            0,
+            1,
+            0,
+            this.panX,
+            this.panY,
+            0,
+            1,
+        ]);
+    }
+    /**
+     * LOD閾値を計算する
+     * ズームレベルに応じて表示するポイント数を制限する
+     */
+    calculateLodThreshold() {
+        // 画面上に表示する最大ポイント数の目標値
+        let targetPoints = this.visiblePointLimit;
+        // ズームアウト（zoom < 1.0）時は、画面内に大量の点が密集するため、
+        // 重なり合いによるフラグメントシェーダーの過負荷を防ぐため目標点数を減らす。
+        if (this.zoom < 1.0) {
+            targetPoints = Math.floor(this.visiblePointLimit * Math.pow(this.zoom, 0.6));
+            // 最低限の分布が見えるライン（visiblePointLimitの10%）
+            targetPoints = Math.max(Math.floor(this.visiblePointLimit * 0.1), targetPoints);
+        }
+        // 全ポイント数が目標以下なら常に全表示（フィルタリング不要）
+        if (this.totalPointCount <= targetPoints) {
+            return 0xffffffff;
+        }
+        // ズームレベルに基づく表示領域の割合（概算）
+        // zoom=1.0を一単位として、ズームするほど表示範囲は狭くなる
+        const visibleAreaFraction = 1.0 / (this.zoom * this.zoom);
+        // その領域に含まれると予想されるポイント数
+        const expectedPointsInView = Math.min(this.totalPointCount, this.totalPointCount * visibleAreaFraction);
+        // 目標内なら間引きなし
+        if (expectedPointsInView <= targetPoints) {
+            return 0xffffffff;
+        }
+        // 目標点数に抑えるための維持率 (Keep Ratio)
+        let keepRatio = targetPoints / expectedPointsInView;
+        // 1.0（全表示）を超えないようにクランプ
+        keepRatio = Math.min(1.0, keepRatio);
+        // u32の最大値に対する閾値を計算
+        return Math.floor(0xffffffff * keepRatio);
+    }
+    /**
+     * ユニフォームを更新する
+     */
+    updateUniforms() {
+        if (!this.context.device || !this.renderUniformBuffer || !this.computeUniformBuffer) {
+            return;
+        }
+        this.filterResultValid = false;
+        const viewMatrix = this.createViewMatrix();
+        const renderUniformData = new Float32Array(24);
+        renderUniformData.set(viewMatrix, 0);
+        // Vertex Shaderで pow(zoom, 0.3) を計算するコストを避けるため、CPUで事前に計算して渡す
+        renderUniformData[16] = Math.pow(this.zoom, 0.3);
+        renderUniformData[17] = this.canvas.width;
+        renderUniformData[18] = this.canvas.height;
+        renderUniformData[19] = this.pointAlpha;
+        renderUniformData[20] = this.pointSizeScale;
+        this.context.device.queue.writeBuffer(this.renderUniformBuffer, 0, renderUniformData);
+        // 逆変換を行ってワールド空間での境界を計算し、シェーダー内での行列演算を削除する
+        const aspectRatio = this.canvas.width / this.canvas.height;
+        const clipMinX = -1 - VIEWPORT_MARGIN;
+        const clipMinY = -1 - VIEWPORT_MARGIN;
+        const clipMaxX = 1 + VIEWPORT_MARGIN;
+        const clipMaxY = 1 + VIEWPORT_MARGIN;
+        const scaleX = this.zoom / aspectRatio;
+        const scaleY = this.zoom;
+        const worldMinX = (clipMinX - this.panX) / scaleX;
+        const worldMaxX = (clipMaxX - this.panX) / scaleX;
+        const worldMinY = (clipMinY - this.panY) / scaleY;
+        const worldMaxY = (clipMaxY - this.panY) / scaleY;
+        const computeUniformData = new ArrayBuffer(64);
+        const computeFloatView = new Float32Array(computeUniformData);
+        const computeUint32View = new Uint32Array(computeUniformData);
+        computeFloatView[0] = worldMinX;
+        computeFloatView[1] = worldMinY;
+        computeFloatView[2] = worldMaxX;
+        computeFloatView[3] = worldMaxY;
+        computeUint32View[4] = this.calculateLodThreshold();
+        computeUint32View[5] = this.totalPointCount;
+        let activeFilterMask = 0;
+        const filterRangeMin = [-Infinity, -Infinity, -Infinity, -Infinity];
+        const filterRangeMax = [Infinity, Infinity, Infinity, Infinity];
+        for (const condition of this.gpuFilterConditions) {
+            if (condition.columnIndex >= 0 && condition.columnIndex < 4) {
+                activeFilterMask |= 1 << condition.columnIndex;
+                filterRangeMin[condition.columnIndex] = condition.min;
+                filterRangeMax[condition.columnIndex] = condition.max;
+            }
+        }
+        computeUint32View[6] = activeFilterMask;
+        computeFloatView[8] = filterRangeMin[0];
+        computeFloatView[9] = filterRangeMin[1];
+        computeFloatView[10] = filterRangeMin[2];
+        computeFloatView[11] = filterRangeMin[3];
+        computeFloatView[12] = filterRangeMax[0];
+        computeFloatView[13] = filterRangeMax[1];
+        computeFloatView[14] = filterRangeMax[2];
+        computeFloatView[15] = filterRangeMax[3];
+        this.context.device.queue.writeBuffer(this.computeUniformBuffer, 0, computeUniformData);
+    }
+    /**
+     * 散布図をレンダリングする
+     */
+    render() {
+        if (!this.context.device ||
+            !this.context.context ||
+            !this.filterPipeline ||
+            !this.updateIndirectPipeline ||
+            !this.renderPipeline ||
+            !this.quadVertexBuffer ||
+            !this.filterBindGroup ||
+            !this.updateIndirectBindGroup ||
+            !this.renderBindGroup ||
+            !this.atomicCounterBuffer ||
+            !this.indirectBuffer) {
+            return;
+        }
+        const commandEncoder = this.context.device.createCommandEncoder();
+        if (!this.filterResultValid) {
+            this.context.device.queue.writeBuffer(this.atomicCounterBuffer, 0, new Uint32Array([0]));
+            {
+                const computePass = commandEncoder.beginComputePass();
+                computePass.setPipeline(this.filterPipeline);
+                computePass.setBindGroup(0, this.filterBindGroup);
+                const workgroupCount = Math.ceil(this.totalPointCount / 256);
+                computePass.dispatchWorkgroups(workgroupCount);
+                computePass.end();
+            }
+            {
+                const computePass = commandEncoder.beginComputePass();
+                computePass.setPipeline(this.updateIndirectPipeline);
+                computePass.setBindGroup(0, this.updateIndirectBindGroup);
+                computePass.dispatchWorkgroups(1);
+                computePass.end();
+            }
+            this.filterResultValid = true;
+        }
+        {
+            const textureView = this.context.context.getCurrentTexture().createView();
+            const renderPass = commandEncoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: textureView,
+                        clearValue: {
+                            r: this.backgroundColor.r,
+                            g: this.backgroundColor.g,
+                            b: this.backgroundColor.b,
+                            a: this.backgroundColor.a,
+                        },
+                        loadOp: 'clear',
+                        storeOp: 'store',
+                    },
+                ],
+            });
+            renderPass.setPipeline(this.renderPipeline);
+            renderPass.setVertexBuffer(0, this.quadVertexBuffer);
+            renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
+            renderPass.setBindGroup(0, this.renderBindGroup);
+            renderPass.drawIndexedIndirect(this.indirectBuffer, 0);
+            renderPass.end();
+        }
+        this.context.device.queue.submit([commandEncoder.finish()]);
+    }
+    /**
+     * キャンバスをリサイズし、ビューポートを更新する
+     */
+    resize(width, height) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.updateUniforms();
+    }
+    /**
+     * ズームレベルを設定する
+     */
+    setZoom(zoom) {
+        this.zoom = Math.max(0.01, Math.min(100, zoom));
+        this.updateUniforms();
+    }
+    /**
+     * 現在のズームレベルを取得する
+     */
+    getZoom() {
+        return this.zoom;
+    }
+    /**
+     * パンオフセットを設定する
+     */
+    setPan(x, y) {
+        this.panX = x;
+        this.panY = y;
+        this.updateUniforms();
+    }
+    /**
+     * 現在のパンオフセットを取得する
+     */
+    getPan() {
+        return { x: this.panX, y: this.panY };
+    }
+    /**
+     * 指定した画面座標を中心にズームする
+     */
+    zoomToPoint(newZoom, screenX, screenY) {
+        const clampedZoom = Math.max(0.01, Math.min(100, newZoom));
+        const aspectRatio = this.canvas.width / this.canvas.height;
+        const ndcX = (screenX / this.canvas.width) * 2 - 1;
+        const ndcY = -((screenY / this.canvas.height) * 2 - 1);
+        const worldXBefore = ((ndcX - this.panX) * aspectRatio) / this.zoom;
+        const worldYBefore = (ndcY - this.panY) / this.zoom;
+        this.zoom = clampedZoom;
+        this.panX = ndcX - (worldXBefore * this.zoom) / aspectRatio;
+        this.panY = ndcY - worldYBefore * this.zoom;
+        this.updateUniforms();
+    }
+    /**
+     * GPUレイヤーの設定オプションを更新する
+     */
+    updateOptions(options) {
+        if (options.backgroundColor !== undefined) {
+            this.backgroundColor = options.backgroundColor;
+        }
+        if (options.visiblePointLimit !== undefined) {
+            this.visiblePointLimit = options.visiblePointLimit;
+            // LOD閾値が変わるのでフィルタ結果を無効化
+            this.filterResultValid = false;
+        }
+    }
+    /**
+     * GPUフィルターカラムデータをアップロードする
+     * @param data フィルターカラムデータ（各ポイントに4カラム分のf32、totalPoints * 4 floats）
+     * @param columnCount 有効なカラム数（0-4）
+     */
+    uploadFilterColumns(data, columnCount) {
+        if (!this.context.device)
+            return;
+        this.gpuFilterColumnCount = Math.min(4, columnCount);
+        const requiredSize = this.totalPointCount * 16;
+        if (!this.filterColumnsBuffer || data.byteLength > requiredSize) {
+            this.filterColumnsBuffer?.destroy();
+            this.filterColumnsBuffer = this.context.device.createBuffer({
+                size: Math.max(16, data.byteLength),
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            });
+            this.createBindGroups();
+        }
+        this.context.device.queue.writeBuffer(this.filterColumnsBuffer, 0, data.buffer, data.byteOffset, data.byteLength);
+        this.filterResultValid = false;
+    }
+    /**
+     * GPUフィルター条件を設定する
+     * @param conditions フィルター条件の配列
+     */
+    setGpuFilterConditions(conditions) {
+        this.gpuFilterConditions = conditions;
+        this.filterResultValid = false;
+        this.updateUniforms();
+    }
+    /**
+     * GPUフィルター条件をクリアする
+     */
+    clearGpuFilterConditions() {
+        this.gpuFilterConditions = [];
+        this.filterResultValid = false;
+        this.updateUniforms();
+    }
+    /**
+     * グローバル透明度を設定する
+     * @param alpha 透明度 (0.0-1.0)
+     */
+    setPointAlpha(alpha) {
+        this.pointAlpha = Math.max(0, Math.min(1, alpha));
+        this.updateUniforms();
+    }
+    /**
+     * 現在のグローバル透明度を取得する
+     */
+    getPointAlpha() {
+        return this.pointAlpha;
+    }
+    /**
+     * グローバルサイズスケールを設定する
+     * @param scale サイズスケール (0.01以上)
+     */
+    setPointSizeScale(scale) {
+        this.pointSizeScale = Math.max(0.01, scale);
+        this.updateUniforms();
+    }
+    /**
+     * 現在のグローバルサイズスケールを取得する
+     */
+    getPointSizeScale() {
+        return this.pointSizeScale;
+    }
+    /**
+     * リソースを破棄する
+     */
+    destroy() {
+        this.quadVertexBuffer?.destroy();
+        this.allPointsBuffer?.destroy();
+        this.visibleIndicesBuffer?.destroy();
+        this.atomicCounterBuffer?.destroy();
+        this.indirectBuffer?.destroy();
+        this.indexBuffer?.destroy();
+        this.renderUniformBuffer?.destroy();
+        this.computeUniformBuffer?.destroy();
+        this.filterColumnsBuffer?.destroy();
+        this.context.destroy();
+    }
+}

package/dist/renderer/index.d.ts

@@ -0,0 +1,3 @@
+export { GpuLayer, type AllPointsData } from './gpu-layer.js';
+export { WebGPUContext } from './webgpu-context.js';
+export { scatterVertexShader, filterComputeShader } from './shaders.js';

package/dist/renderer/index.js

@@ -0,0 +1,3 @@
+export { GpuLayer } from './gpu-layer.js';
+export { WebGPUContext } from './webgpu-context.js';
+export { scatterVertexShader, filterComputeShader } from './shaders.js';

package/dist/renderer/shaders.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 散布図レンダリング用WGSLシェーダーコード
+ */
+/**
+ * ビューポート境界とLODに基づいて可視ポイントをフィルタリングするコンピュートシェーダー
+ * ワークグループローカルのアトミック操作を使用してグローバルアトミックの競合を軽減
+ */
+export declare const filterComputeShader = "\nstruct Point {\n  x: f32,\n  y: f32,\n  color: u32,\n  size: f32,\n}\n\nstruct FilterUniforms {\n  worldBoundsMin: vec2<f32>,\n  worldBoundsMax: vec2<f32>,\n  lodThreshold: u32,\n  totalPoints: u32,\n  activeFilterMask: u32,\n  _padding: u32,\n  filterRangeMin: vec4<f32>,\n  filterRangeMax: vec4<f32>,\n}\n\n@group(0) @binding(0) var<storage, read> allPoints: array<Point>;\n@group(0) @binding(1) var<storage, read_write> visibleIndices: array<u32>;\n@group(0) @binding(2) var<storage, read_write> counter: atomic<u32>;\n@group(0) @binding(3) var<uniform> uniforms: FilterUniforms;\n@group(0) @binding(4) var<storage, read> filterColumns: array<vec4<f32>>;\n\nvar<workgroup> localCount: atomic<u32>;\nvar<workgroup> localIndices: array<u32, 256>;\nvar<workgroup> globalOffset: u32;\n\nfn pcgHash(input: u32) -> u32 {\n    let state = input * 747796405u + 2891336453u;\n    let word = ((state >> ((state >> 28u) + 4u)) ^ state) * 277803737u;\n    return (word >> 22u) ^ word;\n}\n\n@compute @workgroup_size(256)\nfn main(\n  @builtin(global_invocation_id) globalId: vec3<u32>,\n  @builtin(local_invocation_id) localId: vec3<u32>\n) {\n  let idx = globalId.x;\n  let lid = localId.x;\n\n  if (lid == 0u) {\n    atomicStore(&localCount, 0u);\n  }\n  workgroupBarrier();\n\n  var myLocalSlot: u32 = 0xFFFFFFFFu;\n  if (idx < uniforms.totalPoints) {\n    let hash = pcgHash(idx);\n    var isVisible = hash <= uniforms.lodThreshold;\n\n    if (isVisible) {\n      let point = allPoints[idx];\n\n      isVisible = point.x >= uniforms.worldBoundsMin.x && point.x <= uniforms.worldBoundsMax.x &&\n                  point.y >= uniforms.worldBoundsMin.y && point.y <= uniforms.worldBoundsMax.y;\n    }\n\n    if (isVisible && uniforms.activeFilterMask != 0u) {\n      let filterData = filterColumns[idx];\n\n      if ((uniforms.activeFilterMask & 1u) != 0u) {\n        isVisible = isVisible &&\n                    filterData.x >= uniforms.filterRangeMin.x &&\n                    filterData.x <= uniforms.filterRangeMax.x;\n      }\n      if ((uniforms.activeFilterMask & 2u) != 0u) {\n        isVisible = isVisible &&\n                    filterData.y >= uniforms.filterRangeMin.y &&\n                    filterData.y <= uniforms.filterRangeMax.y;\n      }\n      if ((uniforms.activeFilterMask & 4u) != 0u) {\n        isVisible = isVisible &&\n                    filterData.z >= uniforms.filterRangeMin.z &&\n                    filterData.z <= uniforms.filterRangeMax.z;\n      }\n      if ((uniforms.activeFilterMask & 8u) != 0u) {\n        isVisible = isVisible &&\n                    filterData.w >= uniforms.filterRangeMin.w &&\n                    filterData.w <= uniforms.filterRangeMax.w;\n      }\n    }\n\n    if (isVisible) {\n      myLocalSlot = atomicAdd(&localCount, 1u);\n      localIndices[myLocalSlot] = idx;\n    }\n  }\n  workgroupBarrier();\n\n  let count = atomicLoad(&localCount);\n  if (lid == 0u && count > 0u) {\n    globalOffset = atomicAdd(&counter, count);\n  }\n  workgroupBarrier();\n\n  if (lid < count) {\n    visibleIndices[globalOffset + lid] = localIndices[lid];\n  }\n}\n";
+/**
+ * カウンターから間接描画バッファを更新するコンピュートシェーダー
+ */
+export declare const updateIndirectShader = "\nstruct DrawIndexedIndirect {\n  indexCount: u32,\n  instanceCount: u32,\n  firstIndex: u32,\n  baseVertex: u32,\n  firstInstance: u32,\n}\n\n@group(0) @binding(0) var<storage, read> counter: u32;\n@group(0) @binding(1) var<storage, read_write> indirect: DrawIndexedIndirect;\n\n@compute @workgroup_size(1)\nfn main() {\n  indirect.indexCount = 6u;\n  indirect.instanceCount = counter;\n  indirect.firstIndex = 0u;\n  indirect.baseVertex = 0u;\n  indirect.firstInstance = 0u;\n}\n";
+export declare const scatterVertexShader = "\nstruct Point {\n  x: f32,\n  y: f32,\n  color: u32,\n  size: f32,\n}\n\nstruct Uniforms {\n  viewMatrix: mat4x4<f32>,\n  zoomScale: f32,\n  viewportWidth: f32,\n  viewportHeight: f32,\n  pointAlpha: f32,\n  pointSizeScale: f32,\n  _padding1: f32,\n  _padding2: f32,\n  _padding3: f32,\n}\n\nstruct VertexOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) color: vec4<f32>,\n  @location(1) pointCoord: vec2<f32>,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var<storage, read> allPoints: array<Point>;\n@group(0) @binding(2) var<storage, read> visibleIndices: array<u32>;\n\nfn unpackColor(argb: u32) -> vec4<f32> {\n  let a = f32((argb >> 24u) & 0xFFu) / 255.0;\n  let r = f32((argb >> 16u) & 0xFFu) / 255.0;\n  let g = f32((argb >> 8u) & 0xFFu) / 255.0;\n  let b = f32(argb & 0xFFu) / 255.0;\n  return vec4<f32>(r, g, b, a);\n}\n\n@vertex\nfn vertexMain(\n  @location(0) quadPosition: vec2<f32>,\n  @builtin(instance_index) instanceIdx: u32\n) -> VertexOutput {\n  var output: VertexOutput;\n\n  let pointIdx = visibleIndices[instanceIdx];\n  let point = allPoints[pointIdx];\n\n  let clipPos = uniforms.viewMatrix * vec4<f32>(point.x, point.y, 0.0, 1.0);\n\n  let pixelToClipX = 2.0 / uniforms.viewportWidth;\n  let pixelToClipY = 2.0 / uniforms.viewportHeight;\n  let zoomScale = uniforms.zoomScale;\n\n  let scaledSize = point.size * uniforms.pointSizeScale;\n  let offsetClip = vec2<f32>(\n    quadPosition.x * scaledSize * pixelToClipX * zoomScale,\n    quadPosition.y * scaledSize * pixelToClipY * zoomScale\n  );\n\n  output.position = clipPos + vec4<f32>(offsetClip, 0.0, 0.0);\n  output.color = unpackColor(point.color);\n\n  output.pointCoord = (quadPosition + 1.0) * 0.5;\n\n  return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {\n  let d = input.pointCoord - vec2<f32>(0.5);\n  let distSq = dot(d, d);\n\n  if (distSq > 0.25) {\n    discard;\n  }\n\n  let alpha = smoothstep(0.25, 0.23, distSq);\n\n  return vec4<f32>(input.color.rgb, input.color.a * alpha * uniforms.pointAlpha);\n}\n";