Three.js 렌더링 성능 최적화: 웹 3D 그래픽의 성능을 향상시키는 전략

소개
Three.js를 사용한 웹 3D 그래픽은 멋진 시각적 효과를 제공하지만, 렌더링 성능을 최적화하지 않으면 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 이 블로그 글에서는 웹 3D 그래픽 프로젝트에서 렌더링 성능을 향상시키기 위한 다양한 전략과 최적화 기술을 살펴봅니다.

 

1. 모델 최적화:

모델의 복잡성은 FPS에 가장 직접적인 영향을 미치는 요소 중 하나입니다. 모델이 더 복잡하면 렌더링 및 계산에 더 많은 시간이 소요될 수 있습니다. 따라서 모델의 복잡성을 최적화하고 필요하지 않는 세부 정보를 제거하는 것이 중요합니다. 또한 LOD를 사용하여 렌더링 중에 더 낮은 해상도 또는 단순화된 모델을 사용합니다. 이는 원격 물체 또는 화면에서 멀리 있는 물체의 경우에 성능을 향상시킬 수 있습니다.

글자 같은 경우 버텍스를 많이 사용하는 경우보다 png 파일을 이용하는것이 더 좋을수도있다

건물안에 있는 의자를 만들기 위해서 상당히 많은 버텍스가 필요한다 

• 모델의 복잡성 관리
• LOD (Level of Detail) 사용
• 불필요한 세부 정보 제거

 

버텍스란?

• "버텍스" (Vertex)는 3D 그래픽스와 3D 모델링에서 사용되는 중요한 개념입니다. 버텍스는 3D 공간에서의 한 점을 나타내는 요소로, 일반적으로 3D 모델의 모양을 결정하는 데 사용됩니다. 다음은 버텍스에 관한 중요한 정보입니다:
• 위치 정보: 버텍스는 3D 공간에서의 위치 정보를 포함합니다. 이 위치 정보는 X, Y 및 Z 좌표로 나타내며, 이를 통해 버텍스가 3D 모델의 어디에 위치하는지를 정의합니다.
• 결합: 버텍스는 일반적으로 선, 면 또는 다른 버텍스와 결합됩니다. 선은 두 개의 버텍스 간의 연결을 나타내며 면은 세 개 이상의 버텍스로 구성됩니다. 이러한 결합을 통해 3D 모델의 형태가 정의됩니다.
• 노말 벡터: 버텍스는 종종 노말 벡터 (Normal Vector)도 포함합니다. 노말 벡터는 버텍스가 속한 면 또는 삼각형의 방향을 가리키며, 조명 및 그림자 계산에 중요한 역할을 합니다.
• 텍스처 좌표: 버텍스는 텍스처 좌표를 가질 수 있습니다. 텍스처 좌표는 3D 모델의 텍스처를 어떻게 매핑할지를 결정하는 데 사용됩니다.

2. 텍스처 및 셰이더 최적화:

모델에 적용된 텍스처의 해상도도 FPS에 영향을 미칠 수 있습니다. 고해상도 텍스처를 사용하면 더 많은 VRAM 및 처리 시간이 필요할 수 있습니다. 필요에 따라 텍스처 해상도를 줄이거나 LOD(레벨 오브 디테일)를 구현하여 원격 거리에서 더 낮은 해상도의 텍스처를 사용하는 방법을 고려할 수 있습니다.

왼쪽은 가로세로 4096px 오른쪽은 1024px 이다 고해상도의 텍스처를 사용하면 처리시간이 많이 필요하기때문에 상황에 따라 낮은 해상도 텍스처를 사용하는것이 좋은 방법일수도 있다. 그리고 해상도를 줄이면 이미지 크기도 줄어들어서 초기 로딩시간을 단축시킬수 있다.

• 텍스처 해상도 관리

3. 불필요한 렌더링 제거:

Three.js에서는 기본적으로 프러스텀 컬링을 활용하여 화면에 보이지 않는 물체를 렌더링에서 제외합니다. 그러나 프러스텀 컬링이 제대로 동작하도록 물체의 Bounding Box를 올바르게 설정해야 합니다.

Re-using geometry and level of detail (forked) - CodeSandbox

위의 예제와 같이 물체가 카메라에서 멀어질수록 물체의 품질을 낮추는 것이 유리할 수 있습니다.  거의 보이지 않는데 왜 전체 해상도를 표시할필요는 없다. 이는 전체 정점 수를 줄이는 좋은 전략이 될 수 있으며 이는 GPU에 대한 작업이 줄어드는 것을 의미한다.

• 프러스텀 컬링 (Frustum Culling)
• 렌더링 버퍼 최적화

4. 웹 워커와 병렬 렌더링:

