Three.js: Solicitação de recurso: reflexões do espaço da tela

Minha única preocupação aqui é que ele não funciona muito bem com Renderização estéreo, então seria difícil em WebVR, mas, por favor, não pense que sou contra o recurso :): +1:

Basta desligá-lo em RV. Muitos dos efeitos caros não funcionam bem em RV. O UE4 sugere até mesmo prosseguir com a renderização para frente em vez de adiar no contexto de VR para fins de velocidade.

Exatamente, por isso não sou contra.

Eu tropecei aqui enquanto trabalhava em uma implementação do React Native de mapeamento de reflexão. As reflexões do espaço da tela são ótimas para jogos que não são de RV.

THREE.Reflector funciona em realidade virtual ✌️
https://threejs.org/examples/webvr_sandbox.html

Agradável!

Embora até no Nightly eu receba "VR Not found", mas vou dar uma olhada.

Meu problema particular (que não é o OP) não era resolver o problema de reflexão, era como criar objetos nativos three.js e renderizá-los dentro da cena e renderizador existentes do ReactVR. Obtive resultados OK, a única coisa é que a imagem de fundo estava um pouco estranha, então os reflexos parecem estranhos - mas isso é o esperado, React VR cria uma esfera de dentro para fora para o panorama de fundo. Não tentei um mapa de cubo, mas pode funcionar melhor.

Estou MUITO sobrecarregado de páginas do livro, então provavelmente vou deixar a demonstração existente do jeito que está, mas parece uma ótima técnica.

Tenho desejado aprender mais sobre esse tipo de efeito, então tentei fazer um efeito de compositor para ele. Ainda há algum trabalho que pode ser feito, mas aqui está o que eu reuni com base na implementação do Kode80 e na postagem do blog de Morgan McGuire (a cena sponza demora um pouco para carregar):

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Algumas coisas a fazer a seguir seriam limpar os artefatos de jitter, reflexos brilhantes (com uma passagem de desfoque ou amostragem de mapa mip + pirâmide de mapa de profundidade) e vários saltos via reprojeção temporal.

Se alguém estiver realmente interessado em usar este efeito, eu ficaria feliz em trabalhar com alguém para aprimorar isso um pouco mais!

@gkjohnson Sweet. Sua cena pode ser muito complexa, entretanto. Em qualquer caso, sua demonstração parece não estar respondendo. Você pode criar um exemplo mais simples? Além disso, um botão liga / desliga seria bom.

@WestLangley

sua demonstração parece não estar respondendo muito

Você consegue ver a demonstração? A tela pode ficar preta por alguns segundos ou mais porque a cena Sponza vai demorar um pouco para baixar, dependendo da sua conexão.

Se não estiver funcionando, posso dar uma olhada na criação de algo mais simples - funciona no meu Pixel 2, no entanto

uma chave liga-desliga seria bom.

Abaixar o controle deslizante de "intensidade" para 0 é o mesmo que desligá-lo, embora o traçado de raio ainda esteja acontecendo, então não haverá nenhuma diferença de desempenho nesse caso, se é isso que você está procurando.

@gkjohnson Entendi. No meu mac, sua demonstração fica preta por um tempo e, em seguida, a taxa de quadros é 4.

@WestLangley É um efeito muito dependente da resolução, então se você diminuir a janela, a taxa de quadros provavelmente aumentará. Fazer o traçado do raio em uma resolução mais baixa e, em seguida, a composição com o buffer de resolução total ajudaria a tornar o efeito mais escalonável, mas não reservei tempo para otimizá-lo.

@gkjohnson como você mascararia apenas para superfícies reflexivas? Se eu aumentar a intensidade, tudo começa a refletir e há alguns artefatos bem chocantes.

@bicubic No momento, nenhum atributo de superfície está sendo levado em consideração, mas não deve ser muito difícil adicionar uma versão básica disso. Você pode esmaecer ou borrar o efeito com base no atributo especular / rugosidade do material.

Infelizmente, não tenho uso para o efeito no momento, então não saí do meu caminho para adicionar esses outros recursos. Porém, como mencionei antes, se houver interesse em usá-lo para algo, ficarei feliz em colaborar e arredondar o efeito!

Você pode esmaecer ou borrar o efeito com base no atributo especular / rugosidade do material.

Seria mais útil ser capaz de especificar objetos como reflexivos / não reflexivos. No momento, tudo é reflexivo, incluindo coisas como cortinas e plantas. Idealmente, apenas o chão deve ser reflexivo nesta demonstração.

