javascript - texture - ¿Resplandor exterior de three.js para objeto de esfera?

three.js examples

Question

Estoy construyendo una especie de sistema planetario en tres años y pasé un par de horas buscando una solución decente para obtener un brillo exterior en un planeta: un objeto de esfera con una textura.

Me encontré con este ejemplo http://stemkoski.github.io/Three.js/Selective-Glow.html qué tipo de truco funciona, pero el problema es que esta forma de brillo también afecta al objeto 3D principal que produce cambios de color. (como se ve allí).

Otro ejemplo de brillo agradable se puede encontrar aquí http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html pero de nuevo ilumina toda la región, no solo la cosa "externa".

He estado leyendo un hilo de discusión sobre la propiedad "overrideMaterial" en GitHub pero esto parece experimental, sin usar y sin documentar ... ni siquiera estoy seguro de si esto podría resolver mi problema.

Por favor comparte tus ideas, gracias!

Answer 1

En el ejemplo al que te refieres, utilicé un resplandor azul con mezcla aditiva; si utilizas un color blanco, tal vez eso produzca el efecto que deseas.

Answer 2

He trabajado un poco para separar la parte del código de WebGL Globe (vinculado a arriba) que produce el efecto atmosférico. Una versión preliminar de trabajo está aquí:

http://stemkoski.github.io/Three.js/Atmosphere.html

A mi entender, hay algunas cosas interesantes que suceden en el código original para crear el efecto atmosférico. Primero, la textura brillante se coloca en otra esfera, llamémosla Esfera de Atmo :), que rodea la esfera con la imagen de la tierra. El material de la Atmósfera se voltea para que la parte frontal no se rinda, solo la parte posterior, por lo que no oculta la esfera terrestre a pesar de que la rodea. En segundo lugar, el efecto de iluminación de gradiente se logra utilizando un sombreador de fragmentos en lugar de una textura. Sin embargo, la atmósfera cambiará su apariencia si se acerca y se aleja; esto no fue evidente en el experimento de WebGL Globe porque el zoom estaba deshabilitado.

[actualizado el 30 de abril]

A continuación, similar al código fuente de

http://stemkoski.github.io/Three.js/Selective-Glow.html

la esfera con la textura de iluminación degradada (y otra esfera con textura negra) se colocan en una segunda escena, y luego los resultados de esa escena se componen con la escena original utilizando una licuadora aditiva. Y solo para que pueda experimentar con los parámetros utilizados para crear el efecto de brillo, he incluido un par de controles deslizantes para que pueda cambiar los valores y ver los diferentes efectos de brillo que resultan.

Espero que esto te ayude a empezar. ¡Buena suerte!

[actualizado el 11 de junio]

Tengo un nuevo ejemplo que logra el mismo efecto de una manera mucho más simple, en lugar de utilizar el procesamiento posterior y la combinación aditiva de dos escenas, simplemente cambié algunos de los parámetros en el material personalizado. (Parece obvio en retrospectiva). Para ver un ejemplo actualizado, echa un vistazo a:

http://stemkoski.github.io/Three.js/Shader-Halo.html

Sin embargo, todavía no he descubierto los problemas de panorámica / zoom.

[Actualizado el 24 de julio]

Me di cuenta de los problemas de panorámica / zoom. Requiere usar un shader; para obtener detalles sobre las complejidades, consulte la pregunta relacionada Three.js: código de sombreado para el efecto de halo, las normales necesitan transformación y para el ejemplo final de trabajo, consulte:

http://stemkoski.github.io/Three.js/Shader-Glow.html .

Estoy muy contento con el resultado final, así que ya no actualizaré esta respuesta :)