[최적화 적용하기(1)]

Mesh 를 화면상에 표현할 때 WebGL 은 GPU 에 하나당
즉, 하나의 Mesh 당 거의 한번씩 Draw Call 을 부른다
이러한 성능상 이슈를 완화해줄 두 가지 방법을 알아보겠습니다

Instancing

동일한 기하학에 대해 같거나 다른 재질을 지닌 오브젝트들을 하나의 Draw Call 로 처리하고자 할 때
용도: 수천개의 나무, 돌 같은 동일한 오브젝트들을 그릴때

동작원리

instancedMesh 에 먼저 총 생성할 갯수를 설정해주고
위치값과 회전값을 적용한 object3D 객체를 생성
해당 object3D 객체의 Matrix 를 instancedMesh 에 Matrix 로 전달
그리고 한번에 needsUpdate 로 그려줌

간단한 예시

instancedMesh 에서 args 를 null, null, boxCount 로 설정
이는 geometry 와 material 을 나중에 설정하고, boxCount 만큼 생성할 것이라는 의미

이제 position 과 rotation 을 정의한 object3D 객체를 updateMatrix() 로 메트릭스에 반영하고
해당 object3D.matrix 값과 구분지어줄 id 값을 instanceMesh.setMatrixAt(id, object3D.matrix) 로 전달

※ object3D.matrix 는 Matrix4 객체로, 4x4 행렬로 이루어져 있음

• a, b, c, d: X 축 방향으로의 크기 및 회전 변환을 나타냅니다.
• e, f, g, h: Y 축 방향으로의 크기 및 회전 변환을 나타냅니다.
• i, j, k, l: Z 축 방향으로의 크기 및 회전 변환을 나타냅니다.
• m, n, o, p: 위치(translation) 변환을 나타냅니다.
  즉, 해당 Object3D 기준으로 x,y,z 축의 크기 및 회전 변환과 위치를 지니고 있음

마지막으로 instanceMesh 를 리렌더링 하라고 알리기 위해 instanceMatrix.needsUpdate = true 로 설정

instancedBufferAttribute 가 각 box 의 색상 데이터를 설정하고,
vertexColors 속성이 색상 데이터를 재질에 적용하여 각 box 의 색상을 랜덤으로 설정

※ vertexColors: 다각형의 각 정점에 색상정보를 할당하는 기법

시나리오1)) instancedBufferAttribute 에서 colors 값과 position 값을 함께 가지고 있어 vertexColors 에서 해당 지점의 좌표 값에 대한 색상을 입혀준다??

Merging

각기 다른 기하학과 재질을 가진 오브젝트들을 하나의 오브젝트로 머지하여 렌더링
용도: 다양한 객체들을 하나의 드로우 콜로 처리하고자 할 때

<Merged
  position={[1, 1, 1]}
  meshes={[
    new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial({ color: 0xffff00 })
    ),
    new THREE.Mesh(
      new THREE.SphereGeometry(1),
      new THREE.MeshBasicMaterial({ color: 0xff0000 })
    ),
      ]}
    >
      {(Box, Sphere) => (
        <>
          <Box position={[-1, -2, 0]} />
          <Sphere position={[1, -1, 0]} />
          <Box position={[-3, -3, 0]} />
          <Box position={[-3, -5, 0]} />
        </>
      )}
</Merged>