Upgrade to Pro — share decks privately, control downloads, hide ads and more …

続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary

続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary

you(@youtoy)

October 23, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. 続・Webの技術でできる様々なこと
    〜ブラウザで機械学習やデバイス制御など〜
    2022年10月23日 (日)
    HTML5 8th Anniversary @オンライン
    豊田陽介( )
    @youtoy

    View Slide

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

    View Slide

  3. スライドは公開済みなので
    発表中は文字などの記載を
    追わなくても大丈夫です

    View Slide

  4. 今回の主な内容は

    View Slide

  5. 昨年の話の一部を深掘り+α
    昨年の話に出していた内容のキーワード
    画像の機械学習 音の機械学習
    VTuber的なこと
    物理演算エンジン
    WebXR IoT系
    ガジェット系
    昨年の資料の URL

    View Slide

  6. 昨年の内容は
    聞いてなくてもOKです

    View Slide

  7. 先日のイベントの内容と一部は重複
    重複してない部分をいろいろ盛り込みつつ
    その時の資料

    View Slide

  8. ライブデモ多めで
    紹介していきます

    View Slide

  9. 本編へ

    View Slide

  10. 学習済み機械学習モデル
    を使った画像認識

    描画ライブラリ

    View Slide

  11. いきなりですが
    デモをご覧ください

    View Slide

  12. ライブデモ!
    機械学習による手の認識 + パーティクルの描画

    View Slide

  13. 【動画】ブラウザで手・指の位置検出+p5.jsによる描画
    両手の指先に炎が
    灯っていく

    View Slide

  14. 【動画】ブラウザで手・指の位置検出+p5.jsによる描画
    光学迷彩・透明マント
    のような表現
    その2

    View Slide

  15. 「MediaPipe」のJavaScript版のHands
    MediaPipe Hands
    画像から手のキーポイント
    の位置(複数)を認識
    ※ 指を立てたかどうかの判定は
      位置座標などから自前で計算

    View Slide

  16. TensorFlow.jsベースのため
    ブラウザ上で動作

    View Slide

  17. カメラ付きPCがあれば
    手軽にデモを作れる/試せる

    View Slide

  18. 手軽に試せる
    JavaScript版の
    公式デモも紹介

    View Slide

  19. ここから試せます!
    Hands

    View Slide

  20. ライブで
    オプションの一部も
    説明などしつつ

    View Slide

  21. 【ライブデモ】MediaPipe Hands
    https://mediapipe.dev/demo/hands

    View Slide

  22. 実際に試していきます
    https://google.github.io/mediapipe/getting_started/javascript

    View Slide

  23. MediaPipe JavaScript版で扱えるもの
    手を対象としたもの以外の一部を紹介
    MediaPipe Face Mesh MediaPipe Holistic

    View Slide

  24. ここから試せます!
    https://google.github.io/mediapipe/getting_started/javascript
    Face Mesh
    Holistic

    View Slide

  25. 【ライブデモ】
    https://mediapipe.dev/demo/face_mesh
    https://mediapipe.dev/demo/holistic

    View Slide

  26. また先ほどのページへ
    https://google.github.io/mediapipe/getting_started/javascript

    View Slide

  27. 自分が作ったもののデモ!
    MediaPipe Holistic による顔・上半身の認識

    View Slide

  28. 【動画】顔のキーポイント検出・姿勢推定とアニメーション
    目・口・体の動きと
    ネコ画像が連動

    View Slide

  29. 描画周りも説明してみる

    View Slide

  30. デモしたものの描画部分:p5.js
    メディアアート系などで有名な Processing の JavaScript版
    ●home | p5.js
     https://p5js.org/

    View Slide

  31. ●p5.js Web Editor
     https://editor.p5js.org/
    ●OpenProcessing
     https://openprocessing.org/
    オンラインで開発
    できる環境も

    View Slide

  32. 炎のような
    見た目を作った部分

    View Slide

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

    View Slide

  34. 公式デモを
    ライブで試す

    View Slide

  35. p5.js公式:パーティクル・システム
    https://p5js.org/examples/simulate-particle-system.htm

    View Slide

  36. 円が吹き出す仕組みに手を加えると...
    透明度付き
    PNG画像に
    置きかえ 煙が
    吹き出す
    色の
    加算処理
    (合成)
    炎の
    ゆらめき?
    円が出てくる
    (基本のサンプル
     でよくある)

    View Slide

  37. 煙のほう

    View Slide

  38. シンプルな図形のパーティクルを画像に
    アルファチャネル付
    の PNG画像を利用

    View Slide

  39. 炎のような見た目

    View Slide

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

    View Slide

  41. 炎の見た目単体を取り出すと
    マウスカーソルに追従させる仕組みでお試し

    View Slide

  42. 画像からの機械学習と
    描画ライブラリは
    セットで活用しやすい

    View Slide

  43. デバイスを
    連携させる話へ

    View Slide

  44. JavaScriptで外部デバイスとの通信
    ブラウザ上で実行 Node.js
     ・Web Serial
     ・Web Bluetooth
     ・Fetch API
     ・axios等を利用
     ・WebSocket API
     ・MQTT.js等を利用
     ・Node Serialport
     ・noble・bleno
     ・Fetch API
     ・axios等を利用
     ・ws等を利用
     ・MQTT.js等を利用
    シリアル通信
     
    BLE
     
    HTTPリクエスト
     
    WebSocket
     
    MQTT

    View Slide

  45. 有線・無線での通信

    View Slide

  46. プロトタイピングに使った事例
    (【コンセプト】遠隔にいるネコ同士が
     コミュニケーション)

    View Slide

  47. ハッカソンで利用してみた事例の話
    ネコのしっぽ
    っぽくした
    ジョイスティック
    (M5Stack +
      シリアル通信)
    ロボットトイ
    (toio + BLE での通信)
    ネコのしっぽ
    をサーボモーター
    で動かす仕組み
    (micro:bit +
      シリアル通信)

    View Slide

  48. 2022年9月のハッカソンでチーム開発
    シリアル通信と BLE
    をそれぞれ利用

    View Slide

  49. システム構成(機器と通信方法)
    PC
    (Chromo)
    toio
    BLE
    HTML +
    JavaScript
    M5Stack Core2

    ジョイスティック
    micro:bit + サーボモーター
    シリアル
    通信
    シリアル
    通信

    View Slide

  50. ブラウザ(Chrome系)があれば
    デバイスをいっぺんに扱える

    View Slide

  51. 有線でのシリアル通信

    View Slide

  52. シリアル通信(Web Serial API)
    手っ取り早く試すなら

    View Slide

  53. こちらのページが便利
    https://googlechromelabs.github.io/serial-terminal/

    View Slide

  54. Bluetoothによる無線通信

    View Slide

  55. Web Bluetooth API での 3つの処理
    ・Read、Write、Notification
    Read Write Notification
    センサーの値を任意の
    タイミングで読み取る
    LED・モーターなどの
    制御情報を送る
    デバイスから通知される
    値を読み取る
    定期的な送信や状態変化
    の際に送信される等
    ●Web Bluetooth
     https://webbluetoothcg.github.io/web-bluetooth/
    ●DataView - JavaScript | MDN 
    https://developer.mozilla.org/ja
    /docs/Web/JavaScript/Referenc
    e/Global_Objects/DataView
    ●BufferSource - Web API | MDN  
    https://developer.mozilla.org/ja/docs/We
    b/API/BufferSource

    View Slide

  56. Webの技術を使って
    ブラウザ上で様々な仕組みを
    実装して楽しめます!

    View Slide

  57. イベントの告知

    View Slide

  58. 「ガジェット」に興味がある方へ!
    「ガジェット・enebular」に興味がある方
    へ!
    https://enebular.connpass.com/event/250779/
    10/27(木)
    オンライン開催
    enebular developersコラボのイベント

    View Slide

  59. 終わり!

    View Slide