ChartGPU – ไลบรารีกราฟประสิทธิภาพสูงบน WebGPU (เรนเดอร์ 1M จุดที่ 60fps)

 (github.com/ChartGPU)
14 คะแนน โดย GN⁺ 2026-01-22 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นไลบรารีกราฟโอเพนซอร์สที่ใช้ WebGPU เพื่อเรนเดอร์ชุดข้อมูลขนาดใหญ่ได้อย่างลื่นไหล
  • เขียนด้วย TypeScript และรองรับซีรีส์หลายประเภท เช่น line, area, bar, scatter, pie, candlestick
  • มีฟีเจอร์โต้ตอบในตัว เช่น hover highlight, tooltip, crosshair, zoom gesture, theme preset
  • ใช้งานในสภาพแวดล้อม React ได้ง่ายผ่าน แพ็กเกจรวมกับ React (chartgpu-react)
  • ให้ประสิทธิภาพระดับ 60 เฟรมต่อวินาทีด้วย การเรนเดอร์แบบเร่งความเร็วด้วย WebGPU จึงเหมาะกับงานแสดงผลข้อมูลขนาดใหญ่

ภาพรวม

  • ChartGPU เป็นไลบรารีเรนเดอร์กราฟประสิทธิภาพสูงบน WebGPU ที่สามารถแสดงผลข้อมูลจำนวนมากได้อย่างลื่นไหล
    • พัฒนาด้วย TypeScript และเผยแพร่ภายใต้ MIT License
    • ติดตั้งได้ด้วยคำสั่ง npm install chartgpu

ฟีเจอร์หลัก

  • รักษา FPS ได้สูงแม้กับชุดข้อมูลขนาดใหญ่ด้วย การเรนเดอร์แบบเร่งความเร็วด้วย WebGPU
  • รองรับประเภทกราฟที่หลากหลาย: line, area, bar, scatter, pie, candlestick
  • มีฟีเจอร์โต้ตอบในตัว: hover highlight, tooltip, crosshair
  • รองรับการอัปเดตข้อมูลแบบสตรีมมิง (appendData(...))
  • มีฟังก์ชันซูมแกน X (รวมทั้ง gesture และ UI แบบ slider)
  • รองรับ theme preset (dark / light) และธีมแบบกำหนดเอง

สถาปัตยกรรม

  • ChartGPU.create(...) ทำหน้าที่จัดการcanvas และวงจรชีวิตของ WebGPU ส่วนการควบคุมการเรนเดอร์รับผิดชอบโดย Render Coordinator
  • โครงสร้างภายในประกอบด้วยเลเยอร์ดังต่อไปนี้
    • WebGPU Core: เริ่มต้น GPU adapter และ device, ตั้งค่า canvas
    • Render Coordinator: จัดการ layout, scale, การอัปโหลดข้อมูล, render pass
    • GPU Renderers: renderer สำหรับกราฟแต่ละประเภท เช่น Grid, Area, Bar, Scatter, Line, Pie, Candlestick
    • Shaders(WGSL) : ประกอบด้วยไฟล์ shader ที่สอดคล้องกับ renderer แต่ละตัว
    • Chart Sync: มีฟีเจอร์ซิงก์ crosshair ระหว่างหลายกราฟ

การรวมกับ React

  • มีแพ็กเกจสำหรับ React chartgpu-react
  • ติดตั้ง: npm install chartgpu-react

