【Tips】cables.glのオペレータを改造する！少しの「JavaScript」で魅力がさらに広がります
ナカジ(@cp_nakajun)です。
さて、cablesをとりあえず一言で説明すると
『webGLをノードベースで使う環境』
と言った感じになるでしょうか。
僕が感じたcablesの魅力の１つが「既存のオペレーターを改造できる」ことです。
オペレーターとは、特定の役割を持つボックスのことでこれを線でつなぐことでcablesは処理（動作）をプログラミングし制作していきます。
ノードベースツール(環境)のメリットの１つに極端に言うと「コードを書けない人でもプログラミング的な表現・制作できる」ということがありますが
それはこの「線をつなぐ」ことで実現しているとも言えます。
簡単に言うと、基本的な処理はあらかじめオペレーターというボックスにまとめられ準備されているということです。
なので、多くのノードベースツールは自作のオペレーターを０から作ることができてもオペレーターを簡単に改造して使うことはできません。（僕が知らないだけかも）
オペレーターの組み合わせだけで作れることがメリットなのでそもそもそんなニーズはほとんどないハズです。
だからこそノードベースツールは膨大なオペレーターが準備されているわけです。
ただそのわずかなニーズかもしれませんが、そんなニーズがあることもあります。
cablesはかなり簡単に既存のオペレーターを改造して使うことができるので「面白いなぁ～」と思ったのです。
先ほど「わずかなニーズ」と書きましたが、僕がcablesで試しに作った際にオペレーターをちょっと改造することがあったので超簡単ですが事例として紹介したいと思います。
cables.glのオペレーターの中身を変更する
先に結論から書きますと
cablesのオペレーターの中身(コード)は作業画面にあるボタンを押すだけで簡単に見ることができます。
そのコードはJavaScriptとシェーダー言語で記述されています。
WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。
（WebGL 入門より引用）
cablesを『webGLをノードベースで使う環境』と紹介しましたので特にJSもシェーダーも書ける必要なく制作できますが
少しでもわかると、それはそれで広がる訳です。しかも簡単に！！
オペレーターのコードを見る＆クローンして改造
まずオペレーターのコードを見てみましょう。
下記の画像を参考に
- オペレーターを選択
- 画面右の方にある【＜/＞】タブを押す
- [veiw code]を押す
と、左側にコードウィンドウが開きます。
次にオペレーターをクローン(コピー)しましょう。
[veiw code]ではなく[clone op code]を押します。
すると名前をつけるようウィンドウが開きます。
名前の頭文字は「大文字」である必要があるようです。
そうすると先と同様に左側に「エディターウィンドウ」が開きます。
この段階でコードを改造して保存してもよいです。
自分仕様にカスタマイズしたオペレーターを使うにはオペレーター選択ダイアログから検索＆選択することで配置することができます。
また、自分のカスタムオペレーターは配置した後に選択するとパラメーターウィンドウに[edit op]ボタンがあるので、後から修正したりじっくりカスタムすることができます。
最後に自分のカスタムオペレーターは自分のアカウントの[SETTINGS]→[ops]で管理することができます。
オペレーター改造の事例
ささやかな事例ではありますが「何がしたかった」かを説明します。
下記の記事の3番目「ブログを紹介する」のコンテンツで「クリックすると指定のURLが別のウィンドウで開く」ということをやりたかったのです。
上記の画像の赤枠「当ブログのスクリーンショット」をクリックすると「別ウィンドウでブログが開く」という動作です。
cablesのオペレーターとしては[InteractiveRectangle]というRectangleエリアでの動作を出力するオペレーターでクリックを検知し
トリガーを受けると指定のURLを開く[HyperLink]というオペレーターをたたきます。
ただこの[HyperLink]はそのまま同じウィンドウで遷移します。
僕は元のcablesは残したまま新たに別のウィンドウで開きたいのでこの[HyperLink]を改造することにしました。
とは言え、やったことはとても簡単で１行変えただけです。
やりたいことと、このオペレーターが単純なこともありますが
これだけでも僕はちょっと広がった感覚になりました。
