NOT A HOTEL DAOのTHE DOOR の WebGL 実装

こんにちは。NOT A HOTEL でブランドサイトを中心にフロントエンド開発を担当しています斎藤です。
本記事では2025年6月に担当したTHE DOORのWebGL実装の開発ストーリーを紹介します。

1. THE DOOR の概要

NOT A HOTELでは暗号資産 NOT A HOTEL COIN(以下、NACと称します) を介して多くの人にNOT A HOTELを届けるプロジェクト、NOT A HOTEL DAO があります。

THE DOOR は NAC を利用したNOT A HOTEL の体験をより多くの人に還元するために考えられたサービスの一つとして、今年の6月にスタートしました。THE DOOR を開くと、NOT A HOTELの宿泊権が当たります。どこに泊まれるのかは開けてみるまでのお楽しみ、ワクワクしながらNOT A HOTELを体験できるそんなサービスとなっています。

THE DOORの誕生の背景・開発プロセスなどをujiさんとimashinさんが記事にしています。こちらについて読むと、THE DOORにもっと詳しく知ることができます!

私はTHE DOORの開封結果を表示する画面の実装を行いました。開封結果を表示する画面は WebView 上で実装されており、Android・iOS・Web のいずれでも共通化されています。この WebView 内で、リッチな 3D 演出を WebGL で実装しました。

2. WebView で 3D 演出を採用するメリット

初期プロトタイプの段階で WebView でも十分な表現ができると判断できたため、WebGL ベースでの実装を進めました。

• Web・iOS・Android の 個別実装が不要

• テスト用 URL に push すれば即反映されるため 開発/検証が高速

• ネイティブアプリや Unity ほど大規模な開発体制を必要としない

WebView 内で 3D 表現を行うアプローチを採用しました。

WebView で WebGL を使用する際の注意点

1. パフォーマンスの制約

ユーザーはスマートフォンからアクセスするため、ハイエンドからミドルレンジ、エントリークラスまで 広い性能帯でのスマートフォンで快適に動作する必要 があります。

2. アセットサイズの最小化

WebView を開くたびに 3D モデルを読み込むため、モデルが重いほど初期表示に時間がかかります。

• ポリゴン数 → 少ないほどパフォーマンスが安定

• テクスチャサイズ → 小さすぎると画質が劣化、バランスが必要

• アセット軽量化は 3D 表現の中でも最重要ポイント

実装について

1. 実装の概要

ユーザーは 3D のドアをドラッグで回転させ、好きなドアを選択できます。
選んだドアが開いて光があふれ、その後カメラが近づきながら開封結果の宿泊先を表示します。WebViewでの3D表現・演出はThree.jsとReactが使えるReact Three Fiber（R3F）というライブラリを使用して開発しました。

2. 3D モデルの調整

建築 CG チームのモデルは動画/静止画向けの高精細データだったため、WebView で扱いやすいよう Blender を使用して最適化しました。

• 元モデルのポリゴン数：12,000 以上

• 最適化後：800 以下（約 1/10）

また、ドアや取手などアニメーションが必要なパーツは Blender で整理し、最終的に glb 形式で書き出しています。

3. インタラクションの追加

実装したインタラクションは主に 3 つです。気持ちよくドアを選んだり、ドアが開く際に光があふれるような演出でワクワク感を感じてもらえたらと思い開発しています。

1. ドアの回転

・ドラッグに応じて回転、一定時間で自然に減速して停止。

2. ドアの選択

・選択したドアが手前にスッと移動し、強調表示。
・ドラッグすると選択が解除される。

3. ドアを開くアニメーション

・タップでドアが開き、カメラはドアに近づき、内部から光があふれる演出を行います。何の画像が出るまでドキドキします！

4. 擬似的な光の演出（Godray）

ドアを開くアニメーションでは内部から光があふれる演出をしています。光があふれる演出はGodray エフェクトで実装をしていましたが、処理が重く、エントリーモデルの多くの端末でクラッシュが発生しました。
そのため、PostEffect を使わず モデルとシェーダーで疑似的な Godray を以下の方法で制作しました。

• Godray 専用のモデルを追加

• ドアの開閉に合わせ透明度・発光感をシェーダーで制御

• 軽量かつモバイルでも安定して動作する形式に

結果として、見た目の品質を保ちつつ、非常に軽量な光演出を実現できました。

5. すべてのデバイスに対応するために

GPU のスペックは端末によって大きく異なるため、`@pmndrs/detect-gpu` を使って GPU Tier を判定し、表示内容を切り替えています。

• Tier 0（低性能）：安全のため動画演出のみ表示

• Tier 1〜3：リッチな WebGL 表現を提供

これにより、どの端末でも安全かつ適切な体験を提供できます。

6. AI を活用した開発

開発の約 60% は Cursor や Claude Code を使用して実施しました。

• コードの土台生成

• 実装アイデアの整理

• プロトタイプ作成の高速化

細かな調整は最終的に自前で行う必要があるものの、プロトタイプの制作速度は大幅に向上しました。

最後に

WebView × WebGL による THE DOOR の実装は、適切な最適化と設計を行うことで、iOS、Android, ブラウザ関係なくWebViewでリッチな 3D 体験を実装できました。
どのドアを選ぼうか、何が出てくるかをドキドキとワクワクを感じながらTHE DOORを遊んでもらえたら、非常に嬉しいです！