iframe を利用して古の windows デスクトップ風のテイストを再現! Henry Heffernan さんのポートフォリオ
その自然な体験は驚きの連続
今回ご紹介するのは、Henry Heffernan さんのポートフォリオサイトです。
正直これを初めて目にしたときは本当に驚きました。windows のこれは 95 とかですかね? 昔の windows のインターフェースが見事に再現された凄まじい完成度の WebGL 実装となっています。
3D 的にも見どころが多いですし、単純にウェブの実装としても、おもしろい点がたくさんあります。
リンク:
Henry Heffernan - Portfolio 2022
遊び心満点のウェブサイト
今回のサイトでは、基本的にシーンは 3D で描かれます。
白い背景のなかに、テーブルとデスクトップ PC など一式が置かれている場面がまず出てきます。
カーソルを動かすなどのユーザーの操作に応じて、動的にカメラの位置が変化して、適宜、PC のデスクトップが画面いっぱいに広がるような感じで状況が変化します。
さて、この上の画面を見ると、全体としては WebGL で描かれた 3D シーンなのに、シーン内の PC の画面にはまるで本当にウェブブラウザでページを開いているかのような画面が描かれています。
リンクをクリックしたり、一度訪れたページのリンクの文字色が変わったり、かなり本物のウェブブラウザっぽい挙動をしていることが実際に触ってみるとわかってきます。
実はこれ、デスクトップに見えている部分は iframe になっていて、実際に HTML が描画されている形になっています。
なのでかなり自然なクリックやリンクによるページ遷移ができるわけですね。
iframe が埋め込まれた形になっているとは言っても、上の階層(親プロセス)側は 3D シーンを含む描画が WebGL によって行われている形なので、本当にリッチで複雑な実装だと思います。
iframe を CSS で 3D 的に変形させつつ、WebGL の世界と完璧に連動させていて、ノスタルジックな雰囲気も相まって完全にエモい世界観になっています。
ブラウン管モニターのジリジリとした微妙なノイズ感が再現されていたり、よーく観察するとモニターの表面に指紋の跡が付いてしまっていたり、本当に芸が細かいです。
なお、仮想のデスクトップ上にあるアイコンをダブルクリックすると、ゲームの起動画面が出てきたりもします。
わたしは今でこそ PC を使った仕事をしていますが、実はパソコンなどに触れたのがかなり遅かったので、windows95 とかはほとんど使ったことがありません。
そういう意味では、仮想のデスクトップがどれくらい再現度が高いのかまでは判断難しいのですが、起動音やデスクトップの雰囲気、スタートボタンやウィンドウといったインターフェースデザインなど、懐かしさを感じる方もきっと多いのではないでしょうか。
CSS の transform 3D を駆使しつつ、Blender で作ったと思われる個性的な 3D 空間を WebGL で描画し、さらに iframe 内に描かれる windows 風の OS 実装表現も見事です。
ぜひチェックしてみてください。