如何动态高效地生成纹理大小和尺寸的二次方

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^n 个元素，因为缓冲区的宽度和高度都是 2 的幂。满足holding要求的最小n 至少 motifMinBufferSize 个元素是使用对数计算的：n = Math.ceil(Math.log2(motifMinBufferSize)).

假设缓冲区的高度为 2^h，缓冲区的宽度为 2^w。我们知道 w 和 h 最多可以相差一个（由于缓冲区尺寸比例的限制）。我们也知道 2^n = 2^w * 2^h 这意味着 n = w + 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),
  };
}

如何动态高效地生成纹理大小和尺寸的二次方

How to dynamically and efficiently generate texture sizes and dimensions in powers of two

javascript

textures

loops