Skip to content

demo.md

Latest commit

 

History

History
91 lines (77 loc) · 2.86 KB

demo.md

File metadata and controls

91 lines (77 loc) · 2.86 KB

Interactive Demo

<script setup> import { ref, onMounted } from 'vue'; import { withBase } from 'vitepress'; const isSupported = ref(null); const isLoading = ref(true); const demoSrc = withBase('/playground/'); onMounted(() => { if (typeof navigator !== 'undefined' && 'gpu' in navigator) { isSupported.value = true; } else { isSupported.value = false; } isLoading.value = false; }); </script>

Checking WebGPU support...

⚠️ WebGPU Not Supported

Your browser doesn't support WebGPU. Please use one of the following browsers:

🌐
Chrome 113+ Recommended
🌊
Edge 113+ Recommended
🦊
Firefox Nightly Flag Required
🧭
Safari 18+ macOS 14+

Check browser support →

🚀 WebGPU Sorting Demo

Run the interactive benchmark to compare GPU and CPU sorting performance on your hardware.

<iframe :src="demoSrc" class="demo-iframe" title="WebGPU Sorting Interactive Demo" allow="cross-origin-isolated" ></iframe>

What You're Measuring

The demo measures:

  • GPU Time: Time spent in compute shader execution
  • Total Time: Including buffer upload/download and GPU execution
  • CPU Time: Native JavaScript TypedArray.sort() for comparison
  • Speedup: Ratio of CPU time to GPU time

Algorithms Available

Algorithm Best For Complexity
Bitonic Sort General purpose O(n log²n)
Radix Sort Large integers O(n × k)

Tips for Accurate Benchmarking

  1. Close other tabs - Reduces GPU contention
  2. Run multiple iterations - Averages out variance
  3. Try different sizes - Find the crossover point for your hardware
  4. Compare browsers - Chrome and Edge may have different WebGPU implementations

::: info Note First run may be slower due to shader compilation. Subsequent runs will be faster due to cached pipelines. :::