/haga ping a @abelnation si tiene alguna idea, ya que es el experto residente actual en Area Light. :)

Refactoricé el código de luz de área y también estoy familiarizado con él. Para obtener soporte en la sombra, consulte https://eheitzresearch.wordpress.com/705-2/.

Para obtener soporte en la sombra, consulte https://eheitzresearch.wordpress.com/705-2/.

Interesante. Creo que puede ser demasiado computacional para WebGL en este momento, ya que supone que el trazado de rayos es acelerado por hardware. Desafortunadamente, es probable que pasen años antes de que llegue a WebGL.

Tengo la opinión de que si bien mis dos sugerencias (sombras puntuales o puntuales) no son físicamente precisas cuando se trata de sombras suaves, son mejores que ninguna sombra y ambas son muy rápidas (al menos tan rápidas como nuestras otras sombras) y fácil de implementar (ya que el código ya existe).

@bhouston Oh, sí... también está https://github.com/mrdoob/three.js/pull/13057.

Si lee toda la discusión, creo que el consenso fue agregar soporte de 'cookie' a SpotLight , lo que presumiblemente permitiría una sombra rectangular.

Las sombras suaves de porcentaje más cercano de NVidia hacen un trabajo decente al aproximar las sombras de luz de área. Estaba jugando con hackearlos en una escena THREE.js aquí: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. Está usando un mapa de sombra de luz direccional, en este momento, pero uno de foco podría ser mejor.

Sin embargo, no son la solución perfecta: tienen algunos artefactos cuando los bordes de las sombras se acercan entre sí y requieren muchas muestras para obtener una sombra realmente suave.

¡Se ve muy bien! Pero tu demostración se ejecuta con solo 6 FPS en mi iMac ^^

Obtengo 60 fps en una GTX 970m.

1 FPS en mi Pixel 😢

Ya hay una implementación de pcss en three.js que yo y oreshant
escribió hace un tiempo.

Atentamente,
ben houston
http://Clara.io Modelado y renderizado 3D en línea

El sábado 21 de julio de 2018 a las 23:02 Garrett Johnson [email protected]
escribió:

Porcentaje de sombras suaves más cercanas de NVidia
http://developer.download.nvidia.com/shaderlibrary/docs/shadow_PCSS.pdf
hacer un trabajo decente al aproximar las sombras de luz del área. estaba jugando con
pirateándolos en una escena THREE.js aquí:
https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. esta usando un
mapa de sombra de luz direccional, en este momento, pero uno de spotLight podría ser
mejor.

Sin embargo, no son la solución perfecta: tienen algunos artefactos cuando
los bordes de las sombras se acercan entre sí y requieren muchas muestras para obtener una
sombra muy suave.

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/tres.js/issues/14161#issuecomment-406837539 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AAj6_RuFJPv7y5DbEfJnDu26DB3cD2bhks5uI-tJgaJpZM4UQODd
.

Ya hay una implementación de pcss en three.js que oreshant y yo escribimos hace un tiempo.

https://tresjs.org/ejemplos/#webgl_shadowmap_pcss

Esto funciona con buenos 60 FPS en mi iMac^^.

Ya hay una implementación de pcss en three.js que oreshant y yo escribimos hace un tiempo.

¡No había visto eso! Se ve bien. No sabía que podía generar valores similares a los de un disco de Poisson de esa manera; parece que tiene una mejor distribución y da mejores resultados que la forma en que estaba usando. ¡Puedo tomarlo prestado si no te importa!

1 FPS en mi Pixel 😢

¡Decir ah! Tampoco funcionaba en mi teléfono. No lo optimicé en absoluto y hay mucho trabajo en curso en los bucles que podrían moverse.

Sin embargo, la implementación de @bhouston es bastante rápida. ¿Quizás haya alguna variante de esto que pueda usarse para sombras de luz de área? Sería bueno tener algún tipo de soporte de sombras para las luces de área para que este tipo de implementación se pueda conectar más fácilmente.

