Spark - เรนเดอร์เลอร์ 3D Gaussian Splatting ขั้นสูงสำหรับ Three.js

 (sparkjs.dev)
3 คะแนน โดย GN⁺ 2025-06-13 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ทำงานร่วมกับไปป์ไลน์การเรนเดอร์ของ THREE.js เพื่อแสดงวัตถุแบบ splat และ mesh ร่วมกัน
  • พกพาสูงและทำงานได้บนอุปกรณ์แทบทุกชนิด (รองรับ WebGL2 มากกว่า 98%)
  • ให้ประสิทธิภาพการเรนเดอร์ที่รวดเร็วแม้บนอุปกรณ์มือถือสเปกต่ำ
  • เรนเดอร์วัตถุ splat หลายชิ้นพร้อมกันและจัดการการเรียงลำดับได้อย่างถูกต้อง
  • รองรับฟอร์แมตไฟล์ splat หลักเกือบทั้งหมด เช่น .PLY(รวมแบบบีบอัด), .SPZ, .SPLAT, .KSPLAT
  • รองรับความสามารถในการเรนเดอร์พร้อมกันจากหลายมุมมอง
  • การแก้ไขแบบไดนามิก: สามารถแปลงและใส่อนิเมชันให้วัตถุ splat แต่ละชิ้นได้แยกกัน
  • รองรับการแก้ไขสีแบบเรียลไทม์, การกระจัด, สเกเลตันแอนิเมชัน
  • มีระบบ shader graph ที่สามารถสร้าง/แก้ไข splat แบบไดนามิกบน GPU ได้

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

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

 
GN⁺ 2025-06-13
ความคิดเห็นจาก Hacker News

  • เดโมน่าประทับใจมาก ใช้งานได้ดีแม้บน iPhone รุ่นเก่าของผม
    ถ้าจะให้ฟีดแบ็กจากมุมของนักพัฒนาเกมสมัครเล่นที่ไม่ได้มีความรู้ด้านการเขียนโปรแกรม 3D ระดับลึกนัก ผมคิดว่าน่าจะดีถ้ามีคำอธิบายสั้นๆ สักบรรทัดว่า “Gaussian Splatting” คืออะไรไว้บน GitHub หรือในเว็บไซต์สักแห่ง
    ผมรู้สึกสนใจและเห็นศักยภาพมากขึ้นหลังจากได้อ่านคำอธิบายหนึ่งบรรทัดจาก Wikipedia
    Gaussian Splatting คือเทคนิค volume rendering ที่เรนเดอร์ข้อมูลเชิงปริมาตรโดยตรง โดยไม่แปลงเป็นพื้นผิวหรือ line primitive ก่อน
    การที่มันสามารถสร้างเมฆ ไฟ ควัน ฯลฯ ที่มีประสิทธิภาพสูงได้ ถือว่าเจ๋งมากจริงๆ

    • ขอบคุณสำหรับฟีดแบ็ก
      ผมคิดว่าต้องเพิ่ม FAQ แน่นอน

  • เดโมสแกนอาหาร (ตัวอย่าง “Interactivity”) น่าทึ่งมาก
    โดยเฉพาะการมองเข้าไปในรูของขนมปังใน Mel's Steak Sandwich น่าประทับใจมาก
    แม้โน้ตบุ๊กของผมจะมีแค่กราฟิกออนบอร์ด แต่ประสิทธิภาพก็ยังยอดเยี่ยมเมื่อเทียบกับรายละเอียดที่เห็น
    ผมสงสัยว่าเทคโนโลยีแบบนี้ตอนนี้ถูกใช้งานหลักๆ ในด้านไหนบ้าง

    • มีคอมมูนิตี้ที่สแกนวัตถุขนาดเล็กด้วยอุปกรณ์แบบมือถือหรือโดรนอยู่
      สำหรับเดโมนี้ Tipatat เป็นคนจัดหางานสแกนอาหารให้
      ผมเองก็ชอบงานสแกนดอกไม้ของ kotohibi
      https://superspl.at/user?id=kotohibi

    • รายละเอียดระดับนี้แต่ปริมาณข้อมูลที่ต้องส่งกลับไม่ได้ใหญ่ขนาดนั้น
      แค่ราว 80MB เอง น่าทึ่งจริงๆ

  • เจ๋งมาก
    BabylonJS ก็รองรับ Gaussian Splat ได้ดีเช่นกัน
    https://doc.babylonjs.com/features/featuresDeepDive/mesh/gaussianSplatting

    • BabylonJS กับ Aframe มีไลเซนส์ จำนวน GitHub stars และจำนวนฟอร์กใกล้เคียงกัน
      Aframe เป็นโปรเจ็กต์ที่ใหม่กว่า และโฟกัสด้านเกมกับ VR มากกว่า
      อยากรู้ว่าถ้ามองจากคนที่เคยใช้ Babylon, Aframe, Three.js และ PlayCanvas มาครบแล้ว จะเปรียบเทียบกันอย่างไร
      PlayCanvas เป็นเชิงพาณิชย์ แต่ก็ดูเป็นตัวที่สุกงอมที่สุด ฟีเจอร์เยอะที่สุด และประสิทธิภาพดีที่สุด
      Babylon เป็น 3D engine ที่เน้นฟีเจอร์ ส่วน Three.js ให้มาแค่พื้นฐาน
      มันมีทั้งแอนิเมชันและการรองรับเท็กซ์เจอร์ที่ดี แต่สุดท้ายก็ยังต้องสร้าง toolkit ของตัวเองอยู่ดี
      อยากรู้ทั้งประสบการณ์ที่ดีและไม่ดีจากการใช้เอนจินเหล่านี้
      เดโมของ OP ดูแข็งแรงมากจริงๆ
      อยากรู้ว่าจุดเด่นและแนวทางขายของ Aframe คืออะไร
      แล้วอนาคตของ Gaussian Splatting จะไปทางไหน นอกจากงาน visualization/digital twin อย่างเดียว จะไปถึงระดับที่แก้ไขและทำแอนิเมชันได้ในสายครีเอทีฟหรือเกมในเร็วๆ นี้ไหม
      Aframe GitHub
      PlayCanvas

  • งานยอดเยี่ยมมาก
    แต่บนโน้ตบุ๊กของผมที่ใช้ Nvidia RTX A3000 GPU คู่กับ Firefox ประสิทธิภาพแย่มาก
    ด้วยจำนวน shader core ระดับนี้ มันอาจร้อนจนจับแทบไม่ได้เลย

    • อยากรู้ว่าคุณเจออาการนั้นในเดโม/ตัวอย่างไหนโดยเฉพาะ

  • ผมสงสัยว่าจะถือโทรศัพท์วิ่งไปรอบๆ แล้วจับ Gaussian Splats อย่างหญ้า พุ่มไม้ ดิน อะไรพวกนี้ได้ไหม
    เลือกพื้นที่ดินขนาด 1 เมตร x 1 เมตร หรือพื้นที่ทรงลูกบาศก์ 1 เมตรที่มีพุ่มไม้รวมอยู่ด้วย
    แล้วเอาบล็อกหญ้ามาวางซ้ำๆ สลับกับพุ่มไม้หรือดินเป็นระยะ เพื่อสร้างโลกแนว "ให้ฟีล Minecraft" แบบนี้จะเป็นไปได้ไหม
    แต่ถ้าจะเรนเดอร์หลายพันบล็อกก็คงต้องใช้ฮาร์ดแวร์หนักพอสมควร

    • โปรโตไทป์แบบนี้ทำได้แน่นอน
      ถ้าได้เห็นของจริงน่าจะเจ๋งมาก

  • เจ๋งมากจริงๆ
    อยากรู้ว่ามีอินไซต์เกี่ยวกับคอขวดด้านประสิทธิภาพในตอนนี้ไหม
    โดยเฉพาะคอขวดในฉากแบบไดนามิก
    ตัวอย่าง particle simulation มีอาการกระตุก แต่พอหมุนกล้องแล้วประสิทธิภาพกลับดีขึ้นมากทันที
    เหมือนจะหมายความว่าส่วนพื้นหลังแบบ static หนักกว่าที่คิด และนอกเหนือจากนั้น Sierpinski pyramid ก็ทำแบบ procedural ได้อย่างน่าประทับใจมาก

    • จำนวนและการกระจายตัวของ splat ภายในฉากมีผลต่อประสิทธิภาพ
      เป็นไปได้ว่าผู้ถามแค่หมุนกล้องไปในทิศทางที่ซับซ้อนน้อยกว่า
      การทำให้ประสิทธิภาพนิ่งสม่ำเสมอยังเป็นงานที่ต้องทำต่อ
      ต่อไปเรามีแผนจะใส่ระบบ LOD

  • ลิงก์ repo ที่มองเห็นชัดขึ้นอีกหน่อย
    https://github.com/sparkjsdev/spark

  • ผมยังค่อนข้างสงสัยว่า Gaussian Splatting จะไปได้ไกลเกินกว่าเดโมหรือไม่
    ขนาดไฟล์ใหญ่เกินไป
    อย่างเช่นสเต๊กแซนด์วิชมีขนาด 12MB
    ตอน SIGGRAPH ปีที่แล้ว ผมเห็นโคลนพอร์ต Matterport ที่ใช้ Gaussian Splat ซึ่งต้องสตรีมข้อมูล 1.5GB เพื่อดูอพาร์ตเมนต์ 2 ห้องนอน
    เป็นเดโมที่เจ๋งนะ

    • เทคนิคการบีบอัด SOGS มีประสิทธิภาพมาก
      สามารถเก็บ Gaussian จำนวน 1M พร้อม full Spherical Harmonics ได้ในประมาณ 14MB
      มีบทความดีๆ เกี่ยวกับเรื่องนี้ในบล็อกของ PlayCanvas
      https://blog.playcanvas.com/playcanvas-adopts-sogs-for-20x-3dgs-compression

    • FYI สเต๊กแซนด์วิชขนาด 12MB เป็นไฟล์ที่ใหญ่ที่สุด
      ที่เหลือต่ำกว่า 10MB และบางอันอยู่แค่ 1-3MB ซึ่งน่าเชื่อถือมาก
      (เช่น Iberico Sandwich 1MB, Clams and Caviar 1.8MB เป็นต้น)
      วิธีบีบอัดขั้นสูงอย่าง SOGS ก็กำลังจะตามมาเร็วๆ นี้
      ตัวอย่างนี้มีขนาด 30MB
      https://vincentwoo.com/3d/sutro_tower/

    • สาเหตุหลักที่ไฟล์มีขนาดใหญ่คือการเก็บค่าสัมประสิทธิ์ Spherical Harmonics
      เป็นปัญหาที่แก้ได้

  • รู้สึกว่าชื่อนี้ถูกใช้ซ้ำเยอะไปหน่อย
    มีทั้ง Apache Spark, SPARK (Ada), sparklines และ SPARQL อยู่แล้ว