유니티 쉐이더 그래프 - Weaving Ring Tutorial 1



유니티 쉐이더 그래프 - Weaving Ring Tutorial 1

금별 1 146 08.12 03:50

1.gif?token-time=1566691200&token-hash=HiO0ssY5kBTBNZP--qbDcqFgw1ySB_2DmD5oX4mMLCY%3D

 

This tutorial is written to be understandable to beginners, but it's not an introduction to shader graph. If shader graph is completely new to you, then check out https://blogs.unity3d.com/2018/02/27/introduction-to-shader-graph-build-your-shaders-with-a-visual-editor 

 

0. Overview

1.png?token-time=1566691200&token-hash=Q6JxTwF-lLNb1PGT_ZM1PrmcGVyBydIUf4COeEl2Qx4%3D

This shader is made of 3 separate chains of nodes, which we'll refer to as Ring, Wave and Split. I'll give an overview of each chain and how they combine before we get to the actual tutorial proper. 

 

1.png?token-time=1566691200&token-hash=US8KpdbkZs3cKVvZfvDkFBWrrE3fL73gRdDoqiV0tzw%3D

The Ring chain establishes the ring shape at a distance from the center. It's the main chain that ends in our final result, and will be influenced by the other two chains. Above is how it looks without the influence of the other two chains.

 

1.png?token-time=1566691200&token-hash=apbpAjH6HIWtBRlU4dMmqsDHlvAsV8d3RZoZxC_021I%3D

The Wave chain establishes these clockwise sine waves with offset RGB channels. It's completely static, it doesn't move over time.

 

1.png?token-time=1566691200&token-hash=HskVyGKe1OVwpyy3tZdeBsZZv1QFNUGWDnB52REcMNs%3D

Before we get to the Split chain, check out the result when it's just the Wave chain added to the Ring chain. The RGB weaving effect is non-animated and equally strong all around the ring.

 

1.gif?token-time=1566691200&token-hash=0UJXhXGBgSnSQ3FxyxNgWYzkUjjEg2Y7WeH2Iwhm5Hc%3D

The Split chain is the only chain that's animated over time. When multiplied with the Wave chain, It acts as a kind of modulator for it, controlling it's strength before influencing the  Ring chain:

1.gif?token-time=1566691200&token-hash=LqcWmGoJNEnzQq8wMHZPOYSa7ctCEaZ7kPMrO2Cizok%3D

How the Split chain modulates the strength of the Ring chain.

 

0.1 Polar Coordinates

Every chain in this shader starts with the Polar Coordinates node. It's a pretty useful node and it's safe to say that any shader graph that has some pattern going inwards, outwards or around in a circle probably uses the Polar Coordinates node somewhere. 

1.png?token-time=1566691200&token-hash=JiY0Pg5uJN1pJLRylzFEeti29G7qmNKXu7dI_N8YXV4%3D

If you've used the UV node before and have come to think of it as simply two gradients, one horizontal and one vertical, then the Polar Coordinates node can be thought of as the same, except with a radial gradient and an angular gradient. The full explanation is a bit more complex than this, but I find thinking of them as gradients the most simple and intuitive for experimenting with shader graph.

 

1.  Ring chain

First up is making a plain white ring. 

1.png?token-time=1566691200&token-hash=jULoNytgwZbHfrcnaiDr3XqsHHlt1yXvdOEjKj18nVw%3D

We start with the aforementioned Polar Coordinates node. For the ring shape we only need it's red component, so we can Split and Preview the red to see what we're working with. With default values, the red component gives us this radial gradient, with 0 at the center, 1 at the distance it touches the sides, and above 1 into the corners.

The Preview node does nothing to the shader, it's just for displaying what it looks like at that point in the graph.

 

1.gif?token-time=1566691200&token-hash=WI1j9WSu8421EL3uZvIT0Kh8P2hXjkrFMwzQkBdqyug%3DPlugging the outwards gradient into a Step node gives us a black circle. Any value above the Edge parameter becomes 1, any value below becomes 0.

 

1.png?token-time=1566691200&token-hash=RDW95hlBYTnWD2KDMb1P9o9mbe8CVrntfbX7nDm7NSY%3DA second Step node with a greater Edge value makes a larger circle, which can then be Subtracted from the first. Suddenly, a ring.

There's a bunch of different ways we can combine the circles to get the white ring. The way we've done it above maybe isn't the most intuitive, but it makes more sense if you notice that it's only the corner sections of the bottom image that are being subtracted from the top image.

 

1.png?token-time=1566691200&token-hash=W1Oqmu1vEQYqlzLn_8sb_lvnRhAgaWG1dPcQiml9pxw%3DWhen modifying the Edge parameters of the Step nodes, you've probably noticed this directly controls the inner and outer radius of the ring, so this is a reasonable place to plug in some adjustable properties: Ring Radius and Ring Thickness. 

