절반의 버텍스 버퍼를 사용하는 WebGL/OpenGL 성능

Question

확대/축소 할 수있는 앱이 있으므로 세부적인 모델이 적거나 세부적인 모델이 많이 표시됩니다. 그래서 일부 LOD 기술을 사용하고 싶습니다.

위치가 하나 인 버퍼 (법선이있는 ...)를 사용하지만 각 LOD마다 다른 인덱스를 사용하면 성능이 어떻게되는지 궁금합니다.

더 정확히 말하면 5 개의 LOD 레벨을 구현하고 싶습니다. 높은 디테일 (LOD1)을 가진 모델은 ~ 5k 정점을 가지며, 모두 ~ 5k 삼각형을 렌더링하는 데 사용됩니다. 낮은 세부 모델 (LOD5)은 ~ 5k 개의 꼭지점을 가지지 만 ~ 200 개의 삼각형 (~ 2 %의 데이터가 사용됨)을 렌더링하는 데 사용되는 것은 거의 없습니다.

본 적이 있습니까? 그게 무슨 뜻입니까? 몇 개의 다각형 모델을 많이 렌더링하는 데 사용되는 큰 데이터로 인해 성능이 저하 될 수 있습니까?

당신이하기 전에 :

메시는 실행에 GPU (다른 캔버스)가 생성됩니다. 일종의 밉맵으로 5 개의 LODS를 생성하면 (캔버스의 최대 값을 사용하여 http://upload.wikimedia.org/wikipedia/commons/e/ed/Mipmap_illustration2.png과 같은 렌더링을 모두 수행함) LOD1을 생성하는 것보다 적어도 두 배 이상 느립니다. 필자의 경우 지표의 이점은 초기화 될 수 있고 실행 중에 생성되지 않는다는 점입니다.

Answer 1

일반적으로 WebGL 호출은 빠릅니다. 예를 들어, 모든 모델의 모든 모델 속성이 다른 버퍼에 있었고 모든 모델에 위치, 법선, 문자 코드, 정점 색상이 있다고 말할 수 있습니다. 인덱스 된 정점을 사용하고 있다고 가정합니다. 그리고 적어도 9 함수를 호출 필요로 전화를 그리기 위해 설정하는

for each model 
    gl.bindBuffer(gl.ARRAY_BUFFER, model.positionBuffer); 
    gl.vertexAttribPointer(model.positionLocation, ...); 
    gl.bindBuffer(gl.ARRAY_BUFFER, model.normalBuffer); 
    gl.vertexAttribPointer(model.normalLocation, ...); 
    gl.bindBuffer(gl.ARRAY_BUFFER, model.texcoordBuffer); 
    gl.vertexAttribPointer(model.texcoordLocation, ...); 
    gl.bindBuffer(gl.ARRAY_BUFFER, model.vertexColorBuffer); 
    gl.vertexAttribPointer(model.vertexColorLocation, ...); 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.indexBuffer); 
    ... 
    gl.drawElements(...); 

그 모든 속성은 모든 모델이있는 경우 6 개 기능

for each model 
    gl.bindBuffer(gl.ARRAY_BUFFER, model.buffer); 
    gl.vertexAttribPointer(model.positionLocation, ...); 
    gl.vertexAttribPointer(model.normalLocation, ...); 
    gl.vertexAttribPointer(model.texcoordLocation, ...); 
    gl.vertexAttribPointer(model.vertexColorLocation, ...); 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.indexBuffer); 
    ... 
    gl.drawElements(...); 

에 감소 다음 같은 버퍼에있는 경우 동일한 버퍼를 사용하지만 오프셋을 약간만 줄이는 것이 필요합니다. 그것은 5 개 기능

gl.bindBuffer(gl.ARRAY_BUFFER, model.buffer); 
for each model 
    gl.vertexAttribPointer(model.positionLocation, ...); 
    gl.vertexAttribPointer(model.normalLocation, ...); 
    gl.vertexAttribPointer(model.texcoordLocation, ...); 
    gl.vertexAttribPointer(model.vertexColorLocation, ...); 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.indexBuffer); 
    ... 
    gl.drawElements(...); 

대신 모든 모델이 동일한 버퍼에서 인덱스를 사용하는 경우

그것은 더욱 당신이있어 감소 후 사용됩니다 이제 아래로 0 기능 속성을 설정하는 0입니다 물론

gl.bindBuffer(gl.ARRAY_BUFFER, model.buffer); 
gl.vertexAttribPointer(model.positionLocation, ...); 
gl.vertexAttribPointer(model.normalLocation, ...); 
gl.vertexAttribPointer(model.texcoordLocation, ...); 
gl.vertexAttribPointer(model.vertexColorLocation, ...); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.indexBuffer); 
for each model 
    ... 
    gl.drawElements(..., model.indexOffset); 

에 . 유니폼을 설치하라는 전화가 여러 번있을 것입니다.

따라서 이론적으로 더 빠를 것입니다. 그러나 그것은 드로잉을 설정하는 것이 병목 현상이라고 가정합니다. 종종 병목 현상이 다른 곳에서 발생합니다. GPU (픽셀 그리기) 또는 충돌이나 물리와 같은 다른 것.

각 작은 비트가 도움이되므로 인덱스를 사용하여 모델을 분리하고 모든 나머지 데이터를 거대한 버퍼에 넣는 것이 승리인지 여부는 귀하에게 달려 있습니다. PITA처럼 들리 겠지만 그만한 가치는 없습니다. 단지 의견입니다.

WebGL은 기본적으로 16 비트 인덱스 만 지원합니다. an extension that allows 32bit indices과 according to webglstats.com it's available on 95% of machines that run WebGL이 있습니다.