こちらは、Mavs Advent Calendar 2024 6日目の記事です🐺！

🌲🌲🌲

まずは以下のデモ動画をみてください！
Unicorn.studioではこのようなWebGLを非常に簡単に作ることができます！！！

ハコザキです！
今回はノーコードでWebGLを作ることができる、Unicorn.studioについてご紹介します！

unicorn.studio — No-code WebGL Tool

Unicorn.studioは2024年12月現在、招待制となっており、実際に使うにはwaitlistに登録する必要があります。
運営元から招待メールが届くと利用可能になります。
※私は2ヶ月ほど待ちました..！現在はもっと早く招待されるかもしれません..！

Unicorn.studioとは？

初めにも説明しましたが、Unicorn.studioとは、ノーコードのWebGL開発ツールです。
WebGL開発者でなくても、複雑なエフェクトやシーンを簡単に表現することができ、 私自身少し触ってみましたが、レイヤーベースでFigmaに似たようなUIで、操作しやすかったです！！！

テキストや画像、3Dオブジェクトなどにさまざまなエフェクトアニメーションやマウスのトラック・ホバーイベントを設定でき、使ってみてワクワクしました！

サービスの特徴

• 35種類以上の強力なエフェクトを探求可能
• 簡単にモーションやインタラクションを作成
• 高速でパフォーマンス重視の設計
• 数クリックで簡単に埋め込み可能
• ブラウザ上で高速に動作
• 高解像度の画像や動画のエクスポートに対応
• ネイティブコードの埋め込み用SDKを提供

上記にあるように、初心者でも手軽にWebGLを扱えるような機能が充実しています！！

料金

Unicorn.studioは基本的に無料で使用することができます。 プロ向けの「Legend」サブスクリプションでは、いくつかの機能が利用可能です。 現在のベータ中は、年間プランで月額$8、月額プランで$11で利用できます。

Legendプランで利用可能な機能:

• 商用ライセンス
• ロゴなしの公開URL
• コードエクスポート（自身でコードをホスティング可能）
• CDN/アセット最適化
• カスタムフォント
• SVGを3Dに変換（近日公開予定）
• すべての新機能やアップデートへのアクセス
• レスポンシブ対応コントロール（近日公開予定）

多機能でプロフェッショナルな制作が可能になります！！

使い方

基本的にはレイヤー単位でシーンを作成します。
サービス自体はFigmaに似たようなUIのため、Figma使ったことがあれば操作しやすいと思います。

レイヤーの追加

左上のカーソルや画像などのボタンからレイヤーを追加することができます。

3Dオブジェクトを追加したり、

3Dオブジェクトなどにエフェクトをレイヤーベースで適用することができます。

プロパティ

レイヤーごとの設定値は画面右側のパネル上で編集することができます。
英語ですが、WebGLに慣れている方であればよく見る値だと思います。スケールやスピード、マウス追従の割合なども細かく設定できます。

実際にいくつかWebGLを作ってみた

その1 SVGの3Dオブジェクト

会社のSVGロゴを3Dオブジェクト化し、マウスカーソルの位置によって光の当て具合を変えています。

その2 マウスカーソル追従でのぼかしアニメーション

初回読み込み時のテキストが伸びるような表現をグリッチ感ある背景にし、
マウスカーソル追従でぼかしアニメーションを加えました。

以下のようなレイヤー構成で、一見複雑そうなWebGLも簡単に表現できました。

その3 マウスカーソル追従で背景マスク画像の表示

マウスカーソル追従で不規則な透明レイヤーを動かして、背景のカレーの画像を表示してみました。

また、弊社メンバーのWebGL触ったことのある菱村さんにUnicorn.studioを紹介して使ってもらい、実際に作っていただきました…！！
スクロールイベントは触っていなかったのですが、こちらも簡単にできるそうです！
2人でお手軽さに感動してました…！

終わり

Unicorn.studioについてご紹介しました。
私自身WebGLの経験はほぼなく初めてでしたが、リッチな表現が簡単に作成でき衝撃を受けました..

今回Unicorn.studioで作成したWebGLについて、
明日は実際にReact等のJSフレームワークで表示する方法についてご紹介します！！