Show HN: Gaussian Splatting 3D real-time di WebGL

 (antimatter15.com)
4 poin oleh GN⁺ 2023-09-12 | 1 komentar | Bagikan ke WhatsApp
  • Penampil WebGL yang memungkinkan adegan 3D Gaussian Splat dibuka dan dimanipulasi langsung di browser, dengan kode implementasi yang tersedia secara publik di GitHub
  • Mendukung keyboard, mouse, trackpad, sentuhan, hingga gamepad, sehingga mencakup lingkungan input desktop dan mobile secara luas
  • Kontrol kamera dibagi menjadi pergerakan, rotasi orbit, kemiringan, dan roll, sehingga penelusuran adegan yang sama dapat dilakukan dengan cara berbeda tergantung perangkat input
  • Dengan tombol angka serta -, +, p, pengguna dapat berpindah ke tampilan kamera yang telah dimuat sebelumnya, menelusuri kamera, dan melanjutkan animasi bawaan
  • File .ply dapat di-drag-and-drop untuk dikonversi menjadi .splat, dan pengaturan kamera dapat dimuat lewat cameras.json

WebGL 3D Gaussian Splat Viewer

  • WebGL 3D Gaussian Splat Viewer adalah penampil 3D Gaussian Splat buatan Kevin Kwok
  • Kodenya tersedia secara publik di Github

Kontrol berdasarkan perangkat input

  • Pergerakan keyboard

    • Panah kiri/kanan: bergerak ke kiri/kanan
    • Panah atas/bawah: bergerak maju/mundur
    • Space: melompat

  • Sudut kamera

    • a / d: memutar kamera ke kiri/kanan
    • w / s: memiringkan kamera ke atas/bawah
    • q / e: roll kamera berlawanan arah jarum jam/searah jarum jam
    • i / k, j / l: rotasi orbit

  • Trackpad

    • Gulir: rotasi orbit atas/bawah/kiri/kanan
    • Cubit: bergerak maju/mundur
    • Ctrl + gulir: bergerak maju/mundur
    • Shift + gulir: bergerak naik/turun atau ke kiri/kanan

  • Mouse

    • Klik lalu seret: rotasi orbit
    • Klik kanan atau seret atas/bawah sambil menekan tombol Ctrl/Cmd: bergerak

  • Sentuhan

    • Satu jari: rotasi orbit
    • Cubit dua jari: bergerak maju/mundur
    • Rotasi dua jari: memutar kamera searah/berlawanan arah jarum jam
    • Geser dua jari: bergerak ke kiri/kanan dan atas/bawah

  • Gamepad

    • Bekerja jika ada kontroler game yang terhubung

Kamera dan penanganan file

  • Kontrol tampilan kamera

    • 0-9: berpindah ke salah satu tampilan kamera yang telah dimuat sebelumnya
    • - atau +: menelusuri kamera yang dimuat
    • p: melanjutkan animasi bawaan

  • Drag-and-drop

    • File .ply: dikonversi menjadi .splat
    • cameras.json: memuat kamera

Bacaan terkait

