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
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラ...
Search
you(@youtoy)
PRO
April 27, 2024
Technology
0
530
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you(@youtoy)
PRO
April 27, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
22
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
71
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
140
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.3k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
75
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.3k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
4.7k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
2.5k
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.6k
Other Decks in Technology
See All in Technology
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
250
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
320
kargoの魅力について伝える
magisystem0408
0
200
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
830
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
Wantedly での Datadog 活用事例
bgpat
1
400
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
150
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
520
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
BBQ
matthewcrist
85
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Building an army of robots
kneath
302
44k
Gamification - CAS2011
davidbonilla
80
5.1k
Producing Creativity
orderedlist
PRO
341
39k
Building Adaptive Systems
keathley
38
2.3k
Mobile First: as difficult as doing things right
swwweet
222
9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Six Lessons from altMBA
skipperchong
27
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Transcript
2024年4月28日 (日) Babylon.js 勉強会 vol.3 ~Babylon.js v7 リリース記念~ @ホロラボ 豊田陽介(
) @youtoy Babylon.jsと色々なものを組み合わせる: ブラウザのAPIやガジェットや2D描画ライブラリなど
自己紹介 豊田陽介( ) @youtoy ▶ IT系イベント主催、 登壇や運営なども ▶ 機械学習・IoT関連
の書籍を出版 ▶ 子ども向けの活動もいろいろ ⇒ 昨日は北海道の美唄で、技術系の 親子向け展示(そして今は札幌) プライベートでの活動 ▶ ガジェット ▶ 描画系/IoT/AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など
余談:美唄でのイベントでブラウザアプリを展示 来場した子ども達にワイワイ楽しんでもらえました! ⇒ Babylon.js でも、年齢問わず楽しめる体験型アプリを作りたい 音で小さなロボットを操る カメラ映像で光学迷彩・透明マント
自分が好きな方向性 ある技術と別のものとの 面白そうな組み合わせ 気軽に体験して/見て 楽しんでもらえる 年齢問わず体験が 分かりやすい
自分が好きな方向性 ある技術と別のものとの 面白そうな組み合わせ 気軽に体験して/見て 楽しんでもらえる 年齢問わず体験が 分かりやすい 例えば Web と、ガジェット、
IoT、AI・機械学習など 幅広く楽しんでもらえる + SNS で動画を投稿すると、 国内外からの反応もあったり (日本語での投稿でも) オフラインイベントでの展示や 展示イベント以外でも活用しやすい
Babylon.js関連の活動など
昨年はBabylon.js 6.0の紹介記事を書いたりも 月刊I/O という技術系の月刊誌で Babylon.js 6.0 の紹介記事を執筆
#BabylonJS勉強会でとりあげていただいた試作 デスクトップアプリ化やAI・機械学習との組み合わせ
Babylon.js+ブラウザ用のAI・機械学習の仕組み Googleさんの「MediaPipe」を組み合わせてみたもの
今日も 「Babylon.js」と「何か」 を組み合わせたという話
【ブラウザのAPI】 WebHID API + 【ガジェット】 Joy-Conのセンサー
Joy-Conのセンサーを入力として扱うために ボタン押下は Gamepad API でも OK センサーを使うなら WebHID API が必要
あと「Gamepad API」+ Babylon.js の場合 API のラッパーがある Babylon.jsでの「Gamepad API」利用であれば Babylon.js レシピ集
Vol.3 の第5章で紹介 されてる
【JavaScriptライブラリ】 描画ライブラリ「p5.js」
太陽を召喚できる気分になれるかも!? Babylon.jsの「パーティクルヘルパー」を試してた流れで
先ほどの例ならBabylon.jsだけでもできそう p5.js に Babylon.js の描画を 組み込めるかを試した ↓ 同じことを行うだけなら Babylon.js単体でも
【ガジェット】 曲げることができる フレキシブルディスプレイ
変わり種のディスプレイと組み合わせてみた 発色・描画の細かさを確認するコンテンツを Babylon.js で
他の変わり種のディスプレイも組み合わせてみたい 【余談】別のブラウザ用描画ライブラリ(p5.js)では試した 円系ディスプレイ、 細長ディスプレイ これらを 1つの PC で扱ってみた例
方向性としては 変わり種のディスプレイの 形状・サイズ・特性を 活かしたものを考えてみたい
組み合わせてないものは まだまだ他にたくさん! Babylon.js で面白いことを やっていきたい!
終わり!