본문으로 이동
ELSELAND AI
KO
지금 플레이
브라우저 게임 자산으로 준비된 저폴리 건물 컬렉션

브라우저 게임에 AI-Generated 3D 모델을 최적화하는 방법

브라우저 읽기는 비용이 낮아지지 않습니다. 모델은 실제로 지원되는 장치의 장면, 메모리, 로딩 및 렌더링 한계에 맞는 동안 시각적 결정 플레이어 통지를 보존하는 것을 의미합니다.

AI-generated 3D 모델은 습득적인 프로, 건물 또는 생물에 신속하게 빈 장면에서 얻을 수 있습니다. 그들은 또한 습지 topology, 조각 재료, 크기 질감, 불명한 노드, 또는 돌연변이에서 무해 보이는 기하학으로 도착 할 수 있지만 게임 수준에서 반복 될 때 비싸게됩니다.

최적화는 생산의 끝에서 하나 버튼이 아닙니다. 그것은 순서입니다: 자산이해야 하는 것을 정의하고, 대표 장면에서 측정하고, 폐기물을 제거하고, 카메라가 보상을 압축 할 수 있는지, 납품 파일을 압축하고, 실제 장치에 다시 시험하십시오.

목표는 가장 작은 가능한 파일이 아닙니다. 목표는 충분히 빠른로드 할 수있는 자산이며 현장 예산 내에서 렌더링이 쉽고 디버그로 유지되며 여전히 의도 된 실루엣과 재료 언어를 의사 소통합니다.

빠른 요약

핵심 요약

  • 완전한 장면의 맥락에서 자산 예산을 설정, 다각형에서 볼 수 없습니다 고립.
  • 압축을 적용하기 전에 중복 기하학, 숨겨진 표면, 과도한 재료, 변형 및 질감 낭비를 수정합니다.
  • Geometry 압축은 전송 크기를 감소하지만, 과도한 복잡한 메쉬를 그리는 가동 시간을 제거하지 않습니다.
  • 편집 가능한 소스 모델을 유지하고 검증 할 수있는 별도의 배달 GLB를 수출하고, 측정하고 안전하게 대체합니다.
01

브라우저를 정의하기 전에

자산의 작업으로 시작하십시오. 카메라에 가까운 영웅 캐릭터는 배경 바위에서 다른 기하학 및 질감 처리를 반복했습니다. 정적 랜드마크는 각 프레임을 변형해야합니다.

메시를 만지기 전에 작은 합격 장 쓰기. 프로젝트 별 난간으로만 범위를 이용하고, 그 후에 profiling 후에 그(것)들을 세웁니다. 이것은 질의 보편적인 정의로 중재 삼각형 조사 대우에서 팀을 지킵니다.

예산 영역답변기록에 대한 증거
시각적인 역할카메라가 어떻게 얻을 수 있는지, 그리고 무엇을 읽고 남아?가까운, 전형적인, 멀리 거리에서 참조 스크린 샷
장면 조밀도몇 장이나 비슷한 자산이 한 번에 나타날 수 있습니까?대표 최악의 케이스 장면
의성몇 개의 메쉬와 재료가 하나 개의 인스턴스를 추가합니까?Draw 호출 및 렌더링 통계 전에 및 후
Memory대상 장치에 대한 디코딩 질감과 기하학은 얼마나 큰가요?Texture 치수, 형식 및 장치 메모리 관측
Delivery플레이어가 상호 작용하기 전에 다운로드해야 할 일은 무엇입니까?GLB 크기, 질감 탑재량 및 선적 추적
02

실제 장면에서 Original Model을 측정

모델링 뷰포트를 혼자서 최적화하지 마십시오. 동일한 렌더링기, 조명 설정, 카메라 범위, 객체 밀도 게임 용도에 대한 무감각 자산을 가져다. 자체가 잘 수행되는 모델은 예산에 걸쳐 군중 장면을 밀어 줄 수 있습니다.

기본 기록: 파일 크기, 메시 및 원시적 조사, 물자 조사, 짜임새 조사 및 차원, 생기 클립 및 눈에 보이는 연출 통계. Three.js는 그릴 통화, 삼각형, 점, 선, 기하학 및 연출 정보를 통해 짜임새를 드러냅니다; 그 값은 각 장치 수준 비용을 설명하지 않을 때 조차 개정을 위해 유용합니다.

숫자와 함께 두 개 또는 세 개의 스크린 샷을 캡처합니다. 성능 측정은 변경 사항을 알려줍니다. 쌍 이미지는 Silhouette, shading, UV 솔기 또는 인식 기능에 손상된지 여부를 나타냅니다.

  • 1개의 사본을 시험하고 눈에 보이는 사본의 예상된 최대 수.
  • 애니메이션, 투명성, 그림자 및 생산에 사용되는 포스트 처리 포함.
  • 개발 노트북에서만 재활 대신 최소한의 저전력 대상 장치를 사용합니다.
  • 기본 GLB를 유지하십시오 그래서 나중에 회귀는 재현 될 수 있습니다.
03

깨끗한 기하학 및 장면 Hierarchy 처음으로

