마법적 구슬형태 제작



마법적 구슬형태 제작

금별 0 381 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


번호 포토 분류 제목 글쓴이 날짜 조회
공지 외국 교육 이펙트 튜토리얼 모음(사이트/유튜브/비메오등등..) 댓글+4 금별 2018.05.12 1712
공지 이펙트 추천 사이트/블로그 댓글+6 금별 2018.05.12 2772
169 언리얼4 Magical Book Effect | Unreal Engine Niagara Tutorials | UE4 Niagara Magical Book ashif 00:58 6
168 언리얼4 UE4 Niagara Explosions Pack 02 in Marketplace ashif 07.06 23
167 언리얼4 Trails | Unreal Engine Niagara Tutorials | UE4 Niagara Trails ashif 07.05 32
166 언리얼4 Volume Smoke | Unreal Engine Niagara Tutorials | UE4 Niagara Volume Smoke ashif 07.03 32
165 언리얼4 Energy Ball Effect | Unreal Engine Niagara Tutorials | UE4 Niagara Energy Ball ashif 06.27 48
164 언리얼4 Glitch Effect | Unreal Engine Niagara Tutorials | UE4 Niagara Glitch ashif 06.26 38
163 언리얼4 Weapon Trail Effect | Unreal Engine Niagara Tutorials | UE4 Niagara Weapon Trails ashif 06.19 39
162 언리얼4 Sun | Unreal Engine Niagara Tutorials | UE4 Niagara Sun ashif 06.12 44
161 언리얼4 Blood Cells Flow | Unreal Engine Niagara Tutorials | UE4 Niagara Blood Cells Flow ashif 06.11 39
160 언리얼4 UE4.25 Niagara Effects Pack 06 in Martketplace ashif 06.10 36
159 언리얼4 Shield Effect | Unreal Engine Niagara Tutorial | UE4 Niagara Shield ashif 06.08 44
158 언리얼4 Particle Attribute Reader | Unreal Engine Niagara Tutorials | UE4 Niagara Particle Attribute Reader ashif 06.01 48
157 언리얼4 Weapon Fx | Unreal Engine Niagara Tutorials | UE4 Niagara Weapon Fx ashif 05.31 49
156 언리얼4 Weapon Projectile | Unreal Engine Niagara Tutorials | UE4 Niagara Projectile ashif 05.30 33
155 언리얼4 언리얼4 나이아가라 - 트레일관련 미니팁 금별 05.30 109
154 언리얼4 Plexus effect with Particle Attribute Reader | Unreal Engine Niagara Tutorials | UE4 Niagara Plexus ashif 05.26 47
153 언리얼4 Fish Flock | Unreal engine 4.25 Niagara tutorial | UE4 Niagara Particle Attribute Reader ashif 05.23 37
152 언리얼4 UE4 Niagara Sci fi Tank ashif 05.21 55
151 언리얼4 UE4.25 Niagara Effects Pack 05 in Martketplace ashif 05.20 37
150 언리얼4 Portal Effect in Unreal Engine 4 inspired from Unreal Engine 5 Portal | UE4 Niagara Portal ashif 05.19 66
149 언리얼4 Birds Flock | Unreal Engine Niagara Tutorials | UE4 Niagara Bird Flock ashif 05.18 45
148 언리얼4 Unreal Engine Niagara Tutorials ashif 05.17 41


Banner
Facebook Twitter GooglePlus KakaoStory NaverBand