Three.js: Solicitud de función: Reflexiones del espacio de la pantalla

Mi única preocupación aquí es que no funciona muy bien con el renderizado estéreo, por lo que sería difícil en WebVR, pero no crea que estoy en contra de la función :): +1:

Simplemente apáguelo en realidad virtual. Muchos de los efectos costosos no funcionan bien en la realidad virtual. UE4 incluso sugiere ir con el renderizado hacia adelante en lugar de diferido en el contexto de realidad virtual por motivos de velocidad.

Exactamente, por eso no estoy en contra.

Me encontré aquí mientras trabajaba en una implementación React Native del mapeo de reflexión, los reflejos del espacio de la pantalla son excelentes para los juegos que no son de realidad virtual.

THREE.Reflector funciona en realidad virtual ✌️
https://threejs.org/examples/webvr_sandbox.html

¡Bonito!

Aunque incluso en Nightly obtengo "VR Not found", pero lo comprobaré.

Mi problema particular (que no es el de OP) no era resolver el problema de la reflexión, era cómo crear objetos nativos de three.js y renderizarlos dentro de la escena y el renderizador existentes de ReactVR. Obtuve buenos resultados, lo único es que la imagen de fondo era un poco extraña, por lo que los reflejos se ven raros, pero eso es lo que se esperaba, React VR crea una esfera de adentro hacia afuera para la panorámica de fondo. No he probado un mapa de cubos, pero podría funcionar mejor.

Estoy MUY terminado en las páginas del libro, así que probablemente dejaré la demostración existente tal como está, pero parece una gran técnica.

Quería aprender más sobre este tipo de efecto, así que intenté crear un efecto de compositor para él. Todavía hay algo de trabajo que se podría hacer, pero esto es lo que reuní en función de la implementación de Kode80 y la publicación de blog de Morgan McGuire (la escena de sponza tarda un poco en cargarse):

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

Algunas cosas a hacer a continuación serían limpiar los artefactos de jitter, reflejos brillantes (con un pase de desenfoque o muestreo de mapa mip + pirámide de mapa de profundidad) y múltiples rebotes a través de la reproyección temporal.

Si alguien está realmente interesado en usar este efecto, ¡estaría feliz de trabajar con alguien para pulirlo un poco más!

@gkjohnson Dulce. Sin embargo, su escena puede ser demasiado compleja. En cualquier caso, su demostración parece no responder en gran medida. ¿Puedes crear un ejemplo más simple? Además, una palanca de encendido y apagado estaría bien.

@WestLangley

su demostración parece no responder en gran medida

¿Puedes ver la demostración? La pantalla puede estar negra durante unos segundos más o menos porque la escena de Sponza tardará un poco en descargarse dependiendo de su conexión.

Si no funciona en absoluto, puedo echarle un vistazo a la creación de algo más simple, aunque funciona en mi Pixel 2

un interruptor de encendido y apagado estaría bien.

Bajar el control deslizante de "intensidad" a 0 parece lo mismo que apagarlo, aunque el trazado de rayos todavía está sucediendo, por lo que no habrá ninguna diferencia de rendimiento en ese caso si eso es lo que está buscando.

@gkjohnson Lo tengo. En mi Mac, su demostración es negra por un tiempo, y luego la velocidad de fotogramas es 4.

@WestLangley Es un efecto muy dependiente de la resolución, por lo que si hace que su ventana sea más pequeña, la velocidad de fotogramas probablemente aumentará. Hacer el trazado de rayos a una resolución más baja y luego componer con el búfer de resolución completa ayudaría a que el efecto sea más escalable, pero no me he tomado el tiempo para optimizarlo.

@gkjohnson ¿cómo lo enmascararías solo en superficies reflectantes? Si subo la intensidad, todo comienza a reflejarse y hay algunos artefactos bastante discordantes.

@bicubic Por el momento, no se tienen en cuenta los atributos de la superficie, pero no debería ser demasiado difícil agregar una versión básica de eso. Puede difuminar o difuminar el efecto en función del atributo especular / rugosidad del material.

Desafortunadamente, no tengo uso para el efecto en este momento, así que no me he esforzado por agregar estas otras características. Sin embargo, como mencioné antes, si hay interés en usarlo para algo, ¡estaría feliz de colaborar y completar el efecto!

Puede difuminar o difuminar el efecto en función del atributo especular / rugosidad del material.

Sería más útil poder especificar objetos como reflectantes / no reflectantes. Por el momento, todo es reflectante, incluidas cosas como cortinas y plantas. Idealmente, solo el piso debería ser reflectante en esta demostración.

