Eine 3D-Buttongrafik mittels 2D-Technik

[torud]

Hallo Wissende!

Ich würde gern wissen, ob und wenn ja, wie es möglich ist eine Grafik zu erstellen, die aussieht wie 3D obwohl sie nur mit 2d-Mitteln erstellt wurde.

Als Grundlage würde ich gern wie folgt vorgehen.

1. Die erste Ebene ist nur ein Schwarz-weiss-Bild, welches die Form des Buttons darstellt (rund, rechteckig, rechteck mit runden ecken usw.)

2. Die zweite Ebene ist die farbliche Gestaltung. Also Farbverläufe, Texturen, was auch immer.

3. Hier kommt der wohl eigentliche Knackpunkt. Um den Button wirklich 3D-technisch aussehen zu lassen, bedarf es meiner Meinung nach eines BumpMaps!? Korrigiert mich bitte, wenn ich irre.

Wäre das so richtig?
Und wenn ja, wie kann ich realisieren, all diese 3 Ebenen mittel Delphi in ein Bild zu verwandeln???

Danke für sachdienliche Hinweise!

[loetmann]

Hallo,

also so etwas wie Abgeflachte Kante und Relief + Füllung unter Photoshop?

ja, es geht.

-guck Dir an wie Du ein Relief erzeugst und dieses mit einer "Textur" mixen kannst.

Eine Bumpmap brauchst Du nicht unbedingt wenn Du es über Relief lösen möchtest.

Du kannst natürlich auch eine kleine Renderengine bauen, dann kannst Du
auch die Perspektivischen Verzerrungen berücksichtigen (was aber für ein Button
übertrieben ist).

Also 3 brauchst Du meiner Meinung nicht unbedingt, es sei Du willst noch
Strukturen (z.B. Stoff, Noise) mit einfließen lassen.

Ein Gruß

[torud]

Hallo!

Also mit PhotoShop will ich eben nix machen. Ich möchte dies möglichst alles mit eigenen Prozeduren abhandeln.

Mir ist allerdings noch unklar, wie ich eigene Effekte, wie 3D-Relief etc. hinbekommen kann.

Hat noch jemand einen Vorschlag???

[loetmann]

Hallo,

das mit Photoshop ist nur ein Beispiel für Bild/be/ver/arbeitung.

Ein Relief kannst Du über Verschiebung hinbekommen-und eben das kann mann z.B. mit PS ausprobieren.

z.B.-erstelle eine dunkle Fläche
-erzeuge eine neue Ebene male eine Form (z.B. gefüllter Kreis)
-dupliziere die Form
-verschiebe das Duplikat um 1 Pixel nach rechts und unten (Stichwort: Matrize)
-verknüpfe die Ebene mit Multipliezieren (Stichwort: Bitbld o.ä.)
und schon Du hast etwas reliefartiges.

so und nu weiß Du wie man ungefähr vorgehen kann und es muß "nur" noch in code gegossen werden.

Weiter weiß ich jetzt auch nicht, währe aber mein Ansatzpunkt wenn ich sowas vorhätte.

Ein Gruß

[torud]

hallo!

abgesehen davon, dass ich nicht genau wüsste, wie ich deinen vorschlag codetechnisch umsetzen müsste, denke ich, dass das mit dem dupilizierten kreis oder rechteck, welches dann versetzt werden soll nur bedingt wie ein echter 3d-Button aussieht.

oder kann ich es mir einfach nicht vorstellen???

[Rastaman]

Jo :D
Einfaches Beispiel siehe Anhang

[torud]

ok, dass sind 2 buttons!

wenn du mir nun noch sagst, dass du die mittels delphi realisiert hast, bist du in diesem thema genau richtig, denn wie man einen button mit einem grafiktool erstellt, ist mir klar.

also gib mal m´ne info, falls das mittel delphi kreierte buttins sind...

[Rastaman]

Nein natürlich nicht.
Ich wollte dir nur zeigen wie einfach es ist so einen Button zu machen.
Das macht doch keinen Sinn sich so eine Mühe zu machen um das selbe ergebnis zu erhalten, oder?
So viel Code wie du da brauchst, da kannst du gleich n bild nehmen.
Als gif war es sogar nur 4kb

[torud]

naja ich werde es wohl oder übel dann mit fertigen templates machen müssen.

bleibt nur noch das problem, dass schrift, die mit textout auf ein bild geschrieben wurde von eher schlechter qualität ist...

[Khabarakh]

Schreibe den Text in ein seperates Bitmap und dann mit Blur drüber. Und solch ein Button wie oben müsste eigentlich mit Delphi schaffbar sein: Erstes Bitmap mit den Schattierungen erstellen (+ Blur), in ein zweites die Textur laden, im dritten den Text erstellen (+ Schatten), dann alle drei verschmelzen.

