2022.1.10 更新
皆さまごきげんよう。
さて本日は、webGLで何か作ってみようと思った時に、実験をもっと簡単にするためのパラメーター調整GUI、『dat.GUI』を使ってみて、とても便利だったのでその導入方法の備忘録です。
目次
1. パラメータを調整できるライブラリdat.gui
3Dシーンを作成するために、アニメーションや色などのパラメータを調整したいことはよくありますが、適切な値になるまで何度もコードを書き換えるのは実に大変な作業です。
しかし、この作業を簡単に行えるライブラリがあります。コード内の変数の値を変更するためのユーザーインターフェース、dat.GUIです。
2.htmlファイルでライブラリを読み込む
bodyタグまたはheadタグの中にdat.guiのライブラリを読み込む記述をします。
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="js/main.js"></script>
</body>今回は画像をアニメーションさせるので、dat.GUIと共にp5.jsのライブラリも一緒に読み込んでおきます。
p5.jsはProcessingのJavascript版で、ブラウザ上でリッチなアニメーションを動作させることが出来るライブラリです。
3.変化する値を持つjavascriptオブジェクトを用意する
大まかな流れを順番に説明します。
今回は、変化する値を持つオブジェクトに立方体を選びました。dat.GUIを利用して以下の項目を変更できるようにしてみようと思います。
- 立方体の幅（w）、高さ（h）、奥行き（d）
- 線の色
- 塗りの色
- 線の表示、非表示
- インフォメーションの表示
先ずはこちらのDEMOをご覧ください。
See the Pen three.js-dat.GUI by kowalski k (@polkadotsandsky) on CodePen.
(jsのコメントアウトにて詳しく説明しておりますので参考にしてみて下さい)
- 値を変化させたい項目のデフォルト値を、最初の関数の中で定義しておきます。ここで言うとfunction myCube()の部分です。
- 次にdat.GUIの設定で、これらのパラメータの範囲を設定します。function setup()の部分です。
- 最後のfunction draw()で立方体を描画しています。
これで、簡単に値を変更できるユーザーインターフェースが表示されるようになりました！いろんな表示方法を試してみたので、統一感はありません(笑)
dat.GUI入門という講座がドットインストールにありますので、じっくり取り組みたい方はぜひ！
4.クリエイティブコーディングについて少々
毎年のように”今年はVR元年だ！”と言われて久しいですが、やはりまだ（あのヘッドセットのゴツさのせいか？）イマイチ世間に浸透していないような気がします。
しかし、来たるべきメタバース時代に自分の作ったVR空間に入りたい！という夢があり、3D空間はthree.js、processing、p5.js あたりで表現出来そうじゃないか？と思いまして、アートなフログラミング、「クリエイティブコーディング」をかじり始めた今日この頃です。
p5.jsでスライダー付きパターンを作る方法
元々動きのあるものやアートが好きなこともあり、おなじみのjavascriptで楽しみながら勉強も出来るなんて一石二鳥じゃないかと。
で、勢いでオライリーの分厚い本、『初めてのthree.js』を買ってしまったので(^^; 、見よう見まねでthree.jsでひとつ作ってみました。
初めての～、という割にめちゃ難しいんですけど、単純なものでも自分の作ったものが動き始めると楽しいんですよ、これが( ^ω^ )
See the Pen three.js fog by kowalski k (@polkadotsandsky) on CodePen.
クリエイティブコーディングは、ちょっとしたパラメータの変化で思ってもみなかった美しいアートが偶然出来るんです。クリエイティブコーディングでなくても、部品などを作っていて値を変えて実験したい時もあるでしょう。
そんな時にとても便利なdat.GUI、ぜひ一度お試しくださいませ。
追記：2021年末、遂にオキュラスクエスト2を購入しました！これはもう、百聞は一見に如かず、としか言えません。正に世界が変わる体験ができると思います！
Oculus Quest 2—完全ワイヤレスのオールインワンVRヘッドセット—128GBただ、重い（笑）あと私の場合、いまいち顔にフィットしないせいか目が非常に疲れるのと、体調が良い時でないとVR酔いしますので、長時間の着用は厳しいです。これ被って長時間ゲーム出来る方、本当にすごい！
近い将来メガネ並みの手軽さが実現されれば、スマホの次として一気に普及すると確信します！VRゴーグルについてはまた改めてまとめたいと思います。