ウェブカメラの映像から人間の顔をリアルタイム検出! 幻想的な雰囲気で描画する不思議なポートフォリオ

doxas : 2024-07-22 12:12:39

どういう背景で作られたものなのか……

今回ご紹介するのは、一風変わったポートフォリオサイトです。

一応、サイト上には joe's portfolio と書かれているのでポートフォリオサイトだとは思うのですが、事例の紹介などされておらず、かろうじて、メールアドレスのリンクが置かれている程度です。

ただ、技術デモとしてはすごく興味深い作りになっていて、ウェブカメラを有効にすることでおもしろい WebGL 実装を見ることができます。

リンク:

joeat.xyz

ウェブカメラを上手に活用

今回のサイトでは、正直な話ウェブカメラを有効にしないとその楽しさを存分に味わうことはできません。

ウェブカメラを利用する用途は、その映像から顔を検出することです。

検出した人物の表情がそのまま 3D 空間にマッピングされるような技術デモ的な内容になっています。

ちなみにカメラを有効にする前の状態でも、なかなかきれいな 3D シーンが描画された状態になっています。

この黒い背景に浮かぶ水のかたまりみたいな部分には、初期状態でも人間の顔が浮かんでいる様子が映っています。

ただ、ウェブカメラを有効化したあとでは、この水のかたまりのなかの顔の部分がユーザーの顔に置き換わるような仕組みですね。

ウェブカメラを有効化して顔が検出できる状態になると、水のかたまりが一気に画面全体に広がるようなエフェクトがあるのですが、これがすごく迫力があって綺麗です。

水が画面全体に広がったあとは、まるで海のなかを見ているかのようなシーンに切り替わります。

この水中シーンでは、多くの登場人物が追加されます。

まるでクラゲのような動きをするオブジェクトや、くねくねと動く謎の糸状生命体、さらには多数のパーティクルなど一気に世界が賑やかになります。

その中央に浮かぶユーザーの顔…… だいぶシュール笑

ポートフォリオサイトでこういう建付けになっているものって、記憶をたどってみてもあまり思い浮かびません。

すごく工夫が凝らされた、おもしろい試みだと思います。

内容はすごく技術的にもおもしろいのですが、ポートフォリオサイトとしてはあまり情報がないので、もしかしたら学生さんとか、これからウェブで仕事をしていきたいという感じのステータスなのかもしれないですね。

ぜひチェックしてみてください。

リンク:

joeat.xyz

share

follow us in feedly

search

search

monthly

sponsor

social