G · GPU Compute — three.js Lab

Pattern G · WebGPU only

จำลองอนุภาคล้านจุดบน GPU

ของหนักที่สุดในแล็บ: compute shader ให้ GPU คำนวณตำแหน่งของอนุภาค 1 ล้านจุด พร้อมกันทุกเฟรม (CPU ทำไม่ไหว). ที่นี่อนุภาคถูกดึง + เหวี่ยงรอบจุด attractor หลายจุด → ไหลเป็นเกลียวคล้ายเนบิวลา

เทคนิคที่ได้

instancedArray — buffer เก็บ state (ตำแหน่ง) ค้างบน GPU ข้ามเฟรม
Fn(...).compute(n) + renderer.compute() — รันโค้ดขนานทีละล้าน thread
SpriteNodeMaterial + positionNode = positions.toAttribute() — วาดจาก buffer ที่ compute เขียน

ทำไมเร็ว

compute รันบน core ของ GPU เป็นพัน ๆ ขนานกัน — งานแบบ particle/physics/simulation ได้ 2–10× เทียบ CPU. ⚠️ ใช้ได้เฉพาะ WebGPU จริง (Chrome/Edge/Safari 26+); WebGL2 fallback รัน compute ไม่ได้

ตรวจ backend…

…