Show HN: WebGL’de gerçek zamanlı 3D Gaussian Splatting

 (antimatter15.com)
4 puan yazan GN⁺ 2023-09-12 | 1 yorum | WhatsApp'ta paylaş
  • Tarayıcıda 3D Gaussian Splat sahnelerini doğrudan açıp incelemeyi ve etkileşimli olarak kontrol etmeyi sağlayan bir WebGL görüntüleyici; uygulama kodu GitHub’da açık olarak yayımlanmış
  • Klavye, fare, trackpad, dokunmatik ekran ve gamepad desteğiyle masaüstü ve mobil giriş ortamlarını geniş biçimde kapsar
  • Kamera kontrolleri hareket, yörüngesel döndürme, eğim ve roll olarak ayrılır; farklı giriş cihazlarıyla aynı sahnede farklı şekillerde gezinilebilir
  • Sayı tuşları ile -, +, p üzerinden önceden yüklenmiş kamera görünümlerine geçiş, kameralar arasında dolaşma ve varsayılan animasyonu sürdürme yapılabilir
  • .ply dosyaları sürükleyip bırakarak .splat biçimine dönüştürülebilir; cameras.json ile kamera ayarları yüklenebilir

WebGL 3D Gaussian Splat Viewer

  • WebGL 3D Gaussian Splat Viewer, Kevin Kwok tarafından yapılmış bir 3D Gaussian Splat görüntüleyicisidir
  • Kod Github üzerinde yayımlanmıştır

Giriş cihazına göre kontroller

  • Klavye ile hareket

    • Sol/sağ oklar: sola/sağa hareket
    • Yukarı/aşağı oklar: ileri/geri hareket
    • Space: zıpla

  • Kamera açısı

    • a / d: kamerayı sola/sağa döndürme
    • w / s: kamerayı yukarı/aşağı eğme
    • q / e: kamerayı saat yönünün tersine/saat yönünde roll yapma
    • i / k, j / l: yörüngesel döndürme

  • Trackpad

    • Kaydırma: yukarı/aşağı/sola/sağa yörüngesel döndürme
    • Pinch: ileri/geri hareket
    • Ctrl + kaydırma: ileri/geri hareket
    • Shift + kaydırma: yukarı/aşağı veya sola/sağa hareket

  • Fare

    • Tıklayıp sürükleme: yörüngesel döndürme
    • Sağ tıklama veya Ctrl/Cmd tuşuyla birlikte yukarı/aşağı sürükleme: hareket

  • Dokunmatik

    • Tek parmak: yörüngesel döndürme
    • İki parmakla pinch: ileri/geri hareket
    • İki parmakla döndürme: kamerayı saat yönünde/saat yönünün tersine döndürme
    • İki parmakla pan: sola/sağa ve yukarı/aşağı hareket

  • Gamepad

    • Bağlı bir oyun kumandası varsa çalışır

Kamera ve dosya işleme

  • Kamera görünümü kontrolü

    • 0-9: önceden yüklenmiş kamera görünümlerinden birine geçiş
    • - veya +: yüklenen kameralar arasında dolaşma
    • p: varsayılan animasyonu sürdürme

  • Sürükle ve bırak

    • .ply dosyası: .splat biçimine dönüştürme
    • cameras.json: kamera yükleme

İlgili okumalar

