Top Banner
스퀘어 에닉스 오픈 컨퍼런스 2012Agni's Philosophy비하인드 스토리 Hair Rendering, Eye Shader, AO, AA, SSS 이민웅 Shader Study
72

「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Jul 03, 2015

Download

Documents

「스퀘어 에닉스 오픈 컨퍼런스 2012」 「Agni's Philosophy」비하인드 스토리 Hair Rendering, Eye Shader, AO, AA, SSS
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Hair Rendering, Eye Shader, AO, AA, SSS

이민웅

Shader Study

Page 2: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

풍부하고 다양한 표현을 현명하게

적용시킨 스킨 셰이딩

• 인물피부표현의 기초가 되는 것이 표면하산란 (SSS)

– 반투명 층이 겹쳐진 구조로되어있는것에 착안해서 만들어진 기법

• 빛을 받는 가운데 6%가 스펙큘러

• 나머지 94%는 피부안에서확산하여 각질층의 색을 기반으로하여 컬러 시프트를일으킨 후 외부로 확산

Page 3: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

인간의 몸이 가지는 투명감의 표현에 도전

Page 4: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

SSS

Page 5: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Poisson disk sampling

• 피하확산 시뮬레이션에

사용하는 텍셀의 샘플링을

포아송 분포의 특수 테이

블을 참조

• 무거운 피하확산 시뮬레이

션에 대한 계산량의 부족

함을 보충

Page 6: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

구현된 SSS의 파이프라인 개념도

Page 7: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

스크린 스페이스에서 처리하기 때문에

거리에 따라 부하가 크게 변화

Page 8: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

SSS없음과 있음의 차이。SSS가 적용되게 되면 일부가 붉은빛이 발생하여 표면이 매끄럽게 된다

SSS없음。SSS가 적용되게 되면 일부가 붉은빛이 발생하여 표면이 매끄럽게 된다

Page 9: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

SSS있음。SSS가 적용되게 되면 일부가 붉은빛이 발생하여 표면이 매끄럽게 된다

Page 10: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

스펙큘러의 표현

• 인물용 스펙큘러에는 단순한 Phong 스펙큘러가지고는 부족함

• Kelemen SzirmayーKalos구현을 기반으로한 스펙큘러(BRDF、쌍방향반사율분포함수)의 기법을 사용

• 반사지점 마다 반사방향・강도가 다른 스펙큘러 처리로 피부의 세밀한 요철에 의해생기는 영향을 가미한 스펙큘러 효과를 얻을수 있음

Page 12: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

스펙큘러의 표현

• SH Irradiance Volume(GI 환경광)으로부터의 영향을 메인으로 하고 큐브맵의 영향을 약하게 블렌딩한 스펙큘러

– 건조한 피부질감을 얻을 수 있다。

• 큐브맵을 기반으로 한 강한 스펙큘러로 이것은 지성에 가까운 피부질감을 얻을 수 있음

– 적절히 조합함으로써, 건성,지성 피부, 흐른 땀등의 다채로운 피부질감을 표현할수 있음

Page 16: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

젖어있는 스펙큘러를 마스킹해서 일부만을 적용함으로써 땀이나 눈물등의 표현을 낼 수 있다

Page 17: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

젖어있는 스펙큘러를 마스킹해서 일부만을 적용함으로써 땀이나 눈물등의 표현을 낼 수 있다

Page 19: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

확산반사에(Diffuse) 화면좌표계

(Screen Space Coordinate) 블러

를 적용하여 의사표면하 산란을 적

용한 결과

Page 21: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

SSS Off。(확산반사(Diffuse)+스펙큘러)

Page 22: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

SSS On。(확산반사(Diffuse) X SSS + 스펙큘러)。최종영상

Page 23: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

AO

• 인물용의 AO도 따로 준비

• 미리 구워놓은 Baked-AO와 리얼타임에 추가하는 SSAO 양쪽을 적절히 필요에 따라 나누어 쓰고 있음

• 일반적인 AO와 다른것은 AO의 레벨에 따라컬러 시프트를 발생시켜 어두운 부분에 약간붉은빛을 띄게하는 것

• 어두운 부분에서 피하확산의 효과가 강조되어붉은빛을 띄게된다 라는 자연스러운 표현을줄 수 있는것

Page 25: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

AO 컬러 계산시 약간에 변화를 주는것으로 인해 어두운 부분에 붉은 빛을 약간 띄게 하고 있다

Page 26: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

AO 없음 요철부분의 강도가 훨씬 더 눈에 띄게 나타나고 있다

Page 27: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

AO의 있음 요철부분의 강도가 훨씬 더 눈에 띄게 나타나고 있다

Page 28: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Back Scattering

• 피부의 투명감을 표현하기 위해, 백 스캐터

