Unreal Engine Vignette Shader Tutorial

Рет қаралды 4,443

James Bland

Жыл бұрын

This tutorial will teach you how to create a vignette shader in Unreal using a material and some hlsl code.

Пікірлер: 19

@biiscoitorl5258 2 ай бұрын

Code: //Create a vector which points from the middle of the screen to the current pixel float2 vectorFromCenter = PixelPosition - 0.5; //find the magnitude (length) of the vector float magFromCenter = length(vectorFromCenter);# //multiply mag by vinyette strength magFromCenter = magFromCenter * VinyetteStrength; magFromCenter = magFromCenter + VinyetteZoom; //Modify the original colors float4 modColor = PixelColor * (1 - magFromCenter); //return the modified color return modColor;

@pariskulkarni8113 Ай бұрын

THX SO MUCH

@AussieTac0s Жыл бұрын

Great tut man, you're the only one on youtube that has done this tutorial!

@jamesbland5082 Жыл бұрын

Thank you! It was great fun to make. i'm glad you enjoyed 😆

@jacklawrence2221 8 ай бұрын

well explained

@syskeye 7 ай бұрын

would it be possible to adjust the vignette zoom and strength value while the game is running? like make it so that for example when a certain key is pressed the strength and zoom increases and when its released the values adjust to what they were previously

@jamesbland5082 5 ай бұрын

Sorry its been a while, but for anyone else curious i feel like this is definitely possible 😁, because a material instance is created from the master material so it can be changed at runtime! look into creating a dynamic material instance inside of a blueprint and you can then use the set parameter node to adjust the values of the shader. here is a link i found which might be useful: docs.unrealengine.com/4.27/en-US/RenderingAndGraphics/Materials/MaterialInstances/#:~:text=A%20Material%20Instance%20Dynamic%20(MID,your%20Material%20throughout%20the%20game. good luck!!! 😁😎 if you want to get really fancy instead of just changing a value you could interpolate from one value to another to make it smooth

@victoriataylor8352 Жыл бұрын

This is the best thing ever- so cheesy but I now know how to make a vinye🏎️e shader 😏

@jamesbland5082 Жыл бұрын

Thank you very much 😆😆 🧀🧀🧀🧀 I’m glad you know now 😎

@JoexLegacy 3 ай бұрын

Can you apply this material to objects? i'm trying to make a sniper scope vignette that's only inside the scope area

@jamesbland5082 3 ай бұрын

Wow that's a great question! i imagine that this effect is accomplished by having a camera at the end of the scope and rendering whatever the camera sees as a texture onto start of the scope. then you can apply the vignette to the texture rendered. I'm not sure if the exact steps of the tutorial will work but the theory of what the tut covers will definitely be transferable and useful making this.

@brycetingle8358 Жыл бұрын

10/10 would "vinyette" again 🤣🤣

@Gambsmoore 3 ай бұрын

That is in fact how you pronounce it, it is French :) edit oh lmao i didn't even notice the typo on my first go around 🤪🤪🤪

@iraarkhipova9060 4 ай бұрын

hello) could you tell me how to make a vignette of a different color? for example white

@jamesbland5082 3 ай бұрын

Wow it’s been a while since I made this 😂 and really I don’t know 🤦‍♂️if I had to guess I would say look at the shader code and in particular the one but last line: float4 modColor = PixelColor * (1 - magFromCenter); here’s where you’ll probably want to make your modifications as this is the final colour that turns into the vignette. Just before this line I would make a new float4 which will hold my vignette colour. float4 vignette color(0,0,1);. And I would multiply vignette color by 1-mag from centre. Then either add this vignette color or multiply it to modColor

@jamesbland5082 3 ай бұрын

So it would look like: float4 vignetteColor = float4(0,0,1,1); vignetteColor = vignetteColor * (1 - magFromCenter); //modify the original colours Float4 modColor = pixelColor * (1 - magFromCenter); ModColor += vignetteColor Return modColor;

@jamesbland5082 3 ай бұрын

I’m not sure if this will work but anyone seeing this and op good luck I hope this helps!

@andreashoetzinger 2 ай бұрын

With some minor changes to James' code I made it work: float2 vectorFromCenter = PixelPosition - 0.5; float magFromCenter = length(vectorFromCenter); magFromCenter = magFromCenter * VignetteStrength; magFromCenter = magFromCenter + VignetteZoom; float4 vignetteColor = float4(0,0,1,1); vignetteColor = vignetteColor * magFromCenter; float4 modColor = PixelColor * (1 - magFromCenter); modColor += vignetteColor; return modColor; Thanks for the tutorial and the comment man, super helpful :)

@jamesbland5082 23 күн бұрын

@@andreashoetzingerI’m glad you enjoyed the tutorial! 😁 super glad you worked it out thank you for leaving this comment to help others! 😁 awesome work!