homunculus
東京のインタラクティブ制作会社。WebGLを装飾ではなくデザインの主媒体として使い続けている、国内の代表例のひとつ。
- サイトURL
- https://homunculus.jp/
- クレジット
- homunculus Inc.（株式会社ホムンクルス）
- 使用技術
- WebGLThree.jsGLSLhowler.js
東京・千駄ヶ谷のインタラクティブプロダクション 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の融合度がトップクラスと評されている