Design Automation API for 3ds Max：Forge Viewer ビューの反映

Design Automation API for 3ds Max：MAXScript レンダリングフローで生成されるレンダリング画像は、シーンファイル Table Fan.max の第 4 ビューポートになっていました。

今回は、Forge Viewer 上で表示しているビュー（カメラ）を 3ds Max シーンに反映して、レンダリング画像を得る方法を考察してみます。

Forge Viewer：シードファイルのビュー復元で触れたとおり、Forge では,、シードファイル（元のデザインファイルが持つビューを Forge Viewer で表示するための情報を得る方法が用意されています。

逆に Forge Viewer からシードファイルへのビューの反映については、シードファイルへの書き込みをしない「Viewer」としての位置づけから、特に一貫した方法が用意されていない状況です。ただ、Forge ポータルへの過去の問い合わせ実績から、一定の需要があることも知られています。

英語のブログ記事になってしまいますが、Map Forge Viewer Camera back to Revit や Map Forge Viewer Camera back to Navisworks では、Forge Viewer：State API でビューを更新でもご紹介した State API からのビュー情報を利用する方法が説明されています。

3ds Max では、少し前の Autodesk University クラス、3ds Max Design Automation: Add Beautiful Renders to Your Web Site で、少し違った方法が紹介されています。いずれも、あらゆるケースで試行したものではありませんので、ここでご紹介する内容も、調整が必要になる可能性があります。その点は事前にご了承ください。

前述の Autodesk University クラスの手法では、State API ではなく、次のようにビュー情報を得ています。

getCameraCoordinates() {

let cam = this.viewer.getCamera()

let matrix = cam.matrixWorld

let position = new THREE.Vector3();

let rotation = new THREE.Quaternion();

let scale = new THREE.Vector3();

matrix.decompose(position, rotation, scale)

//TODO: replace magic numbers with derived ones

let offset = new THREE.Vector3(60.5, -24.5, 60.5)

position.addVectors(position, offset);

let aspect = cam.aspect;

//TODO: derive the 1.67 multiplicator

let new_fov = cam.fov*1.67;

return {

position: position.toArray(),

rotation: rotation.toArray(),

fov: new_fov,

renderingSize: [this.viewer.canvas.width, this.viewer.canvas.height]

}

}

青字で記した部分は、シーン毎に調整が必要な値であることを意味しています。

Forge Viewer は、シードファイルから得た 3D モデルを、カンバス領域の中心に表示するようになっています。この際にシードファイル時の位置との差を補正しているのが、Global Offset（グローバルオフセット）と呼ばれる位置合わせ用の（X、Y、Z）値です。上記コードの最初の // TO DO には、この Global Offset を当てはめることが出来ます。Global Offset については、過去に Forge Viewer シーンへの複数モデルの表示（一部改定・追記）のブログ記事でも触れたことがあります。

2 つめの // TO DO には、Web ブラウザで表示している Forge Viewer 上の 3D モデルと、レンダリングした画像を、オーバーラップした領域に同じ大きさで表示させる、FOV（Field Of View、視野角）の値に乗算させる画像表示用の任意の係数が含まれます。

下記は、前述の getCameraCoordinates() に Global Offset と表示係数を設定し、JSON パラメータしてWeb サーバーへ投げかける箇所の抜粋です。

function getCameraCoordinates() {

let cam = _viewer.getCamera();

let matrix = cam.matrixWorld

let position = new THREE.Vector3();

let rotation = new THREE.Quaternion();

let scale = new THREE.Vector3();

matrix.decompose(position, rotation, scale);

//TODO: replace magic numbers with derived ones

let element = JSON.stringify(_viewer.model.getData().globalOffset);

let offset = new THREE.Vector3(JSON.parse(element).x, JSON.parse(element).y, JSON.parse(element).z);

position.addVectors(position, offset);

let aspect = cam.aspect;

//TODO: derive the 1.67 multiplicator

let new_fov = cam.fov * 2.4; // Table Fan.max

return {

position: position.toArray(),

rotation: rotation.toArray(),

fov: new_fov,

renderingSize: [_viewer.canvas.width, _viewer.canvas.height]

}

}

