0808

• 이것 뭐에요? 이러다 몇 년 뒤면 gpt10도 나오겠네 ㅋㅋ
• 오랜만에 레드벨벳 day1 들었더니 심장이 뛴다.
• 돌비 애트모스 설정 값 아래처럼 틀고 들으면 베이스 소리에 극락감

• 아일릿 빌려온고양이도 저렇게 세팅하고 들으면 극락감
• 뉴진스 ETA도 레전드
• 그냥 거의 모든 노래가 오천배 좋게 들림
• 왜냐면 베이스가 빵빵하게 들리니까.. 베이스 조아

🦦

Graphics pipeline

https://en.wikipedia.org/wiki/Graphics_pipeline
아주아주간단하게.. 그래픽 파이프라인의 기본동작에 대해 알아보아요

• graphics pipline or rendering pipline이란
  • 3차원 이미지를 2차원 래스터 이미지로 표현하기 위한 단계별 과정
    • 래스터란: 컴퓨터에서 이미지를 2차원 배열 형태의 픽셀로 구성하고 이 점들의 모습을 조합, 일정한 간격의 픽셀들로 하나의 화상 정보를 표현하는 것
      
• Application (CPU)
  • Application 단계는 cpu측에서 처리하는 단계로 Scene에 변화를 적용한다.
  • Scene에 변화를 적용한다는건, 한 마디로 그리려는 물체가 어디로 움직일지와 같은 애니메이션과 물리를 처리한다는거다.
  • 예를 들어서 3d 게임이 있을 때 내가 특정 캐릭터를 이동시키려고 키보드에서 W버튼을 누르면 cpu가 아 얘가 앞으로 가고 싶구나 라고 생각을 하고 캐릭터의 위치를 z방향으로 +1 이동시키면 이제 업데이트 된 vertex 정보가 geometry로 넘어가서 vertex 정보(mesh)를 gpu딴에서 처리를 하고 화면에 렌더링 하는거다. => 그래픽 파이프라인 총평 (아주 간단한..)
• Geometry (GPU)
  • CPU에서 GPU로 넘어가는 첫 단계다. (geometry의 사전적 의미는 기하학)
  • 앞서 적은대로 이 단계에선 vertices와 polygons을 실제로 수행?처리?한다. (Vertex shader)
  • vertex는 정점이고, 그래픽의 기본 단위는 triangle이다.
    • 왜 그래픽의 기본 단위는 삼각형일까?
    • 아무 3개의 점은 항상 평면 삼각형을 만들 수 있기 때문이다.
      • 뭔 말이지?
      • 세 점이 같은 직선상에만 놓여져 있지 않는다면 그 세 점을 지나는 유일한 평면이 존재한다.
      • 반면 네 점 이상은 모두 같은 평면에 있을거란 보장이 없다.
      • 삼각형은 붙이고 오리면 여러 폴리곤을 만들 수 있지만
      • 사각형만으로 삼각형을 만들 순 없다
      • 두 개의 점은 선만 정의할 수 있다.
      • 고로 삼각형을 사용한다.
      • https://www.quora.com/In-computer-graphics-why-is-the-minimum-basic-unit-of-a-face-generally-triangular
  • 모든 물체는 object/local space를 갖고 있고 이걸 world space에서 수행해야 된다.
    • world matrix의 계산 자체는 application 단계에서 하는데,
    • 계산한 값을 실제로 수행하는건 geometry 단계에서 한다.
  • object space -> world space -> view/camera space -> clip space -> screen space
    • clip space? 투영 행렬로 화면 크기에 맞게 변환하는 것
      • 투영 행렬?
        • 3D 장면을 2D 화면에 자연스럽게 보이도록 변환하는 행렬
        • 즉, 원근감을 표현해주는 역할
        • 이 때 orthographic(직교)이랑 perspective(원근) 개념이 사용된다.
