예제소개

Re-using geometry and level of detail

대량의 데이터 처리를 위한 최적화 기법은 3D 그래픽스에서 매우 중요합니다. React Three Fiber(R3F)에서는 이러한 최적화 기법을 쉽게 구현할 수 있습니다. 이 예제는 지오메트리 재사용과 레벨 오브 디테일(LOD) 관리에 대해 알아보겠습니다.

800개의 샘플 객체

먼저 800개의 샘플 객체를 생성합니다. 각 객체는 무작위 위치와 회전 값을 가집니다.

거리 (Level Of Detail)에 따른 색상 변경

거리에 따른 색상을 변경함으로서 <Detailed> 컴포넌트의 동작 방식을 이해해 봅니다.

총 5개의 LOD(Level Of Detail) 레벨을 정의하고 이에 따른 색상을 `d3-scale-chromatic` 라이브러리를 사용하여 생성합니다.

const LEVEL_OF_DETAILS = [0, 15, 25, 35, 100];
const LEVEL_OF_DETAILS_COUNT = LEVEL_OF_DETAILS.length - 1;
const COLOR_BY_LEVEL_OF_DETAIL = [...Array(LEVEL_OF_DETAILS_COUNT)].map((_, i) => schemeSet1[i]);

`<Detailed>` 컴포넌트 내에서 각 레벨에 해당하는 색상을 가진 박스를 렌더링합니다.

function Bust(props: Omit<React.ComponentProps<typeof Detailed>, 'distances' | 'children'>) {
  return (
    <Detailed distances={LEVEL_OF_DETAILS} {...props}>
      {[
        ...COLOR_BY_LEVEL_OF_DETAIL.map((color) => (
          <group key={color}>
            <mesh>
              <boxGeometry args={[1, 1, 1]} />
              <meshStandardMaterial color={color} />
            </mesh>
          </group>
        )),
        <group />,
      ]}
    </Detailed>
  );
}

결과

100

카메라 줌 인/아웃에 따라 객체의 색상을 변경하고 100 이상의 거리가 되면 객체는 사라집니다.

지오메트리 재사용

`useGLTF`훅을 사용하여 5개의 서로 다른 해상도의 GLB 모델을 로드합니다.

const gltfList = useGLTF([gl01, gl02, gl03, gl04, gl05]);

`<Detailed>` 컴포넌트 내에서 각 레벨에 해당하는 GLB 모델을 렌더링합니다.

<Detailed distances={LEVEL_OF_DETAILS} {...props}>
  {[
    ...gltfList.map(({ nodes, materials }, index) => (
      <mesh
        receiveShadow
        castShadow
        key={index}
        // @ts-ignore
        geometry={nodes.Mesh_0001.geometry}
        material={materials.default}
        material-envMapIntensity={0.25}
      />
    )),
  ]}
</Detailed>

결과

카메라 줌 인/아웃에 따라 객체의 디테일을 변경합니다.

확대할 경우

카메라 frustum안에 들어온 객체만 렌더링함으로 draw call은 줄어듭니다.

하지만 고해상도의 GLB 모델을 사용하기 때문에 triangle 수는 늘어납니다.

축소할 경우

카메라 frustum안에 모든 객체가 들어와 draw call은 늘어납니다.

하지만 저해상도의 GLB 모델을 사용하기 때문에 triangle 수는 줄어듭니다.

R3F: Re-using geometry and level of detail