Wie einen "Bevel-Effekt" programmieren?



  • Hallo zusammen,

    seit einiger Zeit schon bin ich auf der Suche nach einem Methode einen Bevel-Effekt zu implementieren. Mit Bevel-Effekt sind die abgeschrägten Kanten an beliebigen Formen gemeint, wie z.b. die Funktion "Abgeflachte Kante und Relief" bei Photoshop.

    Beispiel, wobei der weiße Hintergrund als Transparent definiert wäre:
    http://www.green-coding.de/bevel1.jpg

    Bei einfachen Rechteckigen Formen ist das ganze noch nachvollziehbar und relativ simpel zu gestalten, bei beliebigen Formen (zum teil auch Rund)
    wird die Sache schon komplizierter 😕
    Genau wie in Photoshop sollten auch die Parameter Farbtiefe, Richtung, Größe und Weichzeichnen verwendet werden können.

    Bisher wurde ich noch nicht fündig, vieleicht kann mir ja jemand weiter helfen.

    viele Grüße
    Newton1976



  • kann man das nicht über hoch/tiefpass filter realisieren? also dieses relieff kann man glaub ich über den sobel filter machen. (oder red ich grad am thema vorbei?)



  • Hallo,

    sorry, Relief war irreführend, es heißt bei Photoshop leider so.
    Ich meine den Bevel-Effekt (abgeflachte Kanten) wie er bei Buttons oder ähnliches auch oft angewendet wird, siehe Link:

    http://www.green-coding.de/bevel1.jpg



  • Ich denke mal, die erkennen einfach die Kante des Objekts, erzeugen dann eine Rand mit n Pixeln und beleuchten den je nach Winkel.

    Bye, TGGC (Dem beste BdT)



  • Ist Bevel nicht normalerweise nur das breiter bzw. schmaler machen? In einem 3D-Programm würde ich, um den gezeigten Effekt zu erziehlen die Fläche zunächst extrudieren und dann per Bevel die eine Seite schmälern.



  • k.A. was n'Bevel-Effekt ist 🙂
    Wozu brauchst Du das? Für ne Textur? dynamisch? Wenn ja, sowas wie auf dem Bild kriegst Du mit ner Normalmap hin, d.h. in einer zusätzlichen Textur speicherst Du die Normalen auf Deiner Textur. Daraus kann das Licht für jeden Pixel auf der Textur berechnet werden.



  • Nein, mit Beveleffekt meine ich folgendes:

    http://www.green-coding.de/bevel1.jpg



  • durito schrieb:

    k.A. was n'Bevel-Effekt ist 🙂
    Wozu brauchst Du das? Für ne Textur? dynamisch? Wenn ja, sowas wie auf dem Bild kriegst Du mit ner Normalmap hin, d.h. in einer zusätzlichen Textur speicherst Du die Normalen auf Deiner Textur. Daraus kann das Licht für jeden Pixel auf der Textur berechnet werden.

    siehe http://www.green-coding.de/bevel1.jpg :

    solche Grafiken (oder shapes) sollen dynamisch mit einem bevel-effekt versehen werden.



  • Aufgrund einer Lichtquelle, die sich ändern kann? ->Normalmap (OpenGL/D3D)
    sonst: Weiss auch nicht 🙂



  • Liest du eigentlich hin und wieder die Anworten, oder willst du einfach nur noch'n bissl dein Bild posten?

    Bye, TGGC (Dem beste BdT)



  • Mit TGGCs Vorschlag sollte es doch gehen.



  • TGGC schrieb:

    Liest du eigentlich hin und wieder die Anworten, oder willst du einfach nur noch'n bissl dein Bild posten?

    Bye, TGGC (Dem beste BdT)

    Natürlich, es macht freude das Bild zu posten 😡 Wenn ich damit deine Gefühle verletzt haben soll dann entschuldige ich mich! Warum schreibst du solche Beiträge??

    Ich poste das Bild weil ich glaube bisher hat noch niemand wirklich verstanden was das Problem ist.

    Dein Zitat: Ich denke mal, die erkennen einfach die Kante des Objekts, erzeugen dann eine Rand mit n Pixeln und beleuchten den je nach Winkel.

    In Etwa ist das Richtig, Kante könnte ich noch detektieren, aber die Beleuchtung des Randes würde Probleme bereiten.



  • interpreter schrieb:

    Mit TGGCs Vorschlag sollte es doch gehen.

    Die Kanten könnte ich herausfinden, nur wie den Lichteinfall berechnen?



  • vielleicht könntest du den Rand, den du ermittelt hast, aus den Bilddaten extrahieren und in ein dreidimensionales Objekt umrechnen, und dann die Beleuchtung ermitteln.
    😃
    Das klingt eigentlich total abenteuerlich und wird warscheinlich auch nicht so gemacht. Aber einen Versuch ist es wert 👍 😉



  • Gewöhn Dich an solche Beiträge hier.. *g*
    Aber eigentlich würds tatsächlich reichen, einmal das Bild zu posten..

    Was willst Du denn damit machen? n'Spiel? Mal überlegt, ob Du diese Arbeit in Deinem Projekt nicht an OpenGL/D3D abgeben kannst? Wie siehts mit der Lichtquelle aus, ist die dynamisch? etc, etc...



  • Uebrigens, da faellt mir ein, hab mal n'Bumpmap-Generator geschrieben. Hab Dein Bild mal durchrattern lassen und diese normalmap rausbekommen:

    http://home.zhwin.ch/~bcd/bump.JPG

    Das waer doch schon mal was..



  • randa schrieb:

    vielleicht könntest du den Rand, den du ermittelt hast, aus den Bilddaten extrahieren und in ein dreidimensionales Objekt umrechnen, und dann die Beleuchtung ermitteln.
    😃
    Das klingt eigentlich total abenteuerlich und wird warscheinlich auch nicht so gemacht. Aber einen Versuch ist es wert 👍 😉

    Vermutlich wäre das eine Lösung, aber vermutlich auch zu aufwendig. Trotzdem danke.



  • durito schrieb:

    Uebrigens, da faellt mir ein, hab mal n'Bumpmap-Generator geschrieben. Hab Dein Bild mal durchrattern lassen und diese normalmap rausbekommen:

    http://home.zhwin.ch/~bcd/bump.JPG

    Das waer doch schon mal was..

    hi,

    danke für die "geBumbmappte" Grafik, irgendsowas in der Richtung wirds wohl werden.

    Mittels OpenGL zu implementieren hatte ich nicht vor, es wäre einfach zu aufwendig, aus der Shape ein 3D Objekt generieren, die Kanten "Fasen" oder "Abflachen" und dann den Lichteinfall berechnen und daraus wieder eine Bitmap generieren.

    Das ganze wird jegendlich dazu dienen Hintergründe für beliebige Windowsfenster zu generieren, quasi Rahmen und Kanten durch den Beveleffekt zu berechnen, wobei diese Formen allerdings beliebig sein können.
    Falls du Photoshop hast kannst du dir das ja mal angucken,
    die Funktion gibts im Layer-Fenster und heißt "Abgeflachte Kanten und..."
    Was denen im Photoshop möglich ist sollte man doch auch programmieren können.



  • Naja, obwohl: Um die Beleuchtung für den entsprechenden Rand zu bekommen, kannst dus auch ganz einfach machen: Du hast das licht, und die Ränder kennst du auch, zusammen mit dem gesamten Bild. Nun kannst du auf zweidimensionaler Ebene checken, ob der Lichvektor das Bild bereits schneidet, bevor er zum Rand hinkommt. Wenn ja, dann ist der Rand nicht beleuchtet, da das Licht den Rand nicht erreicht und vorher irgendwo das Bild berührt hat. Wenn er es nicht schneidet, dann gibts kein hindernis zwischen Rand und Licht, und du kannst den entsprechenden Randbereich hell machen.
    Natürlich funktioniert das nicht für Licht, das direkt von oben einstrahlt, dann müsstest du es schon dreidimensional machen. Wenn du andere Hindernisse zwischen Bild und Licht berücksichtigen willst, musst du das Pixelgenau machen. In dem Fall müsstest du auch nur die Randpixel des Bildes testen, und keinen Pixel innerhalb des Bildes.
    Für dreidimensional würde ich vorschlagen, dass du für jeden Pixel des Bildes eine Höheninformation einträgst und damit den Winkel zwischen Licht und Pixel bestimmst, also ähnlich dem Phong-Shading.



  • randa schrieb:

    Naja, obwohl: Um die Beleuchtung für den entsprechenden Rand zu bekommen, kannst dus auch ganz einfach machen: Du hast das licht, und die Ränder kennst du auch, zusammen mit dem gesamten Bild. Nun kannst du auf zweidimensionaler Ebene checken, ob der Lichvektor das Bild bereits schneidet, bevor er zum Rand hinkommt. Wenn ja, dann ist der Rand nicht beleuchtet, da das Licht den Rand nicht erreicht und vorher irgendwo das Bild berührt hat. Wenn er es nicht schneidet, dann gibts kein hindernis zwischen Rand und Licht, und du kannst den entsprechenden Randbereich hell machen.
    Natürlich funktioniert das nicht für Licht, das direkt von oben einstrahlt, dann müsstest du es schon dreidimensional machen. Wenn du andere Hindernisse zwischen Bild und Licht berücksichtigen willst, musst du das Pixelgenau machen. In dem Fall müsstest du auch nur die Randpixel des Bildes testen, und keinen Pixel innerhalb des Bildes.
    Für dreidimensional würde ich vorschlagen, dass du für jeden Pixel des Bildes eine Höheninformation einträgst und damit den Winkel zwischen Licht und Pixel bestimmst, also ähnlich dem Phong-Shading.

    Bei "geschlossenen" Shapes würde das vermutlich funktionieren. Bei Shapes mit "Löchern" (Siehe Grafik die ich ja nimmer posten darf), würde der Lichstrahl (oder Vektor) wieder seine gültigkeit erreichen sobald er wieder einen freien (transparenten) bereich des Bildes gekreuzt hat. So mit darf der dann den nächsten Rand den er schneidet wieder aufhellen.

    Das wäre zumindest mal einen Versuch wert 🙂 danke vielmals


Log in to reply