EDIT: Der Button oben hat ja gar keine Textur, das wäre allerdings nicht das schwerste.

[torud]

Hallo!

Danke für den Tipp.

Leider war nichts mit GBlur zu finden in der Suchfunktion!
Habe ich was falsches eingegeben???

[Khabarakh]

Zitat:

Zitat von torud

Hallo!

Danke für den Tipp.

Leider war nichts mit GBlur zu finden in der Suchfunktion!
Habe ich was falsches eingegeben???

Gut, es steht immer nur Blureffekt da, aber so viele Multimedia CodeLib-Einträge gibt es doch eigentlich nicht :wink: .
http://www.delphipraxis.net/internal...ct.php?t=24623

[torud]

OK, vielen Dank!

Bleibt mir noch unklar, wie ich die 3 Bilder miteinander verschmelzen kann!???

werde aber mal wieder die suchfunktion bedienen!

[Khabarakh]

Wenn es keine geeignete Einstellungen von BitBlt gibt, wirst du wohl oder übel eine eigene Prozedur über Scanline schreiben müssen.
Ein Beispiel für Textur + Schatten:

Delphi-Quellcode:

procedure foo(bSource, bDest: TBitmap);  //Der Schatten ist die Quelle, die Textur das Ziel
var pSource, pDest: PRGBQuad;
begin
  bSource.PixelFormat:=pf32bit;
  bDest.PixelFormat:=pf32bit;
  [...]
      pDest^.rgbtRed:=pDest^.rgbtRed-(255-pSource^.rgbtRed);
      pDest^.rgbtBlue:= [...]
  //  Wenn der Pixel in der Schatten-Bitmap weiß ist, wird an bSource nichts verändert, sonst eben dunkler
end;

[torud]

Hallo Sebastian!

Also Text mit Schatten habe ich nun schon so gelöst:

Delphi-Quellcode:

          Image3.Canvas.Font := Schatten.Font;
          Image3.Canvas.Brush.Style := bsClear;
          Image3.Canvas.TextOut(24 , 7, ed_text.Text);
          BmpGBlur(Image3.Picture.Bitmap,3);

          Image3.Canvas.Font := FontDialog1.Font;
          Image3.Canvas.Brush.Style := bsClear;
          Image3.Canvas.TextOut(22 , 6, ed_text.Text);

          BmpGBlur(Image3.Picture.Bitmap,0.05);

Ist erstmal nur ein statischer Test gewesen, sah aber im Ergebnis nicht schlecht aus!

Irgendwie sehen aber meine Buttons noch zu Flach aus!

[Khabarakh]

Ich hatte eigentlich die Buttontextur an sich (oder eben einfach ne einfarbige fläche) + die Schattierungen am Rand des Buttons (für den Tiefeneffekt) gemeint :wink: .

[torud]

Ups!

Na wenn das nicht ein klassisches Mißverständnis war...

Also so richtig verstanden habe ich das noch nicht, wie das zum Einsatz, kommt, werde es mir aber mal ansehen und etwas damit "experimentieren", vermute aber, dass ich in ein TImage ein Graik laden soll, oder in ein Bitmap, wie auch immer und dann deine Procedure darauf anwenden soll.

Mal sehen, wie weit ich komme...vielen Dank...

[torud]

Hi Sebastian!

Also ich habe mal Deinen Code probiert, bin aber leider gescheitert.

Delphi-Quellcode:

procedure foo(bSource, bDest: TBitmap);  //Der Schatten ist die Quelle, die Textur das Ziel
var pSource, pDest: PRGBQuad;
begin
  bSource.PixelFormat:=pf32bit;
  bDest.PixelFormat:=pf32bit;

      pDest^.rgbRed  := pDest^.rgbRed-(255-pSource^.rgbRed);
      pDest^.rgbBlue := pDest^.rgbBlue-(255-pSource^.rgbBlue);
      pDest^.rgbGreen := pDest^.rgbGreen-(255-pSource^.rgbGreen);
  //  Wenn der Pixel in der Schatten-Bitmap weiß ist, wird an bSource nichts verändert, sonst eben dunkler
end;

Also ich habe Deine Prozedur nun etwas vervollständigt. Sollte bestimmt eine kleine Aufgabe für mich sein. Ich rufe nun diese Prozedure wie folgt auf.

Delphi-Quellcode:

procedure TForm1.Button1Click(Sender: TObject);
var
    MyBit:TBitmap;
begin
    myBit:=TBitmap.Create;
    MyBit.Assign(Image.Picture.Graphic);
        foo(MyBit,Image1.Picture.Bitmap);
