How to implement a vignette effect?

Posted By: KingdaKa

How to implement a vignette effect? - 12/12/12 12:24

Hi everybody!

ENG:

Iam working on a FPS and would like to add some vignette effect to the players view (darken the border/cornes). I assume that a Post-Processing-Shader would be the easiest/best way to do it, but i dont have any experience with shaders. Maybe the effect could also be done with transparent panels (for example with video_border?). I dont really know where to start and i dont wanna waste my time if there is an easy solution. I appreciate for any advice/help!


GER:

Ich arbeite derzeit an einem FPS und möchte gerne einen Vignettierungs-Effekt für die Kamera erstellen (also die Ränder nach außen hin abdunkeln). Ich vermute das die beste/einfachte Lösung dafür ein Post-Processing-Shader wäre. Allerdings habe ich keinerlei Erfahrung mit Shadern. Alternativ könnte man eventuell ein transparentes Panel verwenden (würde sich video_border dafür eignen?). Ich weiß nicht so recht wie ich an die Sache rangehen soll und ich würde ungern viel Zeit verschwenden, wenn es bereits eine sehr einfache Möglichkeit für diesen Effekt gibt. Für jedwede Hilfe und Hinweise wäre ich euch dankbar!


Update: Testing if its possible to do with the new Shade-C Beta

Regards,

KingdaKa
Posted By: MasterQ32

Re: How to implement a vignette effect? - 12/12/12 12:42

mach einfach ein panel, welches deinen effekt darstellt
das panel skalierst du dann einfach immer auf bildschirmgröße
Posted By: Ch40zzC0d3r

Re: How to implement a vignette effect? - 12/12/12 14:16

LINK

Eine kleine googlesuche grin
Posted By: KingdaKa

Re: How to implement a vignette effect? - 12/12/12 14:21

danke, habe den Effekt mit einem einfachen Panel hinbekommen, wäre aber trotzdem an einer Lösung mit Shader interessiert falls sich jemand damit auskennen sollte
Posted By: Ch40zzC0d3r

Re: How to implement a vignette effect? - 12/12/12 15:13

Originally Posted By: KingdaKa
danke, habe den Effekt mit einem einfachen Panel hinbekommen, wäre aber trotzdem an einer Lösung mit Shader interessiert falls sich jemand damit auskennen sollte


Shader machen doch alles nur langsamer, da jeder pixel neu berechnet wird. Außerdem ist das so doch viel individueller und leichter o_0
Posted By: HeelX

Re: How to implement a vignette effect? - 12/12/12 15:45

Originally Posted By: Ch40zzC0d3r
Shader machen doch alles nur langsamer, da jeder pixel neu berechnet wird. Außerdem ist das so doch viel individueller und leichter


Sagte der Mann, der offensichtlich keine Ahnung davon hat und mir mein ganzes Browserfenster auseinandergezogen hat, weil er nicht in der Lage war, eine URL, die 10km lang ist, in ein url-tag zu verpacken (zweites Icon von links, das neben dem Smiley). mad

Ein Vignette-Effekt ist relativ einfach zu erzielen und kostet im Prinzip nix an Leistung - es kommt nur ein wenig darauf an zu wissen, wie du ihn machen willst. Beschreib doch mal kurz wie du die Grafik für das Panel erzeugt hast und wie du es auf den Bildschirm legst. Stretchedt du es auf die ganze Breite und Höhe?

[EDIT] Im Gegensatz zu einer Shader-Lösung hat man mit einem Panel zusätzliche Speicherkosten! Vor allem weil man mit DDS ekelige Artefakte in die Textur reinbekommt, wenn man Gradienten hat (bei einer Vignette ist das der Alphakanal), muss man zwangsläufig auf TGA oder PNG setzen, sodass da je nach Auflösung wieder 2-4 MB flöten gehen an Videospeicher.