If we have Ring Radius control the outer edge radius, and Ring Thickness reduce the inner edge radius from the outer using Subtract, then increasing the Ring Thickness will only thicken it inwards, and not outwards. The same will be true for the waves in the next section. By allowing nothing beyond the Ring Radius we can safely adjust parameters without anything accidentally going over the sides of the containing square (unless we explicitly set the Ring Radius above 1).

 

2. Wave chain

1.png?token-time=1566691200&token-hash=QzChPnfGJf7kIeGOrxOt-1KacICFB0V9zaBdtn_I2Vw%3DWe'll start with Polar Coordinates again, but this time we use the Green component instead, which gives us this angular gradient going clockwise from -0.5 at the bottom, 0 at the top, and +0.5 at the bottom again.

We could have started with the existing Polar Coordinates + Split nodes that are already being used in the ring chain, but I think it's better for the readability of the graph to keep the chains mostly separate.

 

1.gif?token-time=1566691200&token-hash=4xFm5Y-FzBWuLprGGN_tyrvWshuPl3kVGtvCr-MXOsM%3D

What's next? Well, for sure we want sine waves somehow, so lets plug in the Sine node and see what happens when we adjust the Polar Coordinates Length Scale parameter. 

Length Scale is the same as multiplying the Green component, so a Length Scale of 8 will result in the gradient going clockwise from -4 to +4. Here, increasing the Length Scale does result in waves in the Sine node, but the values are off. A Length Scale of 8 results in about 1 and a quarter waves, when ideally it should give exactly 8 waves. The values are off because the Sine node takes it's input in radians, so next we'll figure out a conversion.

1.png?token-time=1566691200&token-hash=mserjYatzecNl_jIYgAa7I6V8_mUEwwU1cphTRb8I7M%3D

Searching through the list of nodes for radians, we can see that shader graph gives us a Degrees To Radians node, though that means we have to convert to degrees first. We can Multiply our desired wave count by 360 to convert it to degrees, and then convert that to radians with the Degrees To Radians node. There's a number of ways to structure this, but I found the above to be the most intuitive. The conversion to degrees happens at the start and goes directly into the Length Scale, making it some multiple of 360, and later, the conversion to radians happens directly before the Sine node, as this node is the only one that requires radians.

The Preview node image was no longer helpful to us so we can remove it. 

We could skip degrees entirely and convert straight to Radians by multiplying by pi*2, however there's no pi node so the value would have to be pasted in. Using degrees will also be useful in the next part when we offset the RGB components, so I don't recommend this. 

1.png?token-time=1566691200&token-hash=P0WT175pFludEjSuexcPZDntLDD96IwCXNDLK3mSj-o%3D

Now that we can get an exact amount of waves, we can create another adjustable property: Wave Count. This property should be an integer value, if not, it will cause a visible seam in the pattern.

 

1.png?token-time=1566691200&token-hash=JenGELcdOhueZsbpVVe_7kfEzHJiMYWRjICcsh3jN7g%3D

So now we have these angular waves who's magnitude fluctuates between -1 and +1. Thinking ahead, these waves should be used as a relatively small adjustment to the radial gradient in the Ring Chain. That radial gradient only goes from 0 to 1, so the waves current magnitude will completely overpower it. Lets calm it down by Multiplying by a Wave Magnitude property and set it to around 0.1, so now the waves only fluctuate between -0.1 to +0.1 which should give a sensible result when adding them to the outwards gradient:

1.gif?token-time=1566691200&token-hash=4kQ1LTCnI7ri5qrmREJ1_xELm3EH20-kTbV3t4b4yKU%3D

This step probably requires shuffling a lot of nodes around, reminder that you can ctrl+click to select multiple nodes, or start a selection box by dragging empty space. 

The gif is self explanatory, but we've essentially inserted an Add node to the original chain as a way to input our new waves into it.

But there's a small issue, the negative sections of the waves are ultimately pushing the ring outwards, beyond the Ring Radius. Depending on what values you've given the properties, the waves might even be going beyond the sides of the containing square. As explained earlier, nothing should go beyond the Ring Radius.

1.png?token-time=1566691200&token-hash=pSPUXhSS5O3B8h-4u3DBO8KRGJXCTNMf3flt_mJb9e0%3D

Fixing this, lets go back to the Sine node for our waves, the values out of the sine node are fluctuating between -1 and +1, this means that in the Add node we just created, we're adding and subtracting which is pushing the ring both inwards and outwards from the center. If the values were to fluctuate between 0 and +1 instead then it will only push the ring inwards. 

We can make this adjustment using the Remap node, with the In Min Max set to (-1, 1) and the Out Min Max set to (0, 1).

To improve it even further, the Remap node can also simultaneously handle our Wave Magnitudeby setting its Out Min Max to (0, Wave Magnitude) as shown above. The Remap node now makes the Multiply node we made a few steps ago redundant so we can remove the Multiply node.

