概要とこれまで
作品コンセプトについて、ADAA2021に出した動画がわかりやすいと思います。
CMなんかも作っていました
これまでの開発の経緯についてはこのブログでまとめていますのでぜひ見てみてください
https://utautattaro.blog/tag/VOXELCANVAS/
最終的なシステム構成
最終的なシステム構成は以下のようになっていました。
PlayCanvas
VOXELCANVAS EditorはずっとPlayCanvasで開発していました。このあたりは初期の頃に高校の同級生であるせいろ氏と共同開発したものがベースになっていて、彼の構築したvox engine v2によってボクセルの大量描画を実現しています。
実際このvox engine v2が安定稼働してくれたおかげでエディタに関しては定期的なPlayCanvas engineのアップデートを行うだけで、ほぼノーメンテで動き続けてくれました。感謝
ロリポップマネージドクラウド
フロントエンドフレームワークはNuxt2を利用し、最初はJamStack運用していましたが、動的OGPに対応させたくなったりユーザーページを作りたくなったりしたのでSSRに変更し、それと同時にロリポップの共用サーバーからロリポップマネージドクラウドに変更しました。
gitを利用したデプロイができて、プッシュと同時にビルドされる仕様が非常に楽で良かったです。ユーザーがいない状態だとサーバーが休止状態になってしまうので、再アクセス時に3秒ほどオーバーヘッドが発生するのがちょっと微妙でした
NCMB
データ・ユーザー管理及び認証はすべてNCMBにお願いしていました。デフォルトでは2つのキーをクライアントサイドに置くことになってしまうためherokuを利用してクライアントキー隠蔽を実装したりもしていました。いろいろ手に届かなくてむず痒い思いはあったものの、NCMBがなければVOXELCANVASもなかったと断言できるので、本当にお世話になりました。
Imagekit.io
画像もWebサーバーに溜め込んでいたのですが、表示速度や解像度の問題が頻発するようになったところでimageCDNであるimagekit.ioに出会いました。有名どころはimgixだと思うんですが、imgixがソース置き場をしているするのに対してimagekitl.ioはクラウドを提供してくれます。またAPIも豊富でbase64を投げれば画像化してくれたりと、かなり使い勝手が良いですし、無料で使える容量も非常に豊富なので自分はとても好きなサービスです。初学者ほど使えばいいのになあと思うのですが、日本ではあまり使ってるケースは少ないみたいですね。
obj2glb
Cesium社によって作られている3Dモデル変換のためのOSSです。obj,mtl,textureを投げるとglb化してくれるというシンプルなライブラリですがこれの良いところはコマンドラインベースでも、スクリプトベースでも動くという点でして、非常に使い勝手が良かったです。Webサーバーとは別にロリポップマネージドクラウドを作成してそこにホストしていました。
Vision API
VOXELCANVASはタグ機能はありましたが命名機能はなかったので、過去に作成されたモデルを含めキャプションを作るために様々なCV APIを試しました。最初はAzure CV APIやGCP CV APIを試していたのですが当時は精度が悪く、だいたい「Computer Game」とかになってしまっていたのでサービスへの統合はせず諦め気味だったのですが、最近登場したgpt-4-vision-previewで試しにやったところ非常に精度が高いキャプションを生成できたためどこかで全キャプション作成したいなーと思っています。
体験いただいたユーザー
ユーザー登録機能を展開してから、サービス終了まで、計5000アカウント作成されました。
ユーザー数はバズアプリと言えるほど伸びはしませんでしたが、自分なりに良かったなーと思うのはその体験地域の多さです。
GA4の全データを確認したところ、なんと世界167の地域からアクセスがありました。
割と頑張ってアプリを初期から英語で作っていたためグローバルに使っていただけるアプリになったんだと思います。
下の方にはセントビンセント及びグレナディーン諸島など、地理の教科書で見たような地域からのアクセスもあり、テンションが上りました。
自分のコードが地球上の167の地域の端末で動作したんだなあと思うと達成感がありますね。
というか、そのレベルの地域でも問題なく使えてるNCMBすごい
最終的なデータ量
最終的にボクセルモデルは9163作成されました
これはエクスポートされていないモデルもすべて含まれる数値で、forkされたものも含まれます。
エクスポートされたglbデータは2971個で、合計761MBでした。意外と軽いですね。
管理画面から、エクスポートされたglbをGoogleの<model-viewer>で閲覧できるページを作っていたのですが、なかなか壮観でした
これだけのデータが集まったのも感慨深いですね。
とりあえずエクスポートはしたのでいつかなにかに使いたいなと思います。
記憶に残る思い出
Mashup Awardで入賞
Mashup Awardで富士通クラウドテクノロジーズ賞を頂きました。ここで頂いた副賞の5万円で、その後の開発にコストをかけれたので非常に良いきっかけでした。
規約を頑張って作った
Webサービスとして出すにあたって、しっかり行政書士と調整して日英で規約を作成しました。データを作成できる、ダウンロードして再利用できる、パブリックに公開すればだれかが複製して共創できるというなかなかないスキームのサービスで、行政書士とたくさんMTGしたのがいい思い出です。個人開発のコスト感として妥当なレベルで作成するのが大変でした。
ポルトガルの学生が授業で使ってくれた
ポルトガル在住のPhD学生が授業で使ったよ！とわざわざ連絡をくれました。その後風景の写真も送ってくれて、地球の裏側で自分のツールが有効活用されたと非常に嬉しかった思い出です。
入院中にglbエクスポート機能リリース
glbエクスポート機能について、需要は理解できていたのですがいかんせん開発する時間がなかったのですが、入院した際に時間ができたので実装したのはいい思い出です。
HTML5 Conferenceで登壇
VOXELCANVASのおかげでHTML5 Conferenceでセッションする機会をいただけました。
コエテコイベント・下関イベントで活用
最近では本業でもいろいろ活用いただけて、中高生向けのイベントなんかで使っていただけました
2023年の夏休みは，親子で楽しめるプログラミング体験で思い出作り。「コエテコ ジュニアプログラミングフェス 2023」をレポートGMOメディア主催のプログラミング教育体験イベント「コエテコ ジュニアプログラミングフェス 2023」が，2023年8月20日に開催された。渋谷フクラスに設けられた会場には，プログラミング教育に関わ…www.4gamer.net
PlayCanvasを使って、150名以上の中高生が作成した3Dモデルを組み込んだドミノ倒しのプロジェクトを作りました。10月5日・6日開催のしものせき未来創造 jobフェアに参加をさせていただきました。下関市内の中学生・高校生を対象にした職業体験のイベントです。実施についてレポートを含めて紹介させていただきます。下関
tech.gmogshd.com
最後に
いろいろ振り返りましたが、結局VOXELCANVASを作れてよかったなと思います。
VOXELCANVASのお陰で様々な経験ができましたし、自分のキャリアやスキルを上げるうえでも非常に役立ったサービスでした。
今見てみるとだいぶ拙いところもあるなあ、、、と思いますがそれも含めて自分の成長過程を見ているようで感慨深いです。
サービス終了は自分もさみしいですが、このブログを最後にしようと思います。
またいつか、VOXELCANVASのようなサービスを作れたらいいなと思います。
改めて、ご利用いただいたユーザーの皆様、ありがとうございました！
