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.6k
Edge on HoloLens2で軽率にWebXRするときが来た
WebXR Tech TokyoでLT登壇した時の資料です
にー兄さん
May 24, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
0
30
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
14
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
100
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
120
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.6k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
510
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
60
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
120
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
490
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Become a Pro
speakerdeck
PRO
15
4.8k
Agile that works and the tools we love
rasmusluckow
325
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Web development in the modern age
philhawksworth
203
10k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
How STYLIGHT went responsive
nonsquared
93
5k
Design by the Numbers
sachag
277
18k
What's new in Ruby 2.0
geeforr
338
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
The Cult of Friendly URLs
andyhume
75
5.9k
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