Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Edge on HoloLens2で軽率にWebXRするときが来た

Avatar for にー兄さん にー兄さん
May 24, 2021
2.8k

Edge on HoloLens2で軽率にWebXRするときが来た

WebXR Tech TokyoでLT登壇した時の資料です

Avatar for にー兄さん

にー兄さん

May 24, 2021
Tweet

More Decks by にー兄さん

Transcript

  1. 開発環境など - Babylon.jsを使う - WebGLライブラリ - WebXR対応が簡単 - MicrosoftがWebXRするのに押していてイイ感じ -

    Microsoft Mesh対応も待ちどおしい - Vite - Webフロントエンドのビルドシステム - 複雑な設定が要らず、融通が利くイメージ - ノーバンドルで開発時は爆速ビルド - loaderの設定なしでTypeScriptやPostCSSを導入できる - プロジェクトテンプレートが利用できる - 今回はvanilla-tsで作る
  2. (注意)ローカル開発環境でデバッグするために - 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
  3. 最後にデプロイ - 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
  4. 参考: - 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