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 にー兄さん
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
47
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
32
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
160
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
32
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
58
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
47
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
40
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Navigating Team Friction
lara
187
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Music & Morning Musume
bryan
46
6.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Done Done
chrislema
184
16k
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