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
490
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)
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
56
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
120
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
270
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
64
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
230
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
450
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.5k
Other Decks in Technology
See All in Technology
組み込みLinuxの時系列
puhitaku
4
1.1k
AGIについてChatGPTに聞いてみた
blueb
0
100
信頼性に挑む中で拡張できる・得られる1人のスキルセットとは?
ken5scal
2
460
Going down the RAT hole: Deep dive into the Vuln-derland of APT-class RAT Tools
nttcom
0
320
Team Dynamicsを目指すウイングアーク1stのQAチーム
sadonosake
1
290
形式手法の 10 メートル手前 #kernelvm / Kernel VM Study Hokuriku Part 7
ytaka23
5
820
인디 앱 개발자와 Flutter
tinyjin
0
150
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
マイベストのデータ基盤の現在と未来 / mybest-data-infra-asis-tobe
mybestinc
2
2k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
QAEチームが辿った3年 ボクらが改善業務にスクラムを選んだワケ / 20241108_cloudsign_ques23
bengo4com
0
1.3k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
150
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
570
Why Our Code Smells
bkeepers
PRO
334
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Bash Introduction
62gerente
608
210k
Measuring & Analyzing Core Web Vitals
bluesmoon
3
78
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
43
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.8k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Invisible Side of Design
smashingmag
297
50k
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 で面白いことを やっていきたい!
終わり!