[個人用メモ]Three.jsのパフォーマンスのススメ#1

はじめに

ワールドスケールとレイヤースケールについて考えます。
特定のワールドの広さを任意のグリッドを引き、グリッドごとにレイヤーで描画管理することで、
最適な表示非表示を切り替えます。
カメラの位置をレイヤーから特定のレイヤーまで長さを考える

途中作成

const l = 3;// 監視グリッドエリア範囲
const g = 8;// グリッド数
const n = 28;// 現在レイヤー
const r = n % g;// 現在レイヤーの列番号
const c = Math.ceil(n/g);// 現在レイヤーの行番号

const layers = [n];// 表示レイヤー

[...Array(l)].map((_, idx) => {
    const i = idx + 1;
    // 中心
    layers.push((c -1 - i)*g + r);
    layers.push((c -1 + i)*g + r);
    layers.push((c -1)*g + (r - i));
    layers.push((c -1)*g + (r + i ));
    
    // 周辺
    [...Array(l - i)].map((_none, _idx) => {
        const _i = _idx + 1;
        layers.push((c-1 - _i)*g + (r - _i ));
        layers.push((c-1 + _i)*g + (r - _i ));
        layers.push((c-1 - _i)*g + (r + _i ));
        layers.push((c-1 + _i)*g + (r + _i ));
    });
    
});

console.log("Length: ", layers.length);
console.log(layers);