WPF Eigene Effekte leicht gemacht

    • XAML: WPF

    Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von thefiloe.

      WPF Eigene Effekte leicht gemacht

      Da ich in letzter Zeit festgestellt habe, dass hier im Forum manche etwas von dem ganzen Windows Forms Zeugs abkommen und man mit WPF Teils doch auch auf Interesse stößt... dachte ich mir, da manche gerne mit Grafik etwas herum spielen (Spiele, Pictureboxen <- :thumbsup: ) mal eine kleine Spielerei die ich vor längerem mal angeschaut habe hier zu posten. Es geht darum eigene Effekte in WPF zu implementieren. Manche kennen vll. schon den Blureffekt oder den DropShadowEffekt (mit dem Expression Blend gibts noch viele mehr :)).

      Also damit ihr euch auskennt. Das Projekt besitzt eine C# und VB.NET Version (kann praktisch nur noch c# aber habs für euch konvertiert - also wenn ich falsche VB.NET Sachen verwende -> Beschwerde hier).

      So also wie gesagt Projektmappe zwei projekte -> Effects und Effects.VB. Außerdem gibts noch den Ordner effectfiles. Dort befinden sich 3 Beispielsdatein und zwei Batchdateien. Effekt erstellen geht ganz einfach.
      Neue *.fx Datei schreiben und abspeichern. Diese dann auf die fxc_compiler.bat raufziehen oder via Commandline dieser übergeben. Anschließend habt ihr eine *.ps datei. (also MeinEffekt.fx.ps).
      Diese dem Projekt (egal welchem hinzufügen und anschließend einfach neuen Shader implementieren - denke müsste aus dem Code hervorgehen).

      Hier noch ein kleiner Screenshot von den wunderschönen Tulpen aus dem Beispielbilder ordner:


      So falls jemand noch Verbesserungsvorschläge hat (kann ja auch ma was übersehen :))... gerne :)

      Ach ja wollte grad den Anhang hochladen war aber zu groß. Also hab ich aus dem VB.NET projekt das Beispielbild gelöscht. Einfach aus dem C# Projekt in den selben ordner kopieren (also in den Images Ordner vo m VB projekt)
      Dateien

      • Effects.zip

        (698,29 kB, 280 mal heruntergeladen, zuletzt: )


      Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

      Wenn ich recht verstehe schreibt man den Shading-Code in einer mir ganz unbekannten Sprache "HLSL" (High Level Shading Language), und kompiliert das zu einer .ps - Datei, die man dann in ein PixelShader-Objekt laden kann.
      Wo findet man die Dokumentation der Syntax von HLSL?

      Aber dann muß man die Klasse noch beerben, und die Erben führen ganz abenteuerliche Registrierungen von Properties durch, die iwas mit dem HLSL - Code zu tun haben scheinen.

      Also vlt. sollteste das "leicht" im Thread-Titel nochma überdenken. ;)

      €dit:
      den Grayscale-Effeckt kriege ich an, aber das Emboss-Dings ergibt bei mir dieses Ergebnis - (ganz rechts):
      Edit-Edit: mit

      XML-Quellcode

      1. <TextBlock Grid.Row="0" Text="Displacement:"/>
      2. <Slider Grid.Row="0" Name="Displacement" Value="0.01" Maximum="0.2" />
      3. <TextBlock Grid.Row="1" Text="Strength:"/>
      4. <Slider Grid.Row="1" Name="Strength" Value="0.5" />
      5. </Grid>
      6. <Image Stretch="Fill" Source="/Effects.VB;component/Images/Tulips.jpg" >
      7. <Image.Effect>
      8. <local:EmbossEffect Displacement="{Binding ElementName=Displacement, Path=Value}"
      9. Strength="{Binding ElementName=Strength, Path=Value}" />
      10. </Image.Effect>
      11. </Image>


      kannich jetzt auch Emboss :)
      Bilder

      • Shots00.Png

        209,3 kB, 612×340, 444 mal angesehen

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „ErfinderDesRades“ ()

      .ps steht erstmal für PixelShader, das ist nur zuständig für die Farben der gezeichneten Pixel. Mir ist es nicht bekannt, dass eine .ps Datei bereits kompilierter Code ist, so wie ich es kenne wird es immer erst zur Laufzeit kompiliert(von DirectX), scheint so zu sein, dass es für WPF bereits vorkompiliert sein sollte(kann man in DX jedoch theoretisch auch verwenden).

      HLSL ist von der Syntax eigt. ziemlich wie C, float4 ist ein float array mit 4 Elementen, in der Regel abrufbar mit x,y,z,w oder r,g,b,a ebenso ist es möglich mit z.B. .rgb ein float3 mit r,g und b zu erhalten...
      Ein PixelShader enthält im Endeffekt mindestens eine Methode, die vor dem zeichnen jedes Pixels aufgerufen wird(dies läuft alles auf der GPU ab)
      Der Doppelpunkt gibt im Endeffekt an, woher Werte geholt werden(oder hinkommen).
      : TEXCOORD(0-7) ist dabei die Texturkoordinate auf dem zu zeichnenden Objekt. Zwischen 0-1(also unabhängig von der Texturgröße). Ein Sampler ist eine "Schnittstelle" zu Texturen, damit kannst du also die einzelnen Pixel aus deinem Bild holen, natürlich anhand einer Texturkoordinate. Anschließend damit schön rechnen, was auch immer du willst und mit return wieder zurückgeben.
      : COLOR steht für die Farbe, die für den jeweiligen Pixel nachher am Bildschirm angezeigt wird.

      msdn.microsoft.com/en-us/libra…b944006%28v=vs.85%29.aspx

      Ich hab mir das auch immer aus Google einfach zusammengesucht und viel probiert. Aber ich denke der Link hier oben zeigt einem etwas den Einstieg.
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      jvbsl hat es genau getroffen.
      Der compiler befindet sich im DirectX SDK oder im Windows SDK. Und doch es ist doch recht leicht wenn man sich den Code des GrayScale Effekts ansieht. Der Shader ist sehr klein und einfach der C#/VB.NET Code ebenfalls und man bekommt einen performanten effekt bei dem man gut etwas rumprobieren kann. Ich habe es außerdem bewusst nicht so ausführlich erklärt, da ich wie bereits erwähnt etwas im Stress war und das hier der Sourcecode austausch ist und somit nicht so ganz Tutorials geschrieben werden müssen. Und ich denke auch, dass die meisten das nachvollziehen können müssten, da es nun wirklich kein Kunststück war und ich es doch eine recht tolle Sache finde um relativ schnell und einfach pixel shader auf beliebigen steuerelementen usw. zu verwenden.


      Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.

      Hab grad nen Shader für das Mandelbrot fraktal geschrieben. LOL

      Spoiler anzeigen

      C-Quellcode

      1. // Grenzen aus den Registern auslesen
      2. float XMin : register(c0);
      3. float XMax : register(c1);
      4. float YMin : register(c2);
      5. float YMax : register(c3);
      6. float iterations : register(c4);
      8. float4 main(float2 coord : TEXCOORD) : COLOR
      9. {
      10. // Maximale Anzahl an Iterationen
      11. int maxIterations = (int)iterations;
      13. // Breite und Höhe des Zeichenbereichs bestimmen
      14. float XWidth = (XMax - XMin);
      15. float YHeight = (YMax - YMin);
      17. // Vektor für die Farbe des aktuellen Pixels
      18. float4 result;
      20. // Standardfarbe ist Schwarz
      21. result.r = 0;
      22. result.g = 0;
      23. result.b = 0;
      25. result.a = 255;
      27. // Variablen für komplexe Iteration
      28. float z_real = 0;
      29. float z_imaginary = 0;
      31. float c_real = XMin + XWidth * (coord.x);
      32. float c_imaginary = YMin + YHeight * (coord.y);
      34. float tmp_real;
      36. [fastopt]
      37. for (int i = 0; i < maxIterations; i++)
      38. {
      39. // Komplexe Iteration anwenden
      40. tmp_real = z_real*z_real - z_imaginary*z_imaginary + c_real;
      41. z_imaginary = 2*z_real*z_imaginary + c_imaginary;
      42. z_real = tmp_real;
      44. // Falls Abs(z) > 2.0, Iteration abbrechen und Pixel färben.
      45. if (z_real * z_real + z_imaginary * z_imaginary > 4.0)
      46. {
      47. float r = i - log( log(sqrt(z_real * z_real + z_imaginary * z_imaginary) / log(2))) /log(2);
      48. result.r = ((r * 3) % 255) / 255 ;
      49. result.g = ((r * 3)% 255 / 255) ;
      50. result.b = ((r * 6 ) % 127)/255 + 0.1;
      51. break;
      52. }
      53. }
      54. return result;
      55. }
      Bilder

      • mandelshader.PNG

        94,59 kB, 632×681, 297 mal angesehen

      Sieht richtig gut aus.
      Könntest du eventuell den Source(also kompletten source) + eine kompilierte Version hochladen? Da würde man die performance von Shadern und WPF mal schön sehen.
      @Quadsoft


      Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.