Forge Viewer の State API とビュー

Forge Viewer を利用する際、表示中の場面（ビュー）を後でもう一度表示したい場合があります。いろいろ考えられますが、カメラ位置などを変更する必要がなければ、もっとも簡単な方法があります。Viewer3D.getState() と Viewer3D.restoreState() を利用して、カメラ位置やターゲット位置を含む ViewerState を記録・復元する方法です。

次の JSON は、Viewer3D.getState()  から返された ViewState オブジェクトを、 JSON.stringify() で JSON 化して見やすく整形した例です。

{
    "seedURN": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6N2lyeHdxMnViZ2x4YTI5d2lqdnNqc215YXJreDJpc2ItdHJhbmllbnQvRGllc2VsX0Nhcl9KTlIuZjNk",
    "objectSet": [
        {
            "id": [],
            "isolated": [],
            "hidden": [],
            "explodeScale": 0,
            "idType": "lmv"
        }
    ],
    "viewport": {
        "name": "",
        "eye": [
            31589.3310546875,
            12721.4580078125,
            -3796.1991577148438
        ],
        "target": [
            -0.0009765625,
            -1.395263671875,
            0.0001220703125
        ],
        "up": [
            0,
            0,
            1
        ],
        "worldUpVector": [
            0,
            0,
            1
        ],
        "pivotPoint": [
            -0.0009765625,
            -1.395263671875,
            0.0001220703125
        ],
        "distanceToOrbit": 34266.1352142333,
        "aspectRatio": 1.588235294117647,
        "projection": "perspective",
        "isOrthographic": false,
        "fieldOfView": 22.61986532341139
    },
    "renderOptions": {
        "environment": "(Custom: Model defined)",
        "ambientOcclusion": {
            "enabled": true,
            "radius": 10,
            "intensity": 0.4
        },
        "toneMap": {
            "method": 1,
            "exposure": -9,
            "lightMultiplier": -1.0e-20
        },
        "appearance": {
            "ghostHidden": true,
            "ambientShadow": true,
            "antiAliasing": true,
            "progressiveDisplay": true,
            "swapBlackAndWhite": false,
            "displayLines": true,
            "displayPoints": true
        }
    },
    "cutplanes": []
} 

この内容から、カメラ位置やターゲット位置以外にも、オブジェクトの選択状態や個別オブジェクト表示/非表示の状態、分解の状態や環境など、ビューの状態やレンダリングの状態まで記録出来ることがわかります。

例えば、次のようなコードがあったとすると、rsgisterView() 呼び出し後に手動でビューを操作しても、restoreView() を呼び出せば元のビューの状態を復元出来ることになります。

var _view;
function registerView (){
    _view = _viewer.getState();
}
function restoreView (){
    _viewer.restoreState(_view);
}

getState() では、ViewerState に含まれるパラメータ名に true、または、false を設定したフィルタを JSON 形式で指定することで、記録する状態の種類を選別することが出来ます。例えば、次のコードでは分解係数とビューの状態のみを記録し、オブジェクトの選択状態や環境などレンダリング情報は除外されます。もちろん、ここで返された ViewerState（ここでは変数 _view）を restoreView() に指定すれば、分解係数とビュー（カメラやターゲット等）の状態のみが復元されることになります。

var _view;
var filter = {
    seedURN: false,
    objectSet: [
        {
            explodeScale: true
        }
    ],
    viewport: true,
    renderOptions: false
};
function registerView() {
    _view = _viewer.getState(filter);
}

フィルタは restoreView() にも適用することが出来ます。すべての情報を持つ ViewerState（ここでは変数 _view）とともに、次のようなフィルタを指定すると、記録した状態からビューの状態と環境を含むレンダリングの状態だけを復元します。

var filter = {
    seedURN: false,
    objectSet: false,
    viewport: true,
    renderOptions: true
};
function registerView() {
    _view = viewer.getState();
}
function restoreView() {
    _viewer.restoreState(_view, filter);
}

restoreView() の第 3 パラメータに true を指定すると（既定値は true）、ビューの復元時にアニメーション効果が適用されます。false を指定するとアニメーション効果を除外してビューが即座に復元されます。

ViewerState には、基本的に Extension の状態やポスト処理（事後処理）で施された効果は含まれない点に注意してください。Viewer でのメッシュ状表示 でご案内したメッシュ表示や 非フォトグラフィックス レンダリング スタイルは記録されません。

By Toshiaki Isezaki