1 komentar

 
GN⁺ 2023-09-12
Komentar Hacker News

  • Sangat keren, tetapi cara kontrolnya membingungkan
    Bukan gerakan WASD dan rotasi sudut pandang dengan mouse seperti biasa; drag mouse justru bergerak maju-mundur dan mengorbit di sekitar titik tertentu, A/D bergerak ke kiri/kanan, W/S berfungsi untuk melihat ke atas/bawah
    Daftar kontrol lengkap ada di README: https://github.com/antimatter15/splat#controls

    • Saya pembuatnya; maaf karena kontrol kamera-nya kurang nyaman. Saya dengan senang hati menerima pull request yang mengubahnya menjadi cara yang lebih masuk akal
      Niat awalnya adalah agar bisa bergerak hanya dengan tombol panah, seperti memutar badan di tempat dan berjalan maju-mundur
    • Cukup mirip dengan kontrol FPS N64, misalnya GoldenEye
      Strukturnya adalah tombol panah/joystick untuk “gerakan utama” berupa maju-mundur dan rotasi kiri-kanan, sementara WASD/tombol C untuk “gerakan tambahan” berupa geser kiri-kanan dan sudut pandang atas-bawah
    • Sebagai catatan, saya cukup menyukai cara kontrol yang hanya memakai mouse
    • Jujur saja, cara kontrolnya begitu tidak intuitif dan buruk sampai saya tersendat bahkan sebelum bisa menikmati demo rendering-nya

  • Sangat keren. Saya juga sedang mengerjakan port gaussian-splatting [0] ke WebGPU
    Seperti implementasi lain yang pernah saya lihat sejauh ini, implementasi ini tampaknya juga melakukan kesalahan yang sama saat memproyeksikan elipsoid dalam proyeksi perspektif. Caranya adalah menghitung kovarians di 3D terlebih dahulu lalu memproyeksikannya ke 2D[1], tetapi pendekatan ini hanya benar untuk proyeksi paralel/ortografik dan menghasilkan hasil yang salah jika diterapkan pada proyeksi perspektif
    Dalam proyeksi perspektif ada tiga efek tambahan. Pergeseran paralaks mengubah bentuk elips yang diproyeksikan, rotasi elipsoid dapat mengubah posisi tampak sehingga menghasilkan translasi tambahan, dan irisan kerucut bisa menjadi bukan hanya elips, tetapi juga parabola atau hiperbola
    Efek pertama tampaknya dikoreksi secara manual dengan matriks ini[2], tetapi dua efek terakhir tidak dimasukkan dalam perhitungan pada implementasi yang saya lihat sejauh ini. Agar benar, jangan menghitung kovarians 3D; sebaliknya, cari kerucut batas elipsoid dengan posisi kamera sebagai puncaknya, lalu iriskan dengan bidang tampilan. Irisan kerucut yang dihasilkan menjadi kontur persis dari elipsoid yang diproyeksikan secara perspektif
    [0]: https://github.com/graphdeco-inria/gaussian-splatting
    [1]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...
    [2]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...

    • Secara umum, Gaussian setelah proyeksi kamera tidak lagi benar-benar Gaussian. Itu karena fungsi proyeksi kamera pinhole bersifat nonlinier akibat pembagian dengan z
      Namun jika Gaussian kecil dibandingkan ukuran gambar, fungsi proyeksi dapat dilinearisasi untuk aproksimasi. Karena itu makalah Gaussian Splatting menggunakan Jacobian fungsi proyeksi seperti pada Persamaan 5[0]
      Dalam praktiknya, aproksimasi ini sangat cocok. Matriks yang disebutkan di tautan ketiga adalah Jacobian tersebut, dan bukan koreksi manual, melainkan valid secara matematis. Lihat [1] untuk proses derivasi
      [0] https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/3d_...
      [1] https://math.stackexchange.com/a/4716514/43771
    • Sepertinya benar. Ini pada dasarnya melihat proyeksi seolah-olah merupakan transformasi linear dalam koordinat Kartesius, lalu menggunakannya untuk mentransformasikan Gaussian
      Dilihat dengan cara lain, ini mengaproksimasi proyeksi dengan mengasumsikan seluruh Gaussian berada pada kedalaman tetap; tampaknya akan berfungsi jika cukup jauh
      Transformasi proyektif Gaussian tampaknya cukup merepotkan, tetapi rasanya pasti sudah ada yang pernah melakukannya. Dalam koordinat proyektif tampaknya mungkin, tetapi bagian memproyeksikan kembali ke koordinat Kartesius pada akhirnya cukup sulit
      Sebagai catatan, memproyeksikan kontur saja juga salah. Seluruh distribusi densitas berubah, dan itu juga memengaruhi kontur
    • Saya tidak terlalu akrab dengan teknik gaussian splat, tetapi bukankah pada dasarnya ini mesh persegi yang memiliki data internal pada vertex?
      Saya pikir proyeksi persegi sudah merupakan masalah yang terselesaikan; bisa jelaskan lebih lanjut bagaimana ini berbeda dari array persegi sederhana?
    • Jika ide perpotongan kerucut batas bisa diimplementasikan tanpa memengaruhi frame rate, sepertinya hasilnya akan lebih mulus di WebGPU. Namun akan menarik melihat perbedaannya dibandingkan implementasi seperti ini dalam kondisi yang sama

  • Saat zoom out, terlihat banyak tepi poligon yang rasanya tidak semestinya ada
    Sepertinya seperti mencoba menggambar “gumpalan” halus tetapi koordinat teksturnya sedikit meleset; saya penasaran apakah ini bug atau bagian yang memang disengaja dari tekniknya

    • Itu memang disengaja
      Pada dasarnya ini adalah point cloud semi-padat[1], tetapi alih-alih titik, strukturnya memiliki gumpalan yang warna, sudut, dan ukurannya disesuaikan agar cocok dengan foto input. Jadi ini dioptimalkan untuk dilihat dari jarak tertentu
      Anggap saja seperti gambar vektor 3D. Jika diperbesar terlalu jauh atau sebagian dipisahkan, keseluruhannya mulai terlihat agak aneh
      [1]https://www.researchgate.net/publication/326621750/figure/fi...

  • Sejauh ini saya hanya melihat gaussian splatting dipakai untuk data foto
    Apakah bisa dipakai juga untuk data grafis lain? Dengan kata lain, apakah ada kemungkinan dipakai di game?

    • Tergantung situasinya. Pendekatan radiance field seperti gaussian splatting pada dasarnya adalah foto 3D
      Ia hanya memuat warna berdasarkan posisi dan arah geometri, tanpa konsep umum tentang permukaan, material, dan perambatan cahaya, seperti emisi, absorpsi, transmisi, refleksi, atau hamburan. Dengan kata lain, hanya pencahayaan yang sudah dihitung sebelumnya dan adegan statis yang memungkinkan, sedangkan animasi sulit
      Industri tampaknya bergerak ke arah metode yang memungkinkan pencahayaan dinamis yang lebih baik, seperti physically based rendering (PBR) dan ray/path tracing
      Selain itu, saat ini efisiensi ruangnya sangat rendah. Adegan yang pada engine rendering tradisional cukup puluhan GB bisa menjadi skala TB. Namun, ini mungkin membaik dengan optimasi lebih lanjut
      Satu pengecualian tempat gaussian splatting bisa menarik adalah konten prosedural/generatif, mungkin termasuk animasi. Ini bisa sangat cocok untuk efek volumetrik yang saat ini menggunakan sistem partikel, seperti asap, api, awan, dan air mengalir
    • Tidak ada alasan mengapa itu tidak mungkin. Pada akhirnya ini hanya point cloud yang keren
      Mudah membayangkan game open-world bergaya Minecraft yang memakai ini sebagai engine dasar alih-alih voxel

  • Apakah teknik ini juga bekerja untuk video?
    Melihat README dari karya INRIA[1], tampaknya model dilatih untuk tiap adegan statis; apakah itu berarti video dikecualikan?
    [1] https://github.com/graphdeco-inria/gaussian-splatting

  • Sebenarnya apa yang sedang saya lihat?

    • Gaussian splatting adalah istilah keren untuk point cloud yang menggunakan bentuk berwarna alih-alih titik
      Metode ini sudah ada sejak lama, tetapi tidak banyak digunakan karena jika point cloud memiliki sejuta titik, sejuta titik itu harus ditangani secara artistik
      Mirip dengan rambut 3D. Prinsipnya sederhana: cukup render 1 miliar helai rambut, tetapi membuatnya benar-benar terlihat bagus itu sulit
      Di sini, model machine learning diminta menyesuaikan sudut, warna, bentuk, dan ukuran dari sejuta bentuk dasar—misalnya persegi, lingkaran, segitiga, dan sebagainya—agar terlihat seperti foto yang kita berikan
    • Pada dasarnya ini pekerjaan berikut: https://github.com/graphdeco-inria/gaussian-splatting — pendekatan yang agak berbeda untuk merender adegan 3D

  • Apakah ini memakai metode yang diajukan Kerbl dan Kopanas di SIGGRAPH 2023?
    https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/

    • Benar. Namun, ini hanya mengimplementasikan bagian splatting/rendering, bukan bagian optimasi yang menghasilkan rekonstruksi awal

  • Benar-benar luar biasa. Point cloud saja sudah menarik, tetapi ini jauh lebih menakjubkan. Bahkan berjalan 60fps di laptop Lenovo yang dipakai di kantor

    • Di ponsel kelas menengah pun berjalan 36fps. Tidak saya duga
      Namun artefaknya terlihat cukup banyak, terutama saat kamera digerakkan

  • Kalau ini dibuat berjalan di dalam ThreeJS, rasanya bisa meninggalkan jejak dalam sejarah 3D web

  • Saya belum pernah mengalami kontrol mouse seperti ini di tampilan 3D, jadi sempat sangat kebingungan selama beberapa saat