Three.js : 일반 데스크톱에서 60FPS를 유지하는 상한선은 무엇입니까?

Question

현재 Three.js를 사용하는 게임을하고 있습니다. 저는 소프트웨어 공학을 4 년간 공부해 왔고 두 가지를 위해 백엔드에서 전문적으로 노력해 왔습니다. 그러나 단순한 Unity 실험과는 별도로 그래픽을 간신히 다루었습니다.

저는 현재 renderstats.js에 따라 ~ 22,000 개의 정점과 ~ 8,000 개의면을 가지고 있으며 데스크톱 (평균 이상)은 20FPS를 초과하여 실행할 수 없습니다. 나는 Lambert 소재뿐만 아니라 하나의 주변 조명을 사용하고 있습니다. 그래서이 조명이 너무 많이 들지 않는다고 생각합니다.

위의 그림을 염두에두고 three.js 렌더링에서 예상되는 동작입니까?

Answer 1

나는 그것이 라인의 끝이 아니라는 것을 확신 할 것이다. 당신은 방대한 성능 향상을위한 몇 가지 가능성을 놓치고있을 것이다.

그러나 단지 첫번째 일부 번호를 당신에게 제공하기 위해,

• 당신이 (three.js를 포함) 만 포인트 당 렌더링 한 조각과 매우 간단한 포인트 클라우드 렌더링 공상 멀리 모든 것을 떠나, 당신 평균 GPU에서 10-20 백만 (예, 백만)의 포인트/버텍스를 쉽게 렌더링 할 수 있습니다.

• 그냥 단순한 모양과 재료로, 나는 이미 문제없이 60FPS에서 500k 삼각형 (1080p 해상도)의 범위에서 무언가를 렌더링하기 위해 three.js를 얻었습니다. 최신 하이 엔드 GPU의 경우 해당 숫자를 10 배로 늘릴 수 있습니다.

그러나 이러한 종류의 숫자는 실제로 도움이되지 않습니다.

일부 힌트 : 당신이 당신의 렌더링 성능을 디버깅 할 경우

• , 먼저 몇 가지 지표를 추가해야합니다. Renderstats는 좋지만이 경우 http://spite.github.io/rstats/을 통합하는 것이 좋습니다 (see the example).

• 일반적으로 재료 선택이 중요하지 않아 GPU는 대부분의 사람들이 생각하는 것보다 훨씬 능력이 있습니다. 그것은 파이프 라인의 다른 곳에서 문제가 될 가능성이 더 큽니다. EDIT 댓글 : 일부 GPU가 느린 GPU (고감도 모바일 장치)를 사용하는 고해상도 디스플레이와 같은 경우가 있는데, 이는 사실이 아니고 복잡한 쉐이더 코드로 인해 사이트 속도가 느려질 수 있지만 다른 점을 살펴볼 가치가 있습니다. 먼저. 랜더링 자체는 오프 스레드 (devtools-profiler와 같은 일반 도구를 사용하여 지속 시간을 측정 할 수 없으므로)이므로 EXT_disjoint_timer_query 확장을 사용하여 GPU에서 진행중인 작업에 대한 정보를 얻을 수 있습니다.

• the number of drawcalls shouldn't be too high : 모든 Mesh 및 Points 장면에서 렌더링 -object 너무 많은 개체에 대한 하나의 drawcall을 할 필요가 three.js를 일반적으로 정점 많은 개체보다 훨씬 더 큰 문제입니다. 드로 콜의 수를 줄이려면 여러 개의 형상을 하나로 병합하고 다중 재료, 정점 색상 및 이와 유사한 것을 사용하면됩니다.

• 후 처리를 수행하는 경우 GPU는 화면의 모든 픽셀을 여러 번 렌더링해야합니다. 이렇게하면 실적을 크게 제한 할 수 있습니다. 여러 개의 후 처리 패스를 하나로 병합하여 최적화 할 수 있습니다 (인정합니다. 많은 노력이 필요합니다 ..).)

• 다른 문제는 JS면에있을 수 있습니다. 프레임 당 너무 많은 시간이 걸리는 자바 스크립트인지 확인하려면 프로파일 러 또는 타임 라인보기를 사용해야합니다. 프레임 당 8-12ms). 나는 또한 자바 스크립트 성능을 최적화하는 방법이 있다고 들었다.