凄まじい完成度のブラウン管モニターとレトロなゲーム画面が味わい深い Tamat's website がすごい！
MSX 風の独自 OS を操る趣向も面白い
今回ご紹介するのは、Tamat というハンドルネームで活動しているエンジニア、Javi Agenjo さんのウェブサイトです。
一般的なウェブ制作を中心に活動しているというわけではないので、フロントエンドのエンジニアとしては恐らく知っているひとは少ないかと思いますが、WebGL という文脈では結構な有名人です。
ブラウザ上で動作する多数のアプリケーションをこれまでに開発した経験を持ち、そのなかには当然のごとく WebGL を利用したものも含まれます。
WebGLStudio の作者さん、と言えばわかりますかね？ とにかくその実力は、成果物を見れば一目瞭然。今回のサイトも一見シンプルなように見えて、かなり奥深い見事な出来栄えになっています。
ブラウン管モニターのモアレも再現
今回のサイト、一見しただけではどうしても凄さが伝わりにくいのと、MSX や Basic と言った、比較的古いコンピューターの知識がないとよくわからないまま終わってしまうかもしれません。
私自身も、実はコンピューターやプログラミングに出会ったのは三十代も近くなってからのことだったので、あまり古いコンピューターやシステムには実は結構疎いんですよね……
たぶん、今回のサイトのテーマは MSX を模したものだと思うのですが、そのあたりちょっと確証がないです……
ただ、その凄さはそういった古いマシンの思い出がない方にも、すぐに伝わると思います。
ページがロードされた直後は、画面が点灯していないテレビのようなものが映し出されます。
右側あたりに貼り付けられているポストイットで示されているとおり、モニターの下の部分にスイッチがあるので、そこをクリックしてやると画面が点灯します。この点灯の際も、パッと画面に色が映るのではなく時間を掛けて徐々に色が乗ってきます。
もうこういうのは実際にこの世代のコンピューターに触れていないとわからないことだと思うのですが、それゆえに、知っているひとからすると思わずニヤリとしたくなるような部分がたくさんあるのではないでしょうか。
青い背景の画面には「TAMAT OS 64 BASIC V4」と書かれていて、Basic を模した独自のオリジナル表現になっているのかなと思います。
この青い画面が映っている状態では、なんと実際にキーの入力が可能で「option 5」のように、option に続けて数値を打ち込むことで異なる挙動を行わせることができます。
ちなみに option 5 を入力すると、その場でゲーム画面が再生されるんですが、これがまた面白いですね。
ゲームの画面は、ファミコンを想起させるものですが…… MSX のゲームなのかな……
ちょっと私には詳しいことはわからないのですが、音声と同時にゲーム画面が自動再生されるようになっています。こちらは操作することこそできないのですが、その見た目の再現度の高さには思わずびっくりさせられるのではないでしょうか。
とにかくブラウン管モニター特有のモアレや、画面の四隅が暗くなっている表現など、本当に再現度が高いです。
また、このモニターに付属しているいくつかのツマミは実際に操作することもでき、音量を変更したり、画面のアスペクト比を変えたりすることができます。
芸が細かい……
もともと技術力が高いエンジニアの方の作品ということもあり、その完成度の高さは折り紙付きという感じのある今回のサイト。
ウェブ制作が中心の方だと、こういう WebGL の使い方にあまり興味をそそられないかもしれませんね……
でも間違いなく、古くからコンピューターを触っている方であればあるほど、今回のサイトに漂う懐かしいレトロな雰囲気を楽しむことができるのではないでしょうか。
WebGL の技術的な意味では、このブラウン管モニター特有の質感の再現は実は簡単そうでけしてそんなことはないので、じっくりと観察しながら、自分だったらどのようなシェーダを記述するのか、想像してみるのは楽しいかもしれません。
画面に表示されている内容に応じて、照り返しのようなライティングが行われていたり、とにかく全体的にびっくりするほど手が込んでいます。
three.js 等を用いず、独自のスクラッチ WebGL 実装で作られている今回のサイト。非常に素晴らしいサイトになっています。
ぜひチェックしてみてください。
