Mayaviの3D画像データX3DをWebGLでレンダリングしてブログで動かしてみる。
3Dグラフィックのための強力なエンジン ( VTK ) を搭載した対話的3次元プロットパッケージ『Mayavi』のこんな感じの3Dグラフィックをブログ上で表示してみました。
Pythonスクリプトをディスクトップ上で動かす場合、最近ではjupyter notebookのブラウザー上で動かすことも多くなってますが、jupyter notebookでMayaviの画像を以下のようにインライン表示した場合、これってどうやっているのだろう調べてましたら、
HTML5準拠の最近のブラウザーでは、WebGL、すなわち、３次元グラフィックス規格OpenGLのサブセットを表示する機能を標準で備えてますから、それを利用して、
XML形式の3Dデータ交換フォーマットX3DをWebGLでレンダリングする為のライブラリー「X3DOM」でHTML5のDOM要素に変換してMayaviから書き込まれた画像情報をブラウザーに表示しているようでしたので、早速試してみることに！
で『x3dom.org』にはX3Dデーターをブラウザーに表示するには「JavaScriptファイルを含めるだけで。プラグインは必要ありません。無料です。」とありますので、
Integrate 3D content seamlessly into your webpage - the scene is directly written into the HTML markup. No Plugins needed. Simply include a javascript file. Free for non-commercial and commercial purposes.
3DコンテンツをWebページにシームレスに統合します。シーンはHTMLマークアップに直接書き込まれます。 プラグインは必要ありません。 JavaScriptファイルを含めるだけです。 非営利目的および営利目的では無料です。
「Hello, X3DOM!」の例に従って試してみると
https://doc.x3dom.org/tutorials/basics/hello/index.html
X3Dデーターを単に表示するだけなら、以下のHTMLテンプレートに従い「x3dom.js」と「x3dom.css」をHTMLから呼び出し、<x3d>タグの中から<Inline> タグでMayaviから書き出されたX3Dファイルを呼び出せばいいだけなのが判明。（もしくは<x3d>...</x3d>タグの間にMayaviから出力されたX3Dファイルの中身をそっくりコピペしてHTML内に直書きしてもOK!）
<html>
<head>
<title>My first X3DOM page</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<x3d width='600px' height='400px'>
<scene>
<Inline url="Atomic_orbital.x3d" />
</scene>
</x3d>
</body>
</html>
なお、Mayaviで描画した3Dグラフィックの画像データーは以下のようなMayaviのプロット画面にある「フロッピーマーク💾」ボタンを押せば簡単に出力できます。
ということで、Mayaviのexampleページにある例で、ちょっと試してみました。。
以下は、曲面上に球体をランダムに描いてみた例。
Surface from irregular data example — mayavi 4.6.2 documentation
次は
先日、スペースシャトルの3秒メッシュ（約90m）の地球の地形データSRTM3で富士山周辺の立体地形図を描いてみましたが、
こちらは1秒メッシュ（約30m）のSRTM1でグランドキャニオンの地形の起伏を描いてみたそうで、流石にメッシュが細かいですね〜〜！
Canyon decimation example — mayavi 4.6.2 documentation
最初に上げた以下の画像は、原子軌道のノルムと位相を描いたグラフィックだとか。
Atomic orbital example — mayavi 4.6.2 documentation
意味はわかりません。綺麗だったので（笑）
とはいえ、多彩な色で緻密な画像を描いている3D画像データは容量がデカイので見たい方は以下のURLでどうぞ。
http://chamu.org/test/Atomic_orbital.html
なお、48Mほどありますので、ご注意ください。
ということで、どうでしょうか？
とはいえ、一番やりたかったのは、先日、NASAの画像からMayaviで作成した地球儀のイメージをブログ上でグリグリしたかったのですが、
テクスチャマッピングで作成した画像はダメなのか、X3DOMが全てのX3Dに対応しきれてないのか、Mayaviで吐き出したX3Dに一部ローカル方言が含まれているのか、それとも何かもう一つ工夫がいるのか、残念ながら、Mayavi上ではグリグリ動かせるNASAの画像から作ったこんな感じの木星の木星義をWeb上でグリグリお見せすることは出来ませんでした。
出力されたX3DのPixelTextureかIndexedFaceSetあたりのノードの文法がおかしいのかなぁぁ？？？
調査中！（笑）
