🚀
浏览器端 GPU 排序
通过简洁的 TypeScript API 调用 WebGPU 计算着色器来运行 Bitonic 和 Radix 排序实现。
WebGPU 排序WebGPU 排序库与演示
在浏览器中对 Uint32Array 工作负载进行排序，查看实现细节，并在你自己的硬件上进行基准测试。
Skip to content
2GPU 排序器
1演示演练场
4核心验证命令
1根更新日志
快速开始
typescript
import { GPUContext, BitonicSorter } from 'webgpu-sorting';
// Initialize WebGPU context
const gpu = new GPUContext();
await gpu.initialize();
// Create sorter
const sorter = new BitonicSorter(gpu);
// Sort data on GPU
const data = new Uint32Array([5, 2, 8, 1, 9, 3, 7, 4, 6, 0]);
const { sortedData } = await sorter.sort(data);
console.log(sortedData); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]浏览器支持
Chrome 113+已支持
Edge 113+已支持
Firefox Nightly需要标志位
Safari 18+macOS 14+
为何使用 GPU 排序？
当满足以下条件时，GPU 排序更具优势：
- 数组足够大 - 缓冲区上传与回读的开销被摊销
- 批量处理 - 多次排序可共享 GPU 上下文
- 实时应用 - 为可视化和仿真提供低延迟排序
- 整数密集型工作负载 - Radix sort 在 Uint32Array 数据上表现优异
使用交互式演示在你自己的硬件上测量交叉点，而非依赖固定的基准测试声明。
架构概览
mermaid
graph TB
subgraph CPU["CPU 侧"]
A[输入数组] --> B[生成数据]
B --> C[创建 GPU 缓冲区]
end
subgraph GPU["GPU 计算着色器"]
D[读取缓冲区] --> E[Bitonic/Radix Sort]
E --> F[并行遍历]
F --> G[写入已排序缓冲区]
end
subgraph Output
G --> H[回读至 CPU]
H --> I[验证与计时]
end
C --> D在架构文档中了解更多。