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

by you（@youtoy）

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

いきなりデモ動画 4連続

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

どんな技術を使ってる？

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

順番に説明

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

画像合成に関する話

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

イベントの告知

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

終わり！