마법적 구슬형태 제작



마법적 구슬형태 제작

금별 0 2,490 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


번호 포토 분류 제목 글쓴이 날짜 조회
1116 언리얼4 Projectile in Unreal Engine 5 Niagara Tutorial ashif 02.18 32
1115 언리얼4 Sword Fire AOE in Unreal Engine 5 Niagara ashif 02.16 50
1114 언리얼4 언리얼5 - 푸른 아우라 폭발 레이어별 제작간단예제 금별 02.15 75
1113 언리얼4 언리얼5 - 카오스 시스템 시작 가이드(한글자막) 금별 02.15 63
1112 언리얼4 린반Live - 언리얼 이펙트 클래식 리뷰하기1 금별 02.15 55
1111 언리얼4 언리얼5 - 시네마틱을 위한 총 머즐플래시 이펙트 제작과정(한글자막) 금별 02.15 50
1110 언리얼4 언리얼 - UV활용 가짜 구형(스피어) 벌지 셰이더 노드예제 금별 02.15 50
1109 언리얼4 언리얼5 나이아가라 - 커스텀 네온 텍스트 스크롤링 효과 제작과정(한글자막) 금별 02.15 45
1108 언리얼4 언리얼 - 표면에 스프라이트를 뎁스 마스크 활용 예제 금별 02.15 44
1107 언리얼4 언리얼5/후디니 - 후디니에서 UE5로 ID정보 내보내기(한글자막) 금별 02.15 42
1106 언리얼4 언리얼5 - 로컬스페이스 3D 프로젝션[UV의 공간 텍스쳐 투영](한글자막) 금별 02.15 48
1105 3D 후디니 - 게임을 위한 VDB 압축 | Houdini용 ZibraVDB(알파) 금별 02.15 48
1104 유니티 유니티 - 역동적인 디졸브활용 세계 변화 효과를 만드는 방법(한글자막) 금별 02.15 45
1103 언리얼4 Volumetric Smoke in Unreal Engine 5 Material Tutorial ashif 02.14 44
1102 언리얼4 언리얼5+C4d - 나무 줄기 생성 효과 제작팁(한글자막) 금별 02.06 178
1101 언리얼4 언리얼5 - 패럴랙스 형태 카드 효과 제작과정(한글자막) 금별 02.04 208
1100 유니티 유니티 셰이더 그래프 - 오디오 비주얼 스케일 효과 간단제작과정(한글자막) 금별 02.03 180
1099 언리얼4 언리얼 간단팁 - 웨이브 형태 움직임의 UV 제어방법 금별 02.03 252
1098 언리얼4 언리얼5 - 사용자 정의 LED 텍스트 제작과정(한글자막) 금별 02.03 185
1097 언리얼4 언리얼 - 플루이드 닌자를 활용한 연기느낌 디졸브 제작 금별 02.03 209
1096 언리얼4 언리얼5 - 스크래치 모듈이 작동하는 방식(한글자막) 금별 02.03 194
1095 2D 어도비 애니메이트 - 번개 시퀀스 텍스쳐 제작과정 금별 02.03 208

 

Banner
 
Facebook Twitter GooglePlus KakaoStory NaverBand