気になるメモメモφ(..)

日常気になる事を取り留めもなくメモメモしてます。

Mayaviの3D画像データX3DをWebGLでレンダリングしてブログで動かしてみる。

3Dグラフィックのための強力なエンジン  ( VTK ) を搭載した対話的3次元プロットパッケージ『Mayavi』のこんな感じの3Dグラフィックをブログ上で表示してみました。

 

f:id:memomemokun:20181230020416p:plain

 

Pythonスクリプトディスクトップ上で動かす場合、最近ではjupyter notebookのブラウザー上で動かすことも多くなってますが、jupyter notebookでMayaviの画像を以下のようにインライン表示した場合、これってどうやっているのだろう調べてましたら、

jupyter notebook

 

 

HTML5準拠の最近のブラウザーでは、WebGL、すなわち、3次元グラフィックス規格OpenGLのサブセットを表示する機能を標準で備えてますから、それを利用して、

 

XML形式の3Dデータ交換フォーマットX3DWebGLレンダリングする為のライブラリー「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のプロット画面にある「フロッピーマーク💾」ボタンを押せば簡単に出力できます。

f:id:memomemokun:20181230032005j:plain

 

 

ということで、Mayaviのexampleページにある例で、ちょっと試してみました。。

 

以下は、曲面上に球体をランダムに描いてみた例。

Surface from irregular data example — mayavi 4.6.2 documentation

ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください

 

 

 

次は

 

先日、スペースシャトルの3秒メッシュ(約90m)の地球の地形データSRTM3で富士山周辺の立体地形図を描いてみましたが、

memomemokun.hateblo.jp

 

こちらは1秒メッシュ(約30m)のSRTM1でグランドキャニオンの地形の起伏を描いてみたそうで、流石にメッシュが細かいですね〜〜!

Canyon decimation example — mayavi 4.6.2 documentation

ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください

 

 

 

最初に上げた以下の画像は、原子軌道のノルムと位相を描いたグラフィックだとか。

Atomic orbital example — mayavi 4.6.2 documentation

意味はわかりません。綺麗だったので(笑)

 

とはいえ、多彩な色で緻密な画像を描いている3D画像データは容量がデカイので見たい方は以下のURLでどうぞ。

http://chamu.org/test/Atomic_orbital.html

なお、48Mほどありますので、ご注意ください

f:id:memomemokun:20181230020416p:plain

 

 

ということで、どうでしょうか?

ブラウザー上でX3Dデータをグリグリ動かせるでしょうか?

 

 

とはいえ、一番やりたかったのは、先日、NASAの画像からMayaviで作成した地球儀のイメージをブログ上でグリグリしたかったのですが、

 

memomemokun.hateblo.jp

 

テクスチャマッピングで作成した画像はダメなのか、X3DOMが全てのX3Dに対応しきれてないのか、Mayaviで吐き出したX3Dに一部ローカル方言が含まれているのか、それとも何かもう一つ工夫がいるのか、残念ながら、Mayavi上ではグリグリ動かせるNASAの画像から作ったこんな感じの木星木星義をWeb上でグリグリお見せすることは出来ませんでした。

 

出力されたX3DのPixelTextureかIndexedFaceSetあたりのノードの文法がおかしいのかなぁぁ???

調査中!(笑)

 

www.nasa.gov

 

f:id:memomemokun:20181230021631j:plain