Show HN: 3D Gaussian Splatting em tempo real no WebGL

 (antimatter15.com)
4 pontos por GN⁺ 2023-09-12 | 1 comentários | Compartilhar no WhatsApp
  • Um viewer WebGL que permite abrir e manipular cenas 3D Gaussian Splat diretamente no navegador, com o código de implementação disponível no GitHub
  • Oferece suporte a teclado, mouse, trackpad, toque e até gamepad, cobrindo amplamente ambientes de entrada em desktop e mobile
  • Os controles da câmera são divididos em movimento, rotação orbital, inclinação e roll, permitindo explorar a mesma cena de maneiras diferentes conforme o dispositivo de entrada
  • Com as teclas numéricas e -, +, p, é possível alternar entre views de câmera pré-carregadas, circular entre câmeras e retomar a animação padrão
  • É possível arrastar e soltar arquivos .ply para convertê-los em .splat, e carregar configurações de câmera via cameras.json

WebGL 3D Gaussian Splat Viewer

  • WebGL 3D Gaussian Splat Viewer é um viewer de 3D Gaussian Splat criado por Kevin Kwok
  • O código está disponível no Github

Controles por dispositivo de entrada

  • Movimento pelo teclado

    • Setas esquerda/direita: mover para a esquerda/direita
    • Setas para cima/baixo: mover para frente/para trás
    • Space: pular

  • Ângulo da câmera

    • a / d: girar a câmera para a esquerda/direita
    • w / s: inclinar a câmera para cima/baixo
    • q / e: roll da câmera no sentido anti-horário/horário
    • i / k, j / l: rotação orbital

  • Trackpad

    • Rolagem: rotação orbital para cima/baixo/esquerda/direita
    • Pinça: mover para frente/para trás
    • Ctrl + rolagem: mover para frente/para trás
    • Shift + rolagem: mover para cima/baixo ou para a esquerda/direita

  • Mouse

    • Clicar e arrastar: rotação orbital
    • Clique direito ou arrastar para cima/baixo com a tecla Ctrl/Cmd: mover

  • Toque

    • Um dedo: rotação orbital
    • Pinça com dois dedos: mover para frente/para trás
    • Rotação com dois dedos: girar a câmera no sentido horário/anti-horário
    • Pan com dois dedos: mover para a esquerda/direita e para cima/baixo

  • Gamepad

    • Funciona se houver um controle de jogo conectado

Câmera e processamento de arquivos

  • Controle de views da câmera

    • 0-9: alternar para uma das views de câmera pré-carregadas
    • - ou +: circular entre as câmeras carregadas
    • p: retomar a animação padrão

  • Arrastar e soltar

    • Arquivo .ply: converter para .splat
    • cameras.json: carregar câmeras

Leituras relacionadas

