【3DCG×WebAR】飛び出すクワガタバトルカード制作の裏側
TechDesign
2025/08/31BINGEです。
2025年2月下旬にキャンピングカーショー2025で知り合った昆虫ヒーローズ様よりご依頼いただき、
弊スタジオEscentierでいろんなものを作っていました。
ひと段落したのでがんばったことをアピールする記事を書きたいと思います。
ARアプリ「クワガタカード」
もともと昆虫ヒーローズさんが配布していたクワガタカードというグッズを拝見し、
3Dモデルを図鑑のように表示できたら面白いんじゃないかということで、AR機能を実装しました。
カード裏面のQRコードを読み取るとWebサイトが立ち上がり、カメラをかざすと3Dモデルがカードの上に表示されます。
さらに、２体同時にスキャンするとバトルモードへ移行し、対戦ゲームが遊べます。
1.AIでクワガタのモデルを作る
気になっていたAIの3Dモデル生成を試してみました。
使用したのは3月当時話題になっていたRodinAIです。
無料プランでは１枚の画像からモデル作成可能なのでとりあえずギラファノコギリクワガタを生成。
ぱっと見良い感じに見えますが…
足が枝分かれしていたり
顔がおかしくなったりでうまくいきませんでした。
1枚の画像ではうまくいかなかったので、有料プランにして複数画像から生成。
なかなかいい感じですね。
足もギリギリ６本で、少し手直しすれば使えそうです。
手動でボーンを入れて合計４体のアニメーションを作成しました。
2.手作業で3Dモデルを作る
フィードバックをいただいた結果、AI生成のモデルは細部に違和感を覚えるお子さんもいるとのことだったので、
クオリティやアニメーションも考慮して、追加の３体のクワガタは自分で作成することにしました。
追加したモデルが以下の３体です。
クワガタモデルを作る工程のタイムラプスです↓
めちゃめちゃぎゅっとしてそれでもまだ長いですが興味のある方は是非見てみてください↓(5分半あります)
AI生成もどんどん進化していますが、自分で作った方がクオリティを調整できるので、適材適所でツールは選択していきたいですね。
3.作成したモデルをARで表示する
MindAR-jsとA-Frameを使って画像マーカーを認識し、3DモデルをAR表示するWebベースの画像認識ARです。
(AR.jsも試してみましたが、マーカーの作成の簡単さとARの精度でMindARの方がよかったです。)
昆虫カードをカメラが認識すると対応するモデルが表示されます
4.ゲーム機能を作る
やっぱりカードといったらバトルでしょ
ということでバトル機能を実装しました。
映像向けの３Dモデルばかり作っているので、モデルの容量を小さくするのが大変でした。
ゲーム向けモデルを作ってる方はすごいですね。
AR中にカードを2枚以上近づけるとバトルボタンが表示され、2人用の対戦ゲームに移行します
デモ: バトル映像
バトル前後のカメラワークはTheater.jsを使ってつけました。
5.ゲームの遊び方
攻撃・防御・チャージの３つのアクションをお互いに選択し、結果によってダメージを与えることができます。
クワガタによって攻撃力が高かったり、チャージが早かったり特性があります。
お子さんでも遊べるシンプルなUIと、大人でも楽しめる心理戦バトルを意識しました。
デザインやゲームシステムも全て自分たちで作って楽しかったです。
今回はWebでしたが、ゲームエンジンを使って本格的なゲーム作るのも楽しそうですね。
まとめ
以上がクワガタカード制作の裏側です。
3Dデータ作成から映像やデザイン、WebARやゲームシステムの開発まですべて弊社で担当させていただきました。
クワガタカードは昆虫ヒーローズさんのイベントに参加したお子様向けに無料でお配りしているそうです。
普段はパソコンと向き合って制作しているので、
現場でたくさんのお客さんの笑顔を観れて嬉しかったです。
カードの他にもイベント向けのツールを開発したり、CM撮影をしたり、色々とご協力させていただきました。
ぜひWORKSページより詳細をご覧ください。
最後まで読んでくださった方へ
現在、弊社Yogo Management Office合同会社はEscentierというスタジオ名義で制作をしています。
YOGO - 音楽家/システムエンジニア
BINGE - 3D映像/音響エンジニア
Sheena - インタラクティブアート/実写映像
必要に応じて周りのクリエイターたちと協力しています。
なにか面白いことができないかな、と思った時にみなさまの頭に浮かぶようなクリエイティブチームを目指しています。
アイデアの相談だけでもお受けします。
一緒にワクワクするものが作りたい方は是非お気軽にご連絡ください！
お問い合わせはコチラ