// Render button

$(document).on("click", "[id^='start']", function () {

var vp = getCameraCoordinates();

var params = '&color=' + _colorIndex +

'&quantity=' + $("#quantity").val() +

'&leaf=' + _leafFlag +

'&width=' + JSON.parse(JSON.stringify(vp)).renderingSize[0] +

'&height=' + JSON.parse(JSON.stringify(vp)).renderingSize[1] +

'&fov=' + JSON.parse(JSON.stringify(vp)).fov +

'&position=' + JSON.parse(JSON.stringify(vp)).position +

'&rotation=' + JSON.parse(JSON.stringify(vp)).rotation;

var uri = '/api/process/' + params;

$.ajax({

url: uri,

type: 'POST',

contentType: 'text/plain'

}).done(function (res) {

...

このコードから渡される JSON パラメータは次のようになります。青字部分が前回の JSON パラメータから拡張された部分です。

{

"color": "3",

"quantity": "1",

"leaf": "true",

"width": "1920",

"height": "942",

"fov": "54.28767677618733",

"position": "-241.98164558410645,-447.09261417388916,179.48493644408882",

"rotation": "0.6990782139317431,-0.16547652955068382,-0.1602335643066114,0.6769286269720552"

}

カンバスの幅と高さをレンダリング画像のサイズとして渡すのは、Forge Viewer のカンバスに重ね合わせて表示するこをを意図しているためです。

次のコードは、Web サーバー実装でルーティングに用意した /process endpoint から呼び出した WorkItem が処理する MAXScript です。青字部分が前回の MAXScript から拡張された部分です。レンダリングするビューを、JSON パラメータを元に作成したカメラに設定していることがわかります。

/* JSON 読み込み関数

参照:https://forums.cgsociety.org/t/json-and-maxscript/1552038/11

*/

fn getJsonFileAsString filePath=(

local jsonString = ""

fs=openFile filePath

while not eof fs do(

jsonString += readchar fs

)

close fs

return jsonString

)

/* JSON 読み込み */

paramsFilePath = "params.json"

jsonString = getJsonFileAsString paramsFilePath

myJObject = dotNetObject "Newtonsoft.Json.Linq.JObject"

myJObject = myJObject.parse jsonString

/* パラメータ取得 */

global col = myJObject.item["color"].value as integer

global leaf = myJObject.item["leaf"].value as booleanClass

global width = myJObject.item["width"].value as integer

global height = myJObject.item["height"].value as integer

global fov = myJObject.item["fov"].value as double

global temp = myJObject.item["position"].value

global pos = FilterString temp ","

temp = myJObject.item["rotation"].value

global rot = FilterString temp ","

/* ColorX 画層オフ */

global lay

for i = 1 to 6 do

(

if col != i then (

lay = LayerManager.getLayerFromName ( "Color" + i as string )

lay.on = false

)

)

/* Leaf 画層オン/オフ */

lay = LayerManager.getLayerFromName ( "Leaf" )

lay.on = leaf

/* ART レンダラー設定 */

global art = ART_Renderer()

art.quality_db = 20

art.render_method = 1

art.anti_aliasing_filter_diameter = 2.0

art.enable_noise_filter = true

art.noise_filter_strength = 1

renderers.current = art

/* カメラ設定 */

x = rot[1] as float

y = rot[2] as float

z = rot[3] as float

w = rot[4] as float

global cam = freecamera rotation:(quat x y z w) position:[pos[1] as float, pos[2] as float, pos[3] as float] fov:fov

/* レンダリング & 生成画像保存 */

fname = sysInfo.currentdir + "/result.jpg"

undisplay ( render camera:cam outputwidth:width outputheight:height outputfile:fname )

下記は、Full HD 解像度（1920 x1080）環境で最大化したブラウザサイズ条件で表示調整した例です。Forge Viewer とレンダリング画像のカンバスを、スライダで分割表示させています。スライダ境界右側がビュー情報を抽出した Forge Viewer、左側がビュー情報を反映して生成されたレンダリング画像です。