【ITニュース解説】I built a free pet memorial page with a small three.js garden that stays smooth on phones

このプロジェクトは、亡くなった大切なペットを偲ぶための、無料で広告一切なしの追悼ページ「Bridgelight」の開発について詳しく解説している。各ペットには専用のページが割り当てられ、写真や短い動画、ペットへ向けた手紙の投稿、そして友人たちがアカウント登録なしで点灯できるキャンドル、さらにペットが飼い主の傍らに佇む小さな3D庭園が含まれている。特に、この3D庭園の実装には多くの技術的な工夫と挑戦が凝らされている。

開発に使われた主要な技術スタックを見てみよう。ウェブアプリケーションの土台には「Next.js 16」が採用されている。これは、高速で現代的なウェブサイトやアプリケーションを効率的に構築するためのフレームワークだ。3Dグラフィックスの実現には「three.js」が用いられている。three.jsは、ウェブブラウザ上で複雑な3Dシーンを描画するためのJavaScriptライブラリで、このプロジェクトの核となる技術だ。データの保存やユーザー認証などのバックエンド機能には「Supabase」の無料枠が活用されており、これはデータベースや認証サービスを簡単に利用できるクラウドプラットフォームだ。ウェブサイトのデプロイ（公開）とホスティング（運用）には「Vercel Hobby」の無料枠が使用されている。訪問者数の計測は、ユーザーのプライバシーに配慮し、追跡クッキーを使用せず、Vercelが提供するウェブ解析機能によって行われている。

小さな3Dシーンでもリアルに見せるためには、限られた予算とリソースの中で様々な工夫が必要だった。空と遠くに見える木々は、CC0ライセンス（著作権フリーで自由に利用可能）の高解像度画像であるHDRIが使われている。例えば、Poly Havenから提供されている「lilienstein」や「spruit_sunrise」といった画像で、時間帯に応じた美しい空が表現されている。これらは「GroundedSkybox」という技術と組み合わせることで、空と地面の境界が不自然に浮き上がることなく、現実の風景のように自然に見えるよう調整されている。

通常の3Dモデルとして木々や草を配置すると、特にスマートフォンでは処理が重くなり、快適な動作を阻害する可能性があった。そのため、異なるアプローチが取られた。遠景の木々はHDRI画像で表現され、手前の芝生は「インスタンス化された草のシェーダー」という効率的な描画方法で実現されている。これは、個々の草の葉をそれぞれ独立した3Dモデルとして描画するのではなく、一つの草のモデルを多数複製し、それらを効率的に描画する技術だ。さらに、芝生には芝刈り機でつけられたような模様が、草の色自体に焼き付けられている。岩や地面の質感は、CC0ライセンスで利用可能なスキャンされたテクスチャ画像が使われており、これにより現実感のある表現が低コストで実現されている。

庭園に登場する犬のモデルも非常に特徴的だ。この犬は、既存の3Dモデルをダウンロードして使用するのではなく、プログラムによって形状や動きが生成される「プロシージャル」な手法で作成されている。具体的には、成犬の骨格（後ろ足は三つの関節を持つ）を基盤とし、何層にも重ねられた「シェルファー」という手法で毛並みが表現されている。加えて、徘徊する、息を切らす、ベンチに座るといったいくつかの行動パターンがプログラムされている。この実装を通じて開発者が学んだ教訓として、犬のモデルを「大きな頭、大きな目、丸いプロポーション」にするとおもちゃのように見えてしまうが、「成犬に近いプロポーション」にすることで、よりリアルなペットとしての存在感が出ることが挙げられている。

スマートフォンでもスムーズな動作、具体的には秒間60フレーム（60fps）を維持するための最適化は重要な課題だった。このために、「フレームタイムウォッチドッグ」と呼ばれる監視システムが導入されている。これは、もし描画に時間がかかりすぎてフレームレートが低下し始めた場合、自動的に描画品質を段階的に下げる仕組みだ。具体的なステップとしては、まずレンダリングの解像度を調整し、次に草の密度を55%まで減らす。それでもフレームレートが維持できなければ、影の描画をオフにし、最終的には草の密度を25%まで落とすといった具合だ。デスクトップ環境では、ピクセル比を1.5に制限することで、過剰な高解像度レンダリングによる負荷を防いでいる。また、庭園に同時にアクセスできる訪問者数を制限し、さらに3Dモデルのジオメトリ（形状データ）を訪問者間で共有することで、描画する必要のある三角形の数（ポリゴン数）を大幅に削減することに成功した。これにより、約240万個の三角形から約135万個にまで削減され、パフォーマンスの向上に大きく貢献している。

プライバシーへの配慮も、このサービスの重要な要素だ。各ペットの追悼ページは、ユーザーの希望に応じて「公開（誰でもアクセス可能）」「リンクを知っている人だけアクセス可能」「非公開（オーナーのみアクセス可能）」のいずれかの設定を選択できるようになっている。キャンドルの点灯や手紙の投稿には、ユーザーがアカウントを新しく作成する必要がないため、手軽に利用できる。もし秘密のリンクを紛失してしまった場合でも、登録されたメールアドレスを通じて復旧が可能だが、悪用を防ぐために1日あたり2回までという制限が設けられている。

このように、Bridgelightは、大切なペットを悼む心をサポートするためのサービスとして、最新のウェブ技術と3Dグラフィックスを駆使しつつ、パフォーマンス、リアリティ、そしてプライバシー保護のバランスを巧妙に取っている。特に、限られたリソースの中でリッチな3D体験をスマートフォンでも快適に提供するための工夫は、システムエンジニアを目指す上で非常に参考になるだろう。プログラムによる生成や動的な品質調整といった技術は、ユーザー体験を損なわずにサービスを提供する上で不可欠な要素と言える。