Unter den vielen Indie-Spielen, die in den letzten 10 Jahren veröffentlicht wurden, ist eines meiner Lieblingsspiele definitiv Journey . Dank seiner atemberaubenden Ästhetik und seines wunderschönen Soundtracks ist Journey in nahezu allen Aspekten der Entwicklung zu einem hervorragenden Beispiel geworden.

Ich bin ein Spieleentwickler und technischer Künstler, daher war ich von der Art und Weise, wie der Sand gerendert wurde, am meisten fasziniert. Es ist nicht nur schön, sondern steht auch in direktem Zusammenhang mit dem grundlegenden Gameplay und dem gesamten Gameplay. Journey ist buchstäblich aus Sand gebaut, und ohne solch einen erstaunlichen Effekt könnte das Spiel selbst einfach nicht existieren.


In diesem Artikel, der in zwei Beiträge unterteilt ist, möchte ich dem Journey- Erbe meine Anerkennung zollen, indem ich Ihnen beibringe, wie Sie mit Shadern genau dasselbe Sand-Rendering erstellen. Unabhängig davon, ob Sanddünen in Ihrem Spiel benötigt werden, können Sie in dieser Reihe von Tutorials lernen, wie Sie eine bestimmte Ästhetik in Ihrem eigenen Spiel wiederherstellen. Wenn Sie den in Journey verwendeten schönen Sand-Shader neu erstellen möchten, müssen Sie zunächst verstehen, wie er erstellt wurde. Und obwohl es äußerst komplex aussieht, besteht es tatsächlich aus mehreren relativ einfachen Effekten. Dieser Ansatz, Shader zu schreiben, ist notwendig, um ein erfolgreicher technischer Künstler zu werden. Daher hoffe ich, dass Sie diese Reise mit mir machen, auf der wir nicht nur die Erstellung von Shadern erforschen, sondern auch lernen, wie man Ästhetik und Gameplay kombiniert.

Sandanalyse in Journey

Dieser Artikel basiert, wie viele andere Versuche, das Sand-Rendering von Journey nachzubilden, auf einem Bericht der GDC, den der leitende Ingenieur des Unternehmens, John Edwards, mit dem Titel " Sand-Rendering in Journey " verfasst hat. In diesem Vortrag spricht John Edwards über alle Effektebenen, die Journey zu den Sanddünen hinzugefügt wurden, um den richtigen Look zu erzielen.


Der Bericht ist sehr nützlich, aber im Kontext dieses Tutorials sind viele der von John Edwards getroffenen Einschränkungen und Entscheidungen nicht wichtig. Wir werden versuchen, die Sand-Shader, die an den Journey- Shader erinnern, hauptsächlich durch visuelle Referenzen nachzubilden.

Beginnen wir mit einem einfachen 3D-Netz einer perfekt glatten Düne. Die Glaubwürdigkeit der Sandverarbeitung hängt von zwei Aspekten ab: Beleuchtung und Körnung. Eine interessante Möglichkeit, das Licht von Sand zu reflektieren, bietet ein modifiziertes Beleuchtungsmodell . Im Kontext der Shader-Codierung bestimmt das Beleuchtungsmodell Schatten und Lichter basierend auf den Eigenschaften des Modells und den Beleuchtungsbedingungen der Szene.

All dies reicht jedoch nicht aus, um die Illusion eines Realismus zu erzeugen. Das Problem ist, dass Sand einfach nicht mit flachen Oberflächen modelliert werden kann. Sandkorn sollte berücksichtigt werden. Aus diesem Grund gibt es zwei separate Effekte, die direkt mit der Normalen auf der Oberfläche zusammenwirken und dazu verwendet werden können, kleine Sandpartikel auf der Oberfläche der Düne zu simulieren.

Das folgende Diagramm zeigt alle Effekte, die wir in diesem Tutorial lernen werden. Aus technischer Sicht werden normale Berechnungen durchgeführt, bevor die Beleuchtung verarbeitet wird. Zur Erleichterung der Untersuchung werden die Wirkungen in einer anderen Reihenfolge beschrieben.

Diffuse Farbe

