homunculus

東京・千駄ヶ谷のインタラクティブプロダクション homunculus（株式会社ホムンクルス）のコーポレートサイト。国内でWebGLをデザインの主軸に据えた例として、長く引き合いに出されてきたサイトです。 HTMLの <body> の冒頭に <!-- webGL --> のブロックがあり、<div id="gl-world"> と .gl-sand が置かれています。3Dのステージが埋め込みウィジェットではなく、ページの土台になっている構造です。現在のビルドでは howler.js による音声も統合されており、UI側から名前付きのボイス（_glMain._sound.startVoice(...)）を呼び、字幕のトグルまで用意されています。 【参考になるポイント】 ・main.js（約803KB）に gl_FragColor が34か所、ShaderMaterial が16か所。既製マテリアルではなく手書きシェーダで画面を作っている ・WebGLRenderer の参照が34ある。ひとつの巨大なシーンではなく、複数の独立した描画面をページに合成している可能性が高く、後述の Garden Eight や kirifuda とは逆の設計思想 ・音を装飾ではなくインタラクションのチャンネルとして扱い、字幕トグルまで用意している点は、WebGLサイトのアクセシビリティ設計として珍しい ・meta keywords に webGL, GLSL, VR, Flash と並ぶ。Flash時代からWebGLへ続く、この世代の日本のスタジオらしい系譜がそのまま出ている ・WebGL総本山でも過去2回取り上げられており、国内企業サイトの中でデザインとWebGLの融合度がトップクラスと評されている