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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このように接続します。

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

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

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

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