마법적 구슬형태 제작



마법적 구슬형태 제작

금별 0 3,102 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


번호 포토 분류 제목 글쓴이 날짜 조회
1196 언리얼4 UE5 UI Material Tutorial - Creating Selection FX for Interactive Game Menus ashif 06.30 14
1195 언리얼4 Build Epic Tab UI System in UE5 with One Click Parameter Control ashif 06.27 39
1194 언리얼4 언리얼5/후디니 - Explodable Skeletal Meshes 만들기 part2(한글자막) 금별 06.27 49
1193 언리얼4 언리얼5/후디니 - Explodable Skeletal Meshes 만들기 part1(한글자막) 금별 06.27 42
1192 언리얼4 Master Progress Bar UI Widget in UE5 - Dissolve & Distort Material Effects ashif 06.25 46
1191 언리얼4 언리얼5 - 인디 게임 VFX 성능 최적화 몇가지팁(한글자막) 금별 06.24 72
1190 언리얼4 후디니/언리얼5 - Pivot Painter 구현과 파괴 효과 제작과정2/데이터맵 언리얼로 임포(한글자막) 금별 06.24 59
1189 언리얼4 후디니/언리얼5 - Pivot Painter 구현과 파괴 효과 제작과정(한글자막) part1 금별 06.24 45
1188 유니티 유니티 앰플리파이 셰이더 - 스텐실 크랙 간단 제작과정(한글자막) 금별 06.24 65
1187 언리얼4 Master Element Selector UI in Unreal Engine 5: Animated Circular Interface Tutorial ashif 06.23 43
1186 언리얼4 언리얼5 간단팁 - 컨텐츠 브라우저 복제팁(Advanced Copy Here) 금별 06.23 68
1185 언리얼4 Creating Dynamic Mana Drain UI Widget in Unreal Engine 5 | Complete Material Setup ashif 06.20 55
1184 언리얼4 Transform Any Character with Magical Eye FX in Unreal Engine 5 Niagara ashif 06.19 52
1183 언리얼4 린반라이브 - 무엇이든 물어보세요(크래쉬 해결 방법/스태틱메시 뷰모드에서 노멀맵 보기/애셋 삭제 주의사항 등) 금별 06.19 62
1182 언리얼4 언리얼5 - Niagara로 실감나는 핏물 VFX 제작과정(한글자막) 파트1 금별 06.19 83
1181 언리얼4 UI Widget Material Ring Selection Tutorial Unreal Engine 5 ashif 06.18 48
1180 유니티 유니티 - Ground Effect와 검기 기초 제작가이드(한글자막) 금별 06.17 85
1179 유니티 유니티 VFX[검기] : 검기 나비 VFX/Particle System과 Airflow 효과 제작가이드(한글자막) 금별 06.17 94
1178 유니티 유니티 VFX[검기] : 검광과 화염 효과 제작 가이드(한글자막) 금별 06.17 58
1177 유니티 유니티 VFX[검기] : 세 가지 검기(Sword Trail) 제작 기법 가이드(한글자막) 금별 06.17 82
1176 언리얼4 언리얼5 - 마야 프렉쳐 시뮬레이션을 언리얼에서 임포팅(한글자막) 금별 06.16 84
1175 언리얼4 The Ultimate UE5 UI Material Tutorial: Mastering Radial Progress Bars ashif 06.12 345

 

Banner
 
Facebook Twitter GooglePlus KakaoStory NaverBand