@looeee Estoy de acuerdo que eso es lo que estoy diciendo, lo siento si no estaba claro. Los atributos del material tendrían que escribirse en un objetivo para que puedan muestrearse en el espacio de la pantalla y usarse para atenuar o difuminar los reflejos en el píxel dado. Esto permitiría que los mapas de rugosidad, etc.afecten también a los reflejos.

Me encantaría ver que esto se convierta en parte de las capacidades predeterminadas de three.js.

Hay muchas cosas como esta que te hacen preguntarte si una arquitectura de renderizador diferido también debería formar parte de la oferta predeterminada. Especialmente para webgl2.0

@gkjohnson lo entendió, tiene sentido. Sin embargo, todavía parece que una máscara de algún tipo podría ser necesaria para evitar artefactos. En su ejemplo, querría cero reflejos en las cortinas y las plantas. ¿Funcionaría correctamente el desvanecimiento a cero en función de las propiedades de ese material?

@bicubico
Estoy de acuerdo en que también me gustaría ver una ruta de renderización diferida dedicada. Con WebGL2 y múltiples texturas de renderizado, es mucho más viable.

@looee
Depende del efecto que desee, pero con el enfoque que describí, el valor de rugosidad renderizada se comportaría efectivamente como la máscara de la escena con un valor de rugosidad de 1 que significa "no renderizar ningún reflejo en este píxel" y un valor de 0 que significa "renderizar completo reflexión en este píxel ". Los valores intermedios generarían reflejos con una intensidad parcial. El control deslizante intensity en la demostración muestra el efecto (pero obviamente para toda la escena en lugar de por píxel).

Otro enfoque consiste en difuminar los píxeles reflejados en función del valor de rugosidad para emular una superficie difusa que refleja la luz. Por lo tanto, las cortinas aún tendrían algunos reflejos, pero no nítidos. Esto permitiría que la cortina se iluminara con un piso azul bien iluminado, por ejemplo.

un valor de rugosidad de 1 que significa "no representa ningún reflejo en este píxel" y un valor de 0 que significa "representa un reflejo completo en este píxel".

Parece que esto podría funcionar bien. Unreal utiliza un parámetro de "rugosidad máxima" y recomienda que se establezca en 0,8.

UPS

@gkjohnson
Esto es muy interesante y me encanta tu resultado, lo estoy integrando en un renderizador WebGL2 / MRT en este momento y experimentaré con él. ¿Notaste que creaste un material en cada llamada de renderizado?
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestar ¡Gracias! ¡Y no me había dado cuenta de eso! Pero como dije, creo que todavía hay un poco de limpieza por hacer y el rendimiento probablemente aún no esté en un punto en el que sea súper utilizable.

De todos modos, estos tipos de efectos son más adecuados para un renderizador diferido que para adelante (presumiblemente como en el que estás trabajando). Quería juntar este y algunos otros efectos de alta calidad, pero me inclino a esperar hasta que esté disponible un renderizador diferido adecuado antes de dedicar mucho más tiempo a eso. ¿El renderizador diferido / MRT en el que está trabajando está disponible en Github?

Lo he integrado ahora, mientras que el SSR pasa las salidas a un RT de menor resolución, básicamente solo los reflejos y luego lo combino usando un desenfoque de profundidad con la imagen principal para eliminar / reducir los errores. Represento los valores de rugosidad a un atributo RT y lo uso de nuevo para determinar la fuerza del desenfoque, siendo 1 invisible para descartar el fragmento.

El desenfoque también elimina el error que se vuelve más fuerte en la distancia. Un problema todavía parece ser la transparencia nuevamente y los objetos que cubren parcialmente a otros causan que se recorten los reflejos de los demás. Realmente necesito leer más sobre la técnica.

Lo estoy usando con un motor personalizado en la parte superior en TRES, no usando el compositor de TRES. THREE está realmente listo para usar un contexto WebGL2 en el WebGLRenderer actual, he agregado el MRT allí. Lo pondré en github pronto, supongo. Sin embargo, todavía requiere renderizar la escena por segunda vez para el búfer de profundidad de la cara posterior, pero eso no es demasiado costoso.

@Fyrestar
Oye, ¿alguna noticia al respecto?

Escribí el mío y hice un
Demo Demo2

El soporte de PerspectiveCamera está bien ahora. https://github.com/mrdoob/three.js/pull/20156

Manifestación

Esto es hermoso y todo un logro. Es muy lento en mi máquina: obtengo 5 fps a 1920x1080. ¿Cuál es la diferencia entre su implementación y la de Sketchfab? Sospecho que si supiéramos los diferentes sabríamos cómo optimizar el tuyo ...

