2의 거듭 제곱으로 텍스처 크기와 크기를 동적으로 효율적으로 생성하는 방법

Question

셰이더를 사용하는 브라우저 기반 시각화에서 각각의 다른 뷰에 대한 텍스처 크기를 동적으로 생성하는 루프를 완성했습니다. 셰이더에 값을 전달하기 위해 필요한 최소 픽셀 수를 알고 있습니다. 그러나 나는 2 크기의 힘으로 그들을 확장하고, 그 다음 그들의 x와 y 차원이 1 : 1, 2 : 1, 또는 1 : 2 비율과 함께 2의 제곱수인지 확인해야합니다. 지금은 루프가 무한합니다. 내 비율 중 하나를 만족하는 크기에 도달 할 때까지 2 픽셀 카운트의 전체적인 출력을 계속 늘려야 할 것입니다.

내 질문은 : 여기에서 내가하려고하는 것을 달성하기위한보다 효율적이거나 직접적인 방법이 있습니까?

var motifMinBufferSize = 80000; 
var bufferSize; // the total number of texels that will be in the computation buffers (must be a power of two) 
var dimensions; 

function initValues() { 

    bufferSize = setBufferSize(); 
    dimensions = setPositionsTextureSize(); 
} 

function setBufferSize() { 

    var buffer = motifMinBufferSize; 

    // fill out the buffers to a power of two - necessary for the computation textures in the shaders 
    var powCount = 1; 
    var powOf2 = 2; 
    while (buffer > powOf2) { 
     powOf2 *= 2; 
     powCount++; 
    } 

    while (buffer < powOf2) { 
     buffer += 1; 
    } 
} 

function setPositionsTextureSize() { 

    var dimensions = { 
     texWidth : null, 
     texHeight : null 
    }; 
    var foundDimensions = false; 
    var powOf2 = 2; 

    while (foundDimensions === false) { 
     var candidateWidth = bufferSize/powOf2; 
     if (candidateWidth === powOf2 || candidateWidth/2 === powOf2 || candidateWidth*2 === powOf2) { 
      dimensions.texWidth = candidateWidth; 
      dimensions.textHeight = powOf2; 
      foundDimensions = true; 
     } else { 
      powOf2 *= 2; 
     } 
    } 
    return dimensions; 

} 

Answer 1

버퍼의 너비와 높이가 모두 2의 제곱이기 때문에 버퍼에는 2^n 요소가 있어야합니다. 이상을 보유하는 최소 요구 조건을 만족하는 최소 n은 motifMinBufferSize 요소의 대수를 사용하여 계산됩니다. n = Math.ceil(Math.log2(motifMinBufferSize)).

버퍼의 높이가 2^h이고 버퍼의 너비가 2^w라고 가정 해 봅시다. 우리는 w와 h가 최대 1 개까지 다를 수 있음을 알고 있습니다 (버퍼 크기의 비율에 대한 제한 때문에). 우리는 또한 n = w + h를 의미하는 2^n = 2^w * 2^h를 알고있다. w와 h는 많아야 1만큼 다르므로 기본적으로 n의 절반입니다. 따라서 우리는 다음을 얻을 수 있습니다 :

function getBufferDimensions(minBufferSize) { 
    var n = Math.ceil(Math.log2(minBufferSize)); 
    var w = Math.ceil(n/2); 
    var h = n - w; 

    return { 
    width: Math.pow(2, w), 
    height: Math.pow(2, h), 
    }; 
}