유니티 이펙트 튜토리얼 - 그라운드크랙 뎁스 마스크쉐이더 튜토리얼



유니티 이펙트 튜토리얼 - 그라운드크랙 뎁스 마스크쉐이더 튜토리얼

금별 0 298 03.20 02:43
1dae100b455e5a534e447f40e682fae4.gif

GroundCrack DepthMaskShader Tutorial

Hi there!

Welcome to a new tutorial about how to make cracks on the ground!

We will cover:

 ◉  Ground crack texture

 ◉  Ground crack mesh on 3dsmax

 ◉  Shaders needed on unity for the effect

 ◉  A quick set up 


So lets go ahead to photoshop and create our ground crack texture. Because we are going to convert it to illustrator strokes, this can be done in illustrator too. (im explaning this with photoshop because there are a lot of people who plays along with PS but didnt touched Ai)

The crack can be whatever you want, you can add one from the internet, draw it by yourself or take one of your own crack library (if you have one of those xD), after that make sure to have the project saved because we will need it later to make other type of texture.

The requirements for the final image now will be: transparent bg, white fill and stroke effect. Like this:

1?token-time=1554163200&token-hash=i0eg199Ck1AjYK-IRbJ_GSVZmD0zvB_92LrVq8LNzb8%3D

Now that our crack meet the requirements lets save the psd and convert it to Ai. Personally i recommend to learn Ai a bit because it will save time on doing things like this.

