Show HN: 3D Gaussian Splatting แบบเรียลไทม์ใน WebGL
(antimatter15.com)- เป็น WebGL viewer ที่สามารถเปิดดูและโต้ตอบกับฉาก 3D Gaussian Splat ได้ทันทีในเบราว์เซอร์ โดยโค้ดสำหรับการพัฒนาเปิดเผยไว้บน GitHub
- รองรับทั้งคีย์บอร์ด เมาส์ แทร็กแพด ทัช และเกมแพด ครอบคลุมสภาพแวดล้อมการป้อนข้อมูลทั้ง เดสก์ท็อปและมือถือ อย่างกว้างขวาง
- การควบคุมกล้องแบ่งเป็นการเคลื่อนที่ การหมุนแบบโคจร การก้มเงย และการหมุนรอบแกน ทำให้สำรวจฉากเดียวกันได้หลายวิธีตามอุปกรณ์อินพุต
- สามารถใช้ปุ่มตัวเลขและ
-,+,pเพื่อสลับมุมกล้องที่โหลดไว้ล่วงหน้า วนลูปกล้อง และเล่นแอนิเมชันเริ่มต้นต่อได้ - สามารถลากแล้ววางไฟล์
.plyเพื่อแปลงเป็น.splatและโหลดการตั้งค่ากล้องจากcameras.jsonได้
WebGL 3D Gaussian Splat Viewer
- WebGL 3D Gaussian Splat Viewer เป็นตัวดู 3D Gaussian Splat ที่สร้างโดย Kevin Kwok
- โค้ดเผยแพร่อยู่บน Github
การควบคุมตามอุปกรณ์อินพุต
-
การเคลื่อนที่ด้วยคีย์บอร์ด
- ลูกศรซ้ายขวา: เคลื่อนที่ซ้ายขวา
- ลูกศรขึ้นลง: เคลื่อนที่ไปข้างหน้า/ถอยหลัง
- Space: กระโดด
-
มุมกล้อง
a/d: หมุนกล้องซ้าย/ขวาw/s: ปรับกล้องขึ้น/ลงq/e: หมุนกล้องทวนเข็ม/ตามเข็มนาฬิกาi/k,j/l: หมุนแบบโคจร
-
แทร็กแพด
- เลื่อน: หมุนแบบโคจรขึ้นลงซ้ายขวา
- บีบนิ้ว: เคลื่อนที่ไปข้างหน้า/ถอยหลัง
Ctrl+ เลื่อน: เคลื่อนที่ไปข้างหน้า/ถอยหลังShift+ เลื่อน: เคลื่อนที่ขึ้นลงหรือซ้ายขวา
-
เมาส์
- คลิกแล้วลาก: หมุนแบบโคจร
- คลิกขวาหรือลากขึ้นลงพร้อมกด
Ctrl/Cmd: เคลื่อนที่
-
ทัช
- หนึ่งนิ้ว: หมุนแบบโคจร
- บีบนิ้วสองนิ้ว: เคลื่อนที่ไปข้างหน้า/ถอยหลัง
- หมุนสองนิ้ว: หมุนกล้องตามเข็ม/ทวนเข็มนาฬิกา
- ลากสองนิ้ว: เคลื่อนที่ซ้ายขวาและขึ้นลง
-
เกมแพด
- ใช้งานได้หากมีการเชื่อมต่อเกมคอนโทรลเลอร์
กล้องและการจัดการไฟล์
-
การควบคุมมุมกล้อง
0-9: สลับไปยังหนึ่งในมุมกล้องที่โหลดไว้ล่วงหน้า-หรือ+: วนลูปกล้องที่โหลดไว้p: เล่นแอนิเมชันเริ่มต้นต่อ
-
ลากแล้ววาง
.plyไฟล์: แปลงเป็น.splatcameras.json: โหลดกล้อง
1 ความคิดเห็น
ความคิดเห็นบน Hacker News
เจ๋งมากจริง ๆ แต่ วิธีควบคุม ทำให้งง
ไม่ใช่การเคลื่อนที่แบบ WASD ทั่วไปและหมุนมุมมองด้วยเมาส์ แต่การลากเมาส์เป็นการเดินหน้า/ถอยหลังและหมุนโคจรรอบจุดหนึ่ง ส่วน A/D เป็นการเลื่อนไปซ้าย/ขวา และ W/S เป็นการมองขึ้น/ลง
รายการปุ่มควบคุมทั้งหมดอยู่ใน README: https://github.com/antimatter15/splat#controls
เดิมทีตั้งใจให้ใช้แค่ปุ่มลูกศร เพื่อให้เคลื่อนที่ได้แบบหมุนตัวอยู่กับที่และเดินหน้า/ถอยหลัง
โครงสร้างคือใช้ปุ่มลูกศร/จอยสติ๊กเป็น “การเคลื่อนที่หลัก” สำหรับเดินหน้า/ถอยหลังและหมุนซ้าย/ขวา และใช้ WASD/ปุ่ม C เป็น “การเคลื่อนที่เสริม” สำหรับเลื่อนซ้าย/ขวาและมุมมองขึ้น/ลง
เจ๋งมาก ผมเองก็กำลังพอร์ต gaussian-splatting [0] ไปเป็น WebGPU อยู่
เช่นเดียวกับ implementation อื่น ๆ ที่เคยเห็นมา implementation นี้ก็ดูเหมือนจะทำผิดแบบเดียวกันตอนฉายทรงรีใน perspective projection คือคำนวณ covariance ใน 3D ก่อนแล้วค่อยฉายเป็น 2D[1] แต่วิธีนี้ถูกต้องเฉพาะกับ parallel/orthographic projection และถ้านำไปใช้กับ perspective projection จะได้ผลผิด
ใน perspective projection มีผลกระทบเพิ่มเติมสามอย่าง การเลื่อนพารัลแลกซ์ทำให้รูปร่างของวงรีที่ฉายเปลี่ยนไป การหมุนของทรงรีอาจเปลี่ยนตำแหน่งที่เห็นจนเกิดการเลื่อนแบบขนานเพิ่มเติม และ conic section อาจเป็นได้ไม่ใช่แค่วงรี แต่รวมถึงพาราโบลาและไฮเพอร์โบลาด้วย
ดูเหมือนผลกระทบแรกจะถูกชดเชยด้วยมือด้วยเมทริกซ์นี้[2] แต่ผลกระทบอีกสองอย่างหลังไม่ถูกนำเข้ามาคำนวณใน implementation ที่ผมเคยเห็นมา หากต้องการให้ถูกต้อง ไม่ควรคำนวณ covariance 3D แต่ควรหา กรวยขอบเขตของทรงรี ที่มีตำแหน่งกล้องเป็นจุดยอด แล้วตัดกับระนาบมุมมอง conic section ที่ได้จะเป็นเส้นขอบที่ถูกต้องของทรงรีหลังถูกฉายแบบ perspective
[0]: https://github.com/graphdeco-inria/gaussian-splatting
[1]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...
[2]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...
แต่ถ้า gaussian มีขนาดเล็กเมื่อเทียบกับขนาดภาพ ก็สามารถประมาณด้วยการทำให้ฟังก์ชันฉายเป็นเชิงเส้นได้ ดังนั้นบทความ Gaussian Splatting จึงใช้ Jacobian ของฟังก์ชันฉาย ตามสมการที่ 5[0]
ในทางปฏิบัติ การประมาณนี้แม่นมาก เมทริกซ์ที่พูดถึงในลิงก์ที่สามก็คือ Jacobian นั่นเอง และไม่ใช่การชดเชยด้วยมือ แต่สมเหตุสมผลทางคณิตศาสตร์ ดูการพิสูจน์ได้ที่ [1]
[0] https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/3d_...
[1] https://math.stackexchange.com/a/4716514/43771
มองอีกแบบคือเป็นการประมาณการฉายโดยสมมติว่า gaussian ทั้งก้อนอยู่ที่ความลึกคงที่ ซึ่งน่าจะใช้ได้ถ้าอยู่ไกลพอ
การแปลงเชิงโปรเจกทีฟของ gaussian ดูค่อนข้างยุ่งยาก แต่คิดว่าน่าจะมีใครเคยทำแล้ว แม้ในพิกัดโปรเจกทีฟจะดูเป็นไปได้ แต่ส่วนที่ฉายกลับเป็นพิกัดคาร์ทีเซียนตอนท้ายค่อนข้างยาก
ว่าไปแล้ว การฉายแค่เส้นขอบก็ผิดเหมือนกัน การกระจาย ความหนาแน่น ทั้งหมดเปลี่ยนไป และสิ่งนั้นก็ส่งผลต่อเส้นขอบด้วย
ผมนึกว่าการฉายสี่เหลี่ยมเป็นปัญหาที่แก้ได้แล้ว ช่วยอธิบายเพิ่มได้ไหมว่ามันต่างจากอาร์เรย์สี่เหลี่ยมธรรมดาอย่างไร
พอซูมออก จะเห็น ขอบหลายเหลี่ยม จำนวนมากที่ดูเหมือนไม่ควรมีอยู่จริง
เหมือนกำลังพยายามวาด “ก้อน” ที่นุ่มนวล แต่พิกัด texture คลาดไปเล็กน้อย เลยสงสัยว่าเป็นบั๊กหรือเป็นส่วนที่ตั้งใจของเทคนิคนี้
โดยพื้นฐานแล้วมันคือ point cloud กึ่งหนาแน่น[1] แต่แทนที่จะเป็นจุด ก็เป็นก้อนที่ถูกปรับสี มุม และขนาดให้เข้ากับภาพอินพุต ดังนั้นมันจึงถูกปรับให้เหมาะกับการมองจากระยะหนึ่ง
คิดเสียว่าเหมือนการวาดเวกเตอร์ 3D ถ้าซูมเข้าไปมากเกินไปหรือแยกบางส่วนออกมา ภาพรวมจะเริ่มดูแปลก ๆ
[1]https://www.researchgate.net/publication/326621750/figure/fi...
จนถึงตอนนี้เคยเห็น gaussian splatting ใช้กับ ข้อมูลภาพถ่าย เท่านั้น
จะใช้กับข้อมูลกราฟิกแบบอื่นได้ไหม? พูดอีกอย่างคือมีความเป็นไปได้ที่จะใช้ในเกมหรือเปล่า?
มันเก็บแค่สีตามตำแหน่งและทิศทางทางเรขาคณิต ไม่มีแนวคิดเรื่องพื้นผิว วัสดุ หรือการถ่ายทอดแสงโดยทั่วไป เช่น การปล่อยแสง การดูดกลืน การส่งผ่าน การสะท้อน หรือการกระเจิง กล่าวอีกอย่างคือทำได้เฉพาะฉากนิ่งที่มีแสงคำนวณไว้ล่วงหน้า และแอนิเมชันทำได้ยาก
ดูเหมือนว่าอุตสาหกรรมกำลังมุ่งไปสู่วิธีที่ทำให้แสงแบบไดนามิกดีขึ้น เช่น physical-based rendering (PBR) และ ray/path tracing
อีกทั้งตอนนี้ยังมีประสิทธิภาพด้านพื้นที่ต่ำอย่างมาก ฉากที่ในเอนจินเรนเดอร์แบบดั้งเดิมอาจใช้แค่หลายสิบ GB อาจกลายเป็นระดับ TB ได้ อย่างไรก็ตามหากมีการปรับแต่งเพิ่มเติมก็อาจดีขึ้น
ข้อยกเว้นที่ gaussian splatting อาจน่าสนใจคือคอนเทนต์แบบ procedural/generative และอาจรวมถึงแอนิเมชันด้วย โดยเฉพาะ เอฟเฟกต์เชิงปริมาตร เช่น ควัน ไฟ เมฆ น้ำไหล ซึ่งปัจจุบันมักใช้ระบบอนุภาค อาจเหมาะมาก
นึกภาพเกมโอเพนเวิลด์สไตล์ Minecraft ที่ใช้สิ่งนี้เป็นเอนจินพื้นฐานแทน voxel ได้ไม่ยาก
เทคนิคนี้ใช้กับ วิดีโอ ได้ไหม?
ถ้าดู README[1] ของงาน INRIA ดูเหมือนว่าจะฝึกโมเดลสำหรับฉากนิ่งแต่ละฉาก ถ้าอย่างนั้นวิดีโอก็ถูกตัดออกไปหรือเปล่า?
[1] https://github.com/graphdeco-inria/gaussian-splatting
[1] https://arxiv.org/abs/2308.09713
[2] https://dynamic3dgaussians.github.io/
ตอนนี้เรากำลังดูอะไรอยู่?
เป็นวิธีที่มีมานานแล้ว แต่ถ้า point cloud มีจุดหนึ่งล้านจุด ก็ต้องจัดการจุดหนึ่งล้านจุดนั้นอย่างมีศิลปะ จึงไม่ค่อยถูกใช้งาน
คล้ายกับเส้นผม 3D หลักการง่าย ๆ คือเรนเดอร์เส้นผมพันล้านเส้นก็พอ แต่การทำให้ดูดีจริง ๆ นั้นยาก
ในกรณีนี้ ให้โมเดล machine learning ปรับมุม สี รูปร่าง และขนาดของ primitive หนึ่งล้านชิ้น เช่น สี่เหลี่ยม วงกลม สามเหลี่ยม ฯลฯ เพื่อให้ดูเหมือนภาพถ่ายที่เราให้ไว้
นี่ใช้วิธีที่ Kerbl และ Kopanas เสนอใน SIGGRAPH 2023 หรือเปล่า?
https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/
สุดยอดจริง ๆ point cloud ก็น่าสนใจอยู่แล้ว แต่นี่น่าทึ่งกว่ามาก บน แล็ปท็อป Lenovo ที่ใช้ในบริษัทก็รันได้ 60fps
แต่มี artifact ให้เห็นเยอะ โดยเฉพาะตอนขยับกล้อง
ถ้าทำให้สิ่งนี้ทำงานใน ThreeJS ได้ น่าจะฝากร่องรอยไว้ในประวัติศาสตร์เว็บ 3D ได้เลย
ไม่เคยเจอ การควบคุมเมาส์ แบบนี้ในมุมมอง 3D มาก่อน เลยสับสนหนักอยู่พักหนึ่ง