Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザ上でファンタジー・SF的な映像表現に挑んでみる / エンジニアの自由研究発表会vol.7
Search
you(@youtoy)
PRO
September 01, 2022
Technology
0
420
ブラウザ上でファンタジー・SF的な映像表現に挑んでみる / エンジニアの自由研究発表会vol.7
you(@youtoy)
PRO
September 01, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
35
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
84
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
97
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
610
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
150
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
100
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.1k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
680
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
320
IAMのマニアックな話2025
nrinetcom
PRO
3
310
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
150
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
分解して理解する Aspire
nenonaninu
2
1.1k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.6k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Documentation Writing (for coders)
carmenintech
67
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
140
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Side Projects
sachag
452
42k
Writing Fast Ruby
sferik
628
61k
Code Reviewing Like a Champion
maltzj
521
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Transcript
ブラウザ上でファンタジー・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(木) オンライン開催 「ガジェット」に興味がある方へ!
終わり!