end;

In Image befindet sich ein Jpeg, deshalb weise ich es vorher noch einem Bitmap zu. Allerdings tut sich in dest - dem Image1 nichts. Wie auch. Ich glaube, dass in der foo-procedure noch nichts zurückgeschrieben wird. Oder??? Kannst Du noch etwas helfen?

[Khabarakh]

Du solltest dir mal ein Tutorial über Pointer und Scanline suchen. Am Anfang hat das geklungen, als ob du eine eigene Render-Engine zusammenbauen wolltest, deahlb habe ich gedacht, ScanLine wäre kein Problem :wink: .
Schon länger nichts mehr mit ScanLine gemacht, das sollte es aber sein:

Delphi-Quellcode:

procedure foo(bSource, bDest: TBitmap);  //Der Schatten ist die Quelle, die Textur das Ziel
var pSource, pDest: PRGBQuad;
    x, y: Integer;
begin
  bSource.PixelFormat:=pf32bit;
  bDest.PixelFormat:=pf32bit;
  for y:=0 to bDest.Height-1 do
  begin
    pSource:=bSource.Scanline[y];
    pDest:=bDest.Scanline[y];
    for x:=0 to Bitmap.Width-1 do
    begin
      pDest^.rgbRed  := pDest^.rgbRed-(255-pSource^.rgbRed);
      pDest^.rgbBlue := pDest^.rgbBlue-(255-pSource^.rgbBlue);
      pDest^.rgbGreen := pDest^.rgbGreen-(255-pSource^.rgbGreen);
      //  Wenn der Pixel in der Schatten-Bitmap weiß ist, wird an bSource nichts verändert, sonst eben dunkler
      Inc(pDest);
      Inc(pSource)
    end
  end 
end;

[torud]

Hallo Sebastian!

Also ich bin leider kein Experter mit BitBlt und Scanline!
Das mit dem Tut zu diesem Thema ist keine schlechte Idee.

Naja ich denke, dass wir uns da wohl etwas missverstnanden haben. Eine eigene Engine wäre wohl für meinen Kenntnisstand etwas zu hochgegriffen. Ich würde mir zwar gern einen eigenen Button-Creator erstellen, aber ich denke, dass ich da wohl weiter davon entfernt bin, als mir lieb ist und ich habe in nunmehr 3 Foren keine Infos erhalten, wie ich ein solches Tool, wie es z.B. Crystal-Button, mit verstehbaren Mitteln erstellen kann.

Und was die foo-procedure angeht. Die tuts nun. Was auch immer sie machen soll, sie macht nicht das, wovon ich dachte, dass sie es tun würde...alles bleibt flach...danke ciao

[Khabarakh]

Hier mal ein Beispiel, damit überhaupt klar ist, was ich meine :mrgreen: .
Bei meiner foo-Prozedur musste ich allerdings noch eine Hilfsprozedur hinzufügen:

Delphi-Quellcode:

procedure foo(bSource, bDest: TBitmap);  //Der Schatten ist die Quelle, die Textur das Ziel

  function RoundByte(Value: Single): Byte;
  var x: Integer;
  begin
    x:=Round(Value);
    if x>255 then
      x:=255
    else
      if x<0 then
        x:=0;
    Result:=x;
  end;

var pSource, pDest: PRGBQuad;
    x, y: Integer;
begin
  [...]
      pDest^.rgbRed  :=RoundByte( pDest^.rgbRed-(255-pSource^.rgbRed));
      pDest^.rgbBlue :=RoundByte( pDest^.rgbBlue-(255-pSource^.rgbBlue));
      pDest^.rgbGreen :=RoundByte( pDest^.rgbGreen-(255-pSource^.rgbGreen));
      //  Wenn der Pixel in der Schatten-Bitmap weiß ist, wird an bSource nichts verändert, sonst eben dunkler
      Inc(pDest);
      Inc(pSource)
    end
  end
end;

[torud]

Hallo Sebastian!

Vielen Dank für das anschauliche Beispiel!

Mit dem mir nun zur Verfügung stehenden Wissen, werde ich versuchen, dass was ich vor hatte, doch noch zu realisieren. Ich werde mal versuchen, die ein oder andere Abwandlung auf das Projekt zu projizieren, um vielleicht auch kreisförmige Buttons und Buttons mit "runden Ecken" herauszubekommen. Ich denke, dass ich dann einfach nichts mit FillRect machen darf. Mal schauen, wie weit ich komme.

Mal sehen, ob ich noch herausbekomme, wie ich einen farbigen Rahmen um die Buttons und so was wie einen Beleuchtungseffekt bekomme. Du hast mir echt geholfen! Sollte ich das Projekt zum Laufen bekommen, würde ich Dich gern namentlich erwähnen... :thumb:

