转载作品

Glitch Effects

路人甲 发表于   2018-06-24 03:39:31
4012
7
22
有很多很不错的知识点,希望大家能学习到东西 

This little project was spawned from being inspired by a video I saw showcasing all the cool Glitch Effects from Horizon Zero Dawn

I decided to try and make some form of a general purpose glitch shader that could be applied to any piece of geometry, I made two variations, one was a simple random distortiony glitch and the other used the same idea and combined it with my previous sphere mask based apparition effect to create a new type of apparition shader. You can see them both below.

Note: You can open the images in a new tab to view them at a higher resolution

Glitch Effectcgwell转载Glitch Effects36 作者:路人甲 帖子ID:97048Apparitioncgwell转载Glitch Effects100 作者:路人甲 帖子ID:97048Breakdown

Like some of my previous posts, I encapsulated this entire shader into a material function so that it can be easily layered into any existing shader. So the first step is to create a Material Function.

The next step is to generate a psuedorandom CellNoise, this is what we will use to drive the color and Vertex Deformation of the glitch. You can see the netwrok below

cgwell转载Glitch Effects0 作者:路人甲 帖子ID:97048

Now you may be wondering, but UE4 already has a "Noise" Function, why don't you jsut use that? I could have..but I'm weird like that, also for some reason my custom network has less instructions

What this network is doing is essentially taking the localized WorldPosition of the object > adding a time based psuedo-random scalar value to each channel > running it through a custom function MF_Vec3Noise3 which generates a psuedorandom Vector 3 value, which is our cell noise.

I add 0.1 and bias it because my function outputs values from -1 to 1, and i want values tht go from 0-1 instead, the 0.1 is to avoide any complete 0 values.

The output from this network will look like this

cgwell转载Glitch Effects4 作者:路人甲 帖子ID:97048Noise Functions

The two noise functions MF_Noise1D and MF_Vec3Noise3 generate psuedo-random values based on inputs that are fed to them, the only difference between them being 1D takes a scalar input and outputs a random scalar value, the Vec3 one takes a Vector3 Input and outputs a Vector3 Psuedorandom Value.

If you would like to learn more about noise, I highly reccommend checking out The Book of Shaders, they do a great job of explaining it as well as it's many uses.

Here's what the node network for my functions looks like:

MF_Vec3Noise3cgwell转载Glitch Effects12 作者:路人甲 帖子ID:97048MF_Noise1Dcgwell转载Glitch Effects69 作者:路人甲 帖子ID:97048Opacity Mask

The next step is to create a mask that will drive the Opacity

cgwell转载Glitch Effects28 作者:路人甲 帖子ID:97048

For this too, I calculate the localized worldposition of the object and then isolate the vector along which I want the mask effect to work. In my case I mask out the redChannel which is the X Vector of the object(You could convert this to a parameter so that you can pick along which axis the effect occurs)

We also have input parameters to enter the objects Length etc so that the shader can be customized to work with any object(in the future I will update this post to show how we can procuderally get these values without having to manually enter them).

If you preview the subtract node commented as BaseopacityMask you will see this

cgwell转载Glitch Effects50 作者:路人甲 帖子ID:97048

As you can see we have a black and white mask that travels along the x axis of the object, we will combine this with some other outptus to get the final opacity mask.

The Edge Mask from Sample Gradient does exactly what it says, it samples the mask gradient and generates an Edge Mask, we use this to mask out the edge Fx as well as apply VertexDeformation for the Final Shader Effect. If you preview the out put from there you will see this. More on this soon.

cgwell转载Glitch Effects37 作者:路人甲 帖子ID:97048Final Opacity Mask

To generate the final opacity mask we isolate the redChannel from our psuedorandom cell noise>multiply it by a scaling factor(This controls the falloff of the transition,higher value = more falloff and vice versa), and subtract it from the baseopacitymask gradient to generate a cell pattern falloff. As shown below, this will be the input for the OpacityMask in the shader.

cgwell转载Glitch Effects31 作者:路人甲 帖子ID:97048 cgwell转载Glitch Effects14 作者:路人甲 帖子ID:97048Vertex Deformation/WorldPosition Offset

For the worldposition offset we take the output result from the psuedorandom cell noise > Multiply it with the vertex Normals > multiply it with scaling Factor(Deformation Strength) and then Linear interpolate it with a NULL value using the out put from the Gradient Sample Edge Mask as the alpha. This final result goes into the shader's WorldPositionOffset Input

cgwell转载Glitch Effects28 作者:路人甲 帖子ID:97048

if you preview the shader with just the WPO input, it'll look like this

cgwell转载Glitch Effects57 作者:路人甲 帖子ID:97048Color Blending/Emissive

For the Final Color we just create a fresnel from the object's normal map and multiply it by the Psuedorandom cell noise input. Then we blend between this value and the object's base color using the Gradient Sampled Edge Mask Output. We do the same for the emissive, blending between the Emissive Input, using the Gradient Sampled Edge Mask Output.

cgwell转载Glitch Effects95 作者:路人甲 帖子ID:97048BaseColorcgwell转载Glitch Effects70 作者:路人甲 帖子ID:97048Emissivecgwell转载Glitch Effects40 作者:路人甲 帖子ID:97048

And that's it! the entire functions node network should look something like this:

cgwell转载Glitch Effects70 作者:路人甲 帖子ID:97048

The Function Node will look like this when you use it in your material, it'll take your entire material as an input and apply the shader effect on top of your existing shader

cgwell转载Glitch Effects16 作者:路人甲 帖子ID:97048Randomized Glitchcgwell转载Glitch Effects27 作者:路人甲 帖子ID:97048

To make make a randomized glitch effect like the one shown above, it's jsut a matter of swapping out the sine gradient part of network with a netwrok that creates a spheremask with a time based randomised position, which can be done with the following. cgwell转载Glitch Effects54 作者:路人甲 帖子ID:97048


If you preview the result from this, you will see that it is basically a sphere mask that get moved around the model randomly

cgwell转载Glitch Effects8 作者:路人甲 帖子ID:97048

And that's it! Hope you found this breakdown useful! Feel free to email me if you have any questions.

cgwell转载Glitch Effects91 作者:路人甲 帖子ID:97048cgwell转载Glitch Effects54 作者:路人甲 帖子ID:97048



标签:
UE4
确定
评论(7)
Stacey
假装看懂了~嗯好东西 牛逼牛逼~~~
回复
2054天前
匠心丶初心
DeepSpacebanana 你應該附上原地址
回复
2103天前
sEven7
感谢分享啊
回复
2106天前
大众神经
我的甲 啊啊啊啊
回复
2112天前
冠位萌新
学习到了,谢谢教程
回复
2130天前
cokey
加点粒子更好看
回复
2131天前
Arima_Kimio
感谢大佬的分享,就是翻译让我有些吃力呀
回复
2131天前
没有更多啦~
  • 咨询
    客服
  • 扫码加入QQ群 或搜索QQ群号: 797421367
  • 扫码关注公众号 或微信搜索: cokey游戏特效