WebGL · gl.POINTS · additive blending
อนุภาคGPU แสนตัว
วาด particle จำนวนมากด้วย gl.POINTS บน GPU โดยตรง — ตำแหน่ง/ความเร็วเก็บใน Float32Array, อัปโหลด buffer ต่อเฟรม, vertex shader กำหนด gl_PointSize + gl_Position, fragment shader วาดจุดกลม soft ผ่าน gl_PointCoord. ใช้ additive blending ทำให้ particle ซ้อนกันเป็นแสงจ้า. ขยับเมาส์/แตะ canvas เพื่อดึงดูด–ผลัก
อนุภาค 20,000 ·
— fps
เบราว์เซอร์/เครื่องนี้เปิด WebGL ไม่ได้ 😅
ลองเปิดใน Chrome / Edge / Firefox / Safari รุ่นใหม่ เพื่อดู particle system
โหมดแรง
การกระทำ
ขยับเมาส์บน canvas = ดึง/ผลัก particle · particle สี = ตามความเร็ว (เย็น→ร้อน) · ตั้ง ลดการเคลื่อนไหว ในเครื่อง = โหมดสงบ (ไม่ไหลอัตโนมัติ)
วิธีทำงาน: ตำแหน่งและความเร็วของแต่ละ particle อยู่ใน
Float32Array บน CPU —
CPU อัปเดตฟิสิกส์ทุกเฟรม แล้ว upload ไปยัง gl.ARRAY_BUFFER ครั้งเดียว.
Vertex shader ตั้ง gl_PointSize ตามความเร็ว + gl_Position.
Fragment shader ใช้ gl_PointCoord สร้างวงกลม soft พร้อม
gl.blendFunc(SRC_ALPHA, ONE) (additive) ทำให้จุดซ้อนกันเป็นแสง.
gl.disable(DEPTH_TEST) ปิดการทดสอบความลึก — particle 2D ไม่ต้องการ.