[EDIT #2]Das Schöne einer Shaderlösung ist dann auch, dass man die Vignette zur Laufzeit ändern kann, wie z.B. einfärben (Rot für wenn getroffen), vergrößern, verkleinern (bei Geschwindigkeit) oder sowas!
Posted By: KingdaKa

Re: How to implement a vignette effect? - 12/12/12 16:04

Ich habe nen einfaches PNG erstellt, welches an den Rändern komplett schwarz ist und dann richtung Mitte nach Transparent verläuft und dieses einfach mit aktiviertem Translucent-Flag als Panel über die Camera gelegt. Erst wollte ich ein kleines PNG machen und dieses stretchen, allerdings wurden die Übergänge damit auch immer weicher und der Effekt war somit größer und anders als gewollt. Letztlich habe ich derzeit also einfach ein Bild in der gewünschten Auflösung erstellt, was nicht gerade flexibel ist. Bräuchte also zumindestens 1 Bild für jedes Seitenverhältnis in der maximalen Auflösung. Die Grafik selbst ist bei einer Abmessung von 1680x1050 aufgrund der überwiegenden Transparenz allerdings auch nur 71,7kb groß.

Mich würde einfach interessieren, wie man sowas auch mit nem Shader hinbekommt und sich dafür die ganzen Grafiken einfach sparen kann und sich nicht um die Auflösung und das Seitenverhältnis kümmern muss.

Zudem möchte ich wie du HeelX in deinem Edit angedeutet hast, auch zur Laufzeit den Effekt mal verändern, oder vergrößern, mal verkleinern oder die Farbe ändern, ohne das ich dafür jedes mal neue Grafiken brauche
Posted By: HeelX

Re: How to implement a vignette effect? - 12/12/12 16:21

Ja, ein Vignetten-PP steht sowieso auf meiner Liste. Wenn du es nicht sofort und ganz dringend brauchst dann schau ich mal die Tage was sich da machen lässt, ok?
Posted By: KingdaKa

Re: How to implement a vignette effect? - 12/12/12 16:29

Originally Posted By: HeelX
Ja, ein Vignetten-PP steht sowieso auf meiner Liste. Wenn du es nicht sofort und ganz dringend brauchst dann schau ich mal die Tage was sich da machen lässt, ok?


Das wäre echt klasse! Dringend ist es nicht wirklich, da meine derzeitige Lösung ja auch erstmal reicht um einen Eindruck von dem Effekt zu bekommen und andere Dinge darauf abzustimmen. Ich kann derweil an vielen anderen Baustellen weiterarbeiten laugh
Posted By: Error014

Re: How to implement a vignette effect? - 12/12/12 22:32

Originally Posted By: HeelX
Das Schöne einer Shaderlösung ist dann auch, dass man die Vignette zur Laufzeit ändern kann, wie z.B. einfärben (Rot für wenn getroffen), vergrößern, verkleinern (bei Geschwindigkeit) oder sowas!


Fairerweise muss man hier aber sagen, dass man auch Panels einfärben kann - LIGHT setzen und dann blue/green/red anpassen (Falls man das per Panel macht, oder aber man nimmt den entsprechenden Parameter von draw_quad)

Je nach genauer Form der Vignette kann man da möglicherweise auch noch ein bisschen sparen (zb indem man nur eine ecke als eigentliche grafik lädt und dann das ganze dreht bzw teile in der mitte (die vermutlich kachelbar sind) eben per size_x kacheln lässt...



Womit ich aber nicht sagen will, dass Panels die bessere Lösung sind (beim "Durchschnittslernvorgang" von Acknex aber vll. die, die man früher selbstständig coden und einbinden kann).
Posted By: Kartoffel

Re: How to implement a vignette effect? - 12/13/12 15:54

Hizufügen muss ich noch, dass es einen sichtbaren unterschied zwischen Panel und Shader gibt und man bei Shadern viel
mehr kontrolle über den blending Modus hat, während bei Panels ausschließlich alpha-blending zur verfügung steht.

Außerdem kann man in den selben Shader auch andere effekte, wie video grain und tonemapping einbauen, was mit panels nicht möglich ist.
Posted By: HeelX

Re: How to implement a vignette effect? - 12/13/12 16:32

Originally Posted By: Error014
Je nach genauer Form der Vignette kann man da möglicherweise auch noch ein bisschen sparen (zb indem man nur eine ecke als eigentliche grafik lädt und dann das ganze dreht bzw teile in der mitte (die vermutlich kachelbar sind) eben per size_x kacheln lässt


Solche Tricks gefallen mir in der Regel wirklich sehr, das ist dann immer sehr schon einfach gelöst mit wenig Klimmbimm. In Gothic 2 wurde soetwas wie "Überstrahlung" der Szene beim direkten Blick in die Sonne ebenso mit einem hellgelben Panel gemacht das schnell eingeblendet wurde. Keine Tricks, kein Klimmbimm, very simple. Diese Arbeitsweise ist meist auch sehr erstebenswert, allerdings auch sehr engstirnig. Denn wenn man nämlich realisiert, das man jeden Pixel nochmal anfassen kann, dann kann man echt schmutzige Sachen machen, die einem richtige Gänsehaut verleiht ^^
Posted By: Error014

Re: How to implement a vignette effect? - 12/13/12 20:24

Videograin geht auch mti einem noise-panel (darf auch klein sein), dass man halbwegs kacheln kann; dann size_x/size_y hochdrehen und verschieben (je nach belieben auch drehen, in relativ hoher Geschwindigkeit). Spitzen-noise effekt, benutze ich seit A5-Zeiten laugh

Quote:

Solche Tricks gefallen mir in der Regel wirklich sehr, das ist dann immer sehr schon einfach gelöst mit wenig Klimmbimm. In Gothic 2 wurde soetwas wie "Überstrahlung" der Szene beim direkten Blick in die Sonne ebenso mit einem hellgelben Panel gemacht das schnell eingeblendet wurde. Keine Tricks, kein Klimmbimm, very simple. Diese Arbeitsweise ist meist auch sehr erstebenswert, allerdings auch sehr engstirnig. Denn wenn man nämlich realisiert, das man jeden Pixel nochmal anfassen kann, dann kann man echt schmutzige Sachen machen, die einem richtige Gänsehaut verleiht ^^


Stimmt schon.
Eigentlich ganz lustig, was für Workarounds man sich so überlegt hat in den Zeiten, wo man Shader vermeiden wollte. Das wär doch auch mal ein Thread grin
Posted By: HeelX

Re: How to implement a vignette effect? - 12/13/12 20:53

Originally Posted By: Error014
Eigentlich ganz lustig, was für Workarounds man sich so überlegt hat in den Zeiten, wo man Shader vermeiden wollte. Das wär doch auch mal ein Thread grin


Du meinst eine Art "how to fake a shader"-Thread? Nach dem Motto "Nenn mir einen beliebigen Shader-Effekt und ich emulier dir den ohne das ganze Bling-Bling und Nerdy-Nerd-Nerd?" grin
Posted By: Kartoffel

Re: How to implement a vignette effect? - 12/13/12 20:57

Quote:
Videograin geht auch mti einem noise-panel (darf auch klein sein), dass man halbwegs kacheln kann; dann size_x/size_y hochdrehen und verschieben (je nach belieben auch drehen, in relativ hoher Geschwindigkeit). Spitzen-noise effekt, benutze ich seit A5-Zeiten laugh

Ja, das stimmt natürlich, aber dabei gibt es wieder das "Problem", dass ausschließlich alpha blending verwendet werden kann - was meiner Meinung nach nicht so toll aussieht grin
© 2024 lite-C Forums