ブラウザ上でファンタジー・SF的な映像表現に挑んでみる / エンジニアの自由研究発表会vol.7

ブラウザ上でファンタジー・SF的な映像表現に挑んでみる 2022年9月1日 (木) エンジニアの自由研究発表会vol.7 @オンライン豊田陽介（） @youtoy

自己紹介豊田陽介（） @youtoy ・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ・ Microsoft MVP（2021/10 から）
プライベートでの活動・ガジェット大好き・今年、本を2冊出しました好きなことなど 3月発売（共著） 7月発売（単著）

何をやったか？ブラウザ上（JavaScript）の処理で SF的な映像表現

いきなりデモ動画 4連続

試作したもの：カメラ映像を使ったもの光学迷彩・透明マント的な表現

試作したもの：カメラ映像を使ったもの指先に炎が順番に灯っていく

試作したもの：カメラ映像を使ったもの透明マント・光学迷彩のような表現指先に炎などがともる

試作したもの：カメラ映像を使ったもの手から出現した円が溶けて流れる

試作したもの：カメラ映像を使ったもの画面が燃える、手から稲妻が発生

試作したもの：カメラ映像を使ったもの画面が燃える、手から稲妻が発生手から発生した丸が液体状に溶けて流れる

動画のURL（QRコード）透明マント指先から炎溶けて流れる画面に炎・稲妻

どんな技術を使ってる？

処理のおおまかな流れ透明マント指先から炎溶けて流れる画面に炎・稲妻キー押下に反応エフェクト用動画を画像合成手の位置・
状態を認識大量の円を描画、物理演算とフィルタ処理指の位置・状態を認識パーティクルを指先から発生、画像合成両手を認識背景取得映像の一部を背景画像に

順番に説明

機械学習による画像認識（手の認識）利用した仕組みとの対応関係 Google の MediaPipe Hands Handtrack.js

画像認識で使った情報 MediaPipe Hands Handtrack.js 手のキーポイントの位置（複数） ※ 指を立てたかどうかの判定は　位置座標などから自前で計算
手の位置と状態（手を開いているかどうか）

描画まわりの概要：「p5.js」での特徴的な処理パーティクルシステム画像・描画合成指先ごとにパーティクルを発生させている ※ さらに以下の合成処理も単純な重畳ではない合成処理（Photoshop
などにもある仕組み）

パーティクル・システムとは？ゲーム物理、モーショングラフィックス、コンピュータグラフィックなどで使われる技術のひとつで、たくさんの細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象をシミュレートするもの出典： Wikipedia「パーティクル・システム」より

円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に置きかえ煙が吹き出す色の加算処理（合成）炎の
ゆらめき？円が出てくる

画像合成に関する話

単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる重ねた色は明るくなるが ADD より少し弱め単純な
重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」　という API による

合成処理を使うと指先から炎画面に炎・稲妻自前で炎っぽいものを描画できる映像編集用に使われるエフェクト用動画を、カメラ映像が見える状態で重畳できる

残りの部分溶けて流れる手の位置・状態を認識大量の円を描画、物理演算とフィルタ処理

描画・動き関連の2つの仕組み物理演算フィルタ物理演算エンジンの「Matter.js」 ※ 円同士・円と床の衝突や　重力などの計算溶けるような見た目は
SVGフィルタの複合 ※ ぼかし（feGaussianBlur）、　色の処理（feColorMatrix）　などの複合

イベントの告知

【約1ヶ月後】IoTLT のスピンオフ！ https://iotlt.connpass.com/event/256929/ 9/13（火）オンライン開催

【10月下旬】enebular developersコラボ https://enebular.connpass.com/event/250779/ 10/27（木）オンライン開催「ガジェット」に興味がある方へ！

終わり！

ブラウザ上でファンタジー・SF的な映像表現に挑んでみる / エンジニアの自由研究発表会vol.7

ブラウザ上でファンタジー・SF的な映像表現に挑んでみる / エンジニアの自由研究発表会vol.7

you（@youtoy）
PRO

More Decks by you（@youtoy）

Other Decks in Technology

Featured

Transcript

ブラウザ上でファンタジー・SF的な映像表現に挑んでみる 2022年9月1日 (木) エンジニアの自由研究発表会vol.7 @オンライン豊田陽介（） @youtoy

自己紹介豊田陽介（） @youtoy ・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ・ Microsoft MVP（2021/10 から）

何をやったか？ブラウザ上（JavaScript）の処理で SF的な映像表現

いきなりデモ動画 4連続

試作したもの：カメラ映像を使ったもの光学迷彩・透明マント的な表現

試作したもの：カメラ映像を使ったもの指先に炎が順番に灯っていく

試作したもの：カメラ映像を使ったもの透明マント・光学迷彩のような表現指先に炎などがともる

試作したもの：カメラ映像を使ったもの手から出現した円が溶けて流れる

試作したもの：カメラ映像を使ったもの画面が燃える、手から稲妻が発生

試作したもの：カメラ映像を使ったもの画面が燃える、手から稲妻が発生手から発生した丸が液体状に溶けて流れる

動画のURL（QRコード）透明マント指先から炎溶けて流れる画面に炎・稲妻

どんな技術を使ってる？

処理のおおまかな流れ透明マント指先から炎溶けて流れる画面に炎・稲妻キー押下に反応エフェクト用動画を画像合成手の位置・

順番に説明

機械学習による画像認識（手の認識）利用した仕組みとの対応関係 Google の MediaPipe Hands Handtrack.js

画像認識で使った情報 MediaPipe Hands Handtrack.js 手のキーポイントの位置（複数） ※ 指を立てたかどうかの判定は　位置座標などから自前で計算

描画まわりの概要：「p5.js」での特徴的な処理パーティクルシステム画像・描画合成指先ごとにパーティクルを発生させている ※ さらに以下の合成処理も単純な重畳ではない合成処理（Photoshop

円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に置きかえ煙が吹き出す色の加算処理（合成）炎の

画像合成に関する話

単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる重ねた色は明るくなるが ADD より少し弱め単純な

合成処理を使うと指先から炎画面に炎・稲妻自前で炎っぽいものを描画できる映像編集用に使われるエフェクト用動画を、カメラ映像が見える状態で重畳できる

残りの部分溶けて流れる手の位置・状態を認識大量の円を描画、物理演算とフィルタ処理

描画・動き関連の2つの仕組み物理演算フィルタ物理演算エンジンの「Matter.js」 ※ 円同士・円と床の衝突や　重力などの計算溶けるような見た目は

イベントの告知

【約1ヶ月後】IoTLT のスピンオフ！ https://iotlt.connpass.com/event/256929/ 9/13（火）オンライン開催

【10月下旬】enebular developersコラボ https://enebular.connpass.com/event/250779/ 10/27（木）オンライン開催「ガジェット」に興味がある方へ！

終わり！