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
Edge on HoloLens2で軽率にWebXRするときが来た
Search
にー兄さん
May 24, 2021
0
2.8k
Edge on HoloLens2で軽率にWebXRするときが来た
WebXR Tech TokyoでLT登壇した時の資料です
にー兄さん
May 24, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
30
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
130
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
27
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
50
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
40
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
30
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.8k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Speed Design
sergeychernyshev
32
1k
Agile that works and the tools we love
rasmusluckow
329
21k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
A designer walks into a library…
pauljervisheath
207
24k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
Edge on HoloLens2で 軽率にWebXRする時が来た WebXR Tech Tokyo #6 にー兄さん(@ninisan_drumath)
自己紹介 - にー兄さん(@ninisan_drumath) - 筑波大学 情報科学類 - 3DCGが好き UnityやWebGLで遊ぶのが好き
agenda - HoloLens OSのアプデがきた - WebAR on HoloLensをしてみる - おわりに
スライド資料・デモプロジェクト すべて公開しています👍 スライドのスクショ📸 SNS共有OKです(お願いします)
HoloLens OSアプデが来た
Windows Holographic(21H1)が登場 - 2021/5/11 - ホームメニューに再起動やシャットダウンの項目が追加 - 複数ユーザの切り替えが簡単に - キーボードのスワイプ入力
- Chromium-based Edgeの登場
新しいEdge - アイコンが変わる - 中身がChromium - イマーシブWebXRと 360°ビューのサポート
EdgeでWebXRの機能を有効にしよう 1. Edgeでedge://flagsにアクセスする 2. 「webxr」と検索バーに入力 3. 「WebXR Incubation」にチェックを入れる
WebAR on Hololensを実装する
開発環境など - Babylon.jsを使う - WebGLライブラリ - WebXR対応が簡単 - MicrosoftがWebXRするのに押していてイイ感じ -
Microsoft Mesh対応も待ちどおしい - Vite - Webフロントエンドのビルドシステム - 複雑な設定が要らず、融通が利くイメージ - ノーバンドルで開発時は爆速ビルド - loaderの設定なしでTypeScriptやPostCSSを導入できる - プロジェクトテンプレートが利用できる - 今回はvanilla-tsで作る
(注意)ローカル開発環境でデバッグするために - WebXR APIを使いたい - LANでもhttps接続が必須 - 方法は何でもよい - opensslコマンドで
オレオレ証明書作成 - Viteの場合vite.config.jsに設定 を追記 - Demoプロジェクトの READMEに書きました const config = defineConfig({ server: { https: { key: fs.readFileSync("./key.pem"), cert: fs.readFileSync("./cert.pem"), }, }, }); openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
Babylon.jsでWebARを使う const xr = await scene .createDefaultXRExperienceAsync({ uiOptions: { sessionMode:
"immersive-ar", referenceSpaceType: "unbounded", }, });
(余談)Reference Spaceについて さまざまなデバイスに対応するための概 念 unbounded:制限のない空間。原点から 離れて使われることを考慮 Babylon.jsではWebARの場合 unboundedじゃないと警告が出る MDN Web
Docsより
Holographic Buttonを使いたい・・・! 3D GUIにHolographic Buttonがある HoloLensで使いたい!(と前から思っていた) 見た目をMRTKに寄せてみるなど Babylon.js Documentsより MRTKのボタンに見た目を寄せ
てみたボタン
だが、、、動かん、、、 ボタンも出せる、手からコントローラの レイキャストもでる、交差判定もできて いる しかしクリックできない......
解決:Babylon.jsのバージョンを5.0.0にあげる 現在(2021/5/23)バージョンは4.2.0 明示的に yarn install @babylonjs/
[email protected]
と指定する Babylon.js Playgroundは普通に5.0.0 使ってるので注意
できた!
Edgeでハンドトラッキングを有効化 先ほどと同様の手順で実行 Edgeでedge://flagsにアクセス 検索バーでwebxrと検索 WebXR Hand Inputを有効にする
ハンドトラッキングを試す WebXRFeatureを有効にする xr.baseExperience.featuresManager.enableFeature( WebXRFeatureName.HAND_TRACKING, "latest", { xrInput: xr.input, jointMeshes: {
enablePhysics: true, }, } as IWebXRHandTrackingOptions );
できた!
最後にデプロイ - GitHub Pagesにデプロイ - gh-pages用のConfigを適用 - Viteだとurlの書き換えが起きるので 設定が必要 /*vite.config.ts*/
const config = defineConfig({ base: "/repository-name/", }); - httpsなのでWebXR APIも使えて 嬉しい。感謝。 name: github pages on: push: branches: - main jobs: deploy: runs-on: ubuntu-20.04 steps: - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v1 with: node-version: "14.x" - run: yarn --frozen-lockfile - run: yarn build:gh-pages - name: deploy gh-pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist
おわりに
まとめ - 新しいEdgeでWebXRをしよう! - Babylon.jsはバージョン5.0を使うとできる
参考: - What’s new in Windows Holographic, version 21H1 https://techcommunity.microsoft.com/t5/mixed-reality-blog/what-s-new-in-wind
ows-holographic-version-21h1/ba-p/2337067 - Babylon.js WebXR Augmented Reality Features https://doc.babylonjs.com/divingDeeper/webXR/webXRARFeatures - MDN WebXR の幾何学と参照空間 https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API/Geometry - demoプロジェクト https://github.com/drumath2237/babylon-webar-sandbox