iyO

スクリーンを持たない音声中心の「エージェンティック・コンピューター」を開発する iyO のサイト。トップのヒーローは動画や連番画像ではなく、リアルタイムレンダリングされた3Dデバイスです。 構成が実務的で参考になります。HTML側にあるのは空の <div data-module="webgl" data-gl="c" class="canvas-w scroller is--home"> だけで、3Dアプリ本体は別オリジン（iyo2.vercel.app/app.js）から読み込まれる。マーケティングCMSがコンテンツを、手書きのThree.jsバンドルがキャンバスを担当するという、本番でよく採られるパターンの見本です。 約984KBのバンドルには WebGLRenderer / GLTFLoader / DRACOLoader / KTX2Loader / EXRLoader / OrbitControls が揃っています。教科書どおりのモダンなローダー構成です。 【参考になるポイント】 ・ジオメトリはDraco圧縮、テクスチャはKTX2/Basis圧縮。おかげでモデル本体（yo.glb）は約2MBに収まっている ・反射はキューブマップでもライトマップでもなく、1枚の .exr 環境マップ（約1MB）だけで作っている ・AgX / ACESFilmic のトーンマッピングと MeshPhysicalMaterial の transmission を使い、筐体のガラス質な透過を物理ベースで表現している。プロダクトレンダー品質をリアルタイムのコストで出す小さなケーススタディ ・HTMLに localhost:6545/app.js の記述が残っており、3DアプリをCMSビルドから切り離す開発／本番の切り替えがそのまま見えてしまっている。参考にもなり、反面教師にもなる ・※実際の操作方法（ドラッグ回転かスクロール連動か）は静的HTMLからは確認できていない