WebGL 커다란 텍스처로 인해 크롬에서 숨겨진 스톨 현상이 발생 함

Question

Windows 10 (Three.js 포함)의 WebGL에서 큰 (4096 x 4096) 텍스처를 초기화 할 때 프로파일 러에서 아무런 변화가없는 동안 크롬 메인 스톨은 상당한 시간 동안 정지합니다 . 여기

는 4096 X 4096 질감의 예 프로파일입니다 :

에서 1500ms 전에 약간의에서 "고원"Three.js를하고 WebGL을에 texImage2D를 호출하고, 다음 requestAnimationFrame 코드는 전에 두 번 호출됩니다 팬텀 갭이 나타납니다.

이 원인은 무엇입니까? 프로파일 러가보고하지 않는 기본 WebGL 코드가 크롬에서 발생합니까? texImage2D로 전화하는 데 90ms가 걸리는 이유는 무엇입니까? 나는 GPU에 텍스쳐를 로딩하는 것을 포함한 모든 작업이 거기에서 일어날 것을 기대한다.

Here is a link이 동작을 재현해야합니다.

Answer 1

여기서 문제는 requestAnimationFrame입니다. 여기

requestAnimationFrame는 설명하기 위해 두 개의 프로파일입니다 :

setTimeout :

이 존재하는 대부분의 WebGL이 자습서 requestAnimationFrame이 언급하기 때문에 상당히 큰 문제처럼 보인다

은 " 올바른 "방법으로 애니메이션 루프를 수행 할 수 있습니다.

demo 여기에 업데이트 됨.

Answer 2

글쎄 4096 x 4096은 큰 텍스처이며 모든 데이터를 GPU로 전송하는 데 시간이 걸립니다. texImage2D을 호출하고 drawArrays을 즉시 호출하는 경우 texImage2D의 업로드가 완료 될 때까지 drawArray을 실행할 수 없습니다. 이것은 프로파일 러에서보고있는 지연을 설명합니다.