@looeee eu concordo que é o que estou dizendo - desculpe se eu não estava claro. Os atributos de material teriam que ser gravados em um alvo para que pudessem ser amostrados no espaço da tela e usados ​​para esmaecer ou borrar os reflexos em um determinado pixel. Isso permitiria que mapas de rugosidade etc. afetassem os reflexos também.

Eu adoraria ver isso se tornando parte dos recursos padrão do three.js.

Há muitas coisas como essa que fazem você se perguntar se uma arquitetura de renderizador adiado também deve se tornar parte da oferta padrão. Especialmente para webgl2.0

@gkjohnson entendeu, faz sentido. No entanto, ainda parece que algum tipo de máscara pode ser necessária para evitar artefatos. Em seu exemplo, você gostaria de zero reflexos nas cortinas e plantas. O desbotamento para zero com base nas propriedades desses materiais funcionaria corretamente?

@bicubic
Concordo que também gostaria de ver um caminho de renderização diferido dedicado. Com WebGL2 e várias texturas de renderização, é muito mais viável.

@looee
Depende do efeito que você deseja, mas com a abordagem que descrevi, o valor de rugosidade renderizado se comportaria efetivamente como a máscara para a cena com um valor de rugosidade de 1 significando "não renderizar nenhum reflexo neste pixel" e um valor de 0 significando "renderizar completo reflexão neste pixel ". Valores intermediários renderizariam reflexos em uma intensidade parcial. O controle deslizante intensity na demonstração mostra o efeito (mas obviamente para toda a cena em vez de por pixel).

Outra abordagem é desfocar os pixels refletidos com base no valor de rugosidade para emular uma superfície difusa refletindo a luz. Portanto, as cortinas ainda teriam alguns reflexos, mas não alguns nítidos. Isso permitiria que a cortina fosse iluminada por um piso azul bem iluminado, por exemplo.

um valor de rugosidade de 1 significa "não renderiza reflexo neste pixel" e um valor de 0 significa "renderiza reflexo total neste pixel".

Parece que isso pode funcionar bem. Unreal usa um parâmetro de "rugosidade máxima" e recomenda que seja definido como 0,8.

Opa

@gkjohnson
Isso é muito interessante e adorei o seu resultado, estou integrando-o em um renderizador WebGL2 / MRT agora e vou experimentar. Você percebeu que cria um material em cada chamada de renderização?
this.scene.overrideMaterial = this.createPackedMaterial();

Obrigado @Fyrestar ! E eu não tinha percebido isso! Mas, como eu disse, acho que ainda há um pouco de limpeza a fazer e o desempenho provavelmente ainda não está em um ponto em que seja superutilizável.

De qualquer forma, esses tipos de efeitos são realmente mais adequados para um renderizador adiado do que para a frente (presumivelmente como se você estivesse trabalhando). Tenho desejado reunir este e alguns outros efeitos de alta qualidade, mas estou inclinado a esperar até que um renderizador adiado adequado esteja disponível antes de dedicar muito mais tempo a isso. O renderizador diferido / MRT em que você está trabalhando está disponível no Github?

Eu o integrei agora, enquanto o SSR passa a saída para um RT de resolução inferior, basicamente apenas os reflexos e, em seguida, combine-o usando um borrão de profundidade com a imagem principal para remover / reduzir os erros. Eu renderizo os valores de rugosidade para um atributo RT e o uso novamente para determinar a intensidade do desfoque com 1 sendo invisível para descartar o fragmento.

O desfoque também remove o erro que fica mais forte na distância. Um problema ainda parece ser a transparência novamente e os objetos que cobrem parcialmente outros, fazendo com que cortem o reflexo dos outros. Eu realmente preciso ler mais sobre a técnica.

Estou usando-o com um motor personalizado no topo do TRÊS, não usando o compositor do TRÊS. O THREE está pronto para usar um contexto WebGL2 no WebGLRenderer atual, adicionei o MRT lá. Vou colocá-lo no github em breve, eu acho. No entanto, ainda é necessário renderizar a cena uma segunda vez para o buffer de profundidade da face posterior, mas isso não é muito caro.

@Fyrestar
Ei alguma notícia sobre?

Eu escrevi o meu próprio e fiz um pr para three.js , mas agora apenas suporte OrthographicCamera, estou tentando oferecer suporte PerspectiveCamera.
Demo Demo2

O suporte para PerspectiveCamera está OK agora. https://github.com/mrdoob/three.js/pull/20156

Demo

