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.5k
Edge on HoloLens2で軽率にWebXRするときが来た
WebXR Tech TokyoでLT登壇した時の資料です
にー兄さん
May 24, 2021
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
38
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.4k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
330
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
21
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
63
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
360
Snapdragon Spacesを通して Unity XRプラグインフレームワーク について軽率に学ぶ / about snapdragon spaces sdk and unity xr framework
drumath2237
0
340
Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about create babylon app CLI
drumath2237
0
510
軽率な執筆活動 / writing books roughly
drumath2237
0
32
Featured
See All Featured
Bash Introduction
62gerente
604
210k
Agile that works and the tools we love
rasmusluckow
325
20k
Rails Girls Zürich Keynote
gr2m
91
13k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Web Components: a chance to create the future
zenorocha
305
41k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Facilitating Awesome Meetings
lara
42
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
4 Signs Your Business is Dying
shpigford
175
21k
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