마법적 구슬형태 제작



마법적 구슬형태 제작

금별 0 62 08.30 06:32

 

I guess this is the first entry to this category, since I never had such a demand for a write-up before. So here goes!

The different between this format and regular “My take on shaders” post is that this is a more direct format, just going through a particular effect that I find too specific to write a complete tutorial about. Also, in some cases, like this one, I won’t be providing the completed code but I will be writing about the general idea and the process behind the specific effect.

In my tweet I mentioned it being a form of “raymarching” though I might be using the term loosely here. While I use a loop to move towards a certain direction, the technique doesn’t really resemble traditional raymarching. So keep that in mind.

 

The core idea

 

I’ve been constantly thinking about how to take advantage of past effects, and in this case I had an idea concerning the “layered parallax” effect that I demonstrated in an older post.

With that technique, you could sample a texture using coordinates that had been offset “inwards” of the object, by using the camera’s view direction in tangent space. The effect is super useful for adding some depth to materials like ice, or tiles or basically anything you want to make it look like “there’s something underneath the surface”. The result looked something like this:

 

 

My thoughts going from this effect were these:

  • Let’s ditch the main texture, don’t need it for now
  • What if in every “layer” of this effect, I performed a “step” function on a 2D noise texture, where the cutoff value ranges from 0 to 1 based on the “index” of the layer?

The “stepping” (that’s what I’ll call “using the “step” function” from now on) was inspired by the concept of using grayscale textures as heightmaps, with their value representing depth. Adjusting the cutoff value of a simple texture with a radial gradient looks like this:

 

As if the texture actually represents a cone and when I’m using “step” I’m cutting slices into it which decrease in size as I get to the top. Basically I’m super-over-explaining SDFs here, but that representation really helped clear things in my head.

So, if I were to assign 1 to the cutoff value of the out-most layer, 0 to the value of the deepest layer and the inbetween values to the inbetween layers, each parallax layer would have a differently sized “slice” of the texture.

If we add that “stepping” to each layer, with the same radial gradient texture, we end up with something like this (the texture is tiled 5 times so just pay attention to the middle one):

 

This uses 10 iterations on the grayscale texture

Turn up the iterations/number of layers (here it’s something 128) and you have smoothness:

 

Add a somewhat more complex texture, like a simple cloud texture and you have this:

 

 

Trying out random textures and noises is super fun with this one btw.

Add the material on a sphere and you have the ORB:

 

 

Add 2 HDR colors, and lerp between them based on the layer “index” instead of just lerping the intensity from 0 to 1 (also some Post-processing for the looks):

 

 

Add some waving displacement when sampling the texture in each layer for some extra variation and *magic*:

 

 

And that’s it! I hope that was helpful and I hope there will be many more write-ups in the future, especially as I’m easing into VFX stuff at the moment of writing. So, I’ll see you in the next one! ????



 

These posts will never go behind a paywall. But if you really really super enjoyed this post, consider buying me a coffee, or becoming my patron to get exciting benefits!

 

Comments


번호 포토 분류 제목 글쓴이 날짜 조회
공지 외국 교육 이펙트 튜토리얼 모음(사이트/유튜브/비메오등등..) 댓글+4 금별 2018.05.12 1079
공지 이펙트 추천 사이트/블로그 댓글+5 금별 2018.05.12 1250
87 언리얼4 언리얼4 - 버텍스 옵셋 예제와 노드 금별 09.16 39
86 유니티 유니티 - 포탈이펙트 예제와 제작과정 금별 09.09 49
85 유니티 유니티 - Stylized 폭포 제작하기 금별 09.07 47
84 유니티 유니티 - 원통형 메쉬에 토네이도형 uv 흐름제어 금별 08.30 55
83 유니티 유니티 이펙트 제작과정 - 사슬로 감싼 폭발형태 제작 금별 08.30 80
열람중 유니티 마법적 구슬형태 제작 금별 08.30 63
81 유니티 유니티 버텍스 옵셋 효과 예제 Juane Gray 금별 08.20 62
80 유니티 Skeleton Mage Summon With Shaders and Textures 금별 08.20 67
79 언리얼4 언리얼4 - 버블쉐이더 금별 08.20 75
78 유니티 유니티 쉐이더 - 쉐이더그래프/앰플리파이 쉐이더에서의 커스터 버택스 스트림 사용 금별 08.20 39
77 언리얼4 토네이도와 폭발효과 만들기 금별 08.18 77
76 언리얼4 언리얼4 머터리얼 팁 - 텍스쳐없이 만드는 머터리얼 패턴 금별 08.13 75
75 유니티 유니티 쉐이더 그래프 - Weaving Ring Tutorial 2 댓글+1 금별 08.12 83
74 유니티 유니티 쉐이더 그래프 - Weaving Ring Tutorial 1 댓글+1 금별 08.12 107
73 유니티 유니티 쉐이더 팁 - 유령 트레일효과 SIN WAVE TRAIL 금별 08.02 88
72 유니티 유니티 쉐이더 팁 - RzFX//Radar Scan World Grid 금별 07.24 83
71 유니티 [NDC 2018] 게임 이펙트를 시작하는 법 금별 07.18 66
70 언리얼4 [NDC] 〈드래곤하운드〉 비주얼이펙트 연출 (언리얼4) 댓글+1 금별 07.18 105
69 유니티 유니티 쉐이더 팁 - 버블 쉐이더 만들기 금별 07.14 205
68 유니티 유니티 쉐이더 팁 - 스크린스페이스 맵핑을 객체의 월드포지션에 고정시키는 방법을 찾기 위한 사소한 팁 금별 07.14 49
67 유니티 유니티 쉐이더 튜토리얼 - 포트나이트형 갤럭시 쉐이더 제작 금별 07.09 90
66 유니티 유니티 - Soft squish shader(부드럽게 찌그러지는) 댓글+1 금별 07.09 74


Banner
Facebook Twitter GooglePlus KakaoStory NaverBand