デザイン系チュートリアルサイトのCodropsに、印象的なWebGL作品「The Sleepers」の制作手法を解説した記事が掲載された。作者はティボー・フサール。Bruno SimonによるThree.jsチャレンジへの応募作で、「最も複雑な技術ではなく、最もシンプルな解法で最大の視覚的インパクトを狙う」という思想が全体を貫いている。
まず紹介されるのは、画面全体を彩る「渦を巻くようなトランジション」だ。白黒のテクスチャをポストプロセスシェーダーの入力値として使い、グレースケールからフルカラーへと段階的に情景を立ち上げていく。テクスチャの赤チャンネルをピクセルごとのしきい値として扱うことで、画面の各領域が異なるタイミングで姿を現す仕組みである。
続く「フォグ（霧）」の表現も巧みだ。ボリューメトリックな計算を避け、シェーダー の改変でマテリアルに霧を重ねる。垂直方向の線形なフォグと、シームレスなノイズテクスチャによるアニメーションを二段階で組み合わせ、ワールド座標とカメラからの距離で制御することで、軽い処理のまま奥行きを生み出している。
輪郭線には、Blenderの「バックフェイスアウトライン」という手法を採用する。黒いマテリアルにSolidifyモディファイアで負の厚みを与え、モディファイアを適用した状態でglTFとして書き出す。さらに、カメラ周囲に3×3のチャンクを敷き、移動に合わせてタイルを再配置し続けることで、メモリを節約しながら無限に広がる街並みを実現している。
派手なライブラリや重厚なシミュレーションに頼らず、シェーダーとモデリングの工夫だけで没入感のある世界を組み立てる——この記事は、表現力とパフォーマンスの両立に悩むデザイナーやフロントエンド実装者にとって、発想の引き出しを増やす実践的な教材だといえる。
出典: The Sleepers: Creating an Atmospheric WebGL Experience with Lightweight Techniques
