/ping @abelnation se você tiver alguma ideia, já que você é o atual especialista residente em Area Light. :)

Refatorei o código de luz de área e também estou familiarizado com ele. Para suporte de sombra, consulte https://eheitzresearch.wordpress.com/705-2/.

Para suporte de sombra, consulte https://eheitzresearch.wordpress.com/705-2/.

Interessante. Eu acho que pode ser um pouco computacionalmente intensivo para o WebGL neste momento, pois faz uma suposição de que o rastreamento de raios é acelerado por hardware. São provavelmente anos antes que isso chegue ao WebGL, infelizmente.

Eu tenho a opinião de que, embora minhas duas sugestões (sombras de luz pontual ou pontual) não sejam fisicamente precisas quando se trata de sombras suaves, elas são melhores do que nenhuma sombra e são muito rápidas (tão rápidas quanto nossas outras sombras, pelo menos) e fácil de implementar (já que o código já existe).

@bhouston Ah, sim... também existe https://github.com/mrdoob/three.js/pull/13057.

Se você ler toda a discussão, acho que o consenso foi adicionar suporte a 'cookie' a SpotLight , o que presumivelmente permitiria uma sombra retangular.

O Percentage Closer Soft Shadows da NVidia faz um trabalho decente ao aproximar as sombras de luz da área. Eu estava brincando em hackeá-los em uma cena THREE.js aqui: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. Está usando um mapa de sombra de luz direcional, no momento, mas um spotLight pode ser melhor.

Eles não são a solução perfeita, no entanto - eles têm alguns artefatos quando as bordas das sombras se aproximam e exigem muitas amostras para obter uma sombra realmente suave.

Parece ótimo! Mas sua demo roda com apenas 6 FPS no meu iMac ^^

Estou obtendo 60fps em uma GTX 970m.

1 FPS no meu Pixel 😢

Já existe uma implementação pcss em three.js que eu e oreshant
escreveu um tempo atrás.

Atenciosamente,
Ben Houston
http://Clara.io Modelagem e renderização 3D online

No sábado, 21 de julho de 2018, 23h02 Garrett Johnson [email protected]
escrevi:

A porcentagem de sombras suaves mais próximas da NVidia
http://developer.download.nvidia.com/shaderlibrary/docs/shadow_PCSS.pdf
fazer um trabalho decente de aproximação das sombras de luz da área. eu estava brincando com
hackeando-os em uma cena THREE.js aqui:
https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. Está usando um
mapa de sombra de luz direcional, no momento, mas um spotLight pode ser
melhorar.

Eles não são a solução perfeita, no entanto - eles têm alguns artefatos quando
bordas de sombra se aproximam umas das outras e requerem muitas amostras para obter uma
sombra realmente suave.

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/14161#issuecomment-406837539 ,
ou silenciar o thread
https://github.com/notifications/unsubscribe-auth/AAj6_RuFJPv7y5DbEfJnDu26DB3cD2bhks5uI-tJgaJpZM4UQODd
.

Já existe uma implementação de pcss em three.js que eu e oreshant escrevemos um tempo atrás.

https://threejs.org/examples/#webgl_shadowmap_pcss

Isso funciona com bons 60 FPS no meu iMac^^.

Já existe uma implementação de pcss em three.js que eu e oreshant escrevemos um tempo atrás.

Eu não tinha visto isso! Isso parece bom. Eu não sabia que você poderia gerar valores semelhantes a discos poisson dessa maneira - parece que tem uma distribuição melhor e dá melhores resultados do que a maneira que eu estava usando. Eu posso pegar emprestado isso se você não se importar!

1 FPS no meu Pixel 😢

Ah! Também não estava funcionando no meu telefone. Eu não o otimizei e há muito trabalho acontecendo em loops que podem ser removidos.

A implementação do @bhouston é bem rápida, no entanto. Talvez haja alguma variante disso que possa ser usada para sombras de luz de área? Seria bom ter qualquer tipo de suporte de sombra para luzes de área para que esse tipo de implementação pudesse ser mais facilmente conectado.

