Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Uv 제어

Shader 기초

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à commenter

Uv 제어

  1. 1. UV 제어 Shader에서 UV를 제어하는 방법을 이해해봅시다.
  2. 2. 들어가기전에 • 이 내용은 쉽게 설명하기 위해 도식화 한 내용입니다. • 이미지의 상하 반전같은 내용은 빼고 UV 좌표와 이미지 좌표 모두 좌측 하단이 (0, 0)이라고 통일하고 서술한 내용입니다. • shaderforge 같은 곳에서 해보시면 이 문서대로는 나오지 않습니다. 본 내용은 이론적인 정리 정도로 보시기 바랍니다. • 이런식으로 UV가 조작된다 정도로 기억하시고 보다 더 자세한 내용을 관련 내용을 찾아보시기 바랍니다. 이런거 막 좋고 그렇습니다.
  3. 3. 이미지 + UV + 폴리곤(Face) 이미지 파일 (Bitmap) UV (행열) Polygon 3D(x,y,z) 입체 정보를 2D(U,V)정보로 변환 bitmap정보를 2D(U,V)정보로 변환 • 이미지 파일과 polygon은 UV정보를 매개로 서로 연결이 되어있음. • Pixel shader가 폴리곤이 화면에서 차지할 pixel 영역에 정보를 그려넣음. • 이때 pixel shader는 UV을 참고하여 bitmap을 불러와 pixel의 정보를 채워 넣음 • 이 과정에서 재미난 일들을 많이 할 수 있음(UV 조작 등)
  4. 4. 이미지와 UV • 4X4 사이즈 bitmap 이미지와 UV의 보편적인 형태를 도식화한 형태(bitmap의 0,0의 위치는 조건에 따라 다르지만, UV에 맞춰 쉽게 설명하기 위해 위의 형태로 그렸음) • 이미지와 UV는 서로 다른 방식으로 구성되어 있다는 점을 눈여겨 봐야됨. • 퀴즈~~~ UV 좌표 (0.5,0.5)는 무슨색? UV 좌표(0,0)은 무슨색? (repeat, clamp 문제도 여기서 생김) V U X Y 0 0.5 1 0.5 1 0 1 2 3 0 1 2 3
  5. 5. UV작업 도식 Bitmap UV Polygon • 위의 도식은 UV작업을 통해서 polygon에 bitmap이 입혀진 상태이다. • 다음 장에서 분석해보자
  6. 6. UV작업 결과 Bitmap UV Polygon 0 1 2 3 0 1 2 3 0 1 1 0.5 0.750.25 0.25 0.5 0.75 • UV 좌표 (0,0) ~(0.25,0.25) 에는 bitmap (0,0)의 컬러가 배정되어서 polygon 에 뿌려집니다. (실제로는 pixel에 뿌려집니다.) • 같은 형태로 하나하나 분석해보면 bitmap과 UV와 polygon의 관계가 눈에 들어올 것입니다. • 위의 결과는 아주 통상적인 UV작업의 결과입니다.
  7. 7. Bitmap만 생각해봅시다 • 8bit RGB 이미지는 256단계의 그레이 스케일 체널 3~4개가 모인 집합입니다. • Color인 RGB를 모노 체널로 입력하게 되면 RGB의 명도를 기반으로 그레이 스케일로 바꿉니다.(쉽게 생각 해서) • 256단계는 Shader에서 활용하기 위해 0~1사이의 비율로 바꾸어 (노멀라이징)사용하게 됩니다. X Y0 1 2 3 0 1 2 3 R : 84 G : 130 B : 54 R : 0.32 G : 0.51 B : 0.21노멀라이징
  8. 8. 생각하기 쉽게 더 줄입니다.(한 개의 체널만 생각합시다) • 2x2 8Bit Bitmap의 R체널정보입니다. • 붉은 색 글자는 RGB 값입니다. 0 255 77 154 0 1 0.3 0.6 노멀라이징 • 2x2 8Bit Bitmap의 R체널정보입니다. • 붉은 색 글자는 노멀라이징 된 값입니다.
  9. 9. UV와 같이 놓고 비교해봅시다 0 1 0.3 0.6 U0 0.5 1 0.5 1 • UV는 0~1사이의 좌표값을 가집니다. • 노멀라이징 된 bitmap의 각 pixel의 값은 0~1 사이입니다. • 어라~!
  10. 10. • 이미지의 노멀라이징된 각 pixel의 정보를 U나 V의 값으로 넣으면 어떻게 되나?
  11. 11. 하나 더 0 1 2 3 0 1 2 3 0 1 0 1 원본 이미지 입력 이미지 • 지금의 경우 원본 이미지의 사이즈와 UV의 입력으로 사용할 이미지의 사이즈가 다릅니다. • 이 경우는 UV 조작을 위한 입력 이미지가 원본 이미지 쪽으로 사이즈가 맞춰진다고 보시면 됩니다. (사이즈가 같다면 신경 쓸 필요 없습니다.) • 저희는 UV를 조작하기 위해 이미지를 사용하는 것이고, 조작해야 할 UV는 원본 이미지를 기준으로 하기 때문입니다.
  12. 12. 원본이미지와 입력 이미지 0 1 2 3 0 1 2 3 0 1 0 1 퓨전~ 원본 이미지 입력 이미지 0 1 2 3 0 1 2 3 • 이렇게 된다고 보시면 됩니다.
  13. 13. UV를 조작할 이미지를 이용해서 UV를 짜봅시다 0 1 0.3 0.6 0 10.3 0.6 • Bitmap을 해체하여 입력으로 쓰면 저렇게 풀어집니다. (좌측부터 우선 입력이라 생각합시다. X,Y 순으로 행열을 쓰니까요) • 이 데이터를 U로 쓸지 V로 쓸지는 맘대로입니다.(전 U로 쓸겁니다) (0, 0) (0, 1) (1, 0) (1, 1) 0 1 0 1
  14. 14. 4x4 pixel이 배정된 polygon으로 생각해서 UV를 짜보겠습니다. 0 10.3 0.6 • V 값은 임의로 줍니다. (이미지로 입력해도 됩니다만, 복잡해지니 단순 수치 하나만 줍니다.) • UV는 0,0부터 채웁니다 U 정보 0.3 V 정보 V U0 1 1 (0, 0.3) (0.3, 0.3) (0.6, 0.3) (1, 0.3) (0, 0.3) (0, 0.3) (0, 0.3) (0.3, 0.3) (0.3, 0.3) (0.3, 0.3) (0.6, 0.3) (0.6, 0.3) (0.6, 0.3) (1, 0.3) (1, 0.3) (1, 0.3)
  15. 15. 4x4 pixel이 배정된 polygon의 각 UV 비교 V U0 1 1 (0, 0) (0.3, 0) (0.6, 0) (1, 0) (0, 0.3) (0.3, 0.3) (0.6, 0.3) (1, 0.3) (0, 0.6) (0.3, 0.6) (0.6, 0.6) (1, 0.6) (0, 1) (0.3, 1) (0.6, 1) (1, 1) 정상 UV 맵 조작된 UV 맵 V U0 1 1 (0, 0.3) (0.3, 0.3) (0.6, 0.3) (1, 0.3) (0, 0.3) (0, 0.3) (0, 0.3) (0.3, 0.3) (0.3, 0.3) (0.3, 0.3) (0.6, 0.3) (0.6, 0.3) (0.6, 0.3) (1, 0.3) (1, 0.3) (1, 0.3)
  16. 16. 이미지와 UV 입력된 bitmap 및 UV 좌표 출력된 bitmap V U0 1 1 (0, 0.3) (0.3, 0.3) (0.6, 0.3) (1, 0.3) (0, 0.3) (0, 0.3) (0, 0.3) (0.3, 0.3) (0.3, 0.3) (0.3, 0.3) (0.6, 0.3) (0.6, 0.3) (0.6, 0.3) (1, 0.3) (1, 0.3) (1, 0.3)(0, 0) (0.3, 0) (0.6, 0) (1, 0) (0, 0.3) (0.3, 0.3) (0.6, 0.3) (1, 0.3) (0, 0.6) (0.3, 0.6) (0.6, 0.6) (1, 0.6) (0, 1) (0.3, 1) (0.6, 1) (1, 1)
  17. 17. 끝 이런거 막 좋고 그렇습니다.

×