three.js에서 여러 텍스처를로드하는 가장 좋은 방법은 무엇입니까?

Question

내 렌더러로 최근에 three.js으로 바뀌었지만 이제는 텍스처 매핑을위한 시스템을 설정하려고합니다. 그러나, 나는 이것에 대한 모범 사례가 무엇인지에 대해 너무 확신하지 못한다. 여기 내 사용 사례입니다

• 나는 각 상자 형상의 각면에 텍스처의 다양한지도를 할 수 있어야합니다
• 상자 형상 (잔디, 물, 돌의 많은 만들어진 수준을 가지고, 나는 웹 GL 렌더러

을 사용하고

가능하면

내가 가장 좋은 것입니다 그래서 GPU에이 오프로드, 가능한 한 가장 효율적인 성능에 민감한 방법으로이 작업을 수행하고 싶습니다) 등 바위

현재 내 텍스처가 있습니다. 스프라이트 시트에 설치; 각 텍스처는 64x64 픽셀 사각형이므로 각 텍스처는 위치에 따라 64 픽셀만큼 오프셋됩니다.

이것이 필요한가요? 또는 여러 개의 텍스처로 가득 찬 디렉토리가 있어야하며 루프를 통과하고 각각에 대해 THREE.ImageUtils.loadTexture("textures/someTexture.png");의 새 인스턴스를 만드시겠습니까?

아니면 더 효율적인 방법이 있습니까?

Answer 1

텍스처가 너무 가볍기 때문에 별도의 파일로 주석에 언급 된 주문형 접근 방식은로드되는 내용과 때를 명시 적으로 제어 할 수 있으므로 올바른 방법 일 수 있습니다. 스마트 한 처리가 중요합니다. 먼저 보이는 텍스처를로드 한 다음 일부 동작에서 보이는 텍스처를 선택한 다음 다른 모든 것들을 표시해야합니다. 안개와 카메라 뷰 frustum/distance 속성을 잘 사용하면이 부분을 자동으로 수행 할 수 있습니다.

여러 텍스처를 큰 파일 (2048 x 2048은 원하는 높이)에 배치하고 한 번에로드하는 것이 합법적 인 전략입니다. 특히 인터넷 연결이 파일 처리가 적은 경우 기침 기침 위성). 그러나 전체적인 이미지를 대체하기 때문에 개별 텍스처를 업데이트해야한다면이 전략이 실패하기 시작합니다. 특정 텍스처 세트를 사용하는 "영역"이있는 경우 플레이어가 영역에 접근 중이고 프리 로더가 이미 칙칙폭폭 소리가 나지 않는 경우 큰 이미지로이 세트를 미리로드하는 것이 좋습니다.

인터넷의 전체 역사는 효율적으로 미디어를로드하는 이야기이므로 잘 다져져 있습니다. 브라우저 캐시가 작동하는 방식을 확인하여 이미지를 다시로드하지 않아도됩니다. 희망이 도움이됩니다.