O Percentage Closer Soft Shadows da NVidia faz um trabalho decente ao aproximar as sombras de luz da área. Eu estava brincando em hackeá-los em uma cena THREE.js aqui: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. Está usando um mapa de sombra de luz direcional, no momento, mas um spotLight pode ser melhor.

Eles não são a solução perfeita, no entanto - eles têm alguns artefatos quando as bordas das sombras se aproximam e exigem muitas amostras para obter uma sombra realmente suave.

Agradável! Não é perfeito, mas parece melhor do que nenhuma sombra... Recebo 30fps no meu Asus ROG Phone 2.
E 45fps no meu laptop gráfico integrado.

Aqui está um exemplo de sombras raytraced em three.js, apenas o componente de sombra está sendo mostrado nesses vídeos.

60+fps com 1 amostra de sombra por pixel... Com alguns filtros inteligentes, os resultados podem parecer muito bons.

https://youtu.be/O21mKUtMtSg
https://youtu.be/2Tn93hf9kNw

Isso pode ser usado para ajudar com sombras claras na área reta.

Uma demonstração ao vivo na web está em andamento.

Relacionado

13908 Melhorando Sombras

14048 Sombras Suaves por Amostragem de Fonte de Luz

14051 Adotando uma Iluminação Global Fotorrealista Progressiva em Three.JS

Muito agradável!

Problema relacionado: não sei como implementar algum tipo de sombra com o código IBL atual.

Digamos que eu queira adicionar um DirectLight no exemplo do carro, mas ignore a fonte de luz real e use apenas o mapa de sombras para afetar o código IBL.

Eu tenho brincado com vários efeitos de traçado de raios.

• Sombras - de fontes de luz direta, incluindo luzes retas
• Oclusão de ambiente
• Iluminação global

Dos 3, acho que o GI por pixel que funcionaria com o IBL é o mais difícil de atingir as taxas de quadros em tempo real.

No entanto, GI por vértice e pode ser possível em boas taxas de quadros. O código de rastreamento de raios está sendo escrito com a ideia de que os shaders de vértice e fragmento poderão usá-lo.

@mrdoob , @WestLangley ,
Em que espaço estão os uniformes "pointLights[].position"???
Estou fazendo o traçado de raios no espaço do mundo, mas as sombras não parecem combinar.

Ok, depois de olhar para ele... Parece que está no espaço de visualização do modelo... Existe uma boa maneira de obter as posições de luz no espaço do mundo?

Modificar o WebGLRender para enviar no mundo e no espaço de visualização?

Ok, consegui trabalhar com uma luz pontual... agora para testar as luzes da área reta!

Existe uma maneira de apenas jitter fontes de luzes dentro do volume de emissão e
acumular para obter sombras suaves em algo como 32 renderizações que
você acabou de acumular?

Eu vejo isso como algo que funciona bem com o jitter da câmera sub-pixel
que acumulei no exemplo TAA Three.js.

No sábado, 21 de dezembro de 2019 às 22h04 Samuel Sylvester [email protected]
escrevi:

Ok, consegui trabalhar com uma luz pontual... agora para testar as luzes da área reta!

[imagem: imagem]
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issueissue5WW2ZLOORPWSZGOEHPHXHQ#issue
ou cancelar
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

Ben Houston CTO
*M: *+1-613-762-4113
[email protected]
Ottawa, ON

[imagem: threekitlogo1568384278.png] https://www.threekit.com/
Crie uma experiência visual melhor para o cliente com o Threekit
https://www.threekit.com/