Go ahead to a converter(Ive used this one for the tutorial: https://convertio.co/es/psd-ai/) and upload the psd. Then click on convert and download it.

6c7242f757bee70d22ebb34f6709226b.gif

770ab6b95dd9d9a9ff41464e5c4b31a0.gif


Okay then, now we have our strokes, lets go and open up 3dsmax.

Take the .ai file and drop it into 3dsmax

021c7188144237a2990915702cab45e5.gif


Yay! as you can see the cracks are converted nicely to a spline! :D

So next step is to set its position to 0 on all axis

65ae1bd9cda7edd6f038df32d3052b6c.gif

Right click and convert it to an editable poly

e7f40e92d55493988cc7d33eae11e081.gif

And as you can see our crack will be filled, another tick for our to-do list.

IMPORTANT NOTE: If your crack have too much vertex (the example one has 5k) i totally recommend to optimize it removing some vertex.

Now, on the right side, click on the edge icon under "Selection" foldout to say 3dsmax that we are going to manipulate the edges of that object.

e6036a224cfe3db864e9321e4ef818eb.gif

Now select all the edges (the red ones are the selected ones) and with shift PRESSED, move it upwards to make the walls.

2df8102cf47234278ceed304bc7b0094.gif

Stop holding shift and you will be able to move those edges to fit to your desired altitude.

Now we are going to make the UVs of this mesh. Unselect the edges option and add a Unwrap UWV modifier to the object:

58ed8a36b0fe45b3ec89bc4b33a4ba5e.gif

Some edges will appear in green, those edges are the cut ones. So lets go ahead and open the UV Editor

7d1aeb647ef85f3206b422a2083a3120.gif

Here is where we are going to see the UVs of the mesh, and as you can see, we can only see the cuts that 3dsmax made for us.

But, we do want our own cuts so close the UV Editor.

Now, we have to select the floor edges and on of the wall edges to separate the floor from the walls and make the walls plane.(Will explain why are we doing this later on)

To select all the floor edges, first select poly selection , select the floor and then WITH CONTROL KEY PRESSED, switch to edge selection. (So much selection there huh?)

819d10861226a9dfa5c44e11439a0583.gif

With those edges selected go to the foldout "Peel" and to convert edge selections to seams button, when you press it the red edges will become blue:

abef122162cb00d4b353a7dba6126f70.gif

Now take one vertical edge of the walls and convert it to seam too.

47929c8b2a12ae5c8327746479ababa1.gif

Normally UVs seams are cut on edges where the player arent going to look very often. Why? very simple, that seams are tha limits of the mesh maps (Color, normal, specular, metallic, roughness...) so, for example, if a seam is in the middle of the face of a character, the player will notice a straight line on the face. Obviously there are ways to avoid this kind of things, but is good to know it.

To finish with the UVs, go ahead to the UV editor, to see the changes, and click on the quick peel button

d0efdf49d464dc9be72e3c09b22fee41.gif

You will see that the crack remains same but now the walls are show( thats because walls were hiding on the crack). BUT, that walls are doing what they like and we want em to be a nice rectangle. Now select it,rotate it, straighten selection and pack it. Then rescale it with freeform to fit where we want to

3685a80ff58621df63ba8a3a64a76fa4.gif

515d053ac3010cdbc1c6f8edf0d754f6.gif

996fd92b2492566c02d2dc16e914e95f.gif


And dont forget to select the floor and rescale it too, then adjust it to have something like this:

1?token-time=1554163200&token-hash=VCTUv4ZFwuKO3BPX-j5OwysbTY3DsKp3k97VXTTRTSY%3D

Again, this isnt the best way to cut the UVs but its ok because we want this UVs only for the glow we will see later.

And we are done with the "boring" part!! :D lets export as fbx/obj and add it to unity.

2360710edeb08f93c37a1ccb81100f04.gif


NOW nice people, NOW is our moment to shine. But before shining really really bright on unity, go back to that photoshop file for the crack, and save it with a black background. Something like this:

1?token-time=1554163200&token-hash=51SCNjy1bBZ2NBZmrS72K0uMwrSq9xA1y0jj3TVEA0s%3D


Lets close all non unity things (except this window obviously) and start with the shader part.


We will need 3 shaders:

 ◉  Hole Shader (will be that, a hole to see through)

 ◉  Hole Crack Shader (will be the mesh we made

 ◉  InThings Shader (whatever we want to put in the ground crack)


Starting with the hole shader, the simplest one.

Go ahead to Window > Shader Forge

4c5c93d4155616ef3a79d739c7c16c5d.gif

That will popup ShaderForge window. Hit New Shader > Unlit , and save it with a descriptive name

24f5255f4da7afe53813e5237843c830.gif


First of all change the Path name. Then change the LOD to 200

1?token-time=1554163200&token-hash=fOGAnpjTwInM5UHNFkMUoQA9zz1ZwpVcplX3MfRZxgQ%3D

Next step is going to Blending options and change BlendMode to "Alpha Blended" because we want to modify the alpha on the shader. Unmark R,G,B,A, and unmark "Auto Sort".

1?token-time=1554163200&token-hash=Rm1vf0iqHCri6yG7S8rI4-K9z6mq38B_A2Snf3NdJtY%3D


Now, the magic on this effect is like this:

With hole shader we say to our camera, that based on a texture,  dont render ANYTHING in that hole with the Render Queue. 

So we are going to give this Hole shader a X Render queue and LOD. To make the things we want visible in this hole we are going to mess with their Render Queues and LOD to be able to render it in.

Back to our "Auto Sort" option, set order to Opaque Geometry and substract 2, then change "Render Type" to Opaque and mark "Write to Depth Buffer" to finish out the settings of the shader.

As you can see we dont have any warnings or errors in the shader but is alpha blended and opacity is not connected. Ignoring that we are going to delete color node and add a Texture node, then pass that Texture node Red channel to Opacity Clip.

fc5729823299bbd20454b45447d7ff59.gif

Dont forget to rename the texture, we dont want unordered shaders in our workspace

1?token-time=1554163200&token-hash=5sM_aiO4bJMsgK-yMaag_h_4pbcVKaNMCrQFmWVA0WQ%3D

Now close shaderforge or ignore it. Lets go to unity and create a material for that shader

7a774ffcdc8e819d85cb2a962fc3e148.gif

Now add that material to a Quad and see how strange it looks. Then add the texture we have made before

d2fd095f9b212a58a70bb7da90ea0d40.gif

As you can see throught our object we can see the skybox :D so we are done with Hole shader.

Lets go ahead to second shader, the hole walls shader.

First, add the walls mesh into our hierarchy. 

61ad75e38ca2b8422cae9101432b66fa.gif

Now we have our lovely mesh here, lets go back to Shader Forge, Window> Shader Forge, and new Lit(PBR). Remember to save it with a nice and descriptive name.

9b485c47c9b86ec03b32572c51d2d0c1.gif

Its time to adjust the settings.

On Shader Settings we only have to do one thing: change de path.

1?token-time=1554163200&token-hash=zo0KFFC3K4YdTRyshMW_WLyU7y5hMpa20FfvcP6FFcQ%3D

Now, leave lightning untouched(if you want to change the Gloss mode or the specular mode its ok), geometry wont be touched so go directly to Blending.

The only thing we want to change on Blending is the Auto Sort. Unmark it and select "Opaque Geometry" and substract 2 of it.

1?token-time=1554163200&token-hash=-_k69VFU2dRSShnClxGLMjutiYE3QylFOE4izTYzqLs%3D

Now that all the settings are done lets go to the node part.

Of course we can leave it like that and got to the next step, but we arent here to make boring effects, so we are going to add a nice glow to the crack.

So, lets delete all the nodes and start without nodes. With ALT pressed, select all the nodes and delete them.

91b19204bb0580d126720c2750f576c0.gif

Now, lets start adding the Metallic/Specular Glossiness/Roughness sliders.

a9c01e38bbee8ec96c86794763193718.gif

Dont forget to rename them.

7c6322f25ca80e5e9bd90483e194d74a.gif

At this moment, its time to start with the Base Color. Lets create 2 colors: the ground color, and the inner hole color.

9e9cd9d1cd999a8b3540fb7ecd81e2c7.gif

c4fa5e08567e064f88456ccde7057011.gif

Now we want to use each color with a glow base, so we want to create that guide.

Dont be afraid, its pretty easy to do! :D

First of all lets add this nodes: UV Coord and a slider.

fd0de652149d3b1715073750b1f6de46.gif

Before combining the vertical of UV and the HoleColorPredominance slider, we will need more input from that slider. But because 0 to 1 variables are waaay to useful, instead of change its max value, lets remap it:

5dc76e02572787faa4098122ed4ba66b.gif

Now, combine them like an alchemist with a Multiply node, then Clamp the output.

6afe39300d3cc64975cbdf24b69cd75f.gif

But OH WAIT, isnt it all black?!?!

Its because the Ground Color Predominance is on "0" for sure, move it to see the guide moving 

71b7ac0a7ca701d0d2deef6b077751da.gif

The next step is calling our best friend Lerp and giving him the colors and the guide:

e0e3583a86ee337502aa56a1636a10cb.gif

Pretty nice!

Lets go and add it into Base Color

52a87d852905083c812fa7ac6303b85b.gif

Now, we will gotta be able to add the material to the mesh so we can see how it looks:

0271164e7968c9b64eb6a3dac958181b.gif

Lets tweak a bit the material properties , i will leave it like that for the moment.

647791954fa8ff2b9df45f0a3512bf0f.gif

Okay, its time to translate that colors to emission too. By the way we are going to add it a glow over time.

So, to start with that lets add a "TimeControl" setup with a value/slider, a time node and multiply both. Remember to rename the value/slider with something like: EmissionSpeed,GlowSpeed or something like that, and set it to 1.

7145c12ffbf4f2b555a638e484d1677b.gif

c22ccba9726cda93fcd4715664559649.gif

Now, we will need something to change the emission intensity over time, so we will do that with remaps and sin. We are going to use sin to make the value go in and out over time, then remapping a bit to get the wave we want from that sin, and then taking that output to an intensity remap.

d961bfc674cb421b6ea6571b0fad6797.gif

8105fe7503df7e41e73e6f06dbec7980.gif

Now we have that set, lets create some values to say that Remap what limits we want for the intensity. Im going to encapsulate between 0 the minimums because a lower than 0 emission will emit in negative and thats not what we want. And at the maximum a 1 on the input(it wont get more than 1 because we are remapping it before) and a 3 Property value to let anybody change the max intensity.

f242365d0871196c20a2e6595dc03474.gif

49c281c589040a678e1efb2a39019b89.gif

Now that we have a guide for the emission, we will need the colors and substract the ground from it because the ground color dont have to emit anything. We will do this with Substract and a multiply, then outputing to Emission.

0fdfb0848f6b0cdb9ca60cc3802db32e.gif

So we have finished the shader!!

Isnt that optimized but its an example of what to do with this kind of things.

Lets go ahead to the scene and see the mesh.

1?token-time=1554163200&token-hash=Ex16AYhNBnXGhdEhFRZgkXYdYlAYDHLI3hRn3ho7M_U%3D

Yay! this starts to look nice. Now its time for the "worst" part, atleast for me. Making a fit of the mesh with the mask.

First, lets set the Render Queue of the Hole shader to 1999 to see the. Why not setting it in the moment we were creating the shader? Well simply because of the order. like in the Sorting layers of unity all are at 0, so our 0 is 1998.

7735508d81e03074c0e57f8012d52950.gif

Now its time to the sync.

d8c680d2a87e6f83590a6f17155eeec2.gif

But hey, where is the real glow, where is the bloom?

Well, maybe bloom is laizng around on postprocessing stack. So lets go ahead into unity asset store and search for post processing stack, then import it.

58f044f43c3fcde045efd9be7ff83513.gif

3b79605cae55a78652115b8b686cd128.gif

Once its imported, lets go back to the scene and select the camera, to add it a Post-Processing Behavour.

5f9b49c519ec2239c4b5ed74d4aa3eae.gif

Okay, now, we have to create the PostProcessingProfile the Camera behaviour asks, so go to the project and create one, call it however you want, but it should be descriptive, to know what post processing filters are we using, or where are we using the filters...

cb429e247708a790683f84e6dfe2ddf7.gif

Now, add that profile to the camera because we want to see the changes while we are doing it.

5bdac877ca6afc18c5e283f0e5982126.gif

Did you noticed the post processing power that has appeared on the scene now??

If dont, its ok because we havent done anything with the profile.

If yes, you should see a doctor or stop eating weird things.

So, select the profile and start adding the antialiasing (Because we dont like sharp edges).

baaf2548a8dd4ec9a8c6dd50ef51fe8e.gif


4b316f2a66825c437d89be61532d1397.gif

Now, a bit of color grading in FILMIC, but bumping up a bit the Exposure.

710117bc84910b7ef0011bfaed3b4dbb.gif

Wow, its looking nice now huh. Well now its time for the star filter: Bloom.

9d18db39215c286a3d5ec7c16c6ec663.gif

To finish up the post processing, add a vignette

9e06e832152b7cee6f2a8c01e6f2e284.gif

Congrats!! the effect is finished :D

Looks quite nice tho. Im going to leave here a comparison with the post processing and some color/Intensity tweaks

16476259564f1f0ec74ae3c260505e60.gif

fd2e48edc2a071da58cb1995fc106db6.gif

38a4fce887a079f6964c44270b625789.gif

953ac5730bf2561b5df11c5596ea4f4c.gif

6fc2c6c4d72949560d6dde368b00e706.gif

Of course this effect can be tweaked and do with it whatever you want :D


For the final thing if you want to enter something, you will only need to set the Render Queue to 1998 :D

184ded241af1a9df79e93122630bc154.gif


Have good dev day!!

PD: All this project assets for the patrons will be on next post :D

Comments


번호 포토 분류 제목 글쓴이 날짜 조회
공지 외국 교육 이펙트 튜토리얼 모음(사이트/유튜브/비메오등등..) 댓글+4 금별 2018.05.12 910
공지 이펙트 추천 사이트/블로그 댓글+5 금별 2018.05.12 1048
63 유니티 유니티 이펙트 - 발사체 참고영상외 + 팁 금별 05.09 245
열람중 유니티 유니티 이펙트 튜토리얼 - 그라운드크랙 뎁스 마스크쉐이더 튜토리얼 금별 03.20 299
61 유니티 유니티 쉐이더 - 정점 쉐이더 애니메이션 입문 [일본자료 번역] 금별 03.12 161
60 언리얼4 언리얼4 이펙트 팁 - Sci-fi 홀로그래픽 쉐이더 튜토리얼 금별 02.27 346
59 언리얼4 언리얼4 이펙트 팁 - Magical Fire VFX 금별 02.27 369
58 유니티 유니티 Image Based Shader Programming 일본자료 번역 댓글+1 금별 02.24 177
57 유니티 Shuriken本執筆中!(内容更新) 댓글+3 금별 01.14 434
56 언리얼 언리얼4 - Unifrom Circle Spawner Tutorial 금별 01.14 191
55 일반 Optimizing UE4 for Fortnite: Battle Royale - Part 2 insaneoops 2018.05.10 113
54 일반 Optimizing UE4 for Fortnite: Battle Royale - Part 1 댓글+1 insaneoops 2018.05.10 119
53 3D World of Warcraft VFX: Overview from Luis Aguas 금별 01.13 168
52 유니티 라바 램프 쉐이더 만들기 금별 01.13 157
51 언리얼4 [언리얼4]Quick Tips & Shader Tricks: Some editor settings / Easy Search & Base Material setup 금별 01.13 108
50 유니티 데칼에 확산 UV확산효과 쉐이더 이펙터자료 금별 01.09 183
49 사이트/튜토추천 [언리얼]기초 한글 강좌 추천사이트 금별 2018.12.19 269
48 언리얼4 언리얼4 머터리얼 팁 - 월드 포지셧 오프셋을 활용한 펄럭이는 깃발 만들기 예제 금별 2018.12.19 176
47 언리얼4 언리얼4 머터리얼 팁 - 원형 진행 바 만들기 노드 금별 2018.12.19 169
46 언리얼4 언리얼4 머터리얼 팁 - 포스트 프로세스에서 색상분리하기 금별 2018.12.19 127
45 유니티 Z-뎁스로 균열효과 만들기 금별 2018.12.19 226
44 유니티 유니티 쉐이더 그래프 팁 - 꿀렁이는 호수관 만들기 금별 2018.12.19 166
43 유니티 유니티 쉐이더 그래프 - 간단한 스캔라인 쉴드 제작 금별 2018.12.19 170
42 유니티 유니티 레이마칭 사용 노드영상 및 코드 금별 2018.12.19 116

 

Banner
Facebook Twitter GooglePlus KakaoStory NaverBand