2の累乗でテクスチャのサイズとサイズを動的かつ効率的に生成する方法

Question

シェイダーを使用してブラウザベースの視覚化を行っているときに、それぞれ異なるビューのテクスチャサイズを動的に生成するループを作成しました。シェーダーに値を渡すために必要なピクセルの最小数を知っています。しかし、私はそれらを2の累乗にスケールアップし、そしてそれらのxとyの次元が2：1、2：1、または1：2の比率で2のべき乗であることを確認する必要があります。現在、私のループは無限です。私は、自分の比率の1つを満たすサイズに達するまで、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要素が含まれている必要があります。 少なくとも、motifMinBufferSize要素を保持する要件を満たす最小のnは、対数を使用して計算されます。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), 
    }; 
}