쉐이더/상태 변경을 최소화하여 WebGL 성능을 최적화하기위한 지침

Question

100,000 개의 삼각형으로 이루어진 대형 실내 장면 렌더링을 위해 WebGL의 실용성에 대한 아이디어를 얻으려고합니다. 이 삼각형은 많은 대상에 걸쳐 분포하며 장면에 많은 재료가 있습니다. 반면에 움직이는 부분은 없습니다. 그리고 재질은 텍스처 맵을 기반으로하는 비교적 단순한 경향이 있습니다. 텍스처 맵 공유가 많이 있습니다. 예를 들어 장면의 모든 의자는 공통 맵을 공유합니다. 하나의 머티리얼에 최대 세 개의 텍스처가 중첩 된 멀티 텍스쳐가 있습니다.

나는 약간의 실험과 읽기를 해왔으며, 렌더링 패스 중에 스위칭 재료가 자주 느려지는 것을 모았습니다. 예를 들어, 200K 삼각형을 가진 씬은 오브젝트가 디스플레이 될 때마다 새로운 머티리얼이 설정되었다고 가정 할 때 10 개 또는 1000 개의 오브젝트가 존재하는지에 따라 중요한 성능 차이를 갖습니다.

따라서 성능이 중요하다면 장면 전환을 최소화하도록 장면을 재료별로 정렬해야합니다. 내가 찾고있는 것은 다양한 상태 변화의 오버 헤드를 생각하는 방법에 대한 가이드 라인이며, 가장 큰 장점은 어디에서 얻을 수 있습니까? 예를 들어,

• 는 gl.useProgram(), gl.uniformMatrix4fv(), gl.drawElements()
• 내가 쉐이더 스위칭을 최소화하기 위해 ubershaders를 작성하려고한다, 말의 상대적 성능 비용은 무엇인가?
• 나는 내가 그 주행 거리 브라우저, OS 및 그래픽 하드웨어에 따라 달라질 수 있습니다 실현 gl.drawElements() 전화

의 수를 최소화하는 형상을 집계 시도해야합니다. 그리고 저는 또한 영웅적 대책을 찾고 있지 않습니다. 이미 장면을 빠르게 만드는 경험이있는 사람들의 지침. 이전에 고정 파이프 라인 OpenGL 프로그래밍에 대한 경험이있는 동안 WebGL/OpenGL ES 2.0 방식에 익숙하지 않았다고 덧붙입니다.

Answer 1

batch, batch, batch을 읽으셨습니까? 틀림없이 directX에 초점을 맞추지 만 추론은 Open/WebGL에도 적용됩니다. 각 API 호출은 CPU에 상당한 오버 헤드가 있습니다. 조언은 텍스처 공유, 인스턴스화 (사용 가능한 경우) 사용, 복잡한 그리기 호출을 피하기 위해 복잡한 쉐이더 작성 등 모든 API 옵션을 사용합니다. 따라서 집 전체를 한 번의 호출로 단일 메쉬로 그릴 수 있다면 각 방의 호출 수가 1000 회를 넘을 것입니다. ubershaders 작성은 그리기 호출을 제거 할 수 있기 때문에 주로 GPU 상태 전환이 비용이 많이 들지 않기 때문에 권장됩니다.

최근 하드웨어를 전제로합니다. 저가형 플랫폼 (iPad®) 또는 Intel GMA 칩의 경우 병목 현상은 소프트웨어 버텍스 처리와 같이 다른 곳에서 발생합니다.