Animierte Texturen für Modelle; Wie schreibe ich einen Shader?

Ich habe eine Rocket League gesehen und festgestellt, dass es animierte Abziehbilder und Räder gibt.

.

Ich möchte etwas Ähnliches wie die Effekte im obigen Bild implementieren.

Wie würde ich einen Unity Shader schreiben, um den Radeffekt zu erzielen?

Ich weiß nicht viel über Shader, aber kann ich den Standard-Unity-Shader bearbeiten, um den Animationseffekt auszuführen?

Ich werde dies in ein paar Schichten aufbauen, damit Sie sehen können, wie es zusammenkommt.

Beginnen Sie mit dem Erstellen eines neuen Shaders in Unity, indem Sie Create --> Shader --> Unlitentweder das Menü "Assets" oder das Kontextmenü mit der rechten Maustaste im Projektfenster auswählen .

Im oberen Block fügen wir einen _ScrollSpeedsParameter hinzu, um zu steuern, wie schnell sich die Textur in jede Richtung bewegt:

Properties
{
    _MainTex ("Texture", 2D) = "white" {}
    _ScrollSpeeds ("Scroll Speeds", vector) = (-5, -20, 0, 0)
}

Dadurch wird eine neue 4-Komponenten-Float-Eigenschaft im Materialinspektor mit dem Anzeigenamen "Bildlaufgeschwindigkeiten" verfügbar gemacht (ähnlich wie beim Hinzufügen einer publicoder einer SerializedVariablen zu einem MonoBehaviourSkript).

Als Nächstes verwenden wir diese Variable im Vertex-Shader, um die Texturkoordinaten ( o.uv) zu verschieben, indem wir dem Standard-Shader nur zwei Zeilen hinzufügen:

sampler2D _MainTex;
float4 _MainTex_ST;
// Declare our new parameter here so it's visible to the CG shader
float4 _ScrollSpeeds;

v2f vert (appdata v)
{
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex);
    o.uv = TRANSFORM_TEX(v.uv, _MainTex);

    // Shift the uvs over time.
    o.uv += _ScrollSpeeds * _Time.x;

    UNITY_TRANSFER_FOG(o,o.vertex);
    return o;
}

Schlagen Sie das auf ein Quad (mit einer schönen freien Giraffentextur von Kenney ) und Sie erhalten:

Um die Textur in einem Ring nach außen zu scrollen, könnten wir einfach ein Netz verwenden, das wie ein Spinnennetz unterteilt ist, wobei die UV-V-Koordinate von der Mitte nach außen zunimmt. Aber das wird einige sägeblattförmige Artefakte für sich ergeben. Stattdessen werde ich zeigen, wie wir unsere UVs pro Fragment berechnen können.

Dies ist etwas kostspieliger, sowohl aufgrund der Trigger- und Längenoperationen (die teurer sind als die grundlegende Mathematik) als auch, weil es nicht so effizient ist, Texturdaten in der Hardware vorherzusagen und zwischenzuspeichern, wenn Texcoords pro Fragment berechnet werden, als sie nur zu interpolieren zwischen Eckpunkten. Aber für einen kleinen Spezialeffekt wie diesen ist es nicht übertrieben.

v2f vert (appdata v)
{
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex);

    // Shift the UVs so (0, 0) is in the middle of the quad.
    o.uv = v.uv - 0.5f;

    UNITY_TRANSFER_FOG(o,o.vertex);
    return o;
}

fixed4 frag (v2f i) : SV_Target
{
    // Convert our texture coordinates to polar form:
    float2 polar = float2(
           atan2(i.uv.y, i.uv.x)/(2.0f * 3.141592653589f), // angle
           length(i.uv)                                    // radius
        );

    // Apply texture scale
    polar *= _MainTex_ST.xy;

    // Scroll the texture over time.
    polar += _ScrollSpeeds.xy * _Time.x;

    // Sample using the polar coordinates, instead of the original uvs.
    // Here I multiply by MainTex
    fixed4 col = tex2D(_MainTex, polar);

    // apply fog
    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}

Das gibt uns ungefähr so ​​etwas (hier habe ich die Kachelparameter im Material erhöht, damit klarer wird, was passiert - nur eine einzige Wiederholung der Kachel um den Kreis zu wickeln sieht verzerrt und seltsam aus)

Um die Textur durch einen Bildlaufverlauf zu tönen, können wir den Verlauf einfach als zweite Textur hinzufügen und miteinander multiplizieren.

Zuerst fügen wir den neuen Texturparameter oben hinzu:

Properties
{
    _MainTex ("Texture", 2D) = "white" {}
    _TintTex("Tint Texture", 2D) = "white" {}
    _ScrollSpeeds ("Scroll Speeds", vector) = (-5.0, -20.0, 0, 0)
}

Und deklarieren Sie es in unserem CGPROGRAM-Block, damit der CG-Shader es sehen kann:

sampler2D _MainTex;
float4 _MainTex_ST;

