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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会  つくったもの 

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会  8thwallとは 

Slide 7

Slide 7 text

🗾 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/

Slide 8

Slide 8 text

🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会  なぜBabylon.jsを採用したのか 

Slide 9

Slide 9 text

🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会  なぜBabylon.jsを採用したのか  いっぱい出現させたい

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会  なぜBabylon.jsを採用したのか  これだけ！！

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

🗾 Babylon.js 勉強会. #BabylonJS #BabylonJS勉強会  初Babylon.jsで苦労したこと  めちゃくちゃ助かりました🥺

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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