การรองรับเบราว์เซอร์

  • ต้องใช้เบราว์เซอร์ที่เปิดใช้งาน WebGPU
    • รองรับ Chrome 113+, Edge 113+, Safari 18+
    • Firefox กำลังอยู่ระหว่างการพัฒนา

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-01-22
ความคิดเห็นบน Hacker News

  • เป็นผู้ดูแลหลักของ uPlot โปรเจ็กต์นี้น่าสนใจมาก เลยตั้งใจว่าจะ ลองเจาะลึกดูเร็ว ๆ นี้
    จากที่ลองดูเดโม 1M ผ่าน ๆ รู้สึกว่า

    • การ sampling อาจมีความเสี่ยงที่จะ ทำให้ peak สำคัญหายไป ได้ uPlot ไม่ทำ sampling ดังนั้นถ้าจะเทียบประสิทธิภาพกันอย่างยุติธรรมก็ควรปิดจุดนี้ ดูรายละเอียดได้ใน PR นี้
    • ตอนที่ไม่ได้ทำอะไรเลย การใช้ CPU ค่อนข้างสูง ขณะที่โซลูชันแบบ canvas ถ้าข้อมูลหรือสเกลไม่เปลี่ยนแทบจะไม่ใช้ CPU เลย บน WebGPU ก็น่าจะแก้ได้ด้วยโค้ดที่หยุดการอัปเดตชั่วคราว
    • เวลาแสดงหลายกราฟในหน้าเดียว Chrome จะ จำกัด GL context ไว้ที่ 16 ตัว ส่วน Plotly ใช้ virtual-webgl เพื่อหลบข้อจำกัดนี้
    • ฟอร์แมตข้อมูลแบบ [[0,1],[1,3],[2,2]] ต้องสร้างอาร์เรย์เล็ก ๆ หลายล้านตัว จึงควรเปลี่ยนเป็น โครงสร้างข้อมูลแบบคอลัมน์
      ทั้งนี้ uPlot ก็มี เดโมข้อมูล 2M จุด เช่นกัน
    • เข้ามาขอบคุณที่สละเวลาดูให้ พร้อมบอกว่า uPlot เป็น แรงบันดาลใจสำคัญมาก ที่พิสูจน์ว่ากราฟบนเบราว์เซอร์ไม่จำเป็นต้องช้า
      ทั้งประเด็น LTTB sampling และปัญหา idle CPU เป็นข้อสังเกตที่ถูกต้อง โดยในเดโมเปิด sampling เป็นค่าเริ่มต้นไว้ แต่สามารถตั้งเป็น sampling: none เพื่อเทียบอย่างยุติธรรมได้ และกำลังจะเพิ่ม toggle ใน UI
      ส่วนปัญหาที่ render loop ยังวิ่งต่อแม้หยุดนิ่งนั้นแก้ได้ และมีแผนจะปรับให้เรนเดอร์เฉพาะตอนข้อมูลเปลี่ยนหรือมี interaction เท่านั้น
    • เป็นผู้พัฒนาดั้งเดิมของ Flot สมัยก่อนตอนต้องจัดการข้อมูลหลายล้านจุด เคยทำ mip-mapping ฝั่งไคลเอนต์เอง
      สำหรับ line chart ถ้าทำ adaptive sampling โดยอิงจาก ความต่างระดับพิกเซล ระหว่างจุดที่อยู่ติดกัน ก็สามารถทิ้งจุดส่วนใหญ่ได้โดยแทบไม่เห็นความต่างทางภาพ
      การวาด 1 ล้านจุดลงบนกราฟกว้าง 1000 พิกเซลนั้นไม่มีประสิทธิภาพ
    • สงสัยว่าจะมีวิธีใช้ wavelet decomposition เพื่อลดเฉพาะองค์ประกอบความถี่สูงและรักษา peak ไว้ได้หรือไม่ ซึ่งในทางทฤษฎีดูสมเหตุสมผลกว่าการ sampling แต่ยังหาเอกสารอ้างอิงที่เกี่ยวข้องไม่เจอ
    • ในฐานะ ผู้ใช้ตัวยง ของ uPlot ขอขอบคุณที่สร้างไลบรารีที่ยอดเยี่ยมนี้ขึ้นมา
    • ในหลายโปรเจ็กต์ เพื่อ resample ข้อมูลโดยไม่ทำให้ peak หายไป เคยใช้วิธีวาด กราฟพื้นที่แบบ min-max ควบคู่ไปด้วย และมันทำงานได้ดีพอสมควร

  • เมื่อมี data point จำนวนมากมาก การนับจำนวนจุดที่แต่ละพิกเซลครอบคลุมแล้วแสดง ความเข้มหรือสีเป็น intensity จะเหมาะกว่า
    แนวคิดนี้คล้ายกับ digital phosphor ในวงการอิเล็กทรอนิกส์ ดูตัวอย่างได้ที่ลิงก์นี้

    • เป็นข้อเสนอที่ดี การเรนเดอร์แบบ อิงความหนาแน่น ลักษณะนี้มีประโยชน์มากกับข้อมูลที่ซ้อนทับกัน บน WebGPU สามารถใช้ compute shader ทำ binning จุดลงกริด นับจำนวนต่อเซลล์ แล้วเรนเดอร์ออกมาเป็นความเข้มได้
      โดยเฉพาะกับ scatter plot จะช่วยให้เห็นโครงสร้างของคลัสเตอร์ได้ดี กำลังเพิ่มไว้ในรายการไอเดีย
    • เห็นด้วย heatmap ความเข้มแบบ log scale เหมาะกับชุดข้อมูลขนาดใหญ่มาก เช่น line chart ที่มีซีรีส์ 10,000 ชุด และค่อย drill-down ลงรายละเอียดเมื่อจำเป็น

  • ทำ แพตช์ลดการใช้ CPU ตอน idle เสร็จแล้ว
    ได้เพิ่ม toggle “Benchmark mode” ในตัวอย่าง benchmark 1M เพื่อคงฟังก์ชัน benchmark ไว้ แต่ให้ทำงานได้มีประสิทธิภาพเมื่อไม่ได้ใช้งาน
    ถึง FPS จะแสดงเป็น 0 ก็ถือว่าปกติ — ถ้าไม่มีอะไรให้เรนเดอร์ก็จะไม่วาดเฟรม และเมื่อจำเป็นก็จะกลับมาเรนเดอร์ด้วยความเร็วสูงสุดทันที
    ประทับใจกับ ฟีดแบ็กที่กระตือรือร้น จากชุมชนมาก

  • กำลังพัฒนา เครื่องมือวิเคราะห์ Link Graph บนเบราว์เซอร์ (webvetted.com/workbench)
    ต้องทำ visualization ของกราฟที่มีโหนด/เส้นเชื่อมนับพัน ถ้ารองรับ 1M จุดได้ก็น่าจะช่วยได้มาก

    • บอกว่าโปรเจ็กต์ดูเจ๋ง และอธิบายว่า ChartGPU ตอนนี้โฟกัสที่ กราฟ 2D (line, bar, scatter ฯลฯ)
      อย่างไรก็ตาม รูปแบบการเรนเดอร์ของ WebGPU ก็ปรับใช้กับ graph visualization ได้ดีอยู่แล้ว ตัว scatter renderer ก็รองรับหลายพันอินสแตนซ์ได้ จึงไม่น่ายากนักที่จะเพิ่ม edge เข้าไปด้วย
      พร้อมถามความเห็นว่าควรรวมฟีเจอร์ graph เข้าใน ChartGPU เลย หรือแยกเป็นไลบรารี GraphGPU ต่างหากดี
    • สอบถามเกี่ยวกับ รายการความน่าเชื่อถือ ของ webvetted.com จาก URL scanner ของ Gridinsoft
    • มองว่ามีประโยชน์มาก และบอกว่าจะ รวมเข้าระบบวันนี้เลย
    • ในฐานะผู้ใช้งานที่เป็นไปได้คนหนึ่ง ให้คำแนะนำว่าบนเว็บไซต์ยังขาดหน้าที่อธิบายความสามารถของผลิตภัณฑ์อย่างละเอียดมากพอ และควร เสริมการนำเสนอผลิตภัณฑ์ ให้ชัดขึ้น

  • น่าประทับใจมาก รู้สึกว่าเป็นหนึ่งใน เดโมที่น่าประทับใจที่สุด ที่เคยเห็น

  • น่าจะเพิ่ม ฟีเจอร์วาดเส้นและแบนด์ สำหรับ candlestick ได้ด้วย ไม่ใช่แค่ plot อย่างเดียว แต่ควรเน้นจุดสำคัญได้ด้วย
    เมื่อก่อนเคยพยายามทำอะไรคล้าย ๆ กันด้วย WebGPU เอง แต่พอเห็นโปรเจ็กต์นี้แล้วก็ อยากลองใช้ขึ้นมาทันที

  • เป็นผู้ดูแล TimeLine เดโม live streaming ของ ChartGPU (ลิงก์) ไม่ลื่นเท่าที่คิด
    ถ้าเอามาเทียบกัน เดโม นี้ ที่ทำด้วย 2D canvas บน main thread กลับลื่นกว่ามาก

    • ไลบรารีทั้งชุดดูเหมือน โค้ดที่สร้างโดย AI
      ไฟล์ที่เกี่ยวข้องดูได้ที่ webgpu-pro.md และ webgpu-expert.md

  • พบ บั๊กของ slider ในตัวอย่าง 1M จุด (ลิงก์)
    ระหว่างลาก slider จะไม่อยู่ใต้เคอร์เซอร์ แต่กลับ ขยับไปไกลกว่าที่คาด

    • บอกว่าได้รับรายงานปัญหาเดียวกันนี้เป็นครั้งที่สองแล้ว ดูเหมือนมีสาเหตุเดียวกับบั๊ก scrollbar บน Mac M1
      เป็น ปัญหาการแมปพิกัดของ data zoom slider และจะเร่งความสำคัญเพื่อแก้ไข

  • ขอแสดงความยินดี แต่ 1M จุดถือว่าธรรมดาในสายการเงิน
    เอนจินเรนเดอร์ที่กำลังพัฒนาอยู่ตอนนี้ดันประสิทธิภาพจากเดิม 10 ล้านจุดไปถึง 100 ล้านจุด ได้แล้ว
    ดู วิดีโอเดโม

  • Plotly เองก็รองรับ มากกว่า 10 ล้านจุด ด้วย WebGL ได้มาตั้งแต่หลายปีก่อนแล้ว
    มีไลบรารีที่ทำอะไรคล้ายกันอยู่หลายตัว
    ดู เดโมประสิทธิภาพ