• Rasterization(GPU)
  • 화면 공간으로 투영된 물체(삼각형)을 픽셀로 분할하고 보간 후 visibility를 결정한다.
  • 1. 삼각형을 픽셀로 분할한다. (Fragment 생성)
    • fragment란 삼각형이 픽셀 영역과 겹치는 부분에서 생성되는 샘플을 의미한다.
    • 여러 삼각형이 같은 픽셀을 덮거나, 멀티샘플링이 적용되면 하나의 픽셀에 여러 fragment가 생성될 수 있다.
    • 실제 색상은 Fragment Shader에서 최종 처리한다.
  • 2. Interpolation (보간)
    • 각 fragment의 color, UV, normal vector 등의 속성을 삼각형의 세 정점 값을 이용해 보간한다.
    • 즉 정점 값으로부터 fragment의 속성을 계산한다.
  • 3. Visibility 결정
    • 여러 fragment가 같은 픽셀 위치에서 겹치는 경우, Z-buffer(깊이 버퍼)를 사용해 어떤 fragment가 최종적으로 보일지 결정한다.
    • 투명도가 있다면 블렌딩을 통해 여러 fragment의 색상을 혼합하기도 한다.

TIP

결론
application -> geometry(vertex) -> Rasterization(fragment)

왜 텍스처 크기 단위를 2의 거듭 제곱으로 쓰는게 좋은가

• 옛날 GPU는 오로지 power of two sizes만 지원했다
  • 현대 gpu는 non power of two 텍스처도 잘 지원하지만
  • 여전히 메모리 관련해선 power of two size를 사용하는게 좋다.
• uv좌표는 부동 소수점(0.0 ~ 1.0) 범위로 텍스처에서 위치를 지정한다.
  • uv좌표란 3d 모델에 텍스처를 입힐 때 사용하는 2d 좌표를 의미한다.
  • 왜 uv좌표라 부를까?
    • 3d 공간에선 이미 x,y,z축을 위치 정보로 사용하고 있다.
    • 그래서 u는 수평, v는 수직을 의미한다
    • https://en.wikipedia.org/wiki/UV_mapping
• 이 때 텍스처의 크기가 power of two면 uv 변환시 정밀도 손실 없이 정확히 매핑할 수 있다.
• 만약 power of two size가 아니라면 0~1 사이의 값으로 균등하게 나누는게 불가능하기에 uv mapping이 삐뚤어질 수 있다.
• https://www.reddit.com/r/gamedev/comments/10xcsbp/texture_size_why_factos_of_2/

Three.js

• WebGL api를 활용하기 어려워서 js 환경에서 WebGL을 쉽게 쓸 수 있도록 추상화하여 만들어진 것 -> three.js

three.js의 핵심 요소

Category	Details
Scene
Camera	Perspective Camera	Orthographic Camera
Renderer
Object	gltf: JSON	glb: Binary
Geometry
Material	MeshBasic	MeshStandard	MeshLambert	MeshPhong	MeshPhysical	Shader
Light	Ambient Light	Directional Light	Point Light	Spot Light	Hemisphere Light

• https://threejs.org/
• https://intexsoft.com/blog/introduction-to-3d-three-js-basics/
• https://resources.imagine.io/blog/gltf-vs-glb-which-format-is-right-for-your-3d-projects

React Three Fiber

• three.js와 react three fiber는 뭔 차이지?
  • react에서 three.js를 더 쉽게 사용할 수 있게 만든게 r3f
  • 별차이 없음 애초에 r3f 이 three.js 베이스로 동작하는거라서

오늘의 느낀점

• 요새 너무 클린코드에 혈안되어서 지쳤던 것 같다
  • 막상 클린코드 작성하지도 못하면서 ㅋ
• 깊게 파고드는 것도 좋지만 중간 중간 다른 공부로 환기시켜야겠다
• 요행을 바라지 말고 꾸준히 하자
• 그럼 언젠가 되겠지