이 모델은 종종 hastily 조립 된 수동 자산과 같은 종류의 구조적 폐기물을 포함합니다. 모델 내부에 숨겨진 느슨한 조각, 복잡한 표면, 작은 분리 된 구성 요소, 빈 노드, 비응답 변형, 모양보다 상부학 멀리 denser가 필요합니다. 감속하기 전에 폐기물을 제거하기 때문에 simplifier는 클리너 문제를 해결합니다.

이식주의를 수행하는 기능을 보호하십시오. 건물을 위해, 그 지붕, 문턱 및 창 리듬이 될 수 있습니다. 생물을 위해 머리 프로파일, 손 또는 액세서리 모양이 될 수 있습니다. 화면에 평평한 지역에는 하늘을 가로 질러 윤곽보다 더 기하학을 잃을 수 있습니다.

자산이 시작되면, 모든 주요 감소 후 검증 변형. 메쉬는 묶음 pose에서 변하지 않고 여전히 어깨, 무릎, 손가락 또는 얼굴 관절에서 붕괴 할 수 있습니다. 관절 주위 여분의 지원을 보존하고 실제 애니메이션 클립을 테스트, 뿐만 아니라 회전 미리보기.

04

예술 방향을 평평하게 하지 않고 Draw Calls를 감소

브라우저 장면은 종종 렌더링자가 제출해야 할 몇 가지 분리 조각에 의해 제한됩니다. 삼각형의 수에 의해뿐만 아니라. 10 개의 재료와 함께 작은 메쉬는 동일한 눈에 보이는 모양으로 메쉬보다 더 나쁜 배달 자산이 될 수 있습니다.

이 사이트는 좀 더 나은 접속환경을 제공해 드리고자 쿠키를 사용합니다. 이 사이트를 사용함에 있어 당신은 모든 쿠키사용을 동의하는 것입니다. 이 쿠키들 중에서 필요에 따라 분류된 쿠키는 웹 사이트의 기본적인 기능을 수행하는 데 필수적이므로 브라우저에 저장됩니다. 또한, 이러한 쿠키는 웹 사이트의 기본적인 기능을 수행하는 데 필수적이므로 브라우저에 저장됩니다. 또한 이러한 쿠키를 거부 할 수도 있습니다.

재료 감소는 예술 결정입니다. 각 표면과 하나의 아틀라스에 결합하면 제출을 저장하지만 저자, mip 행동, 또는 미래의 변형을 더 강하게 만들 수 있습니다. 그들은 투명 유리 또는 임계 표시와 같은 실제 렌더링 필요, 그리고 생성 된 파일이 파편했기 때문에 존재하는 분리를 제거 할 때 분리 패스를 유지하십시오.

05

Runtime Budget로 Textures를 치료, 그냥 이미지 파일

압축 이미지는 디스크에 작은 볼 수 있으며 여전히 코딩 후 상당한 GPU 메모리를 차지합니다. 감사 픽셀 크기, 채널 사용, 알파, 색상 공간, 그리고 얼마나 많은 화면 영역 질감 실제로 커버. 배경은 가까운 문자와 같은 해상도에서 거의 혜택을 제공합니다.

대상 카메라의 가장 높은 세부 사항에 대한 크기 질감. 팩 호환 그레이 스케일 채널, 사용되지 않은 맵 제거, 재료가 완전히 불투명, 반복 가능한 repetition이 허용되는 재사용 타일 소재 때 알파를 피. 프로의 가족, 공유 아틀라스 또는 재료 라이브러리는 일관성과 배치를 향상시킬 수 있습니다.

KTX2/Basis 질감 납품은 당신의 파이프라인과 표적 브라우저가 그것을 지원할 때 네트워크와 GPU 비용을 감소시킬 수 있습니다. 변환을 시각적인 QA 단계로 대우하십시오: 그 결과로 개량하기 전에 gradients, 정상적인 세부사항, 투명한 가장자리 및 색깔 이동을 비교하십시오.

06

비주얼 QA 후 납품 GLB를 압축

지오메트리, 하이어리, 재료 및 질감이 의도적으로, 배달 압축을 적용합니다. 3.js GLTFLoader는 Draco-compressed 기하학, Meshopt-compressed 메쉬 및 KTX2 질감을 포함하여 일반적인 glTF 경로를 지원합니다.

압축을 풀로드 경험에 따라 선택하십시오. 작은 다운로드는 디코더 코드와 CPU 시간을 요구할 수 있으므로, 파일 크기를 혼자 축하하는 것보다 먼저 유용한 프레임에 시간을 비교하십시오. 메쉬 단순화 및 기하학 압축은 다른 문제를 해결합니다. 단순화는 GPU 프로세스가 무엇인지 감소시키고 압축이 주로 그 데이터 여행이 저장되는 방법을 감소시킵니다.

glTF Transform은 검사, 검증, deduplicate, prune, 단순화, 크기, 질감 변환 및 압축 명령을 제공합니다. 이 문서는 또한 기본 낙하가 모든 장면에 이상적지 않다는 것을 경고합니다. 왜 생산 presets가 장님으로 적용되지 않고 버전화되고 검토되어야 합니다.

