[Shader] Bubble Shader

공부용으로 작성되는 페이지입니다. 틀린 부분이나 환경에 따라 오류가 발생할 수 있습니다. 

 

---

 

비눗방울 표현 원리 

 

 

비눗방울의 특징을 생각해보면 전체적으로 투명하고 주변 물체들이 비치는(reflect) 것이다. 

대신, 비치는 현상 때문에 가운데 부분은 약간 불투명한 모습을 보여주며, 전체적으로 불규칙하고 무지개를 연상시키는 색상으로 이루어져있다.

요약하자면 반사(주변부를 비춤) + 무지개 색(가장자리로 갈수록 강해짐)  핵심이다. 

 

그 밖에도 비눗방울 자체의 성질상 고정되지 않고 일렁이는 특징도 표현하고자 하려면 쉐이더 파트에서 묘사 할 수 있다. 

 

제작 방법 생각해보기

 

완벽한 물리 계산을 하기 어렵다면 Texture를 사용해서 제작하는 방법도 있다.

계산식이 복잡하다는 이유도 있고, 색상 계산이 따로 필요 없게 된다는 장점이 있지만 MainTexture 외에도 규격에 맞는 CubeMap이 필요하다. 

나는 일단 텍스쳐 기반이 아니라 전부 HLSL로 따로 색상을 작성해줄 예정인데, 그래도 CubeMap 하나는 받게 할 것이다.

 

다른게 아니라 반사 특성을 만들기 위해 환경맵과 동일한 맵을 적용해서 표현한다. 

 

Shader

언제나 그렇듯 URP 기반 HLSL로 작성한다.

 

적용 전

 

투명 처리가 제대로 되지 않는 문제가 생겼는데 로직 자체에 문제가 있었다기 보다는 Blend 설정이 작성되지 않아서 그런거였다. 

Blend SrcAlpha OneMinusSrcAlpha

 

 

 

적용 후

큐브맵은 Col에 섞이도록 Reflect로 적용해주었다. 이렇게 하니 이전에 했던 Reflection과 아무래도 유사한 효과처럼 보이더라.

Finalcol로 따로 선언해서 입맛대로 조정해주었다. 

TEXTURECUBE(_Cube);
SAMPLER(sampler_Cube);
            
//reflec CUBEMAP
float3 reflectCUBE = reflect(-normalize(IN.viewDir), normalize(IN.normalWS));
float3 reflection =  SAMPLE_TEXTURECUBE(_Cube, sampler_Cube, reflectCUBE).rgb;

 

다만 단순히 환경맵이 반사되기만 하면 어색해서 굴절도 포함시켜주려고 했으나, GrabPass{}는 URP에서 현재 지원되지 않는다.

이래저래 찾아봤으나 굴절은 생각보다 구현하기가 어려워서 일단 패스했다. 

 

희미하게 반사되는 (척) 하는 비눗방울

 

여기까지 만들었으면 이제 문제는 가장자리만 무지개빛이 적용되어있다는 점. 해결하기 위해 Thin-film Texture풍의 Noise를 적용한다.

텍스쳐의 1(검정) 부분에 마스킹을 하고 싶었는데 한참 만지고 나서야 깨달았다.

 

noise Texture도 Sphere Map으로 넣어줘야한다는 사실을... 그러니 의도대로 들어가지 않을 수 밖에 없는데 ... 

 

 

Sphere Cubemap은 일반 Cubemap에 비해서 무료 자료를 찾기 힘들다. 아쉬운대로 현재 noise Texture를 적용하고 끝. 

결과물 

 

 

 

 

 

결국 비눗방울 효과를 재현하는데에만 큐브맵 반사, 버텍스 애니메이션, 노이즈 텍스쳐 기반 색상 변화를 전부 들어갔다. 

생각보다 복잡한 과정을 거쳤다. 그나마 위안은 굴절 효과를 만들지는 못 했어도, 애니메이션 덕분에 어느정도 굴절처럼 보인다는 점? 

 

그러나 역시 질감 표현을 살리지 못 했고 채도도 애매하다. 이녀석은 추후에 다시 도전해봐야겠다.

 

 

참고자료

 

 

Thin-film interference - Wikipedia

 

 

 

Cg/HLSL에서 셰이더 프로퍼티 액세스 - Unity 매뉴얼

 

Panorama to Cubemap