실감 공통편 레벨 디자인 2
안녕하세요
언리얼 그래픽스 강의를 담당하게 된 탁광욱입니다
이번 시간에는 화이트 박싱으로 제작된 레벨 표면에
재질을 입히는 방법에 대해 알아볼 텐데요
먼저 아파트 색 입히기 예제를 통해서
머티리얼에 대한 개념과 표현 방법에 대해 알아보고
아파트 벽면 질감 입히는 실습을 통해
머티리얼을 적용하는 방법을 학습해 보도록 하겠습니다
머티리얼의 생성과 적용
벽면에 색을 칠해 보도록 하겠습니다
벽에 색을 칠하기 전에
재질을 표현하는 원리에 대해서 알아보도록 할게요
3D 공간을 표현하는 대부분의 프로그램들
언리얼 엔진이나 블렌더, 3D MAX, MAYA 같은 프로그램들은
오브젝트를 보여주기 위해서
대부분 비슷한 구성으로 이루어집니다
위에 보이는 것처럼 점과 선과 면으로 형태를 구성하는 Mesh
그리고 숫자나 이미지들을 이용해서 재질을 표현하는 머티리얼
이 두 가지 요소가 있어야 3D 물체 혹은 입체를
3D 공간 안에서 표현하게 돼요
이렇게 두 요소는 시각적인 표현에서
특히 3D 공간에서 반드시 필요한 요소들이에요
어떤 프로그램을 막론하고요
여기에 엔진 같은 경우
언리얼 엔진 같은 경우에는 Collision이라고 해서
충돌을 감지하는 영역을 정해주는 요소가 있고요
Collision이라고 하는
그리고 그 외의 여러 가지 기능들을 담당하는
컴포넌트들이 결합을 해서 하나의 액터를 구성하고 있죠
이 중에서 우리는 머티리얼을 다루게 될 거예요
그럼 여기 거실에다가 오렌지색을 한번 넣어보도록 할게요
색을 만들기 위해선 머티리얼이 필요하다고 했었죠
그래서 콘텐츠 드로우를 열어서
우리는 콘텐츠에다가 폴더를 하나 만들게요
뉴 폴더를 하나 만들어서 Materials라고 할게요
Materials 폴더를 하나 만들고요
이 콘텐츠 드로우는 이제 많이 쓸 거니까
Dock in Layout을 클릭해서
항상 이렇게 빼놓도록 하겠습니다
그럼 이렇게 튀어나와 있죠
우리가 만들었던 Materials 폴더에다가
애셋을 하나 만들어 보도록 할게요
빈 곳에 우클릭을 해도 되고요
혹은 Add 버튼을 눌러서 머티리얼을 선택해도 상관없습니다
저는 우클릭을 눌러서 머티리얼을 선택하도록 할게요
이름은 M_Orange라고 할게요
머티리얼을 생성했으면 이 머티리얼이
오렌지색을 담을 수 있도록 설정을 해줘야 되겠죠
그래서 더블 클릭을 해서
이렇게 머티리얼 에디터로 들어가 보도록 하겠습니다
더블 클릭해서 저는 전체 화면으로 놔두고요
보시면 왼쪽에는 이 재질의 미리보기가 있고요
그 밑에는 디테일 창이 있죠
여러 가지 설정들을 관리하는 곳이에요
그리고 가장 중요한 부분이
가장 많이 보게 될 부분이 가운데인데요
여기를 보통 그래프라고 하고요
이 빈 공간을 머티리얼 그래프라고 하고
가운데에 노란색 박스가 있는데
여러 가지 정보가 있는 박스가 있는데요
이 박스를 노드라고 부릅니다
노드는 잡아서 이렇게 이동을 할 수가 있고요
마우스 우클릭을 하고 이렇게 움직이면 이동할 수가 있어요
그래프 자체를 이렇게 이동할 수가 있어요
좌클릭해서 이동하면 노드를 움직일 수 있는 거고요
우클릭해서 움직이면 전체가 다 이렇게
이동을 할 수가 있는 겁니다
보시면 이 노드가 결과적으로는
머티리얼을 최종적으로 보여주게끔 하는 최종 노드가 돼요
여기에 여러 가지 옵션들이 있죠
마우스 휠을 왔다 갔다 하면 확대 축소가 되고요
여기서 Ctrl 키를 눌러서 확대를 하면 더 확대가 됩니다
여기 보시면 Base Color가 있고 Metallic이 있고
Specular, Roughness 이렇게 있는데요
그 중에서 우리는 Base Color라고 있죠
Base Color에 보시면 오른쪽에 네모칸이 있어요
이 네모칸을 클릭하면 색깔을 지정할 수가 있습니다
여기서 오렌지색을 선택해 보도록 할게요
오른쪽 아래에 있는 이 부분이 내가 지금 선택한
새로 선택한 색깔이라고 생각하시면 좋아요
지금 약간 노란색이 좀 많이 있으니까
붉은색을 조금 섞어서 이렇게 오렌지에 가깝게 선택하시고
ok 버튼을 누르면 여기에 오렌지 색깔이 들어가고요
그다음에 미리보기도 이런 식으로
오렌지 색깔로 나오는 걸 볼 수가 있습니다
이렇게 한 뒤에 반드시 머티리얼은
상단에 Apply를 한 번 눌러줘야 됩니다
확정을 지어주는 거예요
확정을 지어주고 나서 그다음에 상단에 보시면
이름 옆에 별 표시가 있는 걸 볼 수가 있습니다
별 표시가 있다는 것은 저장할 거리가 있다
수정을 하고 아직 저장하지 않았다는 의미예요
즉, Apply는 적용해서 시스템에 반영시키겠다는 의미고요
이 별 표시가 있다는 것은 저장하겠다
즉, 하드디스크에 기록을 하겠다는 의미로
생각하시면 좋을 것 같아요
그래서 왼쪽에 보시면 여기 디스크 표시가 있죠
저장 표시를 클릭하면 하드디스크에 기록이 되면서
이렇게 별 표시가 사라진 것을 볼 수가 있습니다
그래서 항상 Apply를 하고 저장 버튼을 눌러주면
확실하게 오류 없이 진행이 되는 걸 볼 수가 있을 거예요
이렇게 오렌지색을 담았죠 이렇게 된 상태에서
이 창을 내리거나 혹은
저 같은 경우에는 내리는 것보다는 이 창을 옆에다가
이 레벨 옆에다가 이렇게 겹쳐둘게요
왔다 갔다 왔다 갔다 해볼게요
다시 아파트 레벨로 돌아와서요
콘텐츠 브라우저를 보시면 이렇게 오렌지 색깔이 된
머티리얼을 볼 수가 있을 겁니다
이 머티리얼을 이제 벽에다가 칠해주면 돼요
어떻게 하냐면 그냥 드래그 앤 드롭하시면 됩니다 간단하죠?
그래서 이 안쪽을 전부 다 이런 식으로
드래그 앤 드롭해도 되고요
이 벽면 있죠 이 벽면을 선택한 상태에서
우측에 보시면 디테일 창에
Surface Material이라고 하는 항목이 있습니다
Geometry Brush Actor는 각각의 면들을
따로 이런 식으로 선택을 할 수가 있어요
선택하는 것에 따라서 이 옵션들이 조금씩 바뀔 거예요
그래서 내가 지금 선택한 이 면
이 면을 선택한 상태에서 Surface Material에다가
여기 Element 되어있는 이 부분 있죠
None이라고 되어있는 부분에다가
이렇게 드래그 앤 드롭하면 머티리얼이 꽂아 들어가면서
적용이 되는 걸 볼 수가 있어요
또는 이번에는 옆쪽에 이 벽면을 한번 볼까요
클릭을 한 상태에서
여기 이 부분에다가 드래그 앤 드롭했죠?
혹은 이 오른쪽에 None 있죠
None을 클릭해서 검색을 해도 됩니다
이름을 우리가 M_Orange라고 했었는데 검색하니까 나오죠
이 M_Orange를 선택해도 적용이 되는 걸 볼 수가 있습니다
그래서 총 세 가지예요
드래그 앤 드롭을 하든지 이렇게 혹은
이 끝에 벽을 볼까요?
드래그 앤 드롭을 하든지 혹은 이 벽면을 선택을 해서
Surface Material에다가 드래그 앤 드롭을 하든지
이거는 나눠지지 않았네요 이건 나중에 바꿔야 될 것 같아요
그리고 이 면을 선택한 상태에서 None을 선택해서
우리가 만든 애셋을 검색을 해서 이렇게 집어넣든지
여러 가지 방법이 있겠죠
거실을 일단은 다 둘러서 마무리해 보도록 하겠습니다
안쪽 방도 색을 넣어볼 텐데
여기는 약간 푸른 느낌으로 한번 만들어 볼게요
푸른 느낌을 만들기 위해서 이렇게 적용하고
오렌지에서 오렌지 컬러를 파란색으로 바꾸면 파란색이 되죠
Apply 하고 저장을 눌러보면
이런 식으로 여기만 바뀌는 것이 아니라
오렌지가 적용되었던 모든 머티리얼들이
다 바뀌는 걸 볼 수가 있습니다
우리는 여기서 알게 되겠죠
이 머티리얼은 공유하는 것이다
액터에 머티리얼 애셋을 공유하는 것이라는 걸 알 수 있어요
그래서 다시 돌려 놓고
다시 돌려 놓고요
그렇다면 여기에 있는 벽에다가
파란색을 칠하기 위해서는 어떻게 해야 될까요?
머티리얼을 하나 더 만들어야 됩니다
그래서 우클릭 머티리얼 이름은 M_Blue라고 할게요
그래서 더블 클릭해서 똑같이
Base Color의 색깔을 파란색으로 바꿔주면 된다
지금은 Base Color의 색깔을 바꿨지만
아마 여러분들이 구글이나 혹은 인터넷에서
여러 가지 언리얼 관련 튜토리얼을 찾아보시면
옛날 버전 정확히 얘기하면 언리얼 엔진 5.2 이전 버전에서는
이 Base Color 뒤에 있는 컬러를 바꿀 수 있는 메뉴들 이런 옵션
그다음에 Metallic 혹은 Specular 옆에 있는
이런 수치들을 입력할 수 있는 슬롯들이 없습니다
이 노드에서 바로 이런 값을 지정할 수가 없게 되어있어요
그러면 예전 방식은 어떻게 했느냐
이 컬러 값을 여기 핀에다가 꽂아 줘야 돼요
그래서 이번에는 옛날 방식으로 한번 해보도록 하겠습니다
최근까지도 쓰고 있었던 방식이기 때문에
여러분들은 이 방식도 반드시 알아둘 필요가 있어요
그래서 한번 해볼게요
빈 공간에서 이 컬러 값을 가지고 오는
노드를 불러오도록 하겠습니다
이 바탕에서 우클릭을 하고
Constant3Vector라고 검색을 해보시면
Constant3Vector라고 하는 노드를
클릭해서 꺼낼 수가 있게 됩니다
이 Constant3Vector는 색을 이루는 세 가지의 채널을
보통 RGB라고 하는 세 가지 채널을 이용해서
디지털 컬러를 표현하고 있죠
레드, 그린, 블루 이 세 가지 채널이요
이 레드, 그린, 블루 세 가지 채널을
X, Y, Z라고 하는 변수에다가 담아서 사용하는
그런 노드라고 생각하시면 돼요
다시 말하면 X에다가는 레드 채널을
Y에다가는 그린 채널을
Z에다가는 블루 채널을 담고 있다고 생각하시면 좋아요
그래서 RGB 채널을 수치들을 입력해서 그 값을 담아서
Base Color에다가 전달하는 노드라고 생각하시면 됩니다
물론 각각의 채널대로 수치를 넣을 수도 있고요
아래쪽에 검은 부분 있죠 이 검은 부분을 더블 클릭해도
선택을 할 수가 있습니다 이렇게
이렇게 선택을 할 수 있어요
ok 버튼 누르면 이런 식으로 색깔이 바뀌는 걸 볼 수 있죠
그러면서 바로 RGB 채널의 값이
입력이 되는 걸 볼 수가 있습니다
그러면 이 값을 Base Color에 어떻게 연결을 하느냐
위에 있는 하얀색 핀 있죠 오른쪽에 있으니까
오른쪽에 있으면 아웃핀 밖으로 빼는 핀을 의미하고요
노드의 왼쪽에 있는 핀을 입력핀이라고 합니다
그래서 전체적인 어떤 데이터의 흐름은
왼쪽에서 오른쪽으로 흘러가요
노드는 대부분 왼쪽에서 오른쪽으로
우리가 책을 읽듯이 왼쪽에서 오른쪽으로 흘러가는
데이터의 흐름으로 언리얼 엔진은 구성되어 있어요
그래서 노드에서 오른쪽 핀이다라고 하는 것은
오른쪽으로 데이터를 빼내겠다는 의미고요
그다음에 지금 Base Color 입력핀 같은 경우에는
이 M_Blue라고 하는 노드의 왼쪽에 있으니까 입력핀을 받겠다
데이터의 흐름을 받겠다는 의미로 되어있는 거예요
그래서 여기다가 아웃핀으로 빼서
입력핀으로 이렇게 집어 넣으면 되는 겁니다 간단하죠?
그러면 여기 있었던 정보는 사라지고
대신에 이 앞에 있는 노드로
정보가 교체된 것을 알 수가 있습니다
일반적으로 이게 제일 많이 쓰이는 방법이긴 해요
Apply 하고 저장을 하면
이런 식으로 파란색 머티리얼이 생성된 걸 볼 수가 있습니다
역시 마찬가지 드래그 앤 드롭해서 적용을 시켜 줄게요
안쪽에다가 이렇게 적용을 시켜주겠습니다
안쪽이 빨간색인 것보다는
현관 안쪽이 파란색인 게 훨씬 더 나을 것 같아서
일단은 이렇게 정리를 하도록 하죠
이번에는 역시 같은 방법으로 큰 방도 한번 만들어 볼까요
큰 방은 약간 노란 색깔의 머티리얼로 만들어 보도록 할게요
역시 마찬가지 우클릭 머티리얼
이름은 M_Yellow라고 할게요
더블 클릭을 해서 역시 마찬가지로 우클릭
Constant3Vector를 클릭을 한 다음에
노란색을 선택을 해서 이렇게
이렇게 노란색을 선택해서
Base Color에다가 이렇게 입력하면
노란색으로 바뀌는 걸 알 수가 있죠
이렇게 Apply 저장을 하고요
이 노란색 머티리얼을 각각 면에다가
적용시키면 되겠죠 됐습니다
이렇게 각각의 색은 각각의 머티리얼을 만들어서
하나씩 하나씩 넣어야 된다는 걸 알았죠
그러면 우리는 이번에는
머티리얼 안에 있었던 Base Color 말고도
여러 가지 요소들이 있었던 걸
우리는 확인할 수가 있었을 겁니다
이번에는 머티리얼의 이런 정보들이 뭔지
몇 가지만 알아보도록 할게요
그 전에 최종 노드의 구성을 보시면
여러 요소들의 값을 꽂아 넣게 되어있죠
입력하게 되어 있습니다
그리고 이 노드는 아웃풋으로 밖으로
이 데이터들을 뺄 수가 없다 그랬어요
그래서 최종 노드인 거예요
최종적으로 끝나는 노드라는 의미라는 거죠
이 노드는 이 요소들의 값들
즉, 파라미터라고 하는 이 요소들의 값들을 받아서 계산해서
최종적으로 어떻게 보일지를 결정하는 노드예요
이렇게 이 노드 안에는
재질을 어떻게 보일 것인가를 결정하는
계산식 혹은 함수가 들어있습니다
즉, 어떤 계산식들이 담겨있는 하나의 박스
이 노드 안에 담긴 계산식을 우리는 보통
쉐이더라고 부릅니다
이것은 보통 코드로 되어 있어요
외부에서 이런 식으로 노드를 입력받으면
그 입력받은 파라미터 값을 이 노드 안에 있는
계산식을 통해서 열심히 계산되어 나온 그 결과 값을
재질에 표현을 하는 것이죠
그리고 언리얼 엔진은 쉐이더 계산의 베이스가 되는 시스템으로
PBR이라고 하는 시스템을 도입하고 있습니다
PBR 시스템은 Physically Based Rendering의 약자이고요
우리는 현실에서 빛이 물체의 표면에 반사되서
눈으로 들어와서 물체를 인식하는데
3D 공간 안에서도 이런 현실과 같은 현상을
그대로 묘사를 해요
조명에서 어떤 입자를 쏴서 오브젝트의 표면에 부딪혔을 때
이 머티리얼 안에 있는
쉐이더의 복잡한 물리 공식들을 통해서
계산되어서 변화되어 나온 값을 카메라가 보면서
이 오브젝트의 재질을 인지하게 되는 거죠
이렇게 현실을 그대로 묘사를 하다 보니까
PBR 시스템은 현실과 같은 사실적인 표현이 가능해졌습니다
과거에는 이런 복잡한 물리 계산들을 할 수가 없었어요
특히나 실시간 엔진에서는 불가능했고요
3D MAX라든지 MAYA나 블렌더 같은
이미지나 영상 렌더링만 하는 프로그램에서만 쓰였는데
요즘은 컴퓨터의 성능이 좀 좋아지고요
그다음에 쉐이더 코드들도 좀 간소해지고
실시간 엔진에 맞게끔 수정이 되면서
이런 실시간 엔진, 언리얼 엔진 같은 실시간 엔진에서도
현실과 같은 근사치의 결과물들을 얻어낼 수가 있게 되었습니다
그리고 PBR 시스템은 사실적인 표현이 가능해진 것 말고도
또 한 가지 큰 장점이 있어요
바로 한 가지의 쉐이더를 사용해서 일상생활에서 사용하는
거의 대부분의 재질들에 대한 표현이 가능해졌다는 거예요
노드에 값을 넣을 수 있는 항목들이 그런 것들인데요
여기에 있는 수치들을 조절을 하면
플라스틱, 나무, 돌, 금속 같은 재질들
일상생활에서 우리가 보고 있는 이런 재질들을
모두 다 표현할 수가 있다는 거죠
과거에는 어떤 다양한 재질을 표현하기 위해서는
각자 다른 쉐이더를 사용을 했었어요
그리고 쉐이더가 또 다르다 보니까
들어갈 파라미터들도 아주 제각각이어서
심지어는 같은 재질이지만
장소에 따라서 다른 값들을 입력해서
표현해야 되는 상황도 발생을 했었죠
그래서 제작 과정이 굉장히 효율적이지 못했어요
그래픽에 대한 일관성도 없었고요
하지만 이런 PBR 시스템이 도입되면서 한 가지 쉐이더
하나의 쉐이더를 이용해서
여러 가지 재질을 통일성 있게 표현할 수 있게 돼서
콘텐츠의 퀄리티를 조금 더 높일 수 있는
특히나 PBR 시스템
실시간 엔진에서 사용하는 PBR 렌더링 시스템은
여러 가지 요소들 중에서도
핵심이 되는 몇 가지 요소의 변화만으로도
많은 재질을 만들 수가 있어요
그 요소가 뭐냐면 바로
최종 노드에 보이는 Base Color와 Metallic
그리고 Roughness 바로 이 세 가지 요소가 됩니다
이 세 가지 요소들만 바꿔도
세상의 모든 재질을 표현할 수 있다
이게 지금 현재 언리얼 엔진이 갖고 있는
PBR 시스템의 특징입니다
그럼 대표적인 요소 Base Color와 Metallic
Roughness에 대해서 알아보도록 할게요
먼저 Base Color는 아마 여러분들이
이미 알고 있을 거예요 색깔
이 재질이 갖고 있는 고유의 색깔을 의미합니다
노란색을 가지고 계속 이야기를 해보도록 할게요
조금 더 크게 보도록 할게요
Base Color 같은 경우에는 기본적인 색상을 의미하죠
그래서 컬러를 입력받게 돼요
RGB 세 가지 컬러를 통해서 고유의 색깔을 표현합니다
두 번째 Metallic은 금속성을 의미합니다
이 재질이 금속이냐 금속이 아니냐를 의미해요
그래서 Metallic이 0이라고 되어있죠
지금 0이라고 되어있는 건 뭐냐면
금속이 0, 아니다를 의미하고요
여기서 Metallic을 1을 입력하면
이 재질, Metallic은 1
100%를 의미하는 겁니다 100%를 1로 표현합니다
그래서 1, 금속이다를 표현한 거예요
금속이냐 금속이 아니냐를 표현합니다
물론 0 혹은 1 이렇게 표현할 수도 있지만
중간값인 0.5도 표현할 수가 있어요 중간값이 되겠죠
반면에 0보다 낮은 숫자 -1
입력이 가능하지만 사실상 0 이하는
모두 다 똑같이 0으로 인식을 합니다
그렇기 때문에 -1을 입력해도 0이 되는 거죠
반대로 2를 입력하더라도
1 이상은 무조건 다 1이기 때문에
2를 입력하더라도 Metallic이 1인 값이 그대로 반영돼요
역시 마찬가지 여기에도
외부의 노드의 입력을 받아서 꽂을 수가 있어요
Base Color 같은 경우에는
X, Y, Z 세 가지 값이 필요했죠
RGB 세 가지 채널이 필요했으니까
하지만 Metallic 같은 경우에는
지금 보시는 것처럼 하나의 숫자만 있으면 돼요
그래서 여기에 하나의 숫자를 담는 노드를 꺼내면 됩니다
그래서 우클릭을 하고요
Constants라고 검색을 하면
이런 식으로 Value라는 값에다가
한 가지의 숫자만을 담을 수 있는 노드가 생성이 돼요
이 노드를 Metallic에다 이렇게 연결을 해주면
지금 현재 이 노드는 0이라는 값을 가지고 있죠
그래서 그 0값이 Metallic에 꽂아 들어가면서
지금 현재 Metallic이 아닌 비금속의 형태로
재질이 표현되고 있는 걸 볼 수가 있습니다
이게 Metallic이고요 아래쪽에는 Roughness가 있어요
Roughness는 표면의 거칠기를 의미합니다
그래서 Roughness 표면이 거칠하냐 거칠하지 않느냐
즉, Roughness가 지금 0.5로 되어있는데
이 0.5는 반 정도 수준인 거죠
좀 극단적으로 올려볼게요
Roughness가 1이다 그러면
거칠기가 100%를 의미합니다 Metallic과 똑같죠
1 이상이면 무조건 100%
즉, 표면이 아주 거칠어서
빛을 받으면 그 표면이 울퉁불퉁하기 때문에
그 빛이 산란되서 뿌옇게 보인다는 것을 의미합니다
이건 반대를 보면 좀 이해가 편할 거예요
Roughness가 반대로 0이라면
표면이 아주 매끄러워서 주변에 있는 빛을 그대로 반사시켜요
마치 유리처럼 그대로 반사시킵니다
표면이 아주 매끄럽다는 거죠
그래서 보시면 재질이 주변에 있는 빛을 그대로 반사시켜서
아주 반짝이는 표면으로 표현을 하게 되죠
이거는 Metallic을 1로 표현하면
조금 더 눈에 와 닿을 거예요
지금은 완전히 금속이고 표면이 Roughness가 0
굉장히 부드럽기 때문에 주변의 빛을 그대로 반사하는
쇠구슬의 모양이 완료가 된 거죠
Roughness를 1로 해볼까요? 그러면
금속인데 표면이 아주 거친 재질이 완료가 된 거예요
Roughness도 마찬가지로 하나의 숫자를 입력받기 때문에
지금 이런 Constants 노드를 그대로 Ctrl+C, V 해서
그대로 이렇게 넣을 수가 있습니다
지금은 1이니까 0을 누르면 이런 식으로
아까 봤던 노란색 반짝이는 금속 구슬이 만들어지게 되는 거죠
간단하죠? 세 가지만 이렇게 맞춰도
세상의 모든 재질을 표현할 수가 있다
그러면 아파트가 이제 Apply를 누르고 저장을 하면
금속 모양으로 표현이 되는 걸 볼 수가 있을 거예요
굉장히 이질적이죠
이제 방에 맞춰서 조금 조정을 해 볼게요
금속은 아니니까 0일 것이고 Roughness도 0.5로 맞춰서
안방은 조금 반질반질한 느낌으로 만들어 볼까요
반짝이는 느낌이니까 0.3 정도로 해야 되겠네요
약간 반짝이는 느낌의 재질로 표현해 보도록 할게요
그러면 안쪽보다, 부엌보다는 이쪽이 조금 더 반짝이는 듯한
그런 재질감으로 표현되는 걸 볼 수가 있을 겁니다
반대로 블루 같은 경우에는 Roughness를 1로 해서
완전히 러프하게 거칠게 만들어 볼게요
그러면 여기는 아주 매트한 느낌의 벽면이
표현되는 겁니다 됐죠?
이미지 텍스처의 종류와 활용
이번에는 이 바닥에 색깔이 아니라 Wood
나무 재질로 한번 표현을 해 보도록 할게요
우클릭 머티리얼을 하나 만들고요 M_Wood라고 할게요
우리는 지금까지 머티리얼에다가
Color에다가는 Constant3Vector를 담았고
Metallic 그다음에 Roughness에다가는
하나의 숫자의 노드를 꽂아서 넣어줬죠
Constants 노드를 넣어줬어요
전부 다 숫자를 넣어줬어요
하지만 언리얼의 머티리얼에서는
숫자 말고도 이미지도 넣을 수 있습니다
우리는 나무 이미지를 한번 넣어보도록 할게요
콘텐츠 드로우 Ctrl+스페이스바를 눌러서
스타터 콘텐츠를 보시면 텍스처 항목에 보시면
언리얼에서 제공하는 여러 가지 리소스들을
우리가 사용할 수 있게끔 볼 수가 있어요
이 중에서 쭉 내려보면 나무가 있을 겁니다
Wood Oak가 있고, Walnut이 있고요
Walnut이 하나 더 있군요
좀 어두운 Walnut이 있고, 좀 밝은 나무도 있네요
우리는 이 중에서 Oak
갈색 나무를 연결해 보도록 하겠습니다
이 텍스처를 가지고 드래그 앤 드롭해서
이렇게 빈 곳에다가 가지고 옵니다
그러면 텍스처 샘플이라고 하는 노드가 생기고요
그 노드 안에 이렇게 이미지가 들어와 있는 걸 볼 수가 있어요
그리고 이 노드를 선택한 상태에서 디테일 창을 보시면
텍스처라고 하는 항목 여기에
실질적으로 이미지 텍스처가 꽂혀 있는 거죠
이 노드를 이제 RGB라고 하는 하얀색 핀을 빼서
Base Color에 연결을 해 볼게요
그러면 이렇게 미리보기를 보시면 이런 식으로
나무 이미지가 그대로 컬러에 적용이 되는 걸
볼 수가 있을 겁니다 간단하죠?
이 상태에서 Apply, 저장을 하고요
다시 돌아와서 보시면 애셋에 이렇게
나무 이미지가 적용된 걸 볼 수가 있고요
이 머티리얼을 그대로 드래그 앤 드롭해서 넣어주겠습니다
그러면 적용된 걸 볼 수가 있어요
이렇게 머티리얼에는 이미지들을 꽂아서 넣을 수가 있습니다
역시 마찬가지 Metallic과 Roughness도 보시면
이런 블랙의 이미지 하얀색과 검은색으로 이루어진
이런 이미지들을 넣을 수가 있어요
언리얼 엔진 머티리얼에서는 이 숫자를 색깔로 표현합니다
다시 얘기해서 색깔을 숫자로 표현을 해요
그래서 0이면 블랙을, 1이면 하얀색을 표현을 해요
그래서 이 이미지에 보시면
더블 클릭해서 볼게요
이렇게 하얀색이면 1이라는 값을
그다음에 검은색이면 0이라는 값을
기록해뒀다고 생각하시면 좋아요
물론 여기에 있는 회색 값들은 0.5, 0.3
하얀색과 검은색, 1과 0 사이의 숫자가 되겠죠
이런 숫자들을 연결해 줄 수 있다
이미지를 이용해서 연결해 줄 수 있다고 생각하시면 좋습니다
바닥은 조금 반짝이니까 Roughness 값을 좀 줄여서
한 0.3 정도로 줄여서 반짝이게
좀 더 반짝이게 할까요 0.2 정도로
이렇게 반짝이게 되면 반질반질한 느낌이죠
Apply를 해보고 저장을 하면
이런 식으로 바닥이 반짝이는 걸 볼 수가 있을 겁니다 간단하죠?
지금 같은 경우는 굉장히 바닥이 좀 촘촘한 느낌이 있는데
이것은 Geometry Brush의 디테일 창으로 넘어가시면
이렇게 적용된 머티리얼을 볼 수 있고
그 밑에 보시면 Surface Properties라는 항목이 있는데
여기에서 Scale 값을 이용해서
지금 U, V가 1, 1로 되어있는 것을 좀 높여 볼게요 2로
좀 과감하게 할게요 5 정도로만 할게요 5, 5
Apply 하면 이런 식으로 크게 확대된 걸 볼 수가 있습니다
배율을 조정할 수 있죠
즉, 이 면에 적용된 머티리얼의 사이즈를
Scale 값을 통해서 조정을 할 수가 있어요
지금은 너무 크네요 3 정도로만 할게요 3, 3 Apply
이 정도면 괜찮을 것 같습니다
위에 Rotate 값을 이용해서
이렇게 돌릴 수도 있어요 간단하죠?
저는 이게 조금 더 편한 것 같아요
이렇게 진행을 해 보도록 하겠습니다 간단하죠?
다시 Wood로 넘어와서
우리는 Base Color에 이미지를 이용해서 이렇게
이미지를 꽂아 넣어서 재질을 표현할 수 있다는 것을 배웠어요
그래서 우리는 Base Color, Metallic, Roughness를 배웠고요
가장 기본적인 PBR 세 가지 요소를 배워봤고
이번에는 추가적인 요소에 대해서 알아보도록 할 텐데요
Base Color, Metallic, Roughness 밑에 보시면
Emissive Color라고 하는 항목이 있습니다
Emissive Color는 옐로우 머티리얼로 다시 와서
여기서 한번 이야기를 해 보도록 할게요
Emissive Color는 발광을 의미합니다
스스로 발광한다는 것을 의미해요
그래서 Emissive Color가 지금
어떠한 컬러도 들어가 있지 않은데
여기다가 색깔을 집어 넣을 수도 있고요
혹은 이런 식으로 색깔을 지정할 수가 있어요
그래서 여기다가 예를 들면 지금 노란색인데
노란색 컬러를 이렇게 입력을 하고 OK 하면
노란색 빛을 스스로 발산하고 있는 형태라고 보시면 돼요
스스로 빛을 발산한다
예를 들면 모니터의 화면이 스스로 빛이 발산이 돼서
주위를 환하게 비추죠 그런 것들
조명하고 다른 개념의, 재질 자체에서 뿜어져 나오는
어떤 빛, 발광체 이런 것들이라고 생각하시면 돼요
그래서 Emissive는 재질에서 스스로 뿜어져 나오는
빛 같은 거라고 생각하시면 좋을 것 같습니다
스스로 발광이 되는 재질 Emissive Color였고요
Emissive Color는 다시 돌려 놓을게요
이거는 알파를 0으로 하든가
혹은 블랙으로 하든가 이런 식으로 하면 Emissive가 사라져요
다음 많이 쓰이는 요소들 중에
Normal이라고 하는 항목이 있습니다
Normal은 굉장히 많이 쓰이는 요소 중에 하나예요
Normal은 여기에는 수치들을 넣지는 않고요
일반적으로 텍스처를 많이 쓰는데
스타터 콘텐츠에 보시면 이렇게 보라색으로 표현이 되는
이런 텍스처들을 많이 보셨을 거예요
이 텍스처들이 Normal 맵에서 사용할 수 있는
Normal 요소에 사용하는 텍스처들입니다
그래서 한번 넣어볼게요 이 텍스처들 중에서
이거 Ground Moss라고 하는
우둘투둘한 게 강조가 되는 텍스처를 가지고 와서
Normal에다가 연결을 해 볼게요
이렇게 Normal을 연결을 하고 보시면 이런 식으로
울퉁불퉁한 모양으로 재질이 표현되는 걸 볼 수가 있죠
마치 굴곡진 것처럼 표현되고 있어요
이거는 사각형으로 보시면 조금 더 이해가 편할 텐데요
지금 보시면 Alt키를 누른 상태에서
이 라인을 누르면 끊어집니다
Normal이 적용되지 않은 상태는 이런 식으로 평평해요
Mesh 자체가 아주 평평한 면을 갖고 있어요
우둘투둘한 면이 없죠
그래서 Wireframe도 보시면 이런 식으로
지금 잘 안 보이는데
이런 식으로 Wireframe도 그냥 폴리곤이 하나
삼각형이 두 개인 이렇게 평평한 폴리곤으로
이루어진 걸 볼 수가 있어요 이 사각형은 다 폴리곤이죠
다른 면들도 전부 삼각형이 두 개인
평평한 면을 갖고 있어요
일반적으로 굴곡이 표현되려면
이런 아주 작은 폴리곤들이 자잘자잘하게 있어야 돼요
그래야 이런 굴곡들이 표현을 하게 됩니다
면이 많아야 된다는 얘기죠
그런데 이런 면들이 많게 되면
계산해야 될 것들이 많기 때문에
콘텐츠를 즐길 때 컴퓨터의 퍼포먼스가
좀 떨어지게 될 수밖에 없어요
많은 면들을 계산해야 되니까
그래서 나온 방안으로써
Normal라고 하는 기술을 사용하게 돼요
이렇게 평면적인 면에다가 이런 식으로
Normal Map이라고 하는 이런 특수한 정보를 가진
이 맵을 이렇게 꽂아 넣으면
폴리곤 개수는 변함이 없지만
텍스처에 Normal Map의 기능에 의해서
실제로 빛을 받아보면
이런 식으로 내부가 우둘투둘한 것처럼 느껴지는
그런 기능을 가진 것이 바로 Normal Map이에요
여기에 있는 파란색 혹은 보라색 맵을
Normal Map이라고 부릅니다
그래서 어찌 보면 컴퓨터한테 거짓말 치는 거랑 똑같아요
평면인데 마치 굴곡이 있는 것처럼
컴퓨터한테 거짓말을 치고 있는 거예요
마치 되게 디테일한 것처럼, 퀄리티가 되게 높은 것처럼
이렇게 표현하는 것이 바로 Normal Map이라는 기능입니다
이 상태에서 Apply를 하고 저장해서 안방을 보시면
이런 식으로 우둘투둘한 느낌이
적용된 걸 볼 수가 있습니다 간단하죠?
Normal을 조금 더 응용하면
여기 바닥에 있는 나뭇결에도 재질을 줄 수가 있어요
텍스처를 보시면 Oak라고 하는 이미지 옆에 보면
Oak라는 이름의 Normal Map도 존재합니다
Wood에다가도 텍스처 Normal을 한번 연결해 볼게요
Normal Map을 Normal에다가 이렇게 연결을 하면
좀 확대해 보시면 이런 식으로 우둘투둘한 표현들이
이렇게 나오는 걸 볼 수가 있습니다
심지어 나무와 나무 사이에 홈들은
살짝 일정하게 홈이 파여진 것처럼
이런 식으로 표현이 되는 것도 확인해 볼 수가 있죠
이 상태에서 Apply를 누르고 다시 돌아가보면
바닥이 살짝 우둘투둘한 느낌을 받을 수가 있을 겁니다
조금 더 리얼한 느낌으로 보이게 돼요 그렇죠? 이런 식으로
안방이 워낙에 강렬하게 우둘투둘하니까
바닥이 그렇게 티가 잘 나진 않네요
옐로우는 꺼주도록 하겠습니다 지워주도록 하고요
머티리얼 에디터는 노드를 마음껏 응용하라고
열어둔 형태라고 보시면 좋아요
우리는 그냥 간단하게 집어 넣었지만
스타터 콘텐츠에서 머티리얼 폴더를 보시면
이미 언리얼 엔진에서 만든 여러 가지 머티리얼들이 존재합니다
이 중에 하나를 더블 클릭해서 볼게요 그래서 보시면
여기도 역시 마찬가지로 최종 노드가 이렇게 있고요
그다음에 노드가 적용돼서 들어가 있는 걸 볼 수가 있는데
옆으로 조금 더 빼서 크게 보면
엄청나게 많은 노드들이 여러 가지 엮여있는 선들이 엮여서
최종 노드에 이렇게 꽂혀 있는 걸 볼 수 있습니다
굉장히 복잡한 노드 구성들을 통하면
여러분들은 굉장히 디테일하고 좀 더 리얼하고 자연스럽고
좀 더 예쁘게 재질을 만들어서 적용시킬 수가 있어요
그건 여러분들이 머티리얼에 대해서
조금 더 깊게 들어가서 배우면 좋을 것 같고요
우리는 아파트에다가
언리얼이 이미 만들어 놓은 머티리얼을 그대로 적용하죠
예를 들면 내부에 여기는 욕실이니까
욕실에 맞는 약간 콘크리트 타일
이런 거 붙여볼까요 이렇게? 이런 식으로
아니면 콘크리트 타일 이렇게 붙여놓죠
뭔가 타일 같은 느낌이니까 이렇게 만들어 놓으면 되겠죠
이런 거는 베란다에도 어울리겠네요
외관 같은 경우에는 벽돌로 이루어져도 괜찮겠네요
밝은 데서 넣어볼까요? 이렇게 넣으면 좋을 것 같아요
여러분들이 원하는 재질을
마음껏 적용시켜 보면 좋을 것 같아요
저는 바깥에도 이런 식으로 벽돌을 이용해서
이렇게 구성하도록 할게요 괜찮죠?
이런 식으로 촘촘하게 여러분들이 원하는 색깔들을
적용시키면 좋을 것 같습니다
이런 부분들도 적용시켜주세요
이렇게 어느 정도 머티리얼을 다 적용시켜봤고요
이번에는 어느 정도 색깔은 다 입혀봤으니까
이번에는 이런 현관문 같은 부분이라든지
문이 있는 부분, 창문이 있는 부분에
창틀, 문틀 이런 것들을 배치를 해볼까 해요
스타터 콘텐츠에 Props라고 하는 폴더를 보시면
언리얼에서 제공하는 여러 가지 애셋들이 있어요
이 애셋들을 배치해서 여기를 좀 그럴싸하게 만들어 볼게요
보면 SM_Doorframe이라고 있죠
이거는 문틀을 의미하는 건데
드래그 앤 드롭해서 가져오면
이 공간에 문틀이 배치되는 걸 볼 수가 있고요
지금 사이즈가 너무 크니까 사이즈를 좀 줄여줄게요
일단 회전부터 시키고 사이즈를
너무 크죠? 스냅이 너무 크게 되니까
이거를 스냅을 클릭해서
좀 더 작은 단위로 0.1만큼 움직일 수 있도록
스냅을 조정하고 이렇게 조정하도록 하겠습니다
스냅을 더 줄여야 될 것 같아요
0.625 이렇게 줄이도록 할게요
Y축으로도 살짝 줄여주고 위치를 조정하겠습니다
좀 더 키울까요? 이렇게 조정하겠습니다 됐죠?
너무 두꺼우니까 X축으로도 살짝 줄여서
이렇게 배치를 해 보도록 하겠습니다
어느 정도 됐네요
Props 안에는 문도 있어요 이렇게 SM_Door도 있죠
문도 이렇게 가지고 와서 배치를 할 수가 있습니다
사이즈에 맞게 이렇게 줄여보도록 하죠
회전시켜서 90도가 됐을 때 딱 닫혀질 수 있도록
사이즈도 조정을 하시고
이렇게 조정하고 살짝 열어 놓겠습니다
이렇게 현관문이 완료가 됐습니다
현관문뿐만 아니라 창틀도 있어요 보시면 애셋들 중에
Window frame이라는 것도 있죠
Window frame도 이렇게 가지고 와서
이동하고 줄여주고 이동하고 크게 키우고
적당하게 이런 식으로 이동을 하면서
적당하게 맞춰 줄 수도 있을 거예요
창틀도 있고요 그다음에 안에 보면
Glass window라고 해서 유리창도 있습니다
굉장히 위로 큰데 쭉 내려서 이렇게 표현하면 괜찮겠죠
이렇게 좀 늘려 줄게요 그리고 가운데로 살짝 됐죠?
지금은 그렇게 티는 나진 않지만
나중에 밖에서 보거나 아니면 안쪽에서 빛을 반사시켜서
그럴싸한 모습이 표현되게 될 겁니다 이런 느낌이죠
창틀과 현관문을 곳곳에 작은 방이라든지
혹은 욕실, 안방, 베란다 부분에도 표현을 하면
괜찮을 것 같아요 한번 해 보도록 하죠
문틀과 창문틀 그다음에 문 그리고 베란다에는
유리 Prop까지도 이렇게 배치를 해서
어느 정도는 집을 꾸며봤습니다 좀 그럴싸하죠
칼처럼 끊기는 것보다는 이런 식으로 오브젝트를 이용해서
살짝 어색한 부분들을 가려주면서
그럴싸한 느낌, 자연스러운 느낌으로 가려주는 것도
레벨 디자인에서 되게 중요한 역할 중 하나가 된다고 생각해요
이렇게 전부 다 배치를 해 봤습니다
그럼 이번 시간에 학습한 내용을 정리해 보겠습니다
머티리얼의 생성과 적용 머티리얼의 이해
그래프: 노드를 배치하거나 연결하는 등 비주얼 스크립팅 작업을 수행하는 영역
최종 노드: 파라미터 값을 받아 계산하여 최종적인 결과를 보여주는 노드
쉐이더: 노드 안에 담긴 계산식
Constant3Vector: 색상 값을 불러오는 노드
Constants: 하나의 숫자를 담는 노드
재질 표현의 핵심 요소 Base Color: 오브젝트가 가진 고유의 색깔
Metallic: 금속 성질 프로퍼티 Roughness: 표현의 거친 (매끄러운) 정도
이미지 텍스처의 종류와 활용
이미지 텍스처 특징 Base Color에 이미지를 입력해 재질을 표현할 수 있음
언리얼 엔진에서 제공하는 머티리얼을 작업물에 적용할 수 있음
이미지 텍스처 활용 Emissive Color: 스스로 빛을 발산하는 효과
Normal Map: 폴리곤 개수에 영향을 미치지 않으면서 굴곡진 재질 표현