07

Target Browser 및 장치에 대한 유효성 검사

glTF 유효성 검사를 실행하고, 그 후에 게임에 의해 이용된 동일한 생산 경로를 통해서 납품 자산을 적재하십시오. 콘솔 경고, 누락된 짜임새, 정상적인, 끊긴 생기, 색깔 공간 다름, 투명한 분류 및 선수가 장면을 나타낼 때 처리 검사하십시오.

각 지원된 성과 층에 대표 수준을 단면도하십시오. 안정되어 있는 구조 경험을 위한 시계, 또한 반복한 장면 변화 후에 선적 일시동, 기억 성장을 검열하고, 몇몇 모형이 함께 나타날 때 스파이크. 정확한 결과는 명백한 시각적인 손실 없이 당신의 프로젝트 표적을 만나는 버전입니다.

교체 테스트 완료: 게임 플레이 코드를 변경하지 않고 새로운 개정에 대한 자산을 교환. 예측 가능한 노드 이름, 피벗, 스케일, 재료 컨벤션 및 충돌 프록시는 미래의 AI-generated 변형을 훨씬 덜 비싼 통합.

  • 배송된 번들 밖에서 편집 가능한 고품목 소스를 유지하십시오.
  • 자산과 수출 및 최적화 설정 버전.
  • gameplay 카메라의 기본 및 최적화 된 스크린 샷을 비교하십시오.
  • 눈에 보이는 artifacts 또는 느린 첫 번째 상호 작용을 일으키는 경우 작은 파일을 거부합니다.
  • 문서는 다음 자산 가족을위한 템플릿으로 승인 된 배달 모델.

자주 묻는 질문

브라우저 게임 모델에 대한 최고의 다각형 수는 무엇입니까?

이 비용으로 인해 보편적 인 수는 장면 밀도, 재료, 애니메이션, 그림자 및 대상 장치에 따라 달라집니다. 프로젝트 예산을 대표 장면에서 설정하고 그 상황에 대한 각 자산을 측정합니다.

Draco 압축은 프레임 속도를 향상합니까?

Draco는 주로 기하학 이동 크기를 감소시키고 다운로드 비용을 개량할 수 있습니다. 그것은 메시 simplification를 대체하지 않으며 모형이 decoded 후에 끌기 전화의 수를 감소시킵니다.

모든 AI-generated 모델이 GLB로 변환되어야합니까?

GLB는 glTF를 지원하는 브라우저 런타임에 편리한 납품 콘테이너입니다, 그러나 선택은 당신의 엔진 및 파이프라인에 아직도 달려 있습니다. 따로따로 편집 가능한 근원 체재를 유지하십시오 그래서 발송한 파일은 생산 주인이 아닙니다.

나는 무엇을 먼저 최적화해야: 다각형 또는 질감?

선택하기 전에 모두 측정합니다. 일부 장면 질감 메모리 및 재료는 지배를 계산하고 다른 사람에서 피부 형상, 그림자 또는 반복 메쉬는 더 큰 비용을 만듭니다.

한 객체로 모든 메쉬를 병합할 수 있습니까?

움직임, 가시성 및 재료의 필요성을 공유하는 부품 만 합병. 문, 무기, 파괴적인 조각, 애니메이션 구성 요소는 종종 gameplay에 독립적으로 남아 있어야합니다.

생성 된 3D 모델의 스타일을 보존하는 방법은 무엇입니까?

Silhouette, ratios, color block, 그리고 모델이 단순화하기 전에 인식 할 수있는 재료 cues를 식별합니다. 실제 게임 플레이 카메라에서 수정을 비교하면 가까운 렌더링 만 배정됩니다.

압축 된 질감은 항상 더 나쁘다?

아니, 하지만 모든 형식과 품질 설정 다른 상인을 만듭니다. 검토 정상, 그리스, 투명성, 그리고 작은 높은 대조 세부 사항 대상 장치에 변환을 승인 하기 전에.

최적화 된 모델을 테스트해야 하는 방법?

최악의 케이스 대표 장면에서로드하고 배송 크기, 렌더링 통계, 메모리 동작, 그리고 기본 출력을 비교합니다. 지원 범위에서 적어도 하나의 저전력 장치에 대한 테스트를 반복합니다.

출처 및 추가 자료

  1. 3.js GLTFLoader 문서

    Draco, Meshopt 및 KTX2 경로를 포함하여 glTF 확장 및 디코더 통합을 지원합니다.

  2. 3.js 웹GLRenderer 문서

    통화, 삼각형, 포인트, 라인, 지오메트리 및 질감에 대한 렌더링 정보 필드.

  3. glTF Transform CLI 문서

    검사, 검증, 실행, 단순화, 질감 처리, 및 glTF 자산에 대한 압축 명령.

다음 단계

다음 3D 아이디어를 재생 장면으로 켭니다.

한 가지 명확한 환경, 상호 작용 및 브라우저 읽는 자산 세트로 시작하십시오.3D 게임 메이커를 탐험

계속 탐색