Der einfachste Sand Shader-Effekt ist seine diffuse Farbe , die grob die matte Komponente des Gesamterscheinungsbildes beschreibt. Die diffuse Farbe wird basierend auf der tatsächlichen Farbe des Objekts und den Lichtbedingungen berechnet. Eine weiße Kugel ist nicht überall perfekt weiß, da die diffuse Farbe vom einfallenden Licht abhängt. Diffuse Farben werden mithilfe eines mathematischen Modells berechnet, das die Reflexion von Licht von einer Oberfläche approximiert. Dank eines Berichts von John Edwards mit der GDC kennen wir genau die verwendete Gleichung, die er diffuses Kontrastreflexionsvermögen nennt; es basiert auf dem bekannten Lambert- Modell der Reflexionen .



Vor und nach der Anwendung der Gleichung

Sand normal

Die ursprüngliche Geometrie ist völlig glatt. Um dies zu kompensieren, wird die Oberflächennormale des Modells mit einer Technik namens Bump Mapping geändert. Sie können eine Textur verwenden, um komplexere Geometrien zu simulieren.

Kantenbeleuchtung

Jedes Reise- Level verwendet eine begrenzte Farbpalette. Aus diesem Grund ist es ziemlich schwierig zu verstehen, wo eine Düne endet und eine andere beginnt. Um die Lesbarkeit zu verbessern, wird die Technik der kleinen Hervorhebung des Sichtbaren nur entlang des Dünenrandes angewendet. Es wird als Randbeleuchtung bezeichnet , und es gibt viele Möglichkeiten, dies umzusetzen. Für dieses Tutorial habe ich eine auf Fresnel- Reflexionen basierende Methode gewählt, die Reflexionen auf polierten Oberflächen unter sogenannten Einfallswinkeln modelliert.

Spiegelbild des Ozeans

Einer der unterhaltsamsten Aspekte im Gameplay von Journey ist das „Surfen“ in den Sanddünen. Dies ist wahrscheinlich der Grund, warum die Spielefirma wollte, dass sich der Sand eher wie eine Flüssigkeit als wie ein Feststoff anfühlt. Hierfür wurde eine starke Reflexion verwendet, die häufig in Wasserschattierungen zu finden ist. John Edwards nennt diesen Effekt Ocean Specular , und im Tutorial implementieren wir ihn mithilfe der Blinn-Fong-Reflexion .

Blendung Reflexion

Indem Sie dem Sand Shader eine ozeanische Spiegelkomponente hinzufügen, wirkt er flüssiger. Dennoch lässt sich einer der wichtigsten visuellen Aspekte des Sandes nicht vermitteln: zufällig auftretende Reflexionen. In echten Dünen tritt dieser Effekt auf, weil jedes Sandkorn Licht in seine Richtung reflektiert und sehr oft einer dieser reflektierten Strahlen in unser Auge gelangt. Eine solche Glitzerreflexion (Reflexion von Reflexionen) tritt auch an Orten auf, an denen direktes Sonnenlicht nicht einfällt; es ergänzt das ozeanische Spiegelbild und stärkt das Gefühl der Glaubwürdigkeit.

Sandwellen

Durch Ändern der Normalen konnten wir den Effekt kleiner Sandkörner auf der Dünenoberfläche simulieren. In den Dünen der realen Welt treten häufig vom Wind verursachte Wellen auf. Ihre Form variiert je nach Neigung und Position der Dünen im Verhältnis zur Windrichtung. Möglicherweise können solche Muster durch eine Höckertextur erzeugt werden, aber in diesem Fall ist es unmöglich, die Form der Dünen in Echtzeit zu ändern. Die von John Edwards vorgeschlagene Lösung ähnelt einer Technik namens Triplanar Shading : Es werden vier verschiedene Texturen verwendet, die je nach Position und Neigung der Dünen gemischt werden.

Reise Sand Shader Anatomie

Unity bietet viele Shader-Vorlagen, mit denen Sie loslegen können. Da wir an Materialien interessiert sind, die Licht empfangen und Schatten werfen können, müssen wir mit dem Surface Shader (Surface Shader) beginnen.

Alle Surface Shader werden in zwei Schritten ausgeführt. Zunächst wird eine Oberflächenfunktion aufgerufen, die die Eigenschaften der zu rendernden Oberfläche erfasst, z. B. Albedo , Rauheit , Metalleigenschaften , Transparenz und Normalenrichtung . Dann werden alle diese Eigenschaften auf die Beleuchtungsfunktion übertragen , die den Einfluss externer Lichtquellen berücksichtigt und die Verschattung und Beleuchtung berechnet.

