Babylon.jsで遊んでみた
この記事は Makuake Advent Calendar 2023 の5日目の記事です。
普段全然アウトプットしない勢としては、この時期になると毎回どこに書くべきか迷っちゃいますよね。
去年は迷いに迷った結果、Gistに書きました。
今年はBabylon.jsで遊んでみたので感想をつらつら並べていこうかなと思います！
そもそも何がしたかったのか
ストームグラスというものをご存知でしょうか。天気によって、ガラス瓶に封入された溶液の結晶化度合いが変わるため、その昔は天気を予想する道具として使われたとか言われる、おしゃれオブジェです（そう認識しています）。
で、妻にこれをアプリ化したまえと言われていたことを思い出し、3DCGとして表現したらいいネタになるかなぁと思ったのでした、
Why Babylon.js?
3DCGで遊ぶんであれば、色々と選択肢があるわけですが、なぜ今回Babylon.jsで遊んだのか。
アプリ化するところまで視野に入れると、一般的にはおそらくUnity、あるいはその代替として名前を見るようになったGodot。
手軽さはちょっと劣りそうな雰囲気のUnrealEngineとか、アニメーションだけならBlenderでもよいはずです。
が、自分はWeb屋なので、とにかくWebっぽい分野の技術の方がとっつきやすいなということで、とりあえずWebGL触ってみよっかな？というところからBabylon.jsにたどり着きました。
結論から言うと、自分の技量のせいもあると思うんですが、Babylon.jsでは思ったようにモデリングできなかったので、仮に来年同じことをするとしても多分Babylon.jsは使わないでしょう。。。
大人しくUnity入門する気がします😆
よかったところ
普段から触っているJS/TSで書けるというのは手に馴染みがよく、新しいことを覚えるうえでも低ストレスで、モチベーションを保つのは容易でした。
構文エラーを解決できないとかになるとモチベーションどころの話じゃないですからね。。。
公式のサンプルも多く、また、Web上で動くエディタ環境（Playground: CodePenみたいなの）もあるので、何をやるにしてもめちゃくちゃ参考になります。
よくなかったところ
「反射」が最後までよく分からなかった です。
skyboxと同じテクスチャをReflectionTextureとして貼ると、簡単に金属球の表現ができる、ところまでは楽で良かったんですが、オブジェクト同士の反射がどうにもうまく行かなかった・・・
最終的に作りたかったのは結晶になるので、ある程度透過して、ある程度反射するオブジェクトを作る必要があって、一番最初に作った結晶もどきの質感がどうにも納得行かなかったので、反射について結構な時間調べましたが・・・
なんとなくそれっぽい反射ができてそうなやつの最終形を置いておきます。でもなんか鏡像が正しくない・・・
ぱっと見はそれっぽいんですけど、中央の球体を立方体にするとすごく壊れます。 すごく壊れるということは、何か間違っているんだろうなぁ・・・
この辺で、反射について考えるのをやめました😇
反射を諦めたあと
当初の目的であるストームグラスの作成は達成できなさそうなので、スノードームっぽい何かでも作ろうかなと思ってます。アドベントカレンダーの枠もなぜか空いてるのでちょっとずつグレードアップして載せていったらなんかよさそうじゃない？
ということでとりあえず木を立てました。
Playgroundとの互換性がちょっとアレなのでGIFとGithubリポジトリ置いておきます。
妻には、「子供の頃見た初期のCGみたい」と言われました・・・
成長を見せる必要がありそうです。。。
Discussion