Recommended
More Related Content
What's hot
What's hot (20)
Similar to 마른 하늘에 날구름 넣기
Similar to 마른 하늘에 날구름 넣기 (11)
마른 하늘에 날구름 넣기
- 1. 마른 하늘에 날구름 넣기 Unity Procedural Sky System을 개량해 봅시다
- 2. 발표자 소개 청강문화산업대학교 게임콘텐츠스쿨 3학년 Programmer에서…Effect Artist로! / Technical Artist 목표 곧 4학년 전공심화 준비중 김 아진
- 3. 유니티 5의 하늘 시스템
- 4. Unity5 Procedural Sky Shader 유니티5 기본 sky shader Color 값을 받아 연산하여 해의 위치에 따라 하늘의 색상을 변화시켜 낮과 밤을 표현 가능 자동으로 하늘을 만들어 주는 짱편한 시스템
- 5. 현실의 하늘은 어떨까? - 하지만 현실에서는 여러 환경의 변화로 다양한 색깔이 나온다. - 필요에 의해 비현실적인 sky Color를 사용하기도 한다. - Tint 기능이 있지만 한계가 있음
- 6. 현실의 하늘은 어떨까? 하늘에는 색 뿐만 아니라 구름, 별 등 부수적인 환경 또한 존재
- 7. Unity5 Procedural Sky Shader ….캘리포니아에 어서 오세요
- 8. Unity5 Procedural Sky Shader ….캘리포니아에 어서 오세요 ….여긴 한국이지만
- 9. 구름을 넣고 싶어요
- 10. 구름을 추가해 봅시다 랄랄라 방법 1 파티클로 만든다
- 11. 구름을 추가해 봅시다 랄랄라 방법 1 파티클로 만든다 교수님의 노여움을 획득하였습니다 느려!!!!!!!!!!!!
- 12. 구름을 추가해 봅시다 랄랄라 방법 2 돔을 만들어 맵핑을 입힌다 “TERA에 사용된 렌더링 테크닉”-임신형 (2011)
- 13. 구름을 추가해 봅시다 랄랄라 방법 2 돔을 만들어 맵핑을 입힌다 전 화면 Alpha Blending(…ㄷㄷㄷㄷ) 아니 그전에 PBS와의 연결은 … Reflection Probe 를 만들어야만 연결가능
- 14. 구름을 추가해 봅시다 랄랄라 방법 3 Procedural Sky Shader를 뜯어서 개량한다 교수님에게 만들어 달라고 하자
- 19. …이렇게 시작 되었습니다. 절벽에서 떨어지게 되었습니다. 살려주세요….
- 20. 하늘을 연구해 봅시다
- 21. 만들기에 앞서 하늘 대해서 대강 알아보았습니다. 이전 까진 아무 생각 없이 살았는데….
- 22. 하늘은 왜 파란가요?
- 23. 하늘은 왜 파란가요? 대기의 기체와 부딪혀 산란될 때 빛은 여러 가지 색상으로 분산 길이가 짧은 푸른색 광원 “청색광” 파장의 길이가 긴 붉은색 광원“적색광”.
- 24. 하늘은 왜 파란가요? 길이가 짧은 푸른색 광원 “청색광”은 입자와의 충돌이 많이 일어나 사방으로 골고루 퍼지지만, 멀리까지 가지 못한다. 길이가 긴 붉은색 광원 “적색광”은 입자와의 충돌 하는 비율이 낮은 편이지만 멀리 까지 갈수 있다.
- 25. 하늘은 왜 파란가요? 태양의 고도가 높아지면서 대기층을 통과하는 거리가 짧아진다. 이때 파장이 짧은 푸른색이 우세하게 산란되어 푸른색이 사방에서 우리 눈으로 들어오게 된다.
- 26. 보너스 : 노을은 왜 붉은가요? 해가 질 때는 태양의 고도가 낮아지면서 빛이 대기층을 지나는 거리가 길어지며 파장이 긴 적색광만 남아 하늘이 붉게 보이게 된다.
- 27. 보너스 : 노을은 왜 붉은가요? 해가 질 때는 태양의 고도가 낮아지면서 빛이 대기층을 지나는 거리가 길어지며 파장이 긴 적색광만 남아 하늘이 붉게 보이게 된다.
- 28. 구름이란? 구름은 대기에 떠다니는, 작은 물방울이나 얼음 알갱이의 모임이다. 수십억 개의 작은 물방울들이 모이면 구름으로 관측이 가능하다 구름이 하얀 이유 구름의 색깔은 하얀색을 띄는데 이는 입자의 크기가 크기 때문에 파장의 길이에 영향을 받지 않고 모든 빛의 성분을 반사하기 때문이다 이 현상을 “Mie Scattering”(미 산란) 이라 한다.
- 29. 구름이란? 구름의 모양과 형성된 높이를 기준으로 분류 크게 상층운,중층운,하층운 분류한다.
- 30. 대충 조사해 봤으니 구현해 봅시다
- 31. 비교적 간단한 구조의 Shader Forge에서 출발! …보기가 편해서
- 32. LightDir · viewDir Fresnel 공식의 일부 즉! Fake Specular 범위제한 , Light Color와 강도 연산 Sky Color 연산
- 33. 하늘 색상 표현
- 34. 하늘 색상 표현 Horizon Color Sky Color Top Color Horizon Color Sky Color Top Color
- 35. Horizon + Sky+ Top Horizon +Sky Color Top Color float3 Sunset3 = lerp(_SkyColor.rgb, _SunSetColor.rgb, normalizeWorldPostion.y); float3 SkyColor = lerp(Sunset3.rgb, _HorizonColor.rgb, pow((1.0 - max(0, dot(viewDirection, float3(0, -1, 0)))), 8.0)); float3 FinalSkyColor = lerp(SkyColor, _SkyTopColor.rgb, max(0, dot(viewDirection, float3(0, -1, 0)))); Sky Color Horizon Color 하늘 색상 표현
- 36. Color를 입력 받아 낮과 밤의 하늘을 만들어줍니다. 이대로 낮->밤의 색상으로 해의 위치에 따라 Lerp 해주면 됩니다! Day Color Night Color 하늘 색상 표현
- 37. Color를 입력 받아 낮과 밤의 하늘을 만들어줍니다. 이대로 낮->밤의 색상으로 해의 위치에 따라 Lerp 해주면 됩니다! Day Color Night Color 하늘 색상 표현 Day Color sun 90도 Lerp값은 1
- 38. Color를 입력 받아 낮과 밤의 하늘을 만들어줍니다. 이대로 낮->밤의 색상으로 해의 위치에 따라 Lerp 해주면 됩니다! Day Color Night Color 하늘 색상 표현 Night Color sun -90도 Lerp값은 0
- 39. Directional Light는 위치 값이 아니라 각도 값으로 라이트의 방향이 결정된다. 즉 각도=방향 = _WorldSpaceLightPos0 x,y,z 하지만 _WorldSpaceLightPos0 x,y,z 반환 값이 정확하게 어떤 “범위”로 넘어오는지 모르고, Lerp를 사용하기 위해서는 범위가 0~1 나와야 한다 해의 위치? 하늘 색상 표현
- 40. 하늘 색상 표현 머리가 안 좋으면 몸이 고생한다고.. X,Y,Z를 모두 대입해보았다..
- 41. 하늘 색상 표현 머리가 안 좋으면 몸이 고생한다고.. X,Y,Z를 모두 대입해보았다.. _WorldSpaceLightPos0.x -> Rotation Y축에 영향을 받음
- 42. 하늘 색상 표현 머리가 안 좋으면 몸이 고생한다고.. X,Y,Z를 모두 대입해보았다.. _WorldSpaceLightPos0.y -> Rotation x축에 영향을 받음
- 43. 하늘 색상 표현 머리가 안 좋으면 몸이 고생한다고.. X,Y,Z를 모두 대입해보았다.. _WorldSpaceLightPos0.y -> Rotation x축에 영향을 받음
- 44. 하늘 색상 표현 float3 emissive = lerp(DayColor.rgb, NightColor.rgb,_WorldSpaceLightPos0.y); -90에 가까울수록 night Color 컬러 값이 나와야 되는데.. 원하는 컬러 값 Night Color sun -90도 Lerp값은 0
- 45. 하늘 색상 표현 float3 emissive = lerp(FinalSkyColor.rgb, FinalSkyColor2.rgb,_WorldSpaceLightPos0.y); -90에 가까울수록 지정한 컬러 값이 나와야 되는데.. ,_WorldSpaceLightPos0.y 에 따라 컬러 원하는 컬러 값 0 이하의 값이 나오는 것 같다! 범위 값 1~-1
- 46. 하늘 색상 표현 - _WorldSpaceLightPos0.Y 값에 *0.5+0.5 곱하여 하프 램버트 처럼 범위 값을 줄여준다 그런데 노을이 없다!!
- 47. 노을을 추가 하자 Horizon Color Sky Color Horizon + Sky+ TopHorizon +Sky Color Top Color Sunset color를 추가로 Lerp float3 Sunset = lerp(_SunSetColor.rgb, _SkyColor.rgb, saturate(dot(float3(0,1,0),_WorldSpaceLightPos0.xyz))); 하늘 색상 표현
- 48. Sky Color Sunset color float3 Sunset = lerp(_SunSetColor.rgb, _SkyColor.rgb, saturate(dot(float3(0,1,0),_WorldSpaceLightPos0.xyz))); 하늘 색상 표현 Sky Color sun 90도 Lerp값은 1 각도의 값이 0 이면 1를 리턴
- 49. float3 Sunset = lerp(_SunSetColor.rgb, _SkyColor.rgb, saturate(dot(float3(0,1,0),_WorldSpaceLightPos0.xyz))); 하늘 색상 표현 Sunset Color sun 0도 Lerp값은 0 Sky Color Sunset color
- 50. 하늘 색상 표현
- 51. 구름 만들기
- 52. 구름은 텍스쳐를 이용하자! 일단 그냥 텍스쳐를 넣으면… ? UV가 이상하다! 구름의 표현
- 53. Vertex를 가지고 있다. 하지만 유니티 내부에 숨겨져 있기 때문에… 기존의 방식인 언랩을 통하여 uv 를 조작할수가 없다 구름의 표현
- 54. 그렇기 때문에 구형으로 텍스쳐가 매칭되게 UV를 연산을 통하여 만들어 주어야 되는데.. 구름의 표현
- 55. 그렇기 때문에 구형으로 텍스쳐가 매칭되게 UV를 연산을 통하여 만들어 주어야 되는데.. 전혀 모르겠습니다 몰라 무서워 구름의 표현
- 56. 코드가 갈 길을 잃었을 때…. 그때 제게 와주셨습니다 . 구름의 표현
- 57. 코드가 갈 길을 잃었을 때…. 그때 제게 와주셨습니다 . i.uv.y= i.uv.y*0.5 + 0.5; i.uv.x = (PI+atan2(i.posWorld.x ,i.posWorld.z)) /(2*PI); 구름의 표현
- 59. 텍스쳐 레이어 4장을 사용 원경 표현이 가능하며 , 다양한 구름의 모양을 입체적으로 느낄 수 있음 구름의 표현 Layer3 하층운 Layer2 중층운 표현 Layer1 상층운 표현 Layer0 천체표현
- 60. 텍스쳐 레이어 4장을 사용 원경 표현이 가능하며 , 다양한 구름의 모양을 입체적으로 느낄 수 있음 구름의 표현 Layer3 하층운 Layer2 중층운 표현 Layer1 상층운 표현 Layer0 천체표현
- 61. 텍스쳐 레이어 4장을 사용 원경 표현이 가능하며 , 다양한 구름의 모양을 입체적으로 느낄 수 있음 구름의 표현 Layer3 하층운 Layer2 중층운 표현 Layer1 상층운 표현 Layer0 천체표현
- 62. 텍스쳐 레이어 4장을 사용 원경 표현이 가능하며 , 다양한 구름의 모양을 입체적으로 느낄 수 있음 구름의 표현 Layer3 하층운 Layer2 중층운 표현 Layer1 상층운 표현 Layer0 천체표현
- 63. 최종적으로는…. 구름의 표현
- 64. 이렇게 해서 완성되었습니다
- 65. 결론
- 66. 결론 Procedural Sky 에서 모든 것을 처리 - Reflection Probe 를 사용하지 않아도 Unity PBR에 대응할 수 있다 - … 비친 구름이 흘러가면 참 좋겠지만 구현도 구현이고 저걸 매 프레임 업데이트 하자니 퍼포먼스적으로 엄두도 안남 - 일단 Reflection Probe 정도는 된다는 데에서 만족
- 67. 결론 구름과 별 추가 / 하늘 색상 수정가능 - 4장의 구름 / 1장의 별 레이어 - 하늘 색상을 직관적으로 접근가능 - 이전의 Tint 방식이 물리적으로는 맞을지 몰라도 … (…이쁘고 편한게 장땡)
- 68. 결론 Draw call 1유지 - 알파 블렌딩 연산 구름이 아니기 때문에 모바일에서도 쓸만한 퍼포먼스 - Lerp 연산 4회는 조금 무겁지만 추후 퍼포먼스 대응으로 #ifdef으로 레이어 개수 조절 가능하 게 만들 예정
- 69. Thank you Sky Color에 대하여 http://www.gamedevforever.com/85 하늘이 파란이유 : 산란 http://www.cyberschool.co.kr/gh/gh14.htm 위키백과 https://ko.wikipedia.org/wiki 해의 크기 변화 http://tip.daum.net/question/48470138 Tera Rendering Techniques http://www.slideshare.net/valhashi/2011-03-gametechtadptforpdf
Editor's Notes
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 처음 유니티5를 켰을 때 보았던 하늘으
- 산란하여 색이 분산될 때 크게 분류하자면 길이가 짧은 푸른색광원과 길이가 긴 붉은색 광원이 나오게 됩니다.