Babylon.js x 8thwallでWebARやってみた

2023/4/1: 「Babylon.js 勉強会 vol.2 ~Babylon.js v6 リリース記念~」
https://babylonjs.connpass.com/event/276698/

AR: https://twitter.com/d_crafttokyo/status/1609449146225946626
instanced skinning: https://spector.babylonjs.com/demos/instancedbones/

Transcript

1. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 Babylon.js x 8thwallで WebARやってみた
 2023/04/01
 Dentsu Craft Tokyo
 Yuki Tanabe

2. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 自己紹介
 - Dentsu Craft Tokyo
 - フロントエンドエンジニア
 - three.jsをよく使います
 - Webサイト / WebAR
 - Twitter: @tanabee_8
 - WebGLゆる勉強会というのをやってい ます..
 - 北海道出身 / 乃木坂46が好きです。

3. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 話すこと！
 1. こんなの作りました 2. 8thwallとは 3. なぜBabylon.jsを採用したのか 4. 初Babylon.jsで苦労したこと
4. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 つくったもの

5. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 つくったもの
 - セイコーグループの元旦新聞広告 - 日経/読売/朝日の三紙掲載 - 新聞ARで初めてBabylon.jsが使われた 事例...！！？？（わかりません） - ※現在は公開終了しています。
6. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 8thwallとは

7. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 8thwallとは
 - アプリ不要でWebベースのARコンテンツが 制作できるプラットフォーム
 - World Tracking, Image Target, VPS, Sky Effect, Face Trackingなど高度な機能をブ ラウザで実装可能
 
 https://www.8thwall.com/ 引用元: https://www.8thwall.com/8thwall/
8. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 なぜBabylon.jsを採用したのか

9. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 なぜBabylon.jsを採用したのか
 いっぱい出現 させたい
10. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 なぜBabylon.jsを採用したのか
 - スキニング処理をしているモデル のインスタンシング = Instanced Skinning
 - three.jsにサポートなし...
 - Babylon.jsにサポートあり！
 - しかもモバイルでも60fpsだっ た..！
 https://spector.babylonjs.com/demos/instancedbones/

11. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 なぜBabylon.jsを採用したのか
 - three.jsにPRはあるが、マー ジはされていない
 - モバイルで60fpsは出なかっ た...
 https://github.com/mrdoob/three.js/pull/22667

12. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 なぜBabylon.jsを採用したのか
 これだけ！！
13. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 初Babylon.jsで苦労したこと

14. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 初Babylon.jsで苦労したこと
 - 世の中に記事が少ない...
 - 8thwallにもサンプル少ない
 - 上がthree.js、下がBabylon.js

15. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 初Babylon.jsで苦労したこと

16. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 初Babylon.jsで苦労したこと
 めちゃくちゃ 助かりました🥺
17. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 まとめ
 - three.jsではできないけどBabylon.jsで出来ること もある（逆もあるか。。）
 - three.jsより普及してないのは、単純に世の中に 流通する情報が少ないのもあるかも？
 - 積極的に情報発信していきたい

18. 🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会
 フロントエンドエンジニア募集中です！