Isso é lindo e muito bom. É muito lento na minha máquina - obtenho 5fps a 1920x1080. Qual é a diferença entre a sua implementação e a do Sketchfab? Suspeito que se soubéssemos o diferente, saberíamos como otimizar o seu ...

@bhouston Obrigado!

Agora, tudo na cena é reflexivo, mas não é necessário na maioria dos projetos práticos.
Vou adicionar algumas propriedades como IntensityMap ou usar as informações existentes de Roughness Metalness, combinadas com a atenuação de distância, no pixel com um valor 0, para encerrar o cálculo diretamente, acho que melhorará muito o fps.
Também pode selecionar aleatoriamente parte dos pixels reflexivos.

Tentei visualizar o código do Sketchfab, mas não consegui. Vou tentar de novo, mas não sinto muita esperança. Se alguém tiver o código do Sketchfab, por favor, compartilhe, obrigado!

------EDITAR------
Além disso, a janela de apresentação do Sketchfab não é exibida em tela inteira por padrão e interrompe a renderização quando não há operação.
Se estiver em tela cheia e continuar girando, até mesmo cenas simples também terão alto uso de gpu.

@gonnavis O código de sombreador desse exemplo deve ser visualizado por meio da extensão Spector.js do Chrome.

Apenas brincando com Sketchfab, posso ver que eles estão mudando sua resolução SSR e refinando-a. Eu não ficaria surpreso se eles tivessem de 3 a 5 níveis de qualidade pelos quais eles estão pulando progressivamente. Isso garante que haja uma taxa de quadros interativa, mas que ela seja refinada para ficar perfeita quando estiver estática.

Isso garante que haja uma taxa de quadros interativa, mas que ela seja refinada para ficar perfeita quando estiver estática.

A desvantagem é que há um salto perceptível quando a câmera para de se mover e os níveis de qualidade são alterados. É mais óbvio em algumas cenas do que em outras. Aqui é muito óbvio.

EDITAR: eles fazem isso com mais do que apenas reflexos - parece que luzes, sombras, reflexos e talvez resoluções de textura são progressivamente aprimoradas. Observe a luz / sombra na parede posterior desta cena .

Quando eu estava experimentando o SSRR acima, referi um pouco o artigo de Morgan Mcguire sobre ele aqui , que explica algumas técnicas que parece que o Sketchfab pode estar usando.

Especificamente, a distância de pixel pode ser aumentada para que menos pixels de pixel sejam amostrados, o que pode ser acoplado a um jitter regular por pixel, de forma que pixels irmãos "ignorem" diferentes amostras de profundidade durante o passo. Se a distância do raio for alta o suficiente, você pode adicionar uma busca binária no final, uma vez que algo é interceptado no buffer de profundidade para encontrar um pixel que um raio teria atingido primeiro. Retornar cedo os fragmentos que não são reflexivos provavelmente ajudaria, como você já mencionou @gonnavis.

Eu também experimentei um upscale de profundidade e normal-awareness de um raymarch de baixa resolução, mas nunca cheguei a um ponto em que estivesse feliz com sua aparência. Eu acho que essa técnica em jogos pode se beneficiar muito do fato de que as resoluções disponíveis geralmente são divisíveis por duas, o que torna o upscale mais simples.

Estou curioso para saber como o Sketchfab está lidando com os reflexos ásperos que desfocam com base na distância de reflexão. Eu vi que Godot Engine faz um borrão depois com um raio baseado na distância do raio e na rugosidade da superfície, mas isso resulta em artefatos que eu não sinto que estou vendo aqui. Vou ter que fuçar no Spector.js quando tiver uma chance (obrigado pela dica @ WestLangley!). O artigo da Frostbite @bhouston postou inicialmente sugere o uso de uma pirâmide de profundidade quando o raio marcha, mas gerá-la pode ser uma dor em webgl1 (e talvez 2?).

Parece bom @gonnavis! Fico feliz em ver que pode chegar à biblioteca.

@WestLangley Obrigado! mas quando eu uso Spector.js no Sketchfab, recebo "Nenhum quadro com comandos gl detectados. Tente mover a câmera." erro.

Duvido que, depois que o SSRPass for otimizado como eu disse antes, o desempenho do Sketchfab ainda seja significativamente melhor. Especialmente no caso de renderização contínua e nenhuma estratégia de downgrade como @bhouston @looeee mencionou. Eu até acho que se não falarmos sobre os detalhes da implementação, o conceito central deste SSRPass pode já ser a solução ideal.

@gkjohnson Obrigado por sua informação e apoio! Vou continuar melhorando.

@gonnavis