// Declare our second texture sampler and its Scale/Translate values
sampler2D _TintTex;
float4 _TintTex_ST;

float4 _ScrollSpeeds;

Aktualisieren Sie dann unseren Fragment-Shader, um beide Texturen zu verwenden:

fixed4 frag(v2f i) : SV_Target
{
    float2 polar = float2(
           atan2(i.uv.y, i.uv.x) / (2.0f * 3.141592653589f), // angle
           length(i.uv)                                    // radius
        );

    // Copy the polar coordinates before we scale & shift them,
    // so we can scale & shift the tint texture independently.
    float2 tintUVs = polar * _TintTex_ST.xy;
    tintUVs += _ScrollSpeeds.zw * _Time.x;

    polar *= _MainTex_ST.xy;
    polar += _ScrollSpeeds.xy * _Time.x;

    fixed4 col = tex2D(_MainTex, polar);
    // Tint the colour by our second texture.
    col *= tex2D(_TintTex, tintUVs);

    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}

Und jetzt wird unsere Giraffe richtig trippig:

Mit einer etwas künstlerischeren Auswahl von Texturen und Bildlaufraten kann dies einen Effekt erzeugen, der dem in der Frage gezeigten sehr ähnlich ist.

Möglicherweise stellen Sie bei der oben gezeigten Version zwei kleine Artefakte fest:

• Die Gesichter in der Nähe des Kreismittelpunkts werden gestreckt / dünn / spitz, und wenn sie sich nach außen bewegen, werden sie gequetscht / breit.

  Diese Verzerrung tritt auf, weil wir eine feste Anzahl von Flächen um den Umfang haben, aber der Umfang, den sie überspannen, wird größer, wenn der Radius zunimmt, während ihre Höhe gleich bleibt.

  Wir können dies beheben, indem wir die vertikale Komponente der Texturprobe neu zuordnen, um einer logarithmischen Kurve zu folgen, sodass Wiederholungen der Textur mit zunehmendem Radius weiter auseinander liegen und näher an der Mitte liegen. (Tatsächlich gibt uns dies einen unendlichen Rückschritt von immer kleineren Giraffen ...)

• Es gibt eine Reihe von ein oder zwei verschwommenen Pixeln in der Mitte links des Quad.

  Dies liegt daran, dass die GPU zwei benachbarte Texturbeispielkoordinaten betrachtet, um herauszufinden, welche Filterung verwendet werden soll. Wenn die Samples nahe beieinander liegen, wird die Textur groß / nah angezeigt und der detaillierteste Mip-Level angezeigt. Wenn die Samples weit voneinander entfernt sind, müssen wir die Textur vermutlich mit einem winzigen Zoom oder weit entfernt anzeigen und sie werden von einer kleineren / unschärferen Mipmap abgetastet, um sicherzustellen, dass wir keine funkelnden Aliasing-Artefakte erhalten.

  Das Problem ist hier, wir sind am Umlaufpunkt in Polarkoordinaten von -180 bis 180 Grad. Wir probieren also tatsächlich von sehr ähnlichen Punkten in unserem sich wiederholenden Texturraum aus, selbst wenn ihre numerischen Koordinaten sie so aussehen lassen, als wären sie weit voneinander entfernt. Daher können wir unsere eigenen Abtastgradientenvektoren bereitstellen, um dies zu korrigieren.

Hier ist eine Version mit diesen Korrekturen:

fixed4 frag(v2f i) : SV_Target
{
    float2 polar = float2(
           atan2(i.uv.y, i.uv.x) / (2.0f * 3.141592653589f), // angle
           log(dot(i.uv, i.uv)) * 0.5f                       // log-radius
        );

    // Check how much our texture sampling point changes between
    // neighbouring pixels to the sides (ddx) and above/below (ddy)
    float4 gradient = float4(ddx(polar), ddy(polar));

    // If our angle wraps around between adjacent samples,
    // discard one full rotation from its value and keep the fraction.
    gradient.xz = frac(gradient.xz + 1.5f) - 0.5f;

    // Copy the polar coordinates before we scale & shift them,
    // so we can scale & shift the tint texture independently.
    float2 tintUVs = polar * _TintTex_ST.xy;
    tintUVs += _ScrollSpeeds.zw * _Time.x;

    polar *= _MainTex_ST.xy;
    polar += _ScrollSpeeds.xy * _Time.x;

    // Sample with our custom gradients.
    fixed4 col = tex2Dgrad(_MainTex, polar, 
                           _MainTex_ST.xy * gradient.xy,
                           _MainTex_ST.xy * gradient.zw
                         );

    // Since our tint texture has its own scale,
    // its gradients also need to be scaled to match.
    col *= tex2Dgrad(_TintTex, tintUVs,
                          _TintTex_ST.xy * gradient.xy,
                          _TintTex_ST.xy * gradient.zw
                         );

    UNITY_APPLY_FOG(i.fogCoord, col);
    return col;
}