@bhouston ¡Gracias!

Ahora todo en la escena es reflexivo, pero no es necesario en la mayoría de los proyectos prácticos.
Agregaré algo como la propiedad IntensityMap o usaré la información existente de Roughness Metalness, combinada con la atenuación de la distancia, en el píxel con un valor de 0, terminaré el cálculo directamente, creo que mejorará en gran medida los fps.
También puede seleccionar al azar parte de los píxeles reflectantes.

Intenté ver el código de Sketchfab, pero fallé. Lo intentaré de nuevo, pero no tengo muchas esperanzas. Si alguien tiene el código de Sketchfab, por favor compártelo, ¡gracias!

------EDITAR------
Además, la ventana de presentación de Sketchfab no se muestra en pantalla completa de forma predeterminada y detiene el procesamiento cuando no se realiza ninguna operación.
Si se realiza una pantalla completa y sigue girando, incluso una escena simple también tendrá un alto uso de gpu.

@gonnavis El código de sombreado para ese ejemplo debería poder verse a través de la extensión de Chrome Spector.js.

Simplemente jugando con Sketchfab, puedo ver que están cambiando su resolución SSR y refinándola. No me sorprendería si son de 3 a 5 niveles de calidad que están superando progresivamente. Esto asegura que haya una velocidad de fotogramas interactiva, pero que se refina para perfeccionarse cuando está estática.

Esto asegura que haya una velocidad de fotogramas interactiva, pero que se refina para perfeccionarse cuando está estática.

La desventaja es que hay un salto notable cuando la cámara deja de moverse y se cambian los niveles de calidad. Es más obvio en algunas escenas que en otras. Aquí hay uno en el que es muy obvio.

EDITAR: lo hacen con más que solo reflejos: parece que las luces, las sombras, los reflejos y tal vez las resoluciones de textura se mejoran progresivamente. Mire la luz / sombra en la pared trasera de esta escena .

Cuando estaba experimentando con SSRR arriba, hice bastante referencia al artículo de Morgan Mcguire aquí , que explica un par de técnicas que parece que Sketchfab podría estar usando.

Específicamente, la zancada de píxel se puede aumentar para que se muestreen menos píxeles de píxel, lo que se puede acoplar con una fluctuación por píxel regular para que los píxeles hermanos "omitan" diferentes muestras de profundidad mientras avanzan. Si el paso del rayo es lo suficientemente alto, puede agregar una búsqueda binaria al final una vez que algo se interseca en el búfer de profundidad para encontrar un píxel que un rayo habría golpeado primero. Regresar temprano sobre los fragmentos que no son reflectantes probablemente ayudaría, como ya mencionaste a @gonnavis.

También experimenté con un nivel superior de profundidad y conciencia normal de un raymarch de menor resolución, pero nunca llegué a un punto en el que estuviera feliz con la forma en que se veía. Creo que esta técnica en los juegos puede beneficiarse bastante del hecho de que las resoluciones disponibles a menudo son divisibles por dos, lo que simplifica la mejora.

Sin embargo, tengo curiosidad por saber cómo Sketchfab está manejando los reflejos ásperos que se difuminan en función de la distancia de reflexión. He visto que Godot Engine hace un desenfoque después con un radio basado en la distancia del rayo y la rugosidad de la superficie, pero eso da como resultado artefactos que no siento que esté viendo aquí. Tendré que hurgar con Spector.js cuando tenga la oportunidad (¡gracias por el consejo @WestLangley!). El artículo de Frostbite que @bhouston publicó inicialmente sugiere usar una pirámide de profundidad cuando los rayos marchan, pero generar eso puede ser un dolor en webgl1 (¿y tal vez 2?).

¡Se ve bien @gonnavis! Me alegra ver que podría llegar a la biblioteca.

@WestLangley ¡Gracias! pero cuando uso Spector.js en Sketchfab, aparece el mensaje "No se detectaron marcos con comandos gl. Intenta mover la cámara". error.

Dudo que después de que SSRPass esté optimizado como dije antes, el rendimiento de Sketchfab seguirá liderando significativamente. Especialmente en el caso de renderizado continuo y sin estrategia de degradación como mencionó @bhouston @looeee . Incluso creo que si no se habla de los detalles de implementación, el concepto central de este SSRPass puede ser ya la solución óptima.

@gkjohnson ¡ Gracias por su información y apoyo! Seguiré mejorando.

@gonnavis

Recomiendo la pestaña Gráficos de Safari:

Si usa Linux, puede usar Epiphany (también conocido como Gnome Web):
https://webkit.org/downloads/