Eu recomendo a guia Gráficos do Safari:

Se você usa Linux, pode usar o Epiphany (também conhecido como Gnome Web):
https://webkit.org/downloads/

Não creio que exista nenhum WebKit para Windows ...

@mrdoob Obrigado! Embora eu use principalmente o Windows, tentarei no Mac se necessário.

Mas estou me perguntando se é permitido fazer upload do código do Sketchfab para a biblioteca de código aberto, se encontrar alguma coisa útil, como a função glsl?

A estrutura deste SSRPass é baseada no exemplo three.js webgl_shading_physical , a função pointToLineDistance chave vem de wolfram.com e outros

Obrigado! mas quando eu uso Spector.js no Sketchfab, recebo "Nenhum quadro com comandos gl detectados. Tente mover a câmera." erro.

Role o mouse para ampliar a câmera. Isso deve ser suficiente para acionar o Spector.

Além disso, use uma cena estática em seu exemplo que não exija um loop de renderização. Atualmente, a taxa de quadros é muito baixa para ser aceitável.

@WestLangley teve sucesso nessa cena , obrigado!

Não publique o código do Sketchfab, por favor. Eu estava apenas sugerindo que entendêssemos
suas técnicas. O que podemos fazer sem compartilhar seu código. Você também
não pode copiar nada de seu código, isso seria contra os direitos autorais.

Na terça-feira, 25 de agosto de 2020 às 6h21, Vis [email protected] escreveu:

@WestLangley https://github.com/WestLangley teve sucesso nesta cena
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ,
obrigado!

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

-
Ben Houston , CTO
M : + 1-613-762-4113
[email protected]
Ottawa, Canadá
Plataforma de visualização ThreeKit: 3D, 2D, AR, VR
http: //https//threekit.com/

@bhouston OK, apenas para referência se necessário.

Muitas vezes sinto que, depois de receber alguma inspiração, continuar olhando o papel e o código de outras pessoas é mais difícil do que escrevê-lo sozinho, especialmente quando em um ambiente diferente.

Por exemplo, desta vez, fui inspirado principalmente por este tut , mas é difícil entender claramente o significado do texto no início e por causa do sistema de coordenadas diferente que ele usa, e eu não sei como executar o. arquivo cxx, então eu só li um pequeno texto e quase não li o código. Enfim , as duas fotos imgB que mais me ajudaram.

Adicione algumas demonstrações.

Demo, Demo2, Demo3, SelectiveDemo, OrthographicDemo.

Inspirado por @gonnavis , finalmente consegui experimentar algumas coisas novas na implementação de SSR que postei há alguns anos, então pensei em compartilhar aqui. Não tenho planos de usar isso em um projeto real, então não está otimizado e, neste ponto, tornou-se um monte de recursos SSR diferentes, mas aprendi a maior parte do que quero com isso, então vou chamá-lo de " feito "por enquanto. Talvez haja algumas coisas que outras pessoas podem tomar, no entanto. Ainda há coisas que eu sei que podem ser adicionadas ou melhoradas, mas talvez se eu voltar a usar alguns recursos do WebGL2 para simplificar as coisas.

Alguns dos novos recursos:

• Suporte para jitter de raio de ruído azul para que o padrão de interseção seja menos regular.
• Uma profundidade e upscale / blur com ponderação normal de uma textura de marcha de resolução inferior para preservar os detalhes.
• Algumas abordagens aprimoradas para renderizar reflexos brilhantes com samples e mipmaps instáveis.
• Suporte para mapas normais e mapas alfa.

É um efeito bastante intenso, mas acho que com uma mistura de aumento de escala do reflexo, desfoque, jitter e contagem de passos baixos, você poderia algo que funcionasse bem, especialmente com telas menores incorporadas, em vez de aplicativos de janela inteira. Ao resolver a imagem final em vários quadros, como foi discutido em https://github.com/mrdoob/three.js/issues/14048, você provavelmente também poderá obter reflexos brilhantes decentes. Claro, como foi mencionado em outro lugar, as reflexões ainda não estarão realmente certas sem passagens separadas para difusa e outros enfeites, mas sempre há algo mais para melhorar.

Aqui estão algumas capturas de tela com contagens de etapas mais altas:

| Sem brilho | Glossiness Multisample | Glossiness da hierarquia de profundidade |
| --- | --- | --- |
| | | |

E aqui está a demonstração:

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Há um slide no Siggraph 2015 sobre "Stochastic Screen-Space Reflections" que pode ser do seu interesse: http://advances.realtimerendering.com/s2015/index.html