Las sombras suaves de porcentaje más cercano de NVidia hacen un trabajo decente al aproximar las sombras de luz de área. Estaba jugando con hackearlos en una escena THREE.js aquí: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. Está usando un mapa de sombra de luz direccional, en este momento, pero uno de foco podría ser mejor.

Sin embargo, no son la solución perfecta: tienen algunos artefactos cuando los bordes de las sombras se acercan entre sí y requieren muchas muestras para obtener una sombra realmente suave.

¡Agradable! No es perfecto, pero se ve mejor que no tener sombra... Obtengo 30 fps en mi Asus ROG Phone 2.
Y 45 fps en mi computadora portátil con gráficos integrados.

Aquí hay un ejemplo de sombras con trazado de rayos en three.js, solo el componente de sombra se muestra en estos videos.

Más de 60 fps con 1 muestra de sombra por píxel... Con un poco de filtrado inteligente, los resultados podrían verse bastante bien.

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

Esto podría usarse para ayudar con las sombras claras del área recta.

Se está trabajando en una demostración web en vivo.

Relacionados

13908 Mejorar las sombras

14048 Sombras suaves mediante muestreo de fuente de luz

14051 Adoptando una iluminación global fotorrealista progresiva en Three.JS

¡Muy agradable!

Problema relacionado: no sé cómo implementar algún tipo de sombras con el código IBL actual.

Digamos que quiero agregar un DirectLight en el ejemplo del automóvil, pero ignoro la fuente de luz real y solo uso el mapa de sombras para afectar el código IBL.

He estado jugando con varios efectos de trazado de rayos.

• Sombras: de fuentes de luz directas, incluidas las luces rectas
• Oclusión ambiental
• Iluminación global

De los 3, creo que GI por píxel que funcionaría con IBL es el más difícil de lograr velocidades de fotogramas en tiempo real.

Sin embargo, GI por vértice y podría ser posible a buenas velocidades de cuadro. El código de trazado de rayos se está escribiendo con la idea de que los sombreadores de vértices y fragmentos puedan usarlo.

@mrdoob , @WestLangley ,
¿En qué espacio están los uniformes "pointLights[].position"???
Estoy haciendo el trazado de rayos en el espacio mundial, pero las sombras no parecen coincidir.

Ok, después de investigarlo... Parece que está en el espacio de vista de modelo... ¿Hay una buena manera de obtener las posiciones de luz en el espacio mundial?

¿Modificar WebGLRender para enviar tanto en el mundo como en el espacio de visualización?

Ok, lo tengo funcionando con un punto de luz... ¡ahora a probar las luces de área recta!

¿Hay alguna manera de hacer vibrar las fuentes de luz dentro del volumen de emisión y
acumular para obtener sombras suaves en algo así como 32 renders que
solo acumulas?

Veo esto como algo que funciona bien con la inestabilidad de la cámara de subpíxeles
que acumulé en el ejemplo TAA Three.js.

El sábado 21 de diciembre de 2019 a las 22:04 Samuel Sylvester [email protected]
escribió:

Ok, lo tengo funcionando con un punto de luz... ¡ahora a probar las luces de área recta!

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

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issuecomment
o darse de baja
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

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

[imagen: logotipo de tres kits1568384278.png] https://www.treskit.com/
Cree una mejor experiencia visual para el cliente con Threekit
https://www.treskit.com/