Sin embargo, no creo que haya ninguna compilación de WebKit para Windows ...

@mrdoob ¡Gracias! Aunque uso principalmente Windows, lo intentaré en Mac si es necesario.

Pero me pregunto si está permitido cargar el código de Sketchfab en la biblioteca de código abierto, si encuentra algo útil como la función glsl.

La estructura de este SSRPass se basa en three.js SSAOPass , y la escena de demostración utiliza el ejemplo de three.js webgl_shading_physical , la función key pointToLineDistance proviene de wolfram.com , y otros principalmente

¡Gracias! pero cuando uso Spector.js en Sketchfab, aparece el mensaje "No se detectaron marcos con comandos gl. Intenta mover la cámara". error.

Mueva el mouse para hacer zoom en la cámara. Eso debería ser suficiente para activar a Spector.

Además, use una escena estática en su ejemplo que no requiera un bucle de renderizado. Actualmente, la velocidad de fotogramas es demasiado baja para ser aceptable.

@WestLangley Tuvo esta escena , ¡gracias!

No publiques el código de Sketchfab, por favor. Simplemente estaba sugiriendo que entendamos
sus técnicas. Lo que podemos hacer sin compartir su código. También
No se puede copiar nada de su código, eso iría en contra de los derechos de autor.

El martes, 25 de agosto de 2020 a las 6:21 a. M., Vis [email protected] escribió:

@WestLangley https://github.com/WestLangley Tuvo éxito en esta escena
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ,
¡Gracias!

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ,
o darse de baja
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

-
Ben Houston , director de tecnología
M : + 1-613-762-4113
[email protected]
Ottawa, canadá
Plataforma de visualización ThreeKit: 3D, 2D, AR, VR
http: //https//threekit.com/

@bhouston OK, como referencia solo si es necesario.

Incluso a menudo siento que, después de recibir algo de inspiración, seguir mirando el papel y el código de otras personas es más difícil que escribirlo yo mismo, especialmente cuando estoy en un entorno diferente.

Por ejemplo, esta vez, me inspiré principalmente en este tut , pero es difícil entender claramente el significado del texto al principio, y debido al diferente sistema de coordenadas que usa, no sé cómo ejecutar el archivo. cxx, por lo que solo leo un poco de texto y apenas leo el código. Así que al final, las dos imágenes imgA imgB que más me ayudaron.

Agrega algunas demostraciones.

Demo, Demo2, Demo3, SelectiveDemo, OrthographicDemo.

Inspirado por @gonnavis , finalmente pude probar algunas cosas nuevas en la implementación de SSR que publiqué hace un par de años, así que pensé en compartir aquí. No tengo planes de usar esto en un proyecto real, por lo que no está optimizado y, en este punto, se ha convertido en un montón de diferentes funciones de SSR, pero he aprendido la mayor parte de lo que quiero de él, así que lo llamaré " hecho "por ahora. Sin embargo, quizás haya algunas cosas que otros puedan tomar. Todavía hay cosas que sé que podrían agregarse o mejorarse, pero tal vez si alguna vez lo recupero, aprovecharé algunas funciones en WebGL2 para simplificar las cosas.

Algunas de las novedades:

• Admite la fluctuación de los rayos de ruido azul para que el patrón de intersección sea menos regular.
• Una profundidad y un aumento de escala / desenfoque ponderado normal a partir de una textura de marcha de menor resolución para preservar los detalles.
• Un par de enfoques modificados para los ojos para renderizar reflejos brillantes con muestras y mapas MIP alterados.
• Soporte para mapas normales y mapas alfa.

Es un efecto bastante intenso, pero creo que con una combinación de aumento de escala de reflexión, desenfoque, jitter y recuento de pasos bajo, podrías conseguir algo que funcione bien, especialmente con lienzos incrustados más pequeños en lugar de aplicaciones de ventana completa. Al resolver la imagen final en varios fotogramas como se ha discutido en https://github.com/mrdoob/three.js/issues/14048 , probablemente también podría obtener reflejos brillantes decentes. Por supuesto, como se ha mencionado en otra parte, los reflejos aún no serán realmente correctos sin pases separados para difuso y otras cosas, pero siempre hay algo más que mejorar.

Aquí hay algunas capturas de pantalla con recuentos de pasos más altos:

| Sin brillo | Brillo multimuestra | Brillo de jerarquía de profundidad |
| --- | --- | --- |
| | | |

Y aquí está la demostración:

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

Hay una diapositiva en Siggraph 2015 sobre "Reflexiones estocásticas en el espacio de la pantalla" que podría interesarle: http://advances.realtimerendering.com/s2015/index.html