Shader di vetro refrattivo

Ho un piano esagonale infinito, generato tessellando una griglia di punti in una coppia di shader di tassellatura:

Si noti che questo è un wireframe piatto - le "ombre" sono un trucco di illuminazione:

Ora, vorrei far sembrare questo un vetro spesso e refrattivo, ma non sono sicuro di come procedere.

La prima cosa che mi è venuta in mente è

1. impostare un'uniforme contenente lo "spessore" richiesto dei blocchi
2. Quando si calcola l'illuminazione, utilizzare la legge di Snell per calcolare la lunghezza del percorso ottico che un raggio prenderebbe attraverso il blocco esadecimale, se fosse effettivamente spessa come dice l'uniforme "spessore", e sommare l'alfa su quella lunghezza. Ciò darebbe la trasparenza, ma non gestisce cose come la riflessione interna / TIR, ecc.

Non l'ho ancora provato, quindi non sono sicuro di quale sarebbe il risultato visivo.

Alla fine, per questo particolare livello, sto cercando di ottenere quel vetro, aspetto esagonale del pavimento usato in Tron: Legacy durante la battaglia del disco. ( Vedi questa immagine per un esempio .)

Suggerimenti?

Questo articolo in GPU Gems approfondisce la rifrazione, il che può dare risultati piuttosto piacevoli

Nel senso più elementare

Il primo passo della tecnica di rifrazione di base è rendere la geometria della scena in una trama, saltando tutte le maglie di rifrazione. Questa trama può essere usata per determinare quali oggetti sono visibili dietro gli oggetti refrattivi che saranno resi in un passaggio successivo. Indichiamo questa trama come S.

Il secondo passo è rendere le maglie di rifrazione, cercando i valori dalla trama S con una perturbazione applicata per simulare l'aspetto di rifrazione. La perturbazione può essere ottenuta utilizzando una normale mappa N, in cui i componenti rosso e verde (XY) della mappa normale vengono utilizzati e ridimensionati di un valore piccolo per aggiungere uno spostamento nelle coordinate di trama proiettate. Questo approccio è semplice da implementare in uno shader:

1. recupera la trama N
2. usa i componenti XY ridimensionati di un valore piccolo (come 0,05)
3. aggiungi questo valore di spostamento nelle coordinate di trama proiettate per S

Il seguente elenco mostra uno shader che dimostra questo approccio

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);
}

Le immagini seguenti illustrano questi tre passaggi

Ci sono tecniche più avanzate nello stesso articolo che possono ottenere un aspetto molto più accattivante

Per un effetto simile in Unity, potresti dare un'occhiata alla pagina wiki di The Refraction Shader

Prenderò l' immagine che hai mostrato come riferimento per come immagino l'effetto. L'algoritmo che mi viene in mente è semplice:

1. Rendering dell'ambiente in una trama di mappa cubo in ordine per simulare la riflessione dell'ambiente.
2. Applicare la trama della mappa del cubo in un piano che rappresenta il livello sotto il pavimento di rifrazione. Non rendere ancora l'aereo.
3. Rendering dell'aereo in una trama, una normale trama 2D.
4. Passa la trama allo shader refrattivo utilizzato per il rendering del pavimento refrattivo.
5. Ora renderizza le mesh / il pavimento di rifrazione con uno shader di rifrazione.

Per quanto riguarda lo shader di rifrazione, ordina di simulare il vetro che puoi fare

• Usa il termine fresnel per simulare la riflessione e la rifrazione.
• Usa la mappa normale / normale per eseguire il recupero di una trama.

_{Ho appena pensato all'idea, quindi non l'ho provato. Sono sicuro che ha bisogno di più lavoro, forse lo farò una volta tornato dal lavoro.}