링(배경확산)[Back Scattering의 효과가 구

• 손가락이나 귀 등의 얇은 부분에서 배경 빛

이 투과되어, 두꺼운 부분보다 붉은빛을 띄

고 있는 것처럼 보이는 것

• 해당 오브젝트의 두께정보를 추가하여 광

원색을 반영시키는 것으로 구현

Page 29: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

백 스캐터링 없음。자연스러운 투명감이 연출되고 있다

Page 30: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

백 스캐터링 있음。자연스러운 투명감이 연출되고 있다

Page 31: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Eye

• 눈은 단순한 구체가 아님

– 두께를 가진 렌즈가 있고, 그 안에 홍채가 있음

• 눈을 대각선에서 보면, 렌즈에 의한 일그러

짐으로 인해 홍채의 깊이가 다르게 보이는

– 범프 맵핑에서 홍채의 패임을 표현하고, 패럴

렉스 맵핑으로 굴절을 표현

Page 32: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Diffuse에는 범프맵핑으로 움푹 들어간곳

을 표현

환경맵 반사에는 역 범프맵을 사용하여 고

조감을 가지게한다

스펙큘러에는 두개의 범프맵을 둘다 적용 합성된 최종 출력은 이렇게 된다

패럴렉스 맵핑에 의한 굴절표현

어느쪽이 자연스럽게 보이는가

Page 33: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Hair

• 같은 폴리곤 베이스의 머리카락 표현、또 하나는 Nurbs 곡선으로 주어진 제어라인으로 머리카락 다발을 시뮬레이션하여테셀레이션으로 증가시키는 기법– NURBS : 주어진 복수의 제어점으로부터 산술적인 곡선(곡면)을

생성하는 기법

• 2개의 버텍스로부터 이루어지는 선분을 각 버텍스로부터 만들어지는 NURBS곡선으로 변환하는데 테셀레이션 스테이지를사용

• 테셀레이션 스테이지의 헐 셰이더로 주어진 NURBS용 제어점을 기반으로 표현하고 싶은 곡선 정밀도를 구해, 테셀레이터에서 실제로 그정밀도에 따라 선분을 분할

• 분할 정밀도는 시점과의 거리에 따라 값이 결정

• 도메인 셰이더에서 곡선으로써의 의미를 부여하는 작업을 수행

Page 34: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Hair

• 찰랑찰랑한 머리카락에서 서두에 등장하는

남성의 곱슬곱슬한 수염, 하이에나풍 몬스

터의 뻣뻣한 털까지 자연스럽고 다양한 털

의 표현을 할수 있다라는 것

Page 35: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

B-Hair

• B-Hair는 Maya상에서 일반 메쉬로써 만들

며, T-Hair는 Nurbs(Non-uniform rational B-

spline)곡선의 제어점 집합을 가지고 만들

고 있음

• 제어점은 용수철같은 역학오브젝트로써 시

뮬레이션을 수행

• 중력이나 기타 오브젝트, 혹은 바람등 벡터

필드의 영향을 받아 동작

Page 36: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

T-Hair(Tariq-Hair)

• T-Hair의 제어점은 DirectX 11의 Compute

Shader로 스무딩 된 상태에서 테셀레이터

로 증가 시킴

• 지오메트리가 증가할때는 테셀레이터에 주

는 파라미터로 곱슬정도, 왜곡정도, 회전등

을 더할수 있어서, 직선이 아닌 빌보드 텍스

처를 입히는 것으로 머리카락의 품질 표현

을 가능하게 함

Page 40: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

T-Hair는 소환사등 남성 캐릭터의 수염, 혹은 동물의 털에도 사용되고 있다

Page 41: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Maya에서의 데이터는 이와 같이 구성

Page 42: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Nurbs의 제어점은 물리제어된 후 스무딩, 테셀레이션으로

지오메트리 증가, 빌보드 텍스처를 만든다라는 흐름으로 최종 이미지가 된다

Page 43: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

테셀레이터에서의 지오메트리 증가시 변형 파라미터를 주어 다른 털의 품질을 유연하게 표현할수 있다

Page 44: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

테셀레이터에서의 지오메트리 증가시 변형 파라미터를 주어 다른 털의 품질을 유연하게 표현할수 있다

Page 48: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Hair Lighting

• 머리카락의 셰이딩에 대해서는 위의 B-Hair 와 T-Hair 양쪽이 알맞게 스며들어 보여야할 필요가 있어, 난이도가 높은 문제에 해당

• 「Agni's」에서는 머리카락의 색을 정하는하이라이트, 2차원 하이트같은 복잡한 요소를 근사화 하는 Steve Marschner씨에 의한기법을 적용하여 구현

– Light Scattering from Human Hair Fibers

Page 49: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Hair Lighting

• 빛이 머리카락에 닿으면 상당한 비율이 그 표면에서 정반사하여 표면에 하이라이트를 만듬– 1.이 하이라이트는 주로 광원색으로 강하게 나오

는 것

– 2. 머리카락에 투과한 빛은 감쇠하면서도 모발 자체의 색을 흡수하고 방출

– 방출하는 빛중에서 입사하는 쪽으로 돌아온 2차적인 하이라이트를 형성하는것

– 3. 머리카락을 투과하여 방출된 투과광

– 머리카락의 색으로부터 방출하는 빛의 색은 광원색보다도 머리카락의 색이 좀더 지배적

Page 53: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

2차하이라이트를 추가하고 페이즈 시프트를 더한다

Page 54: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

큐브맵에 의한 환경반사등의 라이트를 추가

Page 55: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Hair Shadow

• Hair Shadow– PCF(Percentage Closer Filtering、근접 비율 필터링) 변형

형태를 사용

• PostEffect– 언샵마스크를 사용

• 영상을 선명하게 만드는 기술중 하나

– 음영의 엣지(외곽선)을 두드러지게 하여 머리카락이나 체모(몸의 털)의 깊이 있는 인상표현을 구현

• AA– 엣지부분에 Jaggy가 생기게 되버리는 문제에 대해서는 멀

티샘플링에 의한 안티앨리어싱(MSAA)、포스트 프로세싱적으로 AA를 수행하는 FXAA、그리고 피사계심도(DoF)에 의한 보케를 조합함으로써 자연스러운 엣지감을 연출

Page 60: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

섀도우를 좀 더 적용한 모습

Page 62: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

언샵 마스크로 좀 더 진하게

Page 72: 「스퀘어 에닉스 오픈 컨퍼런스 2012」「Agni's Philosophy」비하인드 스토리

Q&A

참고자료: 퐁퐁퐁 님 블로그

http://blog.naver.com/sorkelf/40186066235

http://blog.naver.com/sorkelf/40175739262