[imagen: Aprenda cómo escalar las imágenes de productos con su negocio en crecimiento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

Para ser claro, creo que la forma de jitter en una luz recta es tener una sola
punto de luz que se mueve a lo largo de la superficie de emisión. Necesitas un buen
método de muestreo como Poisson Disk o algo así,
https://www.google.com/search?q=Poisson+Disk. Y luego el resultado
las sombras deben ser suaves y apropiadas para una luz recta.

Aunque me he confundido con el FOV, uno debe configurar la luz del punto,
y tal vez siempre deberías apuntarlo en la dirección normal desde el rect
superficie del área? Son estos pequeños detalles los que me han impedido realmente
seguir adelante con una implementación de emisiones muestreadas acumulativas
sombras basadas en la fuente.

El lunes 23 de diciembre de 2019 a las 9:00 a. m. Ben Houston [email protected] escribió:

¿Hay alguna manera de hacer vibrar las fuentes de luz dentro del volumen de emisión?
y acumular para obtener sombras suaves en algo así como 32 renders
que solo acumulas?

Veo esto como algo que funciona bien con la inestabilidad de la cámara de subpíxeles
que acumulé en el ejemplo TAA Three.js.

El sábado 21 de diciembre de 2019 a las 22:04 Samuel Sylvester <
[email protected]> escribió:

Ok, lo tengo funcionando con un punto de luz... ¡ahora a probar las luces de área recta!

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

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issuecomment
o darse de baja
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

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

[imagen: logotipo de tres kits1568384278.png] https://www.treskit.com/
Cree una mejor experiencia visual para el cliente con Threekit
https://www.treskit.com/

[imagen: Aprenda cómo escalar las imágenes de productos con su negocio en crecimiento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

--

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

[imagen: logotipo de tres kits1568384278.png] https://www.treskit.com/
Cree una mejor experiencia visual para el cliente con Threekit
https://www.treskit.com/

[imagen: Aprenda cómo escalar las imágenes de productos con su negocio en crecimiento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston Creo que https://github.com/mrdoob/three.js/issues/14048 es de lo que estás hablando.

Me gustó la demostración con la fuente de iluminación de nudo retorcido. Supongo que el problema que vi es que el reflejo de la fuente de luz nunca se resolvió en la imagen correcta.

Una ventaja de las sombras con trazado de rayos es que se puede usar para manejar sombras transparentes. También se puede utilizar para iluminación global y muchos otros efectos de iluminación.

@bhouston https://github.com/bhouston Creo que #14048
https://github.com/mrdoob/three.js/issues/14048 es lo que estás hablando
sobre.

Lo siento, tiendo a olvidar lo que sugerí anteriormente, pero al menos estoy
consistente.

Me gustó la demostración con la fuente de iluminación de nudo retorcido. supongo que el
El problema que vi es que el reflejo de la fuente de luz nunca
resuelta a la imagen correcta.

Es porque no está haciendo un muestreo aleatorio sino un muestreo exhaustivo.
método, también está haciendo una fuente de luz mucho más dura que solo un
área rectangular Su método sería acumulativo lento con rasterización.
renderizado o trazado de rayos: es el método de muestra el que estaba mal, no el
técnica. También puede múltiples muestras de luz por renderizado si es así
inclinado. Creo que se necesitan de 32 a 256 renders en el extremo superior,
dependiendo del tipo de luz y el número de muestras de luz por render. En
60 fps es esto 1 - 4 segundos. Pienso en ello como un "instantáneo" simplificado
solución de radiosidad".

Tienes razón en que el trazado de rayos es increíble. Solo pensé que estaba nervioso
luces es más fácil que rehacer todo el sistema de iluminación, y luego también
tener una buena solución para tiempo real, las sombras simplemente son difíciles y luego
detener se suavizan a la perfección, y el algoritmo de renderizado no cambia,
simplemente las cosas tiemblan y se acumulan.

El lunes 23 de diciembre de 2019 a las 11:03 Samuel Sylvester [email protected]
escribió:

@bhouston https://github.com/bhouston Creo que #14048
https://github.com/mrdoob/three.js/issues/14048 es lo que estás hablando
sobre.

Me gustó la demostración con la fuente de iluminación de nudo retorcido. supongo que el
El problema que vi es que el reflejo de la fuente de luz nunca
resuelta a la imagen correcta.

Una ventaja de las sombras con trazado de rayos es que se puede usar para manejar
sombras transparentes. También se puede utilizar para iluminación global y muchos
otros efectos de iluminación.

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7L4ZVKQJILFWZQ6JE3Q2DOLPA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRNA4I#issuecom
o darse de baja
https://github.com/notifications/unsubscribe-auth/AAEPV7LXP5CSOMBZF2BMNR3Q2DOLPANCNFSM4FCA4DOQ
.

--

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

[imagen: logotipo de tres kits1568384278.png] https://www.treskit.com/
Cree una mejor experiencia visual para el cliente con Threekit
https://www.treskit.com/

[imagen: Aprenda cómo escalar las imágenes de productos con su negocio en crecimiento]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston Me gusta la solución propuesta en #14048... especialmente para geometrías simples como una luz recta.
Parece que ese método debería ser bastante fácil de emplear. ¿Existe un fork de tres que tenga esta solución?

Con respecto al trazado de rayos... En hardware de escritorio, la solución de trazado de rayos funciona en tiempo real a 1 spp. Ver... https://youtu.be/amX3icmbpzY.

Todavía no he probado el móvil.

En las demostraciones en las que he estado trabajando, el término de iluminación se calcula utilizando el código existente, pero la sombra se traza con rayos en lugar de con el mapeo de sombras.

@mrdoob , @bhouston
Entonces, actualicé la demostración para reflejar la demostración rtx de Nvidia de GDC 2018

Y lo tengo funcionando en tiempo real en mi laptop y en mi celular...

Demostración de portátil... https://youtu.be/MKCKXRVks3I
Demostración de teléfono celular... https://youtu.be/P-cnT2hYNF4

También mejoré la distribución de las muestras de sombras para mejorar el realismo de las sombras.

@mrdoob , @WestLangley , @bhouston y otros

Obtuve sombras para luces de área recta trabajando con trazado de rayos.

La demostración que se muestra aquí... https://youtu.be/tZmlb29OUBU
Tiene luces puntuales y una luz de área recta.

Se están trabajando algunas mejoras en la distribución de muestras de sombras. Además, parece que para las luces de área se necesitarán calcular 2 sombras para cada luz. Una sombra difusa y una sombra especular.

Actualmente solo se calcula la sombra difusa.

Planeo configurar un sitio web en vivo con esta demostración y también enviar estos cambios a mi bifurcación de tres pronto

¡Eso se ve genial! ¿Solo usa una textura de profundidad única también?

¡Eso se ve genial! ¿Solo usa una textura de profundidad única también?

@mrdoob gracias! En realidad, es un trazado de rayos adecuado, actualmente usa 2 texturas. Uno almacena la geometría del espacio mundial y el otro tiene los datos de BVH.

¡Con esta configuración podríamos calcular la oclusión ambiental RTX y con algunas actualizaciones GI también sería posible!

Para ejecutar la demostración en el navegador, consulte... https://tres-rtx.azurewebsites.net/

Nota... Esto tiene trazado de rayos y descubrí que mi GPU integrada solo podía manejar una fuente de luz con sombras con trazado de rayos con velocidades de cuadro decentes. Pero cuando habilité mi RTX 2080, pude tener 2 fuentes de luz con trazado de rayos con 16 spp por luz al doble de la velocidad de fotogramas. ¡Eso es un poco menos de 64 veces más rápido en una GPU discreta!

También intenté ejecutar esto en mi teléfono y descubrí que querrás un buque insignia de 2019 o mejor para más de 30 fps a 1080p.

Creo que hay algunas mejoras más para obtener más rendimiento y menos ruido.

Planeo enviar el código que tengo ahora a mi bifurcación y luego continuar haciendo ajustes.

Nota : tengo un ajuste que mejora el rendimiento en más de un 50 % de fps promedio... funciona en la primera compilación de sombreadores, pero si se activa una segunda compilación, comienzan a suceder cosas divertidas... Parece que está relacionado con mi uso de el preprocesador

@sam-g-acero
¡Esto es genial! ¿Tienes planes de abrir el código fuente del trabajo en algún momento? ¿Qué tan bien se escala? ¿Ha realizado alguna prueba con personajes o modelos de productos más complejos? E imagino que el trazado de rayos aquí solo funciona con escenas estáticas, ¿verdad?

Una ventaja de las sombras con trazado de rayos es que se puede usar para manejar sombras transparentes. También se puede utilizar para iluminación global y muchos otros efectos de iluminación.

Esto parece una ventaja para esta técnica. Creo que podría obtener resultados bastante buenos con el enfoque de fluctuación de # 14048.

@bhouston

es el método de muestra el que estaba mal, no la técnica.

Creo que usar algo como el asistente MeshSurfaceSampler junto con varias luces haría que el resultado fuera un poco mejor.

@gkjohnson

¡Esto es genial! ¿Tienes planes de abrir el código fuente del trabajo en algún momento?

¡¡¡Gracias!!! ¡Sí, planeo publicar el código pronto! ¡Me encantaría verlo incorporado en three.js!
En la actualidad, la demostración consta de 2 partes principales. Una compilación personalizada de tres que envía información de iluminación en vista de modelo y espacio mundial que espero publicar en los próximos días y un "complemento" de tres.js que compila el BVH y genera los sombreadores que hacen el trazado de rayos.

¿Qué tan bien se escala? ¿Ha realizado alguna prueba con personajes o modelos de productos más complejos?

Hice algunas pruebas para ver cómo funciona con escenas complejas... Los resultados que obtuve fueron bastante prometedores. Estoy trabajando para actualizar el sitio web https://three-rtx.azurewebsites.net/ con más demostraciones pronto. No quiero hacer ningún reclamo con demostraciones para respaldarlo.

E imagino que el trazado de rayos aquí solo funciona con escenas estáticas, ¿verdad?

¡En realidad, las escenas dinámicas son compatibles ! ¡También planeo hacer una demostración de eso pronto! en la actualidad, las compilaciones bvh iniciales tardan 300 ms y las compilaciones posteriores tardan ~ 10 ms en el subproceso único de la CPU. Una cosa a tener en cuenta es que el código bvh podría optimizarse aún más.

Con suerte, este fin de semana podré publicar el código. Ha tomado más tiempo de lo que esperaba en parte porque mi esposa y yo acabamos de dar la bienvenida a nuestro tercer hijo al mundo :)

@mrdoob , @gkjohnson
Empecé a publicar el código de trazado de rayos... Se puede encontrar aquí... https://github.com/sam-g-steel/three.js/tree/RTX

No se ha confirmado todo el código... Estoy tratando de limpiar un poco las cosas. Espero tener todo el código pronto.

Todavía estoy trabajando en esto...
Encontré algunos errores en el código, así que estoy trabajando en más casos de prueba para ayudar a descubrir qué es lo que está fallando.

Una de las nuevas demostraciones se puede ver aquí...

https://youtu.be/ZvoSuBi4rFE
@gkjohnson , esta demostración tiene objetos dinámicos en la pantalla y ayuda a probar el rendimiento completo de reconstrucción de BVH.

Espero confirmar el resto o los shaders "RTX"... Esta noche y el código BVH pronto

Nota: actualmente los triángulos son las únicas primitivas admitidas

actualización 2/8/2020
La web ha sido actualizada para tener la nueva demo...
La construcción dinámica de BVH ahora es un 40 % más rápida que hace 4 días... más optimizaciones por venir.
https://github.com/sam-g-steel/three.js/tree/RTX se ha actualizado con más código.

¡Más actualizaciones por venir!

Sigo trabajando en la horquilla de trazado de rayos... Espero tener más para mostrar en unas pocas semanas.
He estado trabajando en el filtrado de ruido para mejorar la velocidad de fotogramas y la calidad de imagen.

A continuación se muestran algunas fotos del filtro de ruido...
Todavía es un trabajo en progreso.

Actualización 28/03/2020

https://ciechanow.ski/luces-y-sombras/