Shader de vidrio refractivo

10

Tengo un piso hexagonal infinito, generado al teselar una cuadrícula de puntos en un par de sombreadores de teselación:

ingrese la descripción de la imagen aquí

Tenga en cuenta que esta es una estructura metálica plana: las "sombras" son un truco de iluminación:

ingrese la descripción de la imagen aquí

Ahora, me gustaría hacer que esto parezca vidrio grueso y refractivo, pero no estoy seguro de cómo proceder.

Lo primero que me vino a la mente es

  1. establecer un uniforme que contenga el "grosor" solicitado de los bloques
  2. Al calcular la iluminación, use la ley de Snell para calcular la longitud del camino óptico que tomaría un rayo a través del bloque hexagonal, si en realidad fuera tan grueso como dice el uniforme de "espesor", y sume el alfa sobre esa longitud. Eso le daría transparencia, pero no maneja cosas como la reflexión interna / TIR, etc.

ingrese la descripción de la imagen aquí

Todavía no lo he intentado, así que no estoy seguro de cuál sería el resultado visual.

En última instancia, para este nivel en particular, estoy tratando de usar ese aspecto de vidrio y piso hexagonal en Tron: Legacy durante la batalla de discos. ( Vea esta imagen para ver un ejemplo ).

Sugerencias?

3Dave
fuente
1
¿Puedes explicar más qué aspecto estás tratando de lograr? El disparo de Tron muestra principalmente reflejo, AFAICT, no refracción: en la mayoría de los disparos no se puede ver a través de las placas del piso. Asumiendo que no solo quieres una superficie brillante, ¿qué quieres ver a través del piso? ¿Hay una textura de subsuelo que quieras mostrar? ¿Hay toda una escena debajo del piso (como en Tron)? ¿O quieres que sea más como un vidrio esmerilado donde no puedes ver una imagen distinta, pero tiene un efecto de dispersión debajo de la superficie?
Nathan Reed
Dispersión del subsuelo, aunque no sabía que así se llama. Hace que buscar en Google sea más fácil. :)
3Dave

Respuestas:

4

Este artículo en GPU Gems profundiza sobre la refracción, que puede dar resultados bastante agradables

(a) Transparencia completa (b) Vidrio refractivo

En el sentido más básico

El primer paso de la técnica básica de refracción es convertir la geometría de la escena en una textura, omitiendo todas las mallas refractivas. Esta textura se puede usar para determinar qué objetos son visibles detrás de los objetos refractivos que se renderizarán en una pasada posterior. Denotamos esta textura como S.

El segundo paso es renderizar las mallas refractivas, buscando valores de la textura S con una perturbación aplicada para simular el aspecto refractivo. La perturbación se puede lograr usando un mapa normal N, donde los componentes rojo y verde (XY) del mapa normal se usan y escalan por algún valor pequeño para agregar un desplazamiento en las coordenadas de textura proyectadas. Este enfoque es sencillo de implementar en un sombreador:

  1. buscar la textura N
  2. use los componentes XY escalados por un valor pequeño (como 0.05)
  3. agregue este valor de desplazamiento en las coordenadas de textura proyectadas para S

La siguiente lista muestra un sombreador que demuestra este enfoque

half4 main(float2 bumpUV : TEXCOORD0,
  float4 screenPos : TEXCOORD1,
  uniform sampler2D tex0,
  uniform sampler2D tex1,
  uniform float4 vScale) : COLOR
{
  // fetch bump texture, unpack from [0..1] to [-1..1]
  half4 bumpTex=2.0 * tex2D(tex0, bumpUV.xy) - 1.0;

  // displace texture coordinates    
  half2 newUV = (screenPos.xy/screenPos.w) + bumpTex.xy * vScale.xy;

  // fetch refraction map
  return tex2D(tex1, newUV);
}

Las siguientes imágenes ilustran estos tres pasos.

Los tres pasos enumerados en el sombreador anterior

Hay técnicas más avanzadas en el mismo artículo que pueden lograr una apariencia mucho más atractiva.


Para un efecto similar en Unity, es posible que desee echar un vistazo a la página wiki de The Refraction Shader

codemonkey
fuente
3

Tomaré la imagen que mostraste como referencia de cómo imagino el efecto. El algoritmo que se me ocurre es simple:

  1. Representa el entorno en una textura de mapa de cubo para simular la reflexión del entorno.
  2. Aplique la textura del mapa del cubo en un plano que represente la capa debajo del piso refractivo. No renderices el avión todavía.
  3. Representa el plano en una textura, una textura 2D normal.
  4. Pase la textura al sombreador refractivo utilizado para renderizar el piso refractivo.
  5. Ahora renderice las mallas / piso refractivas con un sombreador de refracción.

En cuanto al sombreador de refracción, para simular el vidrio que puede hacer

  • Use el término fresnel para simular la reflexión y la refracción.
  • Use los mapas normales / normales para hacer una búsqueda de textura.

Solo pensé en la idea, así que no la probé. Estoy seguro de que necesita más trabajo, tal vez lo haga una vez que regrese del trabajo.

concepto3d
fuente
Enfoque interesante: tendré que estofarme en eso por un momento. Gracias por el aporte.
3Dave