APS Viewer：NPR エクステンションの調整

以前、Forge Viewer：Viewer を拡張する Extension で触れたことがある Autodesk.NPR エクステンションについて、その後、設定パネルが拡張されていますのでご紹介しておきたいと思います。NPR とは Non-Photorealistic Rendering の略で、日本語にすると 非フォトグラフィックスレンダリング になります。

API で Autodesk.NPR エクステンションをロードして利用すると、元々、APS Viewer に表示している 3D モデルに、‘edging’、‘cel’、‘grapite’、‘pencil’ の 4 つの表示スタイルを適用して表示することが出来ました。

この際、設定パネルの [環境設定] タブ下部に [非フォトグラフィックスレンダリング] ボタンが表示されるようになります。

同ボタンから [非フォトグラフィックスレンダリング] パネルを表示させると、各表示スタイルの切り替えの他に、表示スタイルを構成するパラメーターを個別に変更出来るようになります。

[非フォトグラフィックスレンダリング] パネルのパラメーターは、API からのコントロールも可能です。必要なパラメーター UI を用意すれば、効果的に意匠上の表示効果を得ることが出来ます。

例えば、brightness パラメーターで明るさ、constrast パラメーターでコントラスト、outlineNoise パラメーターでアウトラインノイズを変更すると、従来、プリセットされたスタイルの内容を変更して、表現する内容の幅が広がります。

...
$(document).on("change", "[id^='brightness']", () => {
    _viewer.getExtensionAsync('Autodesk.NPR').then(ext => {
        ext.setParameter('brightness', $("#brightness").val());
    });
});

$(document).on("change", "[id^='contrast']", () => {
    _viewer.getExtensionAsync('Autodesk.NPR').then(ext => {
        ext.setParameter('contrast', $("#contrast").val());
    });
});

$(document).on("change", "[id^='noise']", () => {
    _viewer.getExtensionAsync('Autodesk.NPR').then(ext => {
        ext.setParameter('outlineNoise', $("#noise").prop("checked"));
    });
});
...