← BACK TO BLOG
チーム開発

3Dモデル共有プラットフォーム「Inside The Cocoon / Z-Space」をチーム開発

  • #チーム開発
  • #Next.js
  • #Clerk
  • #Azure
  • #Unity

進級制作にて、3Dモデルを閲覧・共有できるWebプラットフォーム『Inside The Cocoon / Z-Space』をチームで開発しました。

本プロジェクトはCG学科と連携しながら制作を進めた、学校内初の他学科連携プロジェクトです。

クリエイターが作品を公開し、ユーザーが作品を発見し、販売や依頼へ繋がる。作品を中心とした循環を生み出すことを目的に設計しました。

しかし、私にとってこの制作で最も印象に残っているのはサービス機能そのものではありません。

他学科から預かった大切な作品データを、どのように守るか。その課題と向き合ったことが、このプロジェクトで最も大きな学びとなりました。

学科を横断して作品を繋ぐプラットフォーム

CG学科には魅力的な3D作品が数多く存在していました。

しかし、それらの作品を発表し、共有し、継続的に活用できる場所は多くありませんでした。

そこで私たちは、作品公開、SNS共有、販売、制作依頼までを一つのサービス内で完結できる環境を構想しました。

作品を展示するだけではなく、作品が次の制作へ繋がる循環を生み出すこと。それがInside The Cocoonの出発点でした。

操作デモを見る

システムアーキテクチャ

認証・データベース・ストレージ構成図

サービス全体は、Clerk、Neon PostgreSQL、Azure Blob Storage、Cloudflare Workers、Unity WebGLを組み合わせて構築しました。

認証、データ管理、ストレージ、ビューアを分離することで、それぞれの役割を明確にしています。

また、Azure Container Apps と Blender を利用した3Dモデル変換基盤についても検討・実装を行いました。

この制作を通して、単一のアプリケーションだけではなく、システム全体のデータの流れを考える経験を得ることができました。

他学科の作品を守るための設計

本プロジェクトで最も力を入れたのは、3Dモデルデータの保護です。

今回扱った作品は、自分たちが作ったものだけではありません。CG学科の学生から提供いただいた大切な作品データです。

そのため、『表示できる』だけでは不十分でした。『勝手に取得できない』ことも同じくらい重要でした。

当時はセキュリティについて深く学んだ経験がありませんでしたが、このプロジェクトでは避けて通れませんでした。

公開ディレクトリに配置しない、Azure Blob Storageへ分離保存、API経由以外のアクセスを禁止、認証・認可チェックを実装、購入済み判定を実施、権限付きURLを利用、サーバー経由で配信といった対策を実装しました。

また、ログインユーザー、商品情報、購入情報を照合し、購入済みユーザーのみがダウンロードできる構成を採用しました。

フロントエンドを書き換えられた場合や、curlなどで直接アクセスされた場合でも取得できないよう設計しています。

この経験を通して、『どう作るか』だけではなく、『どう守るか』を考える習慣が身につきました。

技術スタックと担当範囲

本プロジェクトではチームリーダーとして参加しました。

担当した主な領域は、フロントエンド実装、バックエンド実装、認証基盤構築、データベース設計、ストレージ設計、Unity連携、システム全体設計です。

Unityビューアそのものはチームメンバーが制作し、私はWebアプリケーションとの統合やデータ連携部分を担当しました。

複数の技術を繋ぎ、一つのサービスとして成立させることを意識しながら開発を進めました。

没入型体験への挑戦

当初は、3D作品をより魅力的に体験できる仕組みとして、6面同時表示、多画面立体表示による没入型表現も構想していました。

実際に試作機を制作し、表示方式の検証も行いました。

しかし、進級制作という限られた期間の中ではサービス本体の完成を優先する必要があり、最終的にシステム統合までは実現できませんでした。

結果として主要機能は完成しましたが、当初描いていた体験を完全な形で実現することはできませんでした。

この制作で学んだこと

この制作で得た最大の学びは、『機能を作ること』ではなく、『サービスを成立させること』でした。

認証、ストレージ、セキュリティ、クラウドサービス。それぞれがどのように繋がり、どのようにデータを守るのか。その全体像を初めて意識しながら開発を行いました。

また、VercelやAzureなど、それまで利用経験の少なかったサービスにも触れ、システム設計について学ぶことができました。

学科を横断した制作体制の構築、3D作品を中心としたサービス設計、そしてセキュリティを意識した実装への挑戦は、自分にとって非常に大きな経験となりました。

技術スタック

Frontend

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS

Authentication

  • Clerk

Database

  • Neon PostgreSQL

Storage / Delivery

  • Azure Blob Storage
  • Cloudflare Workers

3D / Graphics

  • Unity WebGL
  • Blender

Infrastructure

  • Vercel
  • Azure Container Apps

ER図

Z-Space システムアーキテクチャ