Wie kann ich eine Textur erzeugen, die wie übrig gebliebene Teeblätter aussieht?


11

Wir arbeiten an einem Projekt für iPhone und Windows Phone 7, bei dem wir Teeblätter am Boden einer Tasse erzeugen möchten. Es muss nicht fotorealistisch aussehen, und tatsächlich ist Cartoon-y in Ordnung.

Welche Techniken sollten wir erforschen, um dies zu erreichen? Gibt es Bibliotheken (vorzugsweise in C, aber wir können übersetzen), die hilfreich wären?

Hier sind einige Beispiele aus einer Google Bildsuche

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein


Könnten Sie genauer auf Ihre Anforderungen eingehen? Müssen sie herumwirbeln, jedes Mal anders? Denn wenn es keine Animations- oder Eindeutigkeitsanforderungen gibt, verstehe ich nicht, warum Sie nicht einfach ein Foto / eine Zeichnung als Textur verwenden können.
Phillipwei

@phillipwei Ja, sie müssten jedes Mal anders sein oder zumindest einigermaßen anders, so dass es sich nicht wie Fotos oder was auch immer anfühlt.
Jedidja

Antworten:


15

Wie ich es wahrscheinlich machen würde, damit ich etwas Kunstkontrolle behalten und möglicherweise nicht lange versuchen kann, eine prozedurale Methode zu optimieren, um sie genau richtig zu machen ...

Erstellen Sie zunächst manuell eine Reihe von Sprites aus Teeblattklumpen als Ihren "Kunstpool" - nicht als Teeblätter einer ganzen Tasse, sondern eher als kleinere Gruppierung. Sagen wir, 20 von ihnen oder so?

Dann platzieren Sie eine zufällige Anzahl von ihnen an zufälligen Koordinaten auf der "Cup" -Basis. Geben Sie jeweils eine zufällige Drehung und Skalierung sowie eine zufällige horizontale und / oder vertikale Spiegelung. Dies sollte zu einem guten Ergebnis führen.

Dieser Ansatz gibt Ihnen die künstlerische Freiheit, die einzelnen Klumpen so zu gestalten, dass sie das gewünschte Aussehen haben, und ermöglicht gleichzeitig eine Vielzahl von Ergebnissen (vorausgesetzt, Sie haben genügend Sprites zur Auswahl).

Darüber hinaus können Sie mit dieser (und jeder zufälligen Methode, die auf Perlin-Rauschen basiert) den Zufallszahlengenerator zu Beginn des Prozesses mit einem bekannten Startwert setzen, um reproduzierbare Ergebnisse zu erzielen. Wenn Sie den Startwert speichern, können Sie genau das gleiche Muster erneut erstellen, indem Sie kurz vor Beginn der Sequenz erneut säen. Sie könnten sogar lustige Dinge tun, wie jemanden seinen Namen eingeben lassen, die Buchstaben in eine Zahl umwandeln (Summe ASCII usw.) und diese dann als Keim für eine Art "dieses für SIE angepasste Teeblattmuster" verwenden! Sache.

Hier ist ein Pseudocode für das, was ich meine, wenn das hilft ...

var sprites = [...]; // Array of tea leaf sprites

var n_leaves = rand(5)+5; // Random number of leaves from 5-9
for (i=0; i<n_leaves; i++) {
    var sprite_index = rand(sprites.length);  // Random sprite index
    var r = rand(CUP_DIAMETER);          // Random radius for point on disk calc
    var theta = rand(2*PI);              // Random theta (rotation) for point on disk
    var sprite_x = sqrt(r) * cos(theta); // Sprite X
    var sprite_y = sqrt(r) * sin(theta); // Sprite Y
    var sprite_rotation = rand(2*PI);    // Sprite rotation
    var sprite_scale = rand(1) + 0.5;    // Sprite scale from 0.5 to 1.5
    var sprite_h_mirror = (rand(1) < 0.5 ? true : false); // If true, mirror horizontally
    var sprite_v_mirror = (rand(1) < 0.5 ? true : false);   // If true, mirror vertically
    draw_sprite(sprite_index, sprite_x, sprite_y, sprite_rotation, sprite_h_mirror, sprite_v_mirror);
}

Unter http://mathworld.wolfram.com/DiskPointPicking.html finden Sie eine großartige Diskussion darüber, wie Sie einen zufälligen Punkt auf einer Festplatte auswählen und warum ich diese ganze Sache mit sqrt / sin / cos verwende.


7

Versuchen Sie es mit Perlin-Rauschen mit einem binären Grenzwert von 0,8 oder so?

Beispielbild auf http://imgur.com/a/Ydc4y hochgeladen . Das erste ist das zweite Bild mit einem angewendeten Schwellenwert. Das zweite ist das grundlegende Perlin-Rauschen, für das Sie mehrere gute Referenzen finden können, z. B. http://en.wikipedia.org/wiki/Perlin_noise und http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter26.html .

Sie können ein wenig mit der Anzahl und Skala der Oktaven im Perlin-Rauschen spielen, um zu variieren, wie flüssig die Ausgabe aussehen wird, sowie mit dem Schwellenwert, um zu bestimmen, wie viel (im Durchschnitt - wie es Rauschen ist) Teeblätter vorhanden sind.


3
Dies könnte eine bessere Antwort mit einigen Links und Beispielen dessen sein, was produziert werden könnte.
MichaelHouse

Gute Idee, obwohl statische Bilder verwendet werden können und ein kreisförmiger Bereich in einem Pixel-Shader eingeklemmt werden kann und die Kanten dieses Kreises herausgefedert werden können, ohne dass ein Perlin-Rauschwert pro Pixel erzeugt werden muss (meiner Erfahrung nach ist diese Methode etwas langsam ).
Teodron

Das Perlin-Rauschen selbst zu erzeugen ist etwas schwer; Sie können jedoch eine vorberechnete Rauschtextur für diesen (und viele andere) Effekt verwenden. Sie können die Methode auch verwenden, um einige vorab zu berechnen.
Dascandy

4
-1. Nachdem ich mir viele Teeblätter und viel Sumlin (1 / f) Perlin-Lärm angesehen habe, kann ich nicht sagen, dass sie sich alle gleich sehen. Perlin-Rauschen mag der richtige Ausgangspunkt sein, aber das Ziel ist nicht für die übliche Summenvariante (1 / f) geeignet.

1
Ich stimme zu, dass der Perlin-Noise-Ansatz unpraktisch ist. Um dies zu überprüfen, habe ich versucht, den Effekt in Photoshop ausgehend von Perlin-Rauschen neu zu erstellen. Hier ist das Ergebnis . Obwohl ich denke, dass es in Ordnung aussieht, liegt das Problem in der Menge an Optimierungen, die ich vornehmen musste. Ich kann mir nicht wirklich vorstellen, wie ich all diese Optimierungen prozedural nachvollziehen kann, deshalb stimme ich für den von Tim Holt vorgeschlagenen Sprite-basierten Ansatz.
David Gouveia
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.