1 comentários

 
GN⁺ 2023-09-12
Comentários do Hacker News

  • Muito legal, mas o esquema de controles é confuso
    Em vez do movimento WASD comum e rotação da visão com o mouse, arrastar o mouse faz o movimento para frente/trás e uma rotação orbital em torno de um ponto específico, A/D move para a esquerda/direita, e W/S controla olhar para cima/baixo
    A lista completa de controles está no README: https://github.com/antimatter15/splat#controls

    • Sou o autor, desculpa pelos controles da câmera serem desconfortáveis. Fico feliz em aceitar pull requests que mudem isso para algo mais razoável
      A intenção original era permitir navegação só com as setas, virando o corpo no lugar e andando para frente e para trás
    • É bem parecido com controles de FPS do N64, por exemplo GoldenEye
      A estrutura é usar as setas/joystick para o “movimento principal”, com avanço/recuo e rotação para a esquerda/direita, e WASD/botões C para o “movimento secundário”, com deslocamento lateral e visão para cima/baixo
    • Como observação, eu gostei bastante do esquema de controle usando só o mouse
    • Para ser sincero, os controles são tão pouco intuitivos e terríveis que fiquei travado antes mesmo de conseguir apreciar a demo de renderização

  • Muito legal. Eu também estou trabalhando em portar gaussian-splatting [0] para WebGPU
    Assim como outras implementações que vi até agora, esta também parece cometer o mesmo erro ao projetar elipsoides em projeção em perspectiva. Ela primeiro calcula a covariância em 3D e depois projeta para 2D[1], mas essa abordagem só é correta para projeção paralela/ortográfica e gera resultados errados quando aplicada à projeção em perspectiva
    Há três efeitos adicionais na projeção em perspectiva. O deslocamento por paralaxe altera a forma da elipse projetada, a rotação do elipsoide pode mudar sua posição aparente e criar uma translação paralela adicional, e uma seção cônica pode ser não só uma elipse, mas também uma parábola ou hipérbole
    O primeiro efeito parece ser corrigido manualmente por esta matriz[2], mas os dois últimos não entraram no cálculo nas implementações que vi até agora. Para fazer corretamente, não se deve calcular a covariância 3D; é preciso encontrar o cone limite do elipsoide tendo a posição da câmera como vértice e então intersectá-lo com o plano de visão. A seção cônica resultante é o contorno exato do elipsoide projetado em perspectiva
    [0]: https://github.com/graphdeco-inria/gaussian-splatting
    [1]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...
    [2]: https://github.com/antimatter15/splat/blob/3695c57e8828fedc2...

    • Em geral, uma gaussiana deixa de ser uma gaussiana verdadeira depois da projeção pela câmera. Isso acontece porque a função de projeção de uma câmera pinhole é não linear, pois divide por z
      Mas, se a gaussiana for pequena em relação ao tamanho da imagem, é possível aproximar linearizando a função de projeção. Por isso o artigo de Gaussian Splatting usa o jacobiano da função de projeção, como na equação 5[0]
      Na prática, essa aproximação funciona muito bem. A matriz mencionada no terceiro link é exatamente esse jacobiano, e não uma correção manual, mas algo matematicamente válido. Veja a derivação em [1]
      [0] https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/3d_...
      [1] https://math.stackexchange.com/a/4716514/43771
    • Parece certo. É como tratar a projeção em coordenadas cartesianas como se fosse uma transformação linear, e então transformar a gaussiana com isso
      Visto de outro modo, é uma aproximação da projeção assumindo que a gaussiana inteira está em uma profundidade fixa; deve funcionar se ela estiver longe o suficiente
      A transformação projetiva de uma gaussiana parece bem trabalhosa, mas imagino que alguém já tenha feito isso. Em coordenadas projetivas parece possível, mas a parte final de projetar de volta para coordenadas cartesianas é complicada
      A propósito, projetar apenas o contorno também está errado. Toda a distribuição de densidade muda, e isso também afeta o contorno
    • Não conheço muito bem a técnica de gaussian splat, mas essencialmente não seria uma malha de quadriláteros com dados internos nos vértices?
      Achei que a projeção de quadriláteros já fosse um problema resolvido; você poderia explicar melhor como isso difere de uma simples matriz de quadriláteros?
    • Se a ideia de interseção com o cone limite puder ser implementada sem afetar o frame rate, parece que ficaria mais suave em WebGPU. Ainda assim, seria interessante ver a diferença em comparação com uma implementação dessas nas mesmas condições

  • Ao dar zoom out, aparecem muitas arestas poligonais que não parecem que deveriam existir
    Parece que está tentando desenhar “aglomerados” suaves, mas com coordenadas de textura ligeiramente desalinhadas; fico curioso se é um bug ou uma parte intencional da técnica

    • É intencional
      Basicamente é uma nuvem de pontos semidensa[1], mas, em vez de pontos, há aglomerados com cor, ângulo e tamanho ajustados para corresponder às fotos de entrada. Por isso ela é otimizada para ser vista a uma certa distância
      Pense nisso como desenho vetorial 3D. Se você aproximar demais ou separar uma parte, o conjunto começa a parecer meio estranho
      [1]https://www.researchgate.net/publication/326621750/figure/fi...

  • Até agora, só vi gaussian splatting sendo usado com dados fotográficos
    Será que dá para usar com outros dados gráficos? Em outras palavras, existe potencial para uso em jogos?

    • Depende da situação. Uma abordagem de campo de radiância como gaussian splatting é, basicamente, fotografia 3D
      Ela contém apenas cores de acordo com a posição e a direção geométricas, e não conceitos gerais de superfície, material e transporte de luz, como emissão, absorção, transmissão, reflexão ou espalhamento. Em outras palavras, isso significa que só permite iluminação pré-computada e cenas estáticas, e que animação é difícil
      A indústria parece estar indo na direção de métodos que possibilitam iluminação dinâmica melhor, como renderização baseada em física (PBR) e traçado de raios/caminhos
      Além disso, no momento a eficiência espacial é extremamente baixa. Uma cena que em um motor de renderização tradicional ocuparia dezenas de GB pode chegar à escala de TB. Ainda assim, isso pode melhorar com mais otimizações
      Uma exceção em que gaussian splatting pode ser interessante é em conteúdo procedural/gerado, talvez até incluindo animação. Ele pode ser especialmente adequado para efeitos volumétricos como fumaça, fogo, nuvens e água corrente, que hoje usam sistemas de partículas
    • Não há motivo para não ser possível. No fim, é apenas uma nuvem de pontos sofisticada
      É fácil imaginar um jogo de mundo aberto no estilo Minecraft que use isso como motor básico em vez de voxels

  • Essa técnica também funcionaria com vídeo?
    Pelo README do trabalho da INRIA[1], parece que o modelo é treinado para cada cena estática; então vídeos ficam excluídos?
    [1] https://github.com/graphdeco-inria/gaussian-splatting

  • O que estou vendo agora?

    • Gaussian splatting é um nome bonito para uma nuvem de pontos que usa formas coloridas em vez de pontos
      É uma técnica que existe há muito tempo, mas, se uma nuvem de pontos tem um milhão de pontos, você precisa manipular artisticamente esse milhão de pontos, então ela não era muito usada
      É parecido com cabelo 3D. O princípio é simples: basta renderizar 1 bilhão de fios de cabelo, mas fazer isso ficar realmente bonito é difícil
      Aqui, eles fazem um modelo de aprendizado de máquina ajustar o ângulo, a cor, a forma e o tamanho de um milhão de formas básicas — por exemplo, quadrados, círculos, triângulos etc. — para que pareçam as fotos que fornecemos
    • Basicamente é este trabalho: https://github.com/graphdeco-inria/gaussian-splatting — uma abordagem um pouco diferente para renderizar cenas 3D

  • Isso usa o método proposto por Kerbl e Kopanas na SIGGRAPH 2023?
    https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/

    • Sim. Mas isto implementa apenas a parte de splatting/renderização, não a parte de otimização que gera a reconstrução inicialmente

  • É realmente incrível. Nuvens de pontos já são interessantes, mas isto é muito mais impressionante. Roda a 60 fps até no notebook Lenovo que uso no trabalho

    • Roda a 36 fps até em um celular intermediário. Não esperava por isso
      Mas aparecem muitos artefatos, especialmente quando se move a câmera

  • Se fizerem isso funcionar dentro do ThreeJS, acho que pode deixar uma marca na história do 3D na web

  • Nunca tinha encontrado esse tipo de controle do mouse em uma visualização 3D, então fiquei bem confuso por um bom tempo