Oberflächenfunktion

Beginnen wir mit dem Kern unserer Oberflächenfunktion, der im folgenden surf wird. Die einzigen Eigenschaften, die wir einstellen müssen, sind die Farbe des Sandes und die Normale zur Oberfläche . Die Normale eines 3D-Modells ist ein Vektor, der die Position der Oberfläche angibt. Normale Vektoren werden von der Beleuchtungsfunktion verwendet, um zu berechnen, wie Licht reflektiert wird. Sie werden normalerweise beim Import des Netzes berechnet. Sie können jedoch geändert werden, um eine komplexere Geometrie zu simulieren. Hier verzerren die normalen Sand- und Sandwelleneffekte die Sandnorm, um ihre Rauheit zu simulieren.

 void surf (Input IN, inout SurfaceOutput o) { o.Albedo = _SandColor; o.Alpha = 1; float3 N = float3(0, 0, 1); N = RipplesNormal(N); N = SandNormal (N); o.Normal = N; } 

Wenn Sie Normalen nach o.Normal müssen sie im Tangentialraum ausgedrückt werden . Dies bedeutet, dass der Vektor relativ zur Oberfläche des 3D-Modells ausgewählt wird. float3(0, 0, 1) bedeutet also, dass das normale 3D-Modell tatsächlich nicht geändert wird.

Beide Funktionen, RipplesNormal und SandNormal empfangen den normalen Vektor und modifizieren ihn. Wie das geht, werden wir später sehen.

Beleuchtung funktion

In der Beleuchtungsfunktion werden alle anderen Effekte implementiert. Der folgende Code zeigt, wie jede einzelne Komponente in separaten Funktionen berechnet wird (diffuse Farbe, Randbeleuchtung, Ozeanspiegelung und Glitzerreflexion). Dann werden sie alle kombiniert.

 #pragma surface surf Journey fullforwardshadows float4 LightingJourney (SurfaceOutput s, fixed3 viewDir, UnityGI gi) { float3 diffuseColor = DiffuseColor (); float3 rimColor = RimLighting (); float3 oceanColor = OceanSpecular (); float3 glitterColor = GlitterSpecular (); float3 specularColor = saturate(max(rimColor, oceanColor)); float3 color = diffuseColor + specularColor + glitterColor; return float4(color * s.Albedo, 1); } 

Die Methode zum Kombinieren von Komponenten ist ziemlich willkürlich und ermöglicht es uns, sie zu ändern, um die künstlerischen Möglichkeiten zu untersuchen.

Typischerweise stapeln sich Spiegelreflexionen über diffuse Farben. Da wir hier nicht eine, sondern drei Spiegelreflexionen haben ( Randlicht , Ozeanspiegel und Glitzerspiegel ), müssen wir vorsichtiger sein, damit der Sand nicht zu flackert. Da Rim Light und Ocean Specular Teil desselben Effekts sind, können wir nur den Maximalwert auswählen. Glitzerspiegel werden separat hinzugefügt, da diese Komponente flackernden Sand erzeugt.

Teil 2. Diffuse Farbe

Im zweiten Teil des Beitrags konzentrieren wir uns auf das im Spiel verwendete Beleuchtungsmodell und darauf. Wie erstelle ich es in Unity neu?

Im vorigen Teil haben wir den Grundstein dafür gelegt, was sich allmählich in unsere Version des Sandshaders Journey verwandeln wird. Wie bereits erwähnt, wird die Beleuchtungsfunktion in Oberflächen-Shadern verwendet , um den Effekt der Beleuchtung zu berechnen, sodass Schatten und Lichter auf der Oberfläche erscheinen. Wir haben herausgefunden, dass Journey mehrere Effekte hat, die in diese Kategorie fallen. Wir werden mit dem grundlegendsten (und einfachsten) Effekt beginnen, der im Kern dieses Shaders zu finden ist: seiner diffusen Beleuchtung (diffuse / diffuse Beleuchtung).


Im Moment lassen wir alle anderen Effekte und Komponenten aus und konzentrieren uns auf das Beleuchten des Sandes .

