세 역할을 하나씩 분리하기
첫 Three.js 상자에서는 Scene·Camera·Mesh를 구분했다. 이번에는 Mesh 안으로 한 단계 더 들어갔다.
| 구성 요소 | 이 예제에서 결정한 것 | |---|---| | Geometry | 상자인가 구인가, 즉 물체의 모양과 윤곽 | | Material | 표면이 어떻게 보이고 빛에 어떻게 반응하는가 | | Light | 빛의 세기·색·방향 같은 장면의 조명 조건 |
BoxGeometry를 SphereGeometry로 바꾸면 Material과 Light 설정이 같아도 상자가 구로 바뀐다. Geometry에는 정점 위치뿐 아니라 표면이 어느 방향을 향하는지 나타내는 법선도 들어간다. 그래서 모양만 바뀌는 것이 아니라 명암이 퍼지는 모습도 달라진다.
박스는 평평한 면마다 빛을 받는 정도가 나뉜다. 구는 표면 방향이 연속적으로 바뀌어서 명암도 부드럽게 이어진다. Material과 Light 설정이 같다는 말이 최종 픽셀의 밝기까지 같다는 뜻은 아니다.
여기서 기억할 것Geometry는 모양, Material은 표면, Light는 조명 조건을 결정한다.
같은 색도 빛에 따라 다르게 보인다
같은 BoxGeometry와 같은 기본 색을 두고 Material만 바꿨다.
MeshStandardMaterial은 빛을 계산한다. 이 예제처럼 환경광도 조명도 모두 0이면 검게 보였다.MeshBasicMaterial은 장면의 Light 영향을 받지 않는다. Light를 0으로 바꿔도 기본 색이 그대로 보였다.
처음에는 둘의 차이를 “색상 차이”라고 설명했다. 하지만 두 Material에 지정한 기본 색은 같았다. 달라진 것은 빛을 계산하는지, 그리고 그 결과로 생기는 밝기와 명암이었다.
Material을 바꿔도 Geometry를 그대로 두었으므로 모양과 윤곽은 유지됐다. 한 번에 하나만 바꾸니 어느 설정이 어떤 결과를 만들었는지 분리할 수 있었다.
Roughness는 반사광을 퍼뜨린다
다음에는 SphereGeometry와 MeshStandardMaterial, Light를 고정하고 Roughness만 바꿨다. 아래 예제에서는 금속성을 0으로 둔 채 거친 정도만 움직여 본다.
아래 버튼을 누르면 3D 장면을 불러옵니다.
격자와 색 표식은 Material의 map에 연결한 Texture입니다. Texture를 끄면 구체 모양은 남고 무늬만 사라집니다. 실제 게임 자산 대신 별도로 만든 학습용 장면입니다.
값을 하나씩 바꾸고 이유를 설명해 보세요. 예제를 여는 것만으로 퀘스트가 완료되지는 않습니다.
처음에는 Roughness가 높을수록 “반사가 더 잘 일어난다”고 예측했다. 실제 결과는 반대 방향이었다.
- Roughness가 작으면 반사광이 좁은 영역에 집중되어 하이라이트가 선명하다.
- Roughness가 크면 반사광이 넓게 퍼져 하이라이트가 흐리고 둔해진다.
Three.js 공식 문서는 roughness = 0을 매끄러운 거울 반사, roughness = 1을 완전히 확산된 상태로 설명한다. Roughness를 반사의 단순한 양으로 이해하기보다 반사광이 얼마나 퍼지는가로 기억하는 편이 관찰과 맞았다.
영어로는 이렇게 다시 썼다.
As roughness increases, the reflected light spreads out and the highlight becomes softer.
Texture는 Material이 사용하는 데이터다
같은 구체 예제에서 Texture 적용 (material.map)만 껐다 켰다. Geometry, Material 종류, Light, 물체 위치는 그대로 두었다. Texture를 켜면 격자와 색 표식이 구체 표면에 나타나고, 끄면 구체는 그대로인 채 무늬만 사라진다.
Texture가 물체의 모양이나 위치를 바꾼 것은 아니다. 바뀐 것은 표면의 외형, 즉 표면에 보이는 색과 무늬다. 이 구분은 Texture를 별도의 Material처럼 생각하지 않게 해 준다.
Texture는 Material을 대체하지 않는다. Material이 표면을 계산할 때 사용하는 데이터이며, 이 예제에서는 material.map에 연결했다.
영어로는 이렇게 다시 썼다.
A texture does not replace a material. It is data that the material uses to determine the surface's appearance.
이번에 확인한 범위
직접 조작해 Geometry·Material·Light를 하나씩 바꾸고, 틀린 예측을 고친 뒤 각 역할을 다시 설명했다. Roughness에 따른 하이라이트 변화와 material.map에 연결한 Texture의 역할도 관찰했다.
장면을 처음부터 구현하거나 법선의 수학적 계산, 환경 맵, 금속성, UV 좌표까지 익힌 것은 아니다. 다음 단계에서는 같은 Material에서 금속성과 환경 맵을 분리해 본다.