렌더링 작업을 웹 워커를 통해 백그라운드에서 처리하고 메인 스레드를 효율적으로 활용할 수 있습니다

웹 워커를 사용하여 병렬 렌더링을 수행하여 렌더링 성능을 향상시킬 수 있습니다.

• 웹 워커를 활용한 백그라운드 렌더링
• 렌더링 스레딩

5. 렌더링 파이프라인 최적화:

Three.js의 렌더링 파이프라인을 최적화하여 렌더링 작업의 순서와 방식을 최적화합니다.

 

React 18은 React의 다음 버전으로, 동시 스케줄링 및 시간 분할(Concurrent Mode)에 관한 중요한 변경 사항을 도입하였습니다. 이러한 변경 사항은 React 애플리케이션의 성능 및 사용자 경험을 향상시키는 데 도움이 됩니다. 아래에서 React 18에서 추가된 주요 개념 및 함수를 설명하겠습니다.

 

동시 스케줄링(Concurrent Scheduling):

React 18은 기존의 동기식 렌더링 방식에서 비동기식 렌더링으로의 전환을 강조합니다. 동시 스케줄링은 렌더링 작업을 여러 부분으로 분할하고 우선순위를 정하여 렌더링 작업을 효율적으로 관리하는 기술입니다. 이것은 대규모 애플리케이션에서 사용자 경험을 더 부드럽게 만들고, 사용자와 상호 작용하면서도 렌더링이 지연되지 않도록 해줍니다.

1. startTransition 함수:

startTransition  함수는 React 18에서 추가된 함수로, 동시 스케줄링을 활용하는 방법 중 하나입니다. 이 함수를 사용하면 렌더링 작업을 지연시킬 수 있으며, 사용자 경험을 향상시킬 수 있습니다. startTransition   함수를 사용하면 다음과 같은 이점을 얻을 수 있습니다:

• 화면 갱신을 차단하지 않고 백그라운드에서 작업을 수행할 수 있습니다.
• 더 나은 사용자 경험을 제공하기 위해 우선순위를 조절할 수 있습니다.

예를 들어, 다음과 같이 **startTransition**을 사용하여 렌더링 작업을 지연시킬 수 있습니다:

import { startTransition } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    await startTransition(() => {
      setData(fetchDataFromAPI()); // 데이터 가져오기
    });
  }

  return (
    <div>
      <button onClick={fetchData}>데이터 가져오기</button>
      {data && <DataDisplay data={data} />}
    </div>
  );
}

 

위의 코드에서 fetchData 함수 내에서 **startTransition**을 사용하여 데이터를 가져오는 작업을 백그라운드에서 처리하고, 사용자 경험을 향상시킵니다.

React 18의 동시 스케줄링과 startTransition 함수는 애플리케이션의 성능 및 반응성을 향상시키는 데 중요한 역할을 합니다. 이러한 기술을 적절히 활용하면 더 매끄러운 사용자 경험을 제공할 수 있습니다.

http://undesirable-bucket.surge.sh/

React App

 

6. 메모리 관리:

렌더링 중에 메모리 누수를 방지하고 메모리를 효율적으로 관리합니다

https://codesandbox.io/s/wvgxp

Color grading - CodeSandbox

위의 샌드박스를 전체 화면으로 열고 개발 도구를 살펴보면 아무 일도 일어나지 않을 때 완전히 유휴 상태인 것을 확인할 수 있습니다. 모델을 이동할 때만 렌더링됩니다.

demand. 구성 요소 트리 전체에서 소품 변경이 감지될 때마다 프레임을 렌더링합니다.

<Canvas frameloop="demand">

• 메모리 누수 방지
• 메모리 효율적 관리

7. 하드웨어 성능 고려:

사용하는 하드웨어의 성능도 FPS에 영향을 줄 수 있습니다. GPU의 성능, VRAM 크기 및 CPU 성능은 렌더링 성능에 중요한 역할을 합니다.

• GPU 및 CPU 성능 관리
• 하드웨어 가속 활용

마무리:

FPS를 향상시키려면 모델 최적화, 텍스처 최적화, 그림자 및 조명 조절, LOD 구현, 렌더링 해상도 관리, 백그라운드 렌더링, 그리고 적절한 하드웨어 업그레이드 등 다양한 접근 방법을 고려해야 합니다. 각 프로젝트 및 시나리오에 따라 최적화 전략이 다를 수 있으므로, 성능을 분석하고 최적화를 수행하는 것이 중요합니다. Three.js를 사용하여 웹 3D 그래픽 프로젝트를 개발할 때, 렌더링 성능 최적화는 매우 중요한 과제입니다. 이 블로그 글에서 소개된 전략과 기술을 적용하여 웹 3D 그래픽 애플리케이션을 향상된 성능으로 제공할 수 있을 것입니다.