Meaningless - Aquarium Web App

概要

Meaninglessは、ブラウザ上で動作するリアルなアクアリウムシミュレーションWebアプリケーションです。Three.jsとGLSLシェーダーを活用し、魚の群れの動きや水面の表現、泡のパーティクルなど、視覚的に美しい体験を提供します。

主な特徴

技術的な実装

• Boidsアルゴリズム: 魚の群れの自然な動きを実現
• GLSLシェーダー: 物理的に正確な水面レンダリング
• パフォーマンス最適化: モバイルでも45+ FPSを実現
• レスポンシブ対応: PC/モバイル両対応（PC: 100匹、モバイル: 50匹の魚）

ユーザー体験

• 癒し効果: アクアリウムを眺めることでリラックス効果を提供
• アクセシビリティ: WCAG 2.3.3準拠、モーション削減オプション付き
• インタラクティブ: 魚が画面タップに反応する仕組み

技術スタック

• フロントエンド: TypeScript (93.1%)
• 3Dグラフィックス: Three.js
• シェーダー: GLSL (5.2%)
• スタイリング: TailwindCSS, DaisyUI
• ビルドツール: Vite

実装の詳細

このプロジェクトでは、WebGLとThree.jsを使用して高品質な3D表現を実現しています。特に、Boidsアルゴリズムによる魚の群れの動きは、分離・整列・結合の3つの基本ルールに基づいて実装されており、自然な群れの動きを再現しています。

また、GLSLシェーダーを使用した水面の表現では、光の屈折や反射を物理的に正確に計算し、リアルな水の表現を実現しています。パフォーマンス面でも最適化に注力し、モバイルデバイスでも滑らかな動作を実現しています。