[imagem: Saiba como dimensionar os visuais do produto com sua empresa em crescimento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

Para ser claro, acho que a maneira de tremer em uma luz reta é ter um único
ponto de luz que você move ao longo da superfície de emissão. Você precisa de um bom
método de amostragem como Poisson Disk ou algo assim,
https://www.google.com/search?q=Poisson+Disk. E então o resultado
as sombras devem ser suaves e apropriadas para uma luz reta.

Embora eu tenha ficado confuso sobre o FOV, deve-se definir a luz do ponto,
e talvez você deva sempre apontá-lo na direção normal do rect
superfície da área? São esses pequenos detalhes que me impedem de realmente
avançando com uma implementação de emissões amostradas cumulativas
sombras baseadas na fonte.

Em segunda-feira, 23 de dezembro de 2019 às 09:00, Ben Houston [email protected] escreveu:

Existe uma maneira de apenas jitter fontes de luzes dentro do volume de emissão
e acumular para obter sombras suaves em algo como 32 renderizações
que você acabou de acumular?

Eu vejo isso como algo que funciona bem com o jitter da câmera sub-pixel
que acumulei no exemplo TAA Three.js.

No sábado, 21 de dezembro de 2019 às 22h04 Samuel Sylvester <
[email protected]> escreveu:

Ok, consegui trabalhar com uma luz pontual... agora para testar as luzes da área reta!

[imagem: imagem]
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issueissue5WW2ZLOORPWSZGOEHPHXHQ#issue
ou cancelar
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

Ben Houston CTO
*M: *+1-613-762-4113
[email protected]
Ottawa, ON

[imagem: threekitlogo1568384278.png] https://www.threekit.com/
Crie uma experiência visual melhor para o cliente com o Threekit
https://www.threekit.com/

[imagem: Saiba como dimensionar os visuais do produto com sua empresa em crescimento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

--

Ben Houston CTO
*M: *+1-613-762-4113
[email protected]
Ottawa, ON

[imagem: threekitlogo1568384278.png] https://www.threekit.com/
Crie uma experiência visual melhor para o cliente com o Threekit
https://www.threekit.com/

[imagem: Saiba como dimensionar os visuais do produto com sua empresa em crescimento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston acho que https://github.com/mrdoob/three.js/issues/14048 é o que você está falando.

Gostei da demonstração com a fonte de iluminação de nó torcido. Acho que o problema que vi é que o reflexo da fonte de luz nunca resolveu a imagem correta.

Uma vantagem para as sombras ray-traced é que elas podem ser usadas para lidar com sombras transparentes. Também pode ser usado para Iluminação Global e muitos outros efeitos de iluminação.

@bhouston https://github.com/bhouston acho que #14048
https://github.com/mrdoob/three.js/issues/14048 é o que você está falando
cerca de.

Desculpe, costumo esquecer o que sugeri anteriormente, mas pelo menos estou
consistente.

Gostei da demonstração com a fonte de iluminação de nó torcido. eu acho que o
problema que eu vi é que o reflexo da fonte de luz nunca
resolvido para a imagem correta.

É porque ele não está fazendo uma amostragem aleatória, mas uma amostragem exaustiva
método - ele também está fazendo uma fonte de luz muito mais difícil do que apenas um
área retangular. Seu método seria acumulativo lento com rasterização
renderização ou ray tracing - é o método de amostra que estava errado, não o
técnica. Além disso, você pode várias amostras de luz por renderização, se você for tão
inclinado. Eu acho que são necessários 32 a 256 renders no high-end,
dependendo do tipo de luz e do número de amostras de luz por renderização. No
60 fps é isso 1 - 4 segundos. Eu penso nisso como um "instantâneo" simplificado
solução de radiosidade.

Você está certo que o traçado de raios é incrível. Eu só pensei que nervoso
luzes é mais fácil do que refazer todo o sistema de iluminação, e então você também
tem uma boa solução para tempo real, as sombras são difíceis e daí em diante
param, eles suavizam com perfeição, e o algoritmo de renderização não muda,
apenas coisas tremem e se acumulam.

Em segunda-feira, 23 de dezembro de 2019 às 11h03 Samuel Sylvester [email protected]
escrevi:

@bhouston https://github.com/bhouston acho que #14048
https://github.com/mrdoob/three.js/issues/14048 é o que você está falando
cerca de.

Gostei da demonstração com a fonte de iluminação de nó torcido. eu acho que o
problema que eu vi é que o reflexo da fonte de luz nunca
resolvido para a imagem correta.

Uma vantagem para as sombras ray-traced é que ele pode ser usado para lidar com
sombras transparentes. Também pode ser usado para Iluminação Global e muitos
outros efeitos de iluminação.

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7L4ZVKQJILFWZQ6JE3Q2DOLPA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRNA4I#KTDN5WW2ZLOORPWSZGOEHRNA4I#KTDN5WW2ZLOORPWSZGOEHRNA4I
ou cancelar
https://github.com/notifications/unsubscribe-auth/AAEPV7LXP5CSOMBZF2BMNR3Q2DOLPANCNFSM4FCA4DOQ
.

--

Ben Houston CTO
*M: *+1-613-762-4113
[email protected]
Ottawa, ON

[imagem: threekitlogo1568384278.png] https://www.threekit.com/
Crie uma experiência visual melhor para o cliente com o Threekit
https://www.threekit.com/

[imagem: Saiba como dimensionar os visuais do produto com sua empresa em crescimento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston Eu gosto da solução proposta em # 14048 ... especialmente para geometrias simples como uma luz reta.
Parece que esse método deve ser muito fácil de empregar. Existe um fork de três que tem essa solução?

Em relação ao ray tracing... Em hardware de classe desktop, a solução de ray tracing funciona em tempo real a 1spp. Veja... https://youtu.be/amX3icmbpzY.

Ainda não testei o celular.

Nas demonstrações em que tenho trabalhado, o termo de iluminação é calculado usando o código existente, mas a sombra é traçada por raios em vez de mapeamento de sombra.

@mrdoob , @bhouston
Então, atualizei a demonstração para refletir a demonstração rtx da Nvidia do GDC 2018

E eu tenho ele rodando em tempo real no meu laptop e no meu celular...

Demonstração do laptop... https://youtu.be/MKCKXRVks3I
Demonstração de celular... https://youtu.be/P-cnT2hYNF4

Também melhorei a distribuição das amostras de sombra para melhorar o realismo das sombras

@mrdoob , @WestLangley , @bhouston e outros

Eu tenho sombras para luzes de área reta trabalhando com raytracing.

A demo mostrada aqui... https://youtu.be/tZmlb29OUBU
Possui luzes pontuais e uma luz de área rect.

Algumas melhorias na distribuição de amostras de sombra estão em andamento. Além disso, parece que para as luzes da área, 2 sombras precisarão ser calculadas para cada luz. Uma sombra difusa e uma sombra especular.

Atualmente, apenas a sombra difusa está sendo calculada.

Eu planejo criar um site ao vivo com esta demonstração e também enviar essas alterações para o meu fork de três em breve

Isso está ótimo! Ele usa apenas uma textura de profundidade única também?

Isso está ótimo! Ele usa apenas uma textura de profundidade única também?

@mrdoob obrigado! Na verdade, é um ray-tracing adequado, atualmente usa 2 texturas. Um armazena a geometria do espaço mundial e o outro tem os dados BVH.

Com esta configuração poderíamos calcular a oclusão do ambiente RTX e com algumas atualizações o GI também seria possível!

Para executar a demonstração no navegador, consulte... https://three-rtx.azurewebsites.net/

Nota... Isso é ray-traced e descobri que minha GPU integrada só poderia lidar com uma fonte de luz com sombras ray-traced com taxas de quadros decentes. Mas quando habilitei meu RTX 2080, pude ter 2 fontes de luz rastreadas com 16spp por luz com o dobro da taxa de quadros. Isso é um pouco menos de 64x mais rápido em uma GPU discreta!

Também tentei executar isso no meu telefone e descobri que você deseja um navio de bandeira de 2019 ou melhor por mais de 30 fps em 1080p.

Acredito que há mais algumas melhorias para extrair mais desempenho e menos ruído.

Planejo enviar o código que tenho agora para o meu fork e continuar a fazer ajustes.

Nota : Eu tenho um ajuste que melhora o desempenho em mais de 50% fps médios ... ele funciona na primeira compilação dos shaders, mas se uma segunda compilação for acionada, coisas engraçadas começam a acontecer ... o pré-processador

@sam-g-steel
Isso é ótimo! Você tem planos de abrir o código do trabalho em algum momento? Quão bem ele é dimensionado - você fez algum teste com personagens ou modelos de produtos mais complexos? E imagino que o raytracing aqui só funcione com cenas estáticas, certo?

Uma vantagem para as sombras ray-traced é que elas podem ser usadas para lidar com sombras transparentes. Também pode ser usado para Iluminação Global e muitos outros efeitos de iluminação.

Isso parece ser uma vantagem para esta técnica. Eu acho que você pode obter bons resultados com a abordagem de jitter de # 14048.

@bhouston

é o método de amostra que estava errado, não a técnica.

Acho que usar algo como o auxiliar MeshSurfaceSampler junto com várias luzes tornaria o resultado um pouco melhor.

@gkjohnson

Isso é ótimo! Você tem planos de abrir o código do trabalho em algum momento?

Obrigado!!! Sim, pretendo publicar o código em breve! Eu adoraria vê-lo incorporado ao three.js!
Atualmente, a demonstração consiste em 2 partes principais. Uma compilação personalizada de três que envia informações de iluminação no modelo de visualização e espaço do mundo que espero publicar nos próximos dias e um "plugin" three.js que constrói o BVH e gera os shaders que fazem o ray tracing.

Quão bem ele é dimensionado - você fez algum teste com personagens ou modelos de produtos mais complexos?

Fiz alguns testes para ver como se comporta com cenas complexas... Os resultados que obtive foram bastante promissores. Estou trabalhando na atualização do site https://three-rtx.azurewebsites.net/ com mais demos em breve. Eu não quero fazer nenhuma reivindicação com demos para apoiá-lo.

E imagino que o raytracing aqui só funcione com cenas estáticas, certo?

Na verdade, cenas dinâmicas são suportadas ! Eu planejo fazer uma demonstração em breve também! no momento, as compilações iniciais de bvh levam 300ms e as compilações subsequentes levam ~10ms na CPU de thread único. Uma coisa a notar é que o código bvh pode ser otimizado ainda mais.

Espero que este fim de semana eu não consiga publicar o código. Demorou mais do que eu esperava, em parte porque minha esposa e eu acabamos de receber nosso terceiro filho no mundo :)

@mrdoob , @gkjohnson
Comecei a publicar o código de rastreamento de raios... Ele pode ser encontrado aqui... https://github.com/sam-g-steel/three.js/tree/RTX

Nem todo o código foi confirmado... Estou tentando limpar um pouco as coisas. Espero ter todo o código pronto em breve.

Ainda estou trabalhando nisso...
Encontrei alguns erros no código, então estou trabalhando em mais casos de teste para ajudar a descobrir o que está errado.

Uma das novas demos pode ser vista aqui...

https://youtu.be/ZvoSuBi4rFE
@gkjohnson , Esta demonstração tem objetos dinâmicos na tela e ajuda a testar o desempenho completo da reconstrução do BVH.

Espero confirmar o resto ou os shaders "RTX"... Esta noite e o código BVH em breve

Nota: atualmente os triângulos são os únicos primitivos suportados

atualização 08/02/2020
O site foi atualizado para ter a nova demo...
A construção dinâmica de BVH agora é 40% mais rápida do que há 4 dias... mais otimizações por vir.
https://github.com/sam-g-steel/three.js/tree/RTX foi atualizado com mais código.

Mais atualizações por vir!!!

Ainda trabalhando no ray-tracing fork... Espero ter mais para mostrar em algumas semanas.
Eu tenho trabalhado na filtragem de ruído para melhorar as taxas de quadros e a qualidade da imagem.

Abaixo algumas fotos do filtro de ruído...
Ainda é um trabalho em andamento.

Atualização 28/03/2020

https://ciechanow.ski/lights-and-shadows/