마법적 구슬형태 제작



마법적 구슬형태 제작

금별 0 1,875 2019.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


번호 포토 분류 제목 글쓴이 날짜 조회
264 유니티 유니티/포토샵 - 불속성/물속성 소드 슬래시 간단 제작과정(한글자막) 금별 03.19 125
263 유니티 유니티 - 2D 형태 충격파 궁극기 제작과정 금별 03.17 131
262 유니티 유니티 셰이더 그래프 - 글리치 효과 제작과정 금별 03.10 109
261 유니티 유니티 셰이더 그래프 - 가까운 거리에 따른 오퍼시티 변화 셰이더효과 제작과정(한글자막) 금별 02.28 113
260 유니티 유니티 앰플리파이 셰이더 - 2D 형태 Sci-fi 파티클 테이링 효과 예제 및 제작노드 금별 02.26 102
259 유니티 유니티 - 카툰풍 핵폭발 효과 제작과정(AI한글자막) 금별 02.26 373
258 유니티 유니티 셰이더 그래프 - 간단한 지형스캔 효과 제작방법(한글자막) 금별 02.20 116
257 유니티 유니티 앰플라파이 셰이더 - 입체적 카드 효과 제작과정 금별 02.14 411
256 유니티 유니티 셰이더 그래프 - 2D 카툰풍 구체아우라 확산효과 제작과정 금별 02.07 315
255 유니티 유니티 - 초보자도 이해하는 URP와 성능, 그리고 모바일까지 금별 02.03 133
254 유니티 유니티 셰이더 그래프 - 오디오 비주얼라이저 효과 제작과정 금별 02.02 113
253 유니티 유니티/후디니 - 빔 이펙트 제작과정 금별 01.29 196
252 유니티 유니티 셰이더 그래프 - Zelda: Breath of the Wild의 원격 폭탄 만들기(한글자막) 금별 01.27 186
251 유니티 유니티 - 부분 화면 흔들기 셰이더 제작방법 금별 01.22 179
250 유니티 유니티 앰플리파이 셰이더 - 병의 출렁이는 액체셰이더 제작과정 금별 01.16 163
249 유니티 유니티 - 카툰풍 플루이드형태 피튀김 효과 제작과정 금별 01.16 188
248 유니티 유니티 - 카툰형 토네이도 제작과정 금별 01.13 201
247 유니티 유니티/후디니 - 카툰형 번개/바닥크랙,파편 이펙트 제작과정 금별 01.13 212
246 유니티 유니티 - 카툰 폭파 이펙트 제작과정 금별 01.11 289
245 유니티 유니티 앰플리파이 셰이더 - 색수차 활용 글리치 효과 제작튜토리얼 금별 01.03 198
244 유니티 유니티 앰플리파이 셰이더 - 똥파리 셰이더 옷 제작과정 금별 2023.12.23 218
243 유니티 유니티 앰플리파이 셰이더 - Hell Rift VFX를 만드는 방법(한국어자막/+후디니,섭디) 금별 2023.12.22 231

 

Banner
 
Facebook Twitter GooglePlus KakaoStory NaverBand