Die Beleuchtungsfunktion, die wir im vorherigen Teil des Beitrags mit dem Namen LightingJourney , delegiert die Berechnung der diffusen Farbe von Sand einfach an eine Funktion mit dem Namen DiffuseColor .

 float4 LightingJourney (SurfaceOutput s, fixed3 viewDir, UnityGI gi) { // Lighting properties float3 L = gi.light.dir; float3 N = s.Normal; // Lighting calculation float3 diffuseColor = DiffuseColor(N, L); // Final color return float4(diffuseColor, 1); } 

Da jeder Effekt in sich geschlossen und in seiner eigenen Funktion gespeichert ist, ist unser Code modularer und übersichtlicher.

Lambert-Reflexion

Bevor Sie diffuses Licht „wie in Journey“ erstellen, sollten Sie sich ansehen, wie die „grundlegende“ Funktion für diffuses Licht aussieht. Die einfachste Schattierungstechnik für matte Materialien heißt Lambertsches Reflexionsvermögen . Dieses Modell entspricht in etwa dem Aussehen der meisten nicht glänzenden und nicht metallischen Oberflächen. Es ist nach dem Schweizer Enzyklopädisten Johann Heinrich Lambert benannt , der sein Konzept 1760 vorschlug.

Lamberts Reflexionskonzept basiert auf einer einfachen Idee: Die Helligkeit einer Oberfläche hängt von der Menge des auf sie einfallenden Lichts ab . Geometrisch kann dies in der folgenden Abbildung gezeigt werden, in der die Kugel von einer entfernten Lichtquelle beleuchtet wird. Obwohl die roten und grünen Bereiche der Kugel gleich stark beleuchtet werden, unterscheiden sich ihre Oberflächen erheblich. Wenn das Licht im roten Bereich über eine größere Fläche verteilt ist, bedeutet dies, dass jede Einheit des roten Quadrats weniger Licht als grün empfängt.


Theoretisch hängt die Lambert-Reflexion vom relativen Winkel zwischen der Oberfläche und dem einfallenden Licht ab . Aus mathematischer Sicht ist dies eine Funktion von der Normalen zur Oberfläche und der Beleuchtungsrichtung . Diese Größen werden unter Verwendung von zwei Einheitslängenvektoren ( Einheitsvektoren genannt ) ausgedrückt. $$$N$ und $$$L$ . Einzelne Vektoren sind eine Standardmethode, um Richtungen im Kontext der Shader-Codierung anzugeben.




Bei genauerer Betrachtung können wir feststellen, dass die Oberfläche die maximale Beleuchtungsstärke erhält, wenn ihre Normale parallel zur Beleuchtungsrichtung verläuft. Und umgekehrt: Es gibt kein Licht, wenn zwei Einheitsvektoren senkrecht zueinander stehen.


Offensichtlich ist der Winkel zwischen $$$N$ und $$$L$ kritisch für die Reflexion nach Lambert. Darüber hinaus ist die Helligkeit maximal und gleich $$$100 \%$ wenn der Winkel ist $$$0$ und minimal ( $$$0 \%$ ), wenn der Winkel dazu neigt $$$90 ^ {\ circ}$ . Wenn Sie mit der Vektoralgebra vertraut sind, können Sie verstehen, dass eine Größe Lamberts Reflexion darstellt $$$I$ ist gleich $$$N \ cdot L$ Wo ist der Betreiber? $$$\ cdot$ Skalarprodukt genannt .

(1)

$$$$ display $$ \ begin {equation *} I = N \ cdot L \ end {equation *} $$ display $$

Das Skalarprodukt ist ein Maß für die "Übereinstimmung" zweier Vektoren relativ zueinander und variiert im Intervall von $$$+ 1$ (für zwei identische Vektoren) bis $$$-1$ (für zwei entgegengesetzte Vektoren). Ein Skalarprodukt ist die Grundlage für die Schattierung, die ich im Tutorial Physikalisch basiertes Rendern und Beleuchtungsmodelle ausführlich untersucht habe.

Implementierung

Und zu $$$N$ und zu $$$L$ Sie können leicht auf die Surface Shader-Beleuchtungsfunktionen über s.Normal und gi.light.dirin . Der Einfachheit halber werden wir sie im Shader-Code in N und L umbenennen.

 float3 DiffuseColor(float3 N, float3 L) { float NdotL = saturate( dot(N, L) ); return NdotL; } 

saturate begrenzt den Wert von $$$0$ vorher $$$1$ . Da sich das Skalarprodukt jedoch im Bereich von $$$-1$ vorher $$$+ 1$ Wir müssen nur mit den negativen Werten arbeiten. Aus diesem Grund wird die Lambert-Reflexion häufig wie folgt implementiert:

 float NdotL = max(0, dot(N, L) ); 

Kontrastreflexion des Umgebungslichts

Obwohl Lamberts Reflexion die meisten Materialien gut abschattet, ist sie weder physikalisch genau noch fotorealistisch. In älteren Spielen wurden Lambert-Shader häufig verwendet. Spiele, die diese Technik verwenden, scheinen oft alt zu sein, weil sie versehentlich die Ästhetik alter Spiele reproduzieren können. Wenn Sie dies nicht anstreben, sollten Sie Lambert-Reflexionen vermeiden und modernere Technologien verwenden.

Ein solches Modell ist das Oren-Nayyar-Reflexionsmodell , das ursprünglich in dem 1994 von Michael Oren und Sri C. Nayyar veröffentlichten Artikel Generalization of Lambert's Reflectance Model beschrieben wurde. Das Oren-Nayyar-Modell ist eine Verallgemeinerung der Lambert-Reflexion und wurde speziell für raue Oberflächen entwickelt. Anfänglich wollten die Entwickler von Journey die Oren-Nayyar-Reflexion als Grundlage für ihren Sandshader verwenden. Diese Idee wurde jedoch aufgrund der hohen Rechenkosten aufgegeben.

In seinem Bericht von 2013 erklärt der technische Künstler John Edwards, dass das für den Sand Journey erstellte Reflexionsmodell auf einer Reihe von Versuchen und Irrtümern basiert. Die Entwickler wollten nicht die fotorealistische Wiedergabe der Wüste nachbilden, sondern einer konkreten, sofort erkennbaren Ästhetik Leben einhauchen.

Das resultierende Schattierungsmodell entspricht seiner Meinung nach dieser Gleichung:

(2)

$$$$ display $$ \ begin {equation *} I = 4 * \ left (\ left (N \ odot \ left [1, 0.3, 1 \ right] \ right) \ cdot L \ right) \ end {equation *} $$ display $$

wo $$$\ odot$ - Elementweises Produkt zweier Vektoren.

 float3 DiffuseColor(float3 N, float3 L) { Ny *= 0.3; float NdotL = saturate(4 * dot(N, L)); return NdotL; } 

Reflexionsmodell (2) Da John Edwards diffusen Kontrast nennt, werden wir diesen Namen im gesamten Lernprogramm verwenden.

Die Animation unten zeigt den Unterschied zwischen Lambert-Schattierung (links) und diffusem Kontrast gegenüber Journey (rechts).

Von Grautönen zu Farbe

Alle oben gezeigten Animationen haben Graustufen, da sie die Werte ihres Reflexionsmodells anzeigen, die im Intervall von variieren $$$0$ vorher $$$1$ ". Wir können einfach Farben hinzufügen, indem NdotL als Interpolationskoeffizienten zwischen zwei Farben verwenden: eine für vollständig schattierten und eine für vollständig beleuchteten Sand.

 float3 _TerrainColor; float3 _ShadowColor; float3 DiffuseColor(float3 N, float3 L) { Ny *= 0.3; float NdotL = saturate(4 * dot(N, L)); float3 color = lerp(_ShadowColor, _TerrainColor, NdotL); return color; } 

Teil 3. Normaler Sand

Im dritten Teil werden wir uns auf die Erstellung normaler Karten konzentrieren, die glatte 3D-Modelle in Sanddünen verwandeln.

Im vorherigen Teil des Tutorials haben wir die diffuse Beleuchtung von Journey Sand implementiert. Wenn Sie nur diesen Effekt verwenden, wirken die Wüstendünen eher flach und langweilig.


Einer der faszinierendsten Effekte von Journey ist die Körnigkeit des Sandes. Wenn wir uns einen Screenshot ansehen, sehen wir, dass die Dünen nicht glatt und homogen sind, sondern aus Millionen mikroskopisch kleinen Sandkörnern bestehen.


Dieser Effekt kann mit einer Technik namens Bump Mapping erzielt werden, bei der Licht von einer ebenen Oberfläche reflektiert wird, als wäre es komplexer. Sehen Sie, wie dieser Effekt das Erscheinungsbild des Renderings ändert:



Kleine Unterschiede zeigen sich mit zunehmender:

Wir beschäftigen uns mit normalen Karten

Sand besteht aus unzähligen Sandkörnern, von denen jedes seine eigene Form und Zusammensetzung hat (siehe unten). Jedes einzelne Partikel reflektiert das Licht in eine möglicherweise zufällige Richtung. Ein Weg, diesen Effekt zu realisieren, besteht darin, ein 3D-Modell zu erstellen, das all diese mikroskopischen Sandkörner enthält. Aufgrund der unglaublichen Anzahl erforderlicher Polygone ist dieser Ansatz jedoch nicht durchführbar.

Es gibt jedoch eine andere Lösung, mit der häufig eine komplexere Geometrie im Vergleich zu einem echten 3D-Modell simuliert wird. Jeder Scheitelpunkt oder jede Fläche des 3D-Modells ist einem Parameter zugeordnet, der als Normalenrichtung bezeichnet wird . Dies ist ein Längeneinheitsvektor, der zur Berechnung der Lichtreflexion auf der Oberfläche eines 3D-Modells verwendet wird. Das heißt, um Sand zu simulieren, müssen Sie diese scheinbar zufällige Verteilung der Sandkörner simulieren und damit, wie sie die Oberflächennormalen beeinflussen.


Dies kann auf unzählige Arten geschehen. Am einfachsten ist es, eine Textur zu erstellen, die die Richtung der ursprünglichen Normalen des Dünenmodells ändert.

Normal zur Oberfläche $$$N$ im allgemeinen Fall wird es anhand der Geometrie des 3D-Modells berechnet. Sie können es jedoch mit der normalen Karte ändern. Normale Karten sind Texturen, mit denen Sie komplexere Geometrien simulieren können, indem Sie die lokale Ausrichtung der Normalen zur Oberfläche ändern. Diese Technik wird oft als Bump-Mapping bezeichnet .

Das Ändern der Normalen ist eine relativ einfache Aufgabe, die in der surf Funktion des Surface Shader ausgeführt werden kann . Diese Funktion SurfaceOutput zwei Parameter, von denen einer eine struct namens SurfaceOutput . Es enthält alle Eigenschaften, die zum Rendern eines Teils eines 3D-Modells erforderlich sind, von der Farbe ( o.Albedo ) bis zur Transparenz ( o.Alpha ). Ein weiterer Parameter, den es enthält, ist die Normalenrichtung ( o.Normal ), die umgeschrieben werden kann, um die Art und Weise zu ändern, in der Licht auf das Modell reflektiert wird.

Gemäß der Unity-Dokumentation zu Surface Shadern müssen alle Normalen, die in die o.Normal Struktur geschrieben werden, im Tangentialraum ausgedrückt werden :

 struct SurfaceOutput { fixed3 Albedo; // diffuse color fixed3 Normal; // tangent space normal, if written fixed3 Emission; half Specular; // specular power in 0..1 range fixed Gloss; // specular intensity fixed Alpha; // alpha for transparencies }; 

Somit können wir berichten, dass Einheitsvektoren im Koordinatensystem relativ zur Netznormalen ausgedrückt werden müssen. Wenn Sie beispielsweise in o.Normal schreiben, o.Normal Werte von float3(0, 0, 1) normal unverändert.

 void surf (Input IN, inout SurfaceOutput o) { o.Albedo = _SandColor; o.Alpha = 1; o.Normal = float3(0, 0, 1); } 

Dies liegt daran, dass der Vektor float3(0, 0, 1) tatsächlich ein normaler Vektor ist, der relativ zur Geometrie des 3D-Modells ausgedrückt wird.

o.Normal die Normalen zur Oberfläche im Oberflächen-Shader zu ändern, müssen wir in o.Normal nur einen neuen Vektor in die Oberflächenfunktion o.Normal :

 void surf (Input IN, inout SurfaceOutput o) { o.Albedo = _SandColor; o.Alpha = 1; o.Normal = ... // change the normal here } 

Im Rest des Beitrags werden wir die anfängliche Annäherung erstellen, die wir im sechsten Teil des Tutorials verkomplizieren werden.

Sand normal

Am problematischsten ist es zu verstehen, wie sich die Sandkörner normal zur Oberfläche verändern. Obwohl jedes Sandkorn einzeln Licht in jede Richtung streuen kann, passiert im Großen und Ganzen etwas anderes. Jeder physikalisch genaue Ansatz sollte die Verteilung normaler Vektoren auf der Sandoberfläche untersuchen und mathematisch modellieren. Solche Modelle gibt es tatsächlich, aber die in unserem Tutorial vorgestellte Lösung ist viel einfacher und gleichzeitig sehr effektiv.

An jedem Punkt im Modell wird ein zufälliger Einheitsvektor aus der Textur abgetastet. Dann neigt sich die Normale zur Oberfläche um einen bestimmten Betrag in Richtung dieses Vektors. Mit der richtigen Erzeugung einer zufälligen Textur und der Auswahl einer geeigneten Menge an Mischung können wir die Normale so zur Oberfläche verschieben, dass ein Gefühl der Körnigkeit entsteht, ohne die Gesamtkrümmung der Dünen zu verlieren.

Zufällige Werte können mit einer Textur aus zufälligen Farben abgetastet werden. Die Komponenten R, G und B jedes Pixels werden als Komponenten X, Y und Z des Normalenvektors verwendet. Farbkomponenten sind im Sortiment $$$\ left [0, 1 \ right]$ Sie müssen also in ein Intervall konvertiert werden $$$\ left [-1, + 1 \ right]$ . Dann wird der resultierende Vektor normalisiert, so dass seine Länge gleich ist $$$1$ .

Implementierung

Im vorherigen Teil des Tutorials haben wir das Konzept der „normalen Karten“ kennengelernt, als es in der allerersten Gliederung der Oberflächenfunktion auftauchte surf. Wenn Sie sich an das Diagramm am Anfang des Artikels erinnern, sehen Sie, dass zwei Effekte erforderlich sind, um das Rendern von Journey Sand wiederherzustellen. Die erste ( Sandnormalen ), die wir in diesem Teil des Artikels betrachten, und die zweite ( Sandwellen ) werden wir im sechsten Teil untersuchen.

 void surf (Input IN, inout SurfaceOutput o) { o.Albedo = _SandColor; o.Alpha = 1; float3 N = float3(0, 0, 1); N = RipplesNormal(N); // Covered in Journey Sand Shader #6 N = SandNormal (N); // Covered in this article o.Normal = N; } 

Im vorherigen Abschnitt haben wir das Konzept des Bump-Mappings eingeführt, das uns gezeigt hat, dass für einen Teil des Effekts die Textur abgetastet werden muss (dies wird im Code aufgerufen uv_SandTex).

Das Problem mit dem obigen Code ist, dass Sie für Berechnungen die wahre Position des Punktes kennen müssen, den wir zeichnen. Tatsächlich benötigen Sie eine UV-Koordinate , um die Textur abzutasten , die bestimmt, von welchem ​​Pixel gelesen werden soll. Wenn das von uns verwendete 3D-Modell relativ flach ist und eine UV-Umwandlung aufweist, können wir seine UV-Strahlung verwenden, um eine zufällige Textur abzutasten.

 N = WavesNormal(IN.uv_SandTex.xy, N); N = SandNormal (IN.uv_SandTex.xy, N); 

Alternativ können Sie auch die Position IN.worldPosdes gerenderten Punkts in der Welt ( ) verwenden.

Jetzt können wir uns endlich auf SandNormaldie Umsetzung konzentrieren. Wie bereits erwähnt, besteht die Idee darin, ein Pixel aus einer zufälligen Textur abzutasten und es (nach der Konvertierung in einen Einheitsvektor) als neue Norm zu verwenden.

 sampler2D_float _SandTex; float3 SandNormal (float2 uv, float3 N) { // Random vector float3 random = tex2D(_SandTex, uv).rgb; // Random direction // [0,1]->[-1,+1] float3 S = normalize(random * 2 - 1); return S; } 

Kippen Sie die Normalen

Das oben gezeigte Code-Snippet funktioniert, führt aber nicht zu sehr guten Ergebnissen. Der Grund dafür ist einfach: Wenn wir nur eine völlig zufällige Norm zurückgeben, aber im Wesentlichen das Gefühl der Krümmung verlieren. Tatsächlich wird die Richtung der Normalen verwendet, um zu berechnen, wie Licht von der Oberfläche reflektiert werden soll, und der Hauptzweck besteht darin, das Modell entsprechend seiner Krümmung zu schattieren.

Der Unterschied ist in den folgenden Bildern zu sehen. Oben sind die Normalen der Dünen völlig zufällig und es ist unmöglich zu verstehen, wo eine endet und eine andere beginnt. Von unten wird nur die Normale des Modells verwendet, wodurch wir eine zu glatte Oberfläche erhalten.



Beide Lösungen passen nicht zu uns. Wir brauchen etwas dazwischen. Eine zufällige Richtung, die aus einer Textur abgetastet wurde, sollte verwendet werden, um die Normale um einen bestimmten Betrag zu neigen , wie unten gezeigt:


Die im Diagramm beschriebene Operation heißt slerp und steht für sphärische lineare Interpolation (sphärische lineare Interpolation). Slerp funktioniert mit einer Ausnahme genauso wie lerp - es kann verwendet werden, um sicher zwischen Einheitsvektoren zu interpolieren, und das Ergebnis der Operation sind andere Einheitsvektoren.

Leider ist die korrekte Implementierung von slerp ziemlich teuer. Und für einen Effekt, der zumindest zufällig ist, ist es unlogisch, ihn zu verwenden.


Es ist wichtig zu beachten, dass bei Verwendung der traditionellen linearen Interpolation der resultierende Vektor sehr unterschiedlich aussieht:


Die Lerp-Operation zwischen zwei getrennten Einheitsvektoren erzeugt nicht immer andere Einheitsvektoren. Tatsächlich passiert dies nie, es sei denn, der Koeffizient ist$$$1$ oder $$$0$ .

Trotzdem erhalten wir beim Normalisieren des Lerp-Ergebnisses tatsächlich einen Einheitsvektor, der dem Ergebnis von slerp erstaunlich nahe kommt:

 float3 nlerp(float3 n1, float3 n2, float t) { return normalize(lerp(n1, n2, t)); } 

Diese als nlerp bezeichnete Technik liefert eine enge Annäherung an slerp. Seine Verwendung wurde von Casey Muratori , einem der Entwickler von The Witness, populär gemacht . Wenn Sie mehr über dieses Thema erfahren möchten , empfehle ich, Slerp-Artikel zu verstehen. Dann benutze ich es nicht von Jonathan Blow und Math Magician - Lerp, Slerp und Nlerp .

Dank nlerp können wir jetzt normale Vektoren effizient auf eine zufällige Seite kippen, die abgetastet wird von _SandTex:

 sampler2D_float _SandTex; float _SandStrength; float3 SandNormal (float2 uv, float3 N) { // Random vector float3 random = tex2D(_SandTex, uv).rgb; // Random direction // [0,1]->[-1,+1] float3 S = normalize(random * 2 - 1); // Rotates N towards Ns based on _SandStrength float3 Ns = nlerp(N, S, _SandStrength); return Ns; } 

Das Ergebnis ist unten dargestellt:

Was weiter

Im nächsten Teil betrachten wir die flackernden Reflexionen, dank denen die Dünen dem Ozean ähneln.

Danksagung

Das Videospiel Journey wurde von Thatgamecompany entwickelt und von Sony Computer Entertainment veröffentlicht . Es ist für PC ( Epic Store ) und PS4 ( PS Store ) verfügbar .

Von Jiadi Deng werden 3D-Modelle von Dünenhintergründen und Beleuchtungsoptionen erstellt .

Ein 3D-Modell von Journeys Charakter wurde im (jetzt geschlossenen) FacePunch-Forum gefunden.

Einheitspaket

Wenn Sie diesen Effekt wiederherstellen möchten, können Sie das vollständige Unity-Paket von Patreon herunterladen . Es enthält alles, was Sie brauchen, vom Shader bis zum 3D-Modell.