WebGL은 개발자가 OpenGL ES 그래픽 표준을 기반으로 하는 WebGL API를 사용하여 웹 브라우저에서 3D 그래픽을 만들 수 있도록 하는 강력한 기술입니다. 그러나 웹 환경의 제약 내에서 실시간으로 3D 그래픽을 렌더링하는 복잡성으로 인해 WebGL 성능을 최적화하는 것이 어려울 수 있습니다.
권장사항: NSDT 편집기를 사용하여 프로그래밍 가능한 3D 장면을 빠르게 구축하세요.
1. Three.js를 사용하고 WebGL을 최적화하세요
WebGL에서 3D 그래픽을 생성하는 데 널리 사용되는 JavaScript 라이브러리인 Three.js에는 WebGL 성능을 향상시키는 데 도움이 될 수 있는 자체 최적화 세트가 있습니다. 무엇보다도 Three.js 애플리케이션 개발 비용은 다른 그래픽 엔진에 비해 매우 경쟁력이 있습니다. Three.js와 명시적으로 관련된 추가 사항은 다음과 같습니다.
- Three.js 렌더링 호출 최적화: Three.js는 3D 장면을 효율적으로 렌더링하기 위한 파이프라인을 제공합니다. 그러나 렌더링 호출이 너무 많으면 성능에 영향을 줄 수 있습니다. Three.js에서 렌더링 호출을 최적화하려면 카메라 절두체에 표시되는 개체를 결정하고 해당 개체만 렌더링하는 절두체 컬링과 같은 기술을 사용하세요.
- Three.js는 절두체 컬링에 대한 기본 지원을 제공하며, 절두체 컬링할 개체의 frustumCulled 속성을 true로 설정하여 활성화할 수 있습니다. 또한 visible 속성을 사용하여 객체의 가시성을 제어하고 숨겨진 객체의 불필요한 렌더링을 방지할 수 있습니다.
- 개체 풀링 사용: 기하학, 재질, 질감과 같은 Three.js 개체는 생성하고 삭제하는 데 비용이 많이 들 수 있습니다. Three.js 개발자는 개체 풀링에 대한 기본 지원을 받으며, 풀화와 같은 라이브러리를 사용하거나 자체 개체 풀링 논리를 구현하여 성능을 최적화할 수 있습니다.
- LOD(세부 수준) 사용: LOD(세부 수준)는 카메라와의 거리에 따라 세부 수준이 다른 다양한 버전의 3D 개체를 사용하는 기술입니다. Three.js는 LOD에 대한 기본 지원을 제공하므로 THREE.LOD 클래스를 사용하여 장면에서 LOD 개체를 만들 수 있습니다.
- 텍스처 아틀라스 사용: 텍스처 아틀라스는 여러 개의 작은 텍스처가 포함된 큰 텍스처 이미지입니다. 텍스처 아틀라스는 텍스처 교체 횟수를 줄이고 WebGL 성능을 향상시키는 데 도움이 될 수 있습니다. Three.js는 THREE.TextureLoader 및 THREE.Texture 클래스를 통해 텍스처 아틀라스에 대한 지원을 제공합니다. 텍스처 아틀라스를 수동으로 생성하거나 TexturePacker와 같은 타사 도구를 사용하여 Three.js 애플리케이션용 텍스처 아틀라스를 생성할 수 있습니다.
2. WebGL 코드 최적화
효율적이고 최적화된 코드를 작성하는 것은 WebGL 성능을 최적화하는 첫 번째 단계입니다. 여기에는 3D 개체의 모양을 계산하기 위해 GPU에서 실행되는 프로그램인 셰이더 최적화가 포함됩니다. 셰이더 최적화를 위한 몇 가지 팁은 다음과 같습니다.
- 단순하게 유지하세요. 간단한 수학을 사용하고 불필요한 계산을 피하세요. GPU 작업 부하를 줄이려면 계산을 최대한 단순화하세요.
- 내장 함수 사용: WebGL은 행렬 곱셈, 벡터 연산, 삼각법과 같은 일반적인 연산을 위한 내장 함수를 제공합니다. 이러한 내장 함수는 일반적으로 하드웨어에서 구현되며 셰이더 코드로 작성된 사용자 정의 함수보다 빠릅니다.
- 텍스처 조회 최소화: 텍스처 조회는 성능 측면에서 비용이 많이 들 수 있습니다. 여러 텍스처를 단일 텍스처로 결합하는 텍스처 아틀라스를 사용하거나 사전 생성된 텍스처 대신 절차적 텍스처를 사용하여 셰이더에서 텍스처 조회 수를 최소화합니다.
- 최적화된 데이터 흐름: 모든 셰이더 호출에 액세스할 수 있는 균일한 변수와 상수를 사용하여 CPU에서 GPU로 데이터를 전달합니다. CPU에서 미리 계산할 수 있는 데이터에 대해서는 꼭짓점별 속성과 변수를 사용하지 마세요.
3. 효율적인 렌더링 기술 사용
렌더링은 3D 모델을 화면에 표시할 수 있는 2D 이미지로 변환하는 것입니다. WebGL 성능을 최적화하기 위해 여러 가지 렌더링 기술을 사용할 수 있습니다.
- 절두체 컬링(Frustum Culling): 절두체 컬링은 카메라 뷰에 표시되는 3D 장면의 일부인 보기 절두체 내에서 표시되는 개체 렌더링만 포함하는 기술입니다.
- LOD(세부 수준) 렌더링: LOD 렌더링은 카메라에서 객체까지의 거리에 따라 다양한 세부 수준을 사용하는 기술입니다. 카메라에서 더 멀리 있는 객체는 더 낮은 세부 수준으로 렌더링되어 처리해야 하는 형상의 양을 줄이고 성능을 향상시킬 수 있습니다.
- 오클루전 컬링(Occlusion Culling): 이는 z-버퍼링 또는 레이어드 오클루전 컬링과 같은 기술을 사용하여 오버드로 양을 줄이고 성능을 향상시킬 수 있습니다.
- 인스턴싱: 인스턴싱은 단일 그리기 호출을 사용하여 동일한 객체의 여러 인스턴스를 렌더링하는 기술로, 많은 수의 객체를 렌더링하는 오버헤드를 크게 줄일 수 있습니다.
4. 텍스처 압축 사용
텍스처는 개체의 시각적 세부 정보를 제공하므로 3D 그래픽의 중요한 부분입니다. 그러나 텍스처는 많은 메모리와 대역폭을 소비하여 WebGL 성능에 영향을 미칠 수 있습니다. 텍스처 압축은 텍스처의 메모리 사용량과 대역폭 요구 사항을 최적화하는 데 도움이 되는 기술입니다.
WebGL은 시각적 품질에 큰 영향을 주지 않고 텍스처 크기를 줄이는 ETC1, ETC2, ASTC와 같은 여러 텍스처 압축 형식을 지원합니다. 다음은 WebGL에서 텍스처 압축을 사용하기 위한 몇 가지 팁입니다.
- 올바른 텍스처 압축 형식 선택: 다양한 텍스처 압축 형식은 압축 비율, 시각적 품질, 다양한 장치 및 브라우저와의 호환성 측면에서 서로 다른 장단점을 갖습니다. 적용 가능성에 따라 이상적인 텍스처 압축 형식을 선택하십시오.
- Mipmap 사용: Mipmap은 카메라로부터 다양한 거리에 있는 객체를 렌더링할 때 사용할 수 있는 사전 생성된 저해상도 버전의 텍스처입니다. Mipmap은 텍스처 필터링을 개선하고 앨리어싱 아티팩트를 줄여 시각적 품질과 성능을 향상시킵니다.
- 텍스처 크기 최소화: 원하는 시각적 품질을 얻으려면 가능한 가장 작은 크기의 텍스처를 사용하십시오. 텍스처가 클수록 더 많은 메모리와 대역폭이 필요하며 이는 성능에 영향을 미칠 수 있습니다.
5. 렌더링 상태 최적화
렌더링 상태는 블렌딩, 깊이 테스트, 스텐실 테스트 등 WebGL이 객체를 렌더링하는 방법을 제어하는 설정입니다. 렌더링 상태를 최적화하면 렌더링 중에 필요한 GPU 처리량을 줄여 성능을 향상시킬 수 있습니다. 다음은 몇 가지 팁입니다.
- 상태 변경 최소화: 유사한 렌더링 상태를 가진 개체를 그룹화하고 순차적으로 렌더링하여 렌더링 중 상태 변경 횟수를 최소화합니다.
- 뒷면 컬링 사용: 뒷면 컬링은 카메라 반대쪽을 향하는 객체 면을 렌더링하지 않는 기술입니다. 이렇게 하면 처리해야 하는 형상의 양이 줄어들고 성능이 향상됩니다. 가능할 때마다 뒷면 컬링을 활성화합니다.
- 지연 렌더링 사용: 지연 렌더링은 객체를 나중에 복잡한 조명 계산을 수행하는 데 사용할 수 있는 여러 렌더 대상으로 렌더링하는 기술입니다. 지연 렌더링은 렌더링 중에 필요한 조명 계산 수를 줄이고 성능을 향상시킬 수 있습니다.
- 초기 깊이 테스트 사용: 초기 깊이 테스트는 렌더링 파이프라인 초기에 깊이 테스트를 수행하는 기술입니다. 이렇게 하면 불필요한 프래그먼트 셰이더 실행이 줄어들고 성능이 향상됩니다. 가능한 경우 조기 심층 테스트를 활성화합니다.
- 배치 렌더링 사용: 배치 렌더링은 유사한 속성(예: 재질 또는 질감)을 가진 개체를 그룹화하고 단일 그리기 호출로 렌더링하는 기술입니다. 이는 CPU-GPU 통신 및 상태 변경의 오버헤드를 줄여 성능을 향상시킵니다.
6. 결론
이러한 최적화를 적용하면 WebGL 애플리케이션에서 부드럽고 효율적이며 시각적으로 매력적인 그래픽 렌더링을 달성하는 데 도움이 될 수 있습니다. 항상 WebGL 애플리케이션의 성능을 테스트하고 측정하여 개선이 필요한 영역을 파악하고 그에 따라 적절한 최적화를 적용하는 것을 잊지 마세요.
원본 링크: 20가지 WebGL 성능 최적화 팁 - BimAnt