Ciao

[Khabarakh]

Hallo Tom,

ich freue mich, dass ich dir helfen konnte. Noch ein Tipp: Wenn ich etwas aus der kleinen Demo gelernt habe, dann das: Die VCL-Grafikkomponenten sind einfach nicht sehr gut und oft ziemlich umständlich. Ich kann dir nur raten, die GR32-Komponenten zu benutzen, nach einer kurzen Eingewöhnungszeit gibt es nur noch Vorteile.
Eine Vorüberlegung zu den runden Buttons:
Ich würde den Schatten aus vielen Linien senkrecht zum Rand des Buttons zusammensetzen. Die Farbe der einzelnen Linie ergibt sich dann aus dem Winkel zur linken oberen Ecke (oder wo auch immer). Das wird also ziemlich mathematisch.

Zitat:

Mal sehen, ob ich noch herausbekomme, wie ich einen farbigen Rahmen um die Buttons und so was wie einen Beleuchtungseffekt bekomme.

Das hört sich allerdings wieder nach Render-Engine an :zwinker: . Bei dem Rahmen weiß ich allerdings nicht, was du meinst.

[torud]

Hallo Sebastian!

Also die GR32-Kompo habe ich und nutze ich auch. Das gute an denen ist, dass man wirklich visuell mehrere Ebenen erstellen und mittel "Flatten" direkt zusammenbügeln kann. Einfacher gehts nicht. Mir fehlt(e) halt eben die Möglichkeit mit ein paar Effekten, die natürlich nicht einfach so mit eingebaut wurden, das Ganze etwas aufzupeppen, denn das Problem ist doch, dass man mit ein paar Templates nicht all das abdecken kann, was manche User sich wünschen.

Also muss man es eben so gestalten, dass es möglichst offen ist.

Das mit der Render-Engine habe ich verworfen, da ich selbst nach einigen OpenGl-Tuts und mehreren OpenGL-Sites, die ich durchsurft habe nie das fand, wonach ich suchte. Ich habe mir schon einiges installiert und reingezogen, aber nirgendwo einen 3d-Button per OpenGL gefunden. Also habe ich ihn per 3dsMax bebaut und wollte dann in einer kleinen Engine die Szene laden und dort dann nur die Farbe, und/oder die Textur, Beleuchtung, BumpMaps ect. anpassen. Wenn das geklappt hätte, hätte ich dieses Posting nicht eröffnen müssen. :lol:

Ich bin nun immer noch am Schwanken, ob und wie ich dieses Thema realisieren will...denn mir scheint Codetechnisch nicht so viel möglich zu sein, wie mit OpenGl, wobei mir bei OpenGl einfach das Verständnis des HowTo- fehlt...

Und das mit dem Rahmen meinte ich so, dass ich um den EndButton, der in Deinem Beipiel in Image4 liegt einen Rahmen zeichnen wollte. Irgendwie scheint mir das alles nicht zu liegen, denn selbst das ist mir nicht gelungen. Habe Canvas bemnutzt und wollte per Pen den Rahmen zeichnen, aber kein Ergebnis erhalten... :wall:

[BUG]

Meine 3D-Buttons, einfach in Paint gemalt.

Wenn das reicht, die kann man bestimmt auch zur Echtzeit
(mit Canvas) zeichnen.

[Khabarakh]

Zitat:

Zitat von BUG

Meine 3D-Buttons, einfach in Paint gemalt.

Wenn das reicht, die kann man bestimmt auch zur Echtzeit
(mit Canvas) zeichnen.

Das habe ich zwei Beiträge über deinem schon mit Delphi geschafft :wink: .

[torud]

Hallo Ihr Beiden!

Bitte keinen Streit! Ihr habts beide drauf!

Also das was Ihr das mit Delphi so spielend schafft, ist leider nur ein kleiner teil dessen, was ich vor habe. Sicher, es ist ein Button. Und ja, er sieht sogar aus, wie ein 3d-Button, aber eben nur wie ein einfacher 3d-Button mit einer einfachen eckigen oder eben runden Kante!

Ich habe mit dem Projekt von Sebastian eine ganze Weile gespielt und einige Anpassungen und Modifikationen versucht, aber leider NIE einen solchen 3d-Button generieren koennen, wie ich es vor habe!

Ich zeige Euch mal, was ich als Minimum anstrebe!

Ich weiss, dass das vielleicht etwas dick aufgetragen ist, aber ich denke, dass das schon eher wie ein 3d-Button aussieht. Und wenn das nicht drin ist, muss ich wohl Templates nehmen.

Schoenes We