任意の数以上の最小の2のべき乗を求める

WebGL（やOpenGL）で利用されるテクスチャは通常、2のべき乗の幅・高さで使用されます。（パフォーマンスなどの問題から）
（参考: なぜテクスチャサイズは2の累乗なのか）

ただ、使用される画像が必ず2のべき乗になっているとは限りません。（というより、なっていないことのほうがほとんどでしょう）

それでも、いちおうそのままのサイズで利用することはできますが、最適化のため内部的には足りない部分が自動的にべき乗になるように補われたり、そのままだとパフォーマンスが落ちたりといいことはなにもありません。

なのでできるだけ画像のサイズを2のべき乗で揃えておきたいですね。
とはいえ、例えば動的に作成した画像などをテクスチャにしたい場合、ロジック的に2のべき乗のサイズを求めたくなるケースがあると思います。

ということで、さくっと計算する方法を紹介してくれている人がいたのでそれを参考にJSで書いてみました。

上記の記事を参考に、JSにしたのが以下のコードです。

function nearPow2(n) {
    // 0以下の場合は常に0を返す
    if (n <= 0) {
        return 0;
    }

    var k = Math.ceil(Math.log2(n));
    return Math.pow(2.0, k);
}

最初のガード節はコメントに記載した通りです。
最後の部分が実際に計算を行っているところです。

Math.log2 は引数に取った数字に対する、2 を底とする指数を求める関数です。
いわゆる「対数」を求める関数ですね。

計算を見てみると、引数 n の対数を求め、その小数部分繰り上げています。
試してみると分かりますが、 Math.log2(n) を実行すると大体の場合、小数点で表示されます。
それをそのまま Math.pow で利用しても元の数字は復元できません。（浮動小数点の丸め込みなどが関係していると思います）

なので、いったん対数を求め、端数を繰り上げることによって求めたい数字を含むべき乗の数字を求めている、というわけですね。