1 yorum

 
GN⁺ 2023-09-12
Hacker News yorumları

  • Gerçekten harika, ama kontrol biçimi kafa karıştırıcı
    Alışıldık WASD ile hareket ve fareyle bakış yönünü döndürme yerine, fare sürükleme ileri-geri hareket ve belirli bir nokta etrafında yörüngesel dönüş yapıyor; A/D sağa-sola hareket, W/S ise yukarı-aşağı bakma olarak çalışıyor
    Kontrollerin tam listesi README’de var: https://github.com/antimatter15/splat#controls

    • Yazarıyım; kamera kontrolleri rahatsız edici olduğu için kusura bakmayın. Daha makul bir düzene çevirecek pull request’leri memnuniyetle kabul ederim
      Asıl niyetim, yalnızca ok tuşlarıyla yerinde dönüp ileri-geri yürür gibi hareket edilebilmesiydi
    • N64 FPS kontrollerine, örneğin GoldenEye’a epey benziyor
      Ok tuşları/joystick ile ileri-geri hareket ve sağa-sola dönme şeklinde “ana hareket”, WASD/C düğmeleriyle sağa-sola hareket ve yukarı-aşağı bakış şeklinde “ikincil hareket” yapısı var
    • Bu arada yalnızca fareyle kullanılan kontrol biçimini oldukça beğendim
    • Açıkçası kontroller o kadar sezgisel değil ve kötü ki, render demosunu izleyemeden takıldım

  • Gerçekten harika. Ben de gaussian-splatting’i [0] WebGPU’ya portlama üzerinde çalışıyorum
    Şimdiye kadar gördüğüm diğer uygulamalar gibi, bu uygulama da elipsoitleri perspektif projeksiyonda yansıtırken aynı hatayı yapıyor gibi görünüyor. Önce 3D’de kovaryansı hesaplayıp sonra 2D’ye projekte eden yöntem[1]; bu yaklaşım yalnızca paralel/ortografik projeksiyonda doğru, perspektif projeksiyona uygulanınca yanlış sonuç veriyor
    Perspektif projeksiyonda üç ek etki var. Paralaks kayması, projekte edilen elipsin şeklini değiştirir; elipsoidin dönüşü görünür konumu değiştirip ek bir öteleme yaratabilir; konik kesit yalnızca elips değil, parabol ya da hiperbol de olabilir
    İlk etkiyi bu matrisle[2] elle düzeltiyor gibi görünüyorlar, ancak son iki etki şimdiye kadar gördüğüm uygulamalarda hesaba katılmamış. Doğru yapmak için 3D kovaryansı hesaplamak yerine, tepe noktası kamera konumu olan elipsoidin sınır konisini bulup bunu görüntü düzlemiyle kesiştirmek gerekir. Ortaya çıkan konik kesit, perspektif projeksiyondaki elipsoidin doğru silüeti olur
    [0]: https://github.com/graphdeco-inria/gaussian-splatting
    [1]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...
    [2]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...

    • Genel olarak bir Gauss dağılımı, kamera projeksiyonundan sonra artık gerçek bir Gauss dağılımı değildir. Çünkü pinhole kamera projeksiyon fonksiyonu z’ye bölündüğü için doğrusal değildir
      Ancak Gauss dağılımı görüntü boyutuna kıyasla küçükse, projeksiyon fonksiyonunu doğrusallaştırarak yaklaşık hesap yapılabilir. Bu yüzden Gaussian Splatting makalesi, Denklem 5’te olduğu gibi projeksiyon fonksiyonunun Jacobian’ını kullanıyor[0]
      Pratikte bu yaklaşım çok iyi uyuyor. Üçüncü bağlantıda bahsedilen matris tam olarak o Jacobian; elle yapılmış bir düzeltme değil, matematiksel olarak geçerli. Türetim süreci için [1]’e bakın
      [0] https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/3d_...
      [1] https://math.stackexchange.com/a/4716514/43771
    • Doğru gibi. Projeksiyonu Kartezyen koordinatlarda bir doğrusal dönüşüm gibi görüp Gauss dağılımını onunla dönüştürüyorsunuz
      Başka bir açıdan bakınca, tüm Gauss dağılımının sabit bir derinlikte olduğunu varsayarak projeksiyonu yaklaşık hesaplamak demek; yeterince uzaktaysa çalışacak gibi
      Bir Gauss dağılımının projektif dönüşümü epey zahmetli görünüyor, ama birileri yapmış olmalı. Projektif koordinatlarda mümkün görünse de en sonda Kartezyen koordinatlara projekte etme kısmı zor
      Bu arada yalnızca silüeti projekte etmek de yanlış. Tüm yoğunluk dağılımı değişiyor ve bu da silüeti etkiliyor
    • Gaussian splat tekniğine pek aşina değilim, ama özünde tepe noktalarında iç veri taşıyan bir dörtgen mesh değil mi diye düşünüyorum
      Dörtgen projeksiyonunun zaten çözülmüş bir problem olduğunu sanıyordum; bunun basit bir dörtgen dizisinden nasıl farklı olduğunu biraz daha açıklayabilir misiniz?
    • Sınır konisi kesişimi fikrini kare hızını etkilemeden uygulamak mümkünse WebGPU’da daha akıcı olur gibi. Yine de böyle bir uygulamayla aynı koşullarda karşılaştırıldığında farkı görmek ilginç olurdu

  • Uzaklaştırınca, aslında orada olmaması gerekiyormuş gibi duran birçok çokgen kenarı görünüyor
    Yumuşak “topaklar” çizilmeye çalışılırken doku koordinatları biraz kaymış gibi görünüyor; bunun bir hata mı yoksa tekniğin kasıtlı bir parçası mı olduğunu merak ediyorum

    • Kasıtlı
      Temelde yarı yoğun bir nokta bulutu[1]; ancak noktalar yerine, giriş fotoğraflarına uyacak şekilde rengi, açısı ve boyutu ayarlanmış topaklar var. Bu yüzden belirli bir mesafeden bakılmak üzere optimize edilmiş
      Bunu 3D vektör çizimi gibi düşünebilirsiniz. Çok fazla yakınlaştırırsanız ya da bir kısmını ayırırsanız bütün biraz garip görünmeye başlar
      [1]https://www.researchgate.net/publication/326621750/figure/fi...

  • Şimdiye kadar gaussian splatting’in yalnızca fotoğraf verileri için kullanıldığını gördüm
    Başka grafik verilerinde de kullanılabilir mi? Başka bir deyişle oyunlarda kullanılma ihtimali var mı?

    • Duruma bağlı. gaussian splatting gibi ışınım alanı yaklaşımları temelde 3D fotoğraftır
      Geometri konumu ve yönüne bağlı yalnızca renk bilgisini içerir; yüzey, malzeme ve ışık aktarımının genel kavramları, yani yayım, soğurma, geçirgenlik, yansıma ve saçılma gibi kavramlar yoktur. Başka bir deyişle yalnızca önceden hesaplanmış aydınlatma ve statik sahneler mümkündür; animasyon ise zordur
      Sektör, fizik tabanlı render (PBR) ve ray/path tracing gibi daha iyi dinamik aydınlatmaya olanak veren yöntemlere doğru gidiyor gibi görünüyor
      Ayrıca şu anda uzamsal verimliliği son derece düşük. Geleneksel render motorlarında onlarca GB ile yetinebilecek bir sahne TB mertebesine çıkabilir. Ancak daha fazla optimizasyonla bu iyileşebilir
      İstisna olarak gaussian splatting’in ilginç olabileceği yer, prosedürel/üretken içerik, hatta belki animasyonu da içeren içeriklerdir. Özellikle duman, ateş, bulut ve akan su gibi şu anda parçacık sistemleri kullanılan hacimsel efektler için uygun olabilir
    • Mümkün olmaması için bir neden yok. Sonuçta havalı bir nokta bulutundan ibaret
      Voxel yerine bunu temel motor olarak kullanan açık dünya, Minecraft tarzı bir oyunu kolayca hayal edebiliyorum

  • Bu teknik video için de çalışır mı?
    INRIA çalışmasının README’sine[1] bakınca, her statik sahne için bir model eğitiliyor gibi görünüyor; bu durumda video kapsam dışı mı kalıyor?
    [1] https://github.com/graphdeco-inria/gaussian-splatting

  • Şu anda neye bakıyorum?

    • Gaussian splatting, nokta yerine renkli şekiller kullanan bir nokta bulutuna verilen havalı bir ad
      Çok eskiden beri var olan bir yöntem, ancak nokta bulutunda bir milyon nokta varsa o milyon noktayı sanatsal olarak ele almak gerektiği için pek kullanılmıyordu
      3D saçlara benziyor. Prensip basit: 1 milyar saç telini render etmeniz yeterli; ama gerçekte iyi görünmesini sağlamak zor
      Burada bir makine öğrenmesi modeline bir milyon temel şeklin — örneğin kare, daire, üçgen vb. — açılarını, renklerini, biçimlerini ve boyutlarını ayarlatıp, bizim sağladığımız fotoğraflara benzemesini sağlıyoruz
    • Temelde yapılan iş bu: https://github.com/graphdeco-inria/gaussian-splatting — 3D sahneleri render etmek için biraz farklı bir yaklaşım

  • Bu, SIGGRAPH 2023’te Kerbl ve Kopanas’ın önerdiği yöntemi mi kullanıyor?
    https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/

    • Evet. Ancak bu, başlangıçta yeniden oluşturmayı üreten optimizasyon kısmını değil, yalnızca splatting/render kısmını uyguluyor

  • Gerçekten harika. Nokta bulutları da ilginç ama bu çok daha şaşırtıcı. Şirkette kullandığım Lenovo dizüstü bilgisayarda bile 60fps çalışıyor

    • Orta sınıf bir telefonda bile 36fps çalışıyor. Bunu beklemiyordum
      Ancak özellikle kamerayı hareket ettirince çok sayıda artefakt görülüyor

  • Bunu ThreeJS içinde çalışır hale getirirseniz, web 3D tarihine iz bırakabilirsiniz diye düşünüyorum

  • 3D görünümde böyle bir fare kontrolü hiç deneyimlemediğim için bir süre ciddi şekilde afalladım