The waves should no longer go beyond the Ring Radius.

 

2.1 Making the Wave chain colorful

1.png?token-time=1566691200&token-hash=voYzaB0LJ5pBtIriKJOb3YYiJHbJ0dRjOMhYK08JyE0%3D

Next up, our waves here need to be turned into the colorful red-blue-green waves we saw earlier in the overview, let's go back to this section of our wave chain and make some room here, this part is actually the simplest.

 

1.png?token-time=1566691200&token-hash=kKrTRjM_TmU7kIEx5Iw-pTQA9-LMRriOZxdFh1rWeGY%3D

Most reading this probably already understand that in terms of Vectors, R,G,B and X,Y,Z are mainly just interchangeable labels used to distinguish the components, the vector itself can be used however we want. So when shader graph presents the Split node with "RGBA" and the Vector 3node with "XYZ" don't be mislead into thinking that their treatment of the components are fundamentally different, for our purposes, they're both just handling Vectors that are made up of 3 or 4 float values.

We can accomplish the RGB coloration by constructing a new Vector 3 entirely out of the 'green' component from the Split node that we are already using for our basic waves. The three components that will go on to represent the red blue and green will need to be equally spaced apart. The first component doesn't need to change, but the second and third components can be offset using the Add node. What offset values to add? Well, earlier we converted the Length Scaleto degrees, so we can add the values 120 and 240 respectively (One third of 360 and two thirds of 360).

If this wasn't converted into degrees, and the polar coordinates had it's default values with a clockwise gradient going from -0.5 to +0.5 then instead we could input 1/3 and 2/3 respectively. Protip: you can input simple sums like that into most fields in Unity.

Comments

금별 08.15 00:22
https://gamefx.co.kr/bbs/board.php?bo_table=tip_01&wr_id=124&&#c_126 <- 2편

번호 포토 분류 제목 글쓴이 날짜 조회
공지 외국 교육 이펙트 튜토리얼 모음(사이트/유튜브/비메오등등..) 댓글+4 금별 2018.05.12 1132
공지 이펙트 추천 사이트/블로그 댓글+5 금별 2018.05.12 1317
89 유니티 유니티 이펙트 팁 - 포털제작 금별 10.19 30
88 언리얼4 언리얼4 이펙트 팁 - Rift to R’lyeh FX 금별 10.15 59
87 언리얼4 언리얼4 - 버텍스 옵셋 예제와 노드 금별 09.16 155
86 유니티 유니티 - 포탈이펙트 예제와 제작과정 금별 09.09 138
85 유니티 유니티 - Stylized 폭포 제작하기 금별 09.07 116
84 유니티 유니티 - 원통형 메쉬에 토네이도형 uv 흐름제어 금별 08.30 132
83 유니티 유니티 이펙트 제작과정 - 사슬로 감싼 폭발형태 제작 금별 08.30 158
82 유니티 마법적 구슬형태 제작 금별 08.30 124
81 유니티 유니티 버텍스 옵셋 효과 예제 Juane Gray 금별 08.20 99
80 유니티 Skeleton Mage Summon With Shaders and Textures 금별 08.20 107
79 언리얼4 언리얼4 - 버블쉐이더 금별 08.20 125
78 유니티 유니티 쉐이더 - 쉐이더그래프/앰플리파이 쉐이더에서의 커스터 버택스 스트림 사용 금별 08.20 78
77 언리얼4 토네이도와 폭발효과 만들기 금별 08.18 147
76 언리얼4 언리얼4 머터리얼 팁 - 텍스쳐없이 만드는 머터리얼 패턴 금별 08.13 126
75 유니티 유니티 쉐이더 그래프 - Weaving Ring Tutorial 2 댓글+1 금별 08.12 120
열람중 유니티 유니티 쉐이더 그래프 - Weaving Ring Tutorial 1 댓글+1 금별 08.12 147
73 유니티 유니티 쉐이더 팁 - 유령 트레일효과 SIN WAVE TRAIL 금별 08.02 132
72 유니티 유니티 쉐이더 팁 - RzFX//Radar Scan World Grid 금별 07.24 118
71 유니티 [NDC 2018] 게임 이펙트를 시작하는 법 금별 07.18 103
70 언리얼4 [NDC] 〈드래곤하운드〉 비주얼이펙트 연출 (언리얼4) 댓글+1 금별 07.18 153
69 유니티 유니티 쉐이더 팁 - 버블 쉐이더 만들기 금별 07.14 257
68 유니티 유니티 쉐이더 팁 - 스크린스페이스 맵핑을 객체의 월드포지션에 고정시키는 방법을 찾기 위한 사소한 팁 금별 07.14 80


Banner
Facebook Twitter GooglePlus KakaoStory NaverBand