Devcrow

06. Colors 본문

3D Graphics/Three.js

06. Colors

yjForest 2016. 9. 7. 17:42

이번에는 물체의 색상에 대해 좀 더 살펴보겠습니다.


이전 예제인 05. Materials - Basic 을 보시면, Basic Material과 Normal Material은 조명(빛)에 영향을 받지 않는다고 설명했습니다.

여기서 Normal Material은 약간 특수한 Material이므로 논외로 치고..


Basic의 경우는 GUI에서 지정된 색상값이 정확하게 보여지는 반면, Standard, Lambert, Phong Material은 지정한 색상과 유사하긴 하나 정확히 일치하지 않는것을 보실 수 있습니다.


그럼 이들의 색상은 어떻게 결정되는 것일까요..


3D Graphics에서 물체의 색상은 여러가지 복합적인 요소에 의해 결정되는데, 바로 아래의 4가지의 요소가 그것입니다.

  1. Ambient Color
  2. Diffuse Color
  3. Specular Color
  4. Emissive Color

1. Ambient Color (주변색)

Ambient Color는 우리말로 주변색이라고 부릅니다. 다른 Color들과는 달리 Ambient Color는 빛에 영향을 받지 않는 물체 스스로의 고정 색상이라고 볼 수 있습니다. 방향성이 없기 때문에, 어느 방향, 어느 거리에서 보더라도 동일한 색상 강도를 갖습니다. 결과적으로 Ambient Color만 지정된 물체는 입체감이 전혀 없는 2차원 물체처럼 보이게 됩니다. 일반적으로 3D 환경에서 이 Ambient Color는 물체의 암부 즉, 빛이 닿지 않는 어두운 부분의 색이라고 볼 수 있습니다.




2.Diffuse Color (확산색)

한글로 굳이(?) 말하자면 확산색이라고 합니다. Ambient Color가 방향성이 없는 반면, Diffuse Color는 빛의 방향에 따라 강도가 달라지는 물체 표면의 색상입니다. 이것은 빛과 해당 물체의 각 Vertex의 표면각에 따라 결정되는데, 그 각이 좁으면 좁을수록 강한 색상을 얻게 됩니다. 즉, 물체의 바로 위에 빛이 있다면 물체의 윗면은 강한 Diffuse Color를 갖게 되고, 옆면으로 갈수록 약한 Diffuse Color를 갖게 됩니다.




3. Specular Color (반사색)

Specular Color는 물체에 빛이 닿았을 때 밝게 빛나는 부분의 색을 말합니다. 우리가 밝은 조명아래에서 당구공이나 쇠공을 보면, 각도에 따라 밝게 빛나는 원형 영역을 볼 수 있습니다. 이 하이라이트 영역의 색상을 결정하는 것이 Specular Color입니다. Specular Color는 빛이 들어오는 각도에 따라 반사되는 빛의 반사각에 눈의 시점 각도가 좁아질 수록(일치할수록) 강한 강도를 갖게 됩니다.




그리고 이 3가지 모든 색상이 조합되었을 때 완벽한 3차원의 물체가 표현되며, 이것을 Phong Reflection Model이라고 합니다.


한가지 주의할 점은 이 때, 물체의 색상은 위 3가지 색상만으로 결정되지 않으며 광원의 색상과도 결합된다는 점입니다.

빛의 영향을 받지 않는 Ambient Color와 Emissive Color를 제외한 Diffuse Color와 Specular Color는 이 이 물체에 비치는 광원의 색상과 곱해져 최종적인 색상이 결정됩니다.




이 3가지 이외에 Emissive Color라는게 있습니다.

Emissive Color는 Ambient Color와 마찬가지로 빛에 영향을 받지 않는 색이며, 물체 스스로 발광하는 색입니다. 보통 발광물체와 같이 스스로 빛을 내는 느낌의 물체를 표현할 때 사용합니다.






아래의 예제에서 각 Material과 색상을 변경해가면서 물체의 표현에 어떠한 변화가 생기는지 확인해 보시기 바랍니다.

전체 코드는 하단의 Source 버튼을 눌러 참고하시기 바랍니다.




'3D Graphics > Three.js' 카테고리의 다른 글

08. Texture - Basic  (0) 2016.11.08
07. Geometries  (0) 2016.10.17
05. Materials - Basic  (0) 2016.09.05
04. Screen Resize  (0) 2016.09.03
03. Orbit Control  (0) 2016.09.02
Comments