Brechbarer Glasshader


10

Ich habe einen unendlichen sechseckigen Boden, der durch Tessellieren eines Punktgitters in einem Tessellation-Shader-Paar erzeugt wird:

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass dies ein flaches Drahtmodell ist - die "Schatten" sind ein Beleuchtungstrick:

Geben Sie hier die Bildbeschreibung ein

Nun möchte ich dieses Glas als dickes, brechendes Glas erscheinen lassen, bin mir aber nicht sicher, wie ich vorgehen soll.

Das erste, was mir in den Sinn kam, ist zu

  1. Stellen Sie eine Uniform ein, die die gewünschte "Dicke" der Blöcke enthält
  2. Verwenden Sie bei der Berechnung der Beleuchtung das Snellsche Gesetz, um die optische Weglänge zu berechnen, die ein Strahl durch den Hex-Block nehmen würde, wenn er tatsächlich so dick wäre, wie es die Uniform "Dicke" sagt, und summieren Sie das Alpha über diese Länge. Das würde die Transparenz geben, behandelt aber keine Dinge wie interne Reflexion / TIR usw.

Geben Sie hier die Bildbeschreibung ein

Ich habe das noch nicht ausprobiert, daher bin ich mir nicht sicher, wie das visuelle Ergebnis aussehen würde.

Letztendlich versuche ich für dieses spezielle Level, den in Tron: Legacy während des Scheibenkampfs verwendeten sechseckigen Glasboden-Look zu erhalten. ( Ein Beispiel finden Sie in diesem Bild .)

Vorschläge?


1
Können Sie näher erläutern, welchen Look Sie erzielen möchten? Die Tron-Aufnahme zeigt hauptsächlich Reflexion, AFAICT, keine Brechung - bei den meisten Aufnahmen kann man nicht wirklich durch die Bodenplatten sehen. Angenommen, Sie möchten nicht nur eine glänzende Oberfläche, was möchten Sie durch den Boden sehen? Gibt es eine Unterbodentextur, die Sie anzeigen möchten? Gibt es eine ganze Szene unter dem Boden (wie in Tron)? Oder möchten Sie, dass es eher wie Milchglas aussieht, bei dem Sie kein bestimmtes Bild sehen können, aber einen Streueffekt unter der Oberfläche haben?
Nathan Reed

Streuung unter der Oberfläche, obwohl ich nicht wusste, wie es heißt. Erleichtert das Googeln. :)
3Dave

Antworten:


4

Dieser Artikel in GPU Gems befasst sich eingehend mit der Brechung, was zu sehr guten Ergebnissen führen kann

(a) Vollständige Transparenz (b) Brechendes Glas

Im einfachsten Sinne

Der erste Schritt der grundlegenden Refraktionstechnik besteht darin, die Szenengeometrie in eine Textur zu rendern und alle refraktiven Netze zu überspringen. Diese Textur kann verwendet werden, um zu bestimmen, welche Objekte hinter den brechenden Objekten sichtbar sind, die in einem nachfolgenden Durchgang gerendert werden. Wir bezeichnen diese Textur als S.

Der zweite Schritt besteht darin, die Brechungsnetze zu rendern und Werte aus der Textur S mit einer Störung nachzuschlagen, die angewendet wird, um das Brechungsbild zu simulieren. Die Störung kann unter Verwendung einer normalen Karte N erreicht werden, wobei die roten und grünen (XY) Komponenten der normalen Karte verwendet und um einen kleinen Wert skaliert werden, um eine Verschiebung in die projizierten Texturkoordinaten hinzuzufügen. Dieser Ansatz ist einfach in einem Shader zu implementieren:

  1. Holen Sie sich die Textur N.
  2. Verwenden Sie die XY-Komponenten, die mit einem kleinen Wert skaliert sind (z. B. 0,05).
  3. Addiere diesen Verschiebungswert zu den projizierten Texturkoordinaten für S.

Die folgende Auflistung zeigt einen Shader, der diesen Ansatz demonstriert

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

Die nächsten Bilder veranschaulichen diese drei Schritte

Die drei im obigen Shader aufgeführten Schritte

Es gibt fortgeschrittenere Techniken im selben Artikel, die ein viel ansprechenderes Aussehen erzielen können


Für einen ähnlichen Effekt in Unity sollten Sie sich die Wiki-Seite The Refraction Shader ansehen


3

Ich werde das von Ihnen gezeigte Bild als Referenz dafür nehmen, wie ich mir den Effekt vorstelle. Der Algorithmus, den ich mir vorstellen kann, ist einfach:

  1. Rendern Sie die Umgebung in eine Würfelkartentextur, um die Umgebungsreflexion zu simulieren.
  2. Wenden Sie die Würfelkartentextur auf eine Ebene an, die die Ebene unter dem Brechungsboden darstellt. Rendern Sie das Flugzeug noch nicht.
  3. Rendern Sie die Ebene in eine Textur, eine normale 2D-Textur.
  4. Übergeben Sie die Textur an den refraktiven Shader, der zum Rendern des refraktiven Bodens verwendet wird.
  5. Rendern Sie nun die Brechungsnetze / den Brechungsboden mit einem Brechungsshader.

In Bezug auf den Refraktions-Shader können Sie das Glas simulieren, das Sie ausführen können

  • Verwenden Sie den Fresnel-Term, um die Reflexion und Brechung zu simulieren.
  • Verwenden Sie die Normalen / Normal-Map, um einen Texturabruf durchzuführen.

Ich habe nur an die Idee gedacht, also habe ich sie nicht getestet. Ich bin sicher, es braucht mehr Arbeit. Vielleicht werde ich es tun, wenn ich von der Arbeit zurückkomme.


Interessanter Ansatz - ich muss ein bisschen darauf schmoren. Danke für die Eingabe.
3Dave
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.