Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
終わり!