CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

プロトタイピングツール「Noodl」でBabylon.jsを表示させる手順について

前回の記事では、Noodlの概要を紹介しました。

www.crossroad-tech.com

Noodlはノードをつなげてプロトタイピングするツールですが、javascriptを自分で書いたり、インターネットで提供されているjavascriptソースを読み込んで使うこともできます。

今回はBabylon.jsを読み込んでNoodlで表示させる手順を紹介します。Noodlのインストール手順、基本操作などは前回の記事をご参照ください。

なお、この記事は以下を参考にさせていただいております。ただ、Babylon.jsの事情でこの記事通りにはできなかった箇所があるので、その辺りを追加しています。

note.mu

1. ソースコードを記述するため、"javascript"ノードを使う 

"javascript"というノードを使います。このノードをクリックし、Propertiesを表示させると、"Edit"というボタンがあります。これをクリックするとエディタが表示されます。

このjavascriptはいくつか決まりがあります。詳しくはこちらに書いてあります(日本語です)。

Noodl ドキュメント | JAVASCRIPT

inputsには、javascriptノードが動くときに使用される設定値です。まだ詳しくわかっていませんが、ルールに沿って値を書くと、Properties Viewで調整できるようになります。

giste2d8b33b2f604c0934c326fe2326d59d

outputとsetupもありますが、今回はまだ使っていません。今回はRunを使いました。この中にBabylon.jsを読み込む処理を書きます。

gistb35ac3e454ac9523a23b32c7b34b451c

Runの中に書いたのは、Babylon.js公式サイトでFirst Stepとして書かれているサンプルコードです。Sphereが表示されるだけのシンプルなものです。

2. CDNを読み込むため、"Script Downloader"ノードを使う

先ほどのコードには、このようにBabylon.js特有の処理がいくつかあります。

  var engine = new BABYLON.Engine(canvas, true); 

当然ながら、このままだとこのようなエラーが出ます。

Error in JS node run code. ReferenceError: BABYLON is not defined  

これを回避するために、"Script Downloader"ノードを使います。

Script downloder node of Noodl

"Script Downloder"ノードを生成して選択し、Properties viewのExternal ScriptsにURLを入力します。今回は先ほどのBabylon.js公式サイトで書かれていたURL3つ(下記)を入れました。

gist96e7d85081b25ce7878c26ab91f83c62

ちなみに、"javascript"ノードのRunの冒頭にif文が書いてあります。これがないとCDNが読まれず、BABYLON is not definedになってしまいました。

3. HTMLを書くため、"HTML Content"ノードを使う

PropertiesでContentという要素にあるElement Typeを"div"にします。また、そばのHTMLという要素でEditをクリックし、Canvasタグを1行追加します。

Properties of HTML Content node on Noodl

Babylon.jsはcanvasタグを使うので、当初Element Typeを"canvas"にしていました。しかし、これだとNoodlが本来指定しているcanvasタグのidやclass名称を指定できていないので、以下のエラーが出ます。

Error in JS node run code. TypeError: Cannot read property 'addEventListener' of null

4. ノードを接続する

このように接続します。

Node connection for HTML and js on Noodl

javascriptノードに集まるように接続します。具体的な手順は下記の動画をご参照ください。

これでBabylon.jsをNoodlで表示させることができます。サイズ調整の方法がまだわかっていませんが、Noodlの使い方を覚えたら対応予定です。

5. おわりに

今回の調査で任意のjavascriptを使う方法がわかったので、あとはMQTTや他のREST APIとの連携がわかれば、拡張性の高いプロトタイピングができそうです。

いくつか所用があって12月まで時間が取りづらいため、次の更新時期は未定です。ただ、なるべく時間を確保して、前々回のPWAと一緒にNoodlの学習も進めていこうと思います。