WebGPU · compute shader · curl-noise flow

อนุภาคหลายแสนตัว บน GPU

ต่างจาก WebGL particles ที่ CPU คำนวณฟิสิกส์แล้วค่อยอัปโหลด — อันนี้ใช้ compute shader ของ WebGPU ให้ GPU คำนวณตำแหน่งทุกอนุภาคเองในแต่ละเฟรม เก็บใน storage buffer แล้ว render ต่อจาก buffer เดิมโดยไม่ส่งข้อมูลกลับ CPU เลย จึงดันได้ถึงหลักแสน–ล้านตัว. ขยับเมาส์/แตะเพื่อดึงหรือผลักฝูงอนุภาค

120k particles · — fps · GPU compute

เบราว์เซอร์นี้ยังไม่รองรับ WebGPU
เปิดด้วย Chrome / Edge รุ่นใหม่ (เดสก์ท็อป) หรือ Safari 18+ เพื่อดู compute shader ทำงานจริง

แรงจากตัวชี้

การกระทำ

จำนวนอนุภาค 120,000

แรงการไหล 1.0×

ขนาดเรืองแสง 2.4

สีอนุภาค = ความเร็ว (ช้า→เร็ว) · ตั้ง ลดการเคลื่อนไหว ในเครื่อง = เริ่มแบบหยุดนิ่ง กดเล่นเองได้

วิธีทำงาน: ตำแหน่ง+ความเร็วของทุกอนุภาคอยู่ใน storage buffer บน GPU. แต่ละเฟรมยิง compute pass — เชดเดอร์ @workgroup_size(64) รันขนานกันทุกอนุภาค คำนวณ curl-noise (สนามการไหลแบบไม่มี divergence ทำให้ดูเป็นกระแสน้ำวน) + แรงจากตัวชี้ แล้วเขียนกลับ buffer เดิม. จากนั้น render pass วาดอนุภาคเป็นควอดเล็ก ๆ แบบ instanced โดยอ่าน buffer เดียวกันเป็น vertex buffer — ข้อมูลไม่เคยกลับมา CPU เลย ทั้งหมดอยู่บน GPU.