More Related Content
HoloLens2とMeta QuestではじめるWebXR A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応) はじめようARCore：自己位置推定・平面検出・FaceTracking A-Frameで始めるOculus Quest対応WebVR AI x WebAR: MediaPipeのハンドトラッキングを使ってみよう What's hot (20)
【Unity】 Behavior TreeでAIを作る AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説！ [Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ はじめようARCore: Motion Tracking & Image Tracking編 【準備編！】HoloLens 2/Oculus Quest対応WebXRハンズオン Immersal を活用した AR クラウドなシステム開発とハンズオン！ Unreal Engine を用いた、駐車スペース検知のための学習データ生成 【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング ARマーカーを利用したHoloLens同士の位置合わせ UE4を使った映像制作 (UE4 Character Art Dive Online) 猫でも分かるUE4のポストプロセスを使った演出・絵作り 【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』 OpenCV/ARCore/Unityで作る塗り絵AR Similar to 【準備編】OculusQuest/HoloLens2対応WebXR開発 (20)
Fukuoka LT 2019: AR Fukuoka [Netlify版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ OpenXR + XR Interaction Toolkit使ったHoloLensコンテンツ開発検証 ～ (私が)完全に理解できたらちゃんと作れて、いろ... Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR HoloLens/Windows Mixed Reality Device開発環境構築(2018/5版) Oculus 体験・勉強会「VRコンテンツ制作入門」 2015/05/13 WebXR TechTokyo #3 in Cluster発表資料 OSC2020 Fukuoka: インストールいらず、WebAR入門 2018/01/17 第3回 HoloLens 参考書読み会発表資料 エンジニアカフェ1周年イベント：WebAR/VR開発入門 OsakaArchVisCamp#1 - UE4 on OculusQuest HoloLens/Windows Mixed Reality開発環境構築 FUKUOKA Engineers Day 2021 発表資料：AR Fukuoka & HoloBox紹介 Oculus Interaction SDK でグラブまわりの設定方法 Adobe XDをHoloLensで表示させて考えるいろいろな可能性 More from Takashi Yoshinaga (13)
ARコンテンツ作成勉強会( #AR_Fukuoka )紹介 iPad LiDARで エンジニアカフェを3Dスキャン Holo-SDKハンズオン：はじめようヘッドトラッキングを用いた3D表現 Voxon Photonics VX1 で遊んでみた iPad LiDARで作ってみた in AR Fukuoka 忘年会2020 MRTKで始めるAR開発 (HoloLens 1 and 2, ARCore, ARkit) AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ Spatial Copy & Paste @HoloLensゆるっとLT会 AI x WebAR! MediaPipeの顔認識を使ってみよう! ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK 【準備編】OculusQuest/HoloLens2対応WebXR開発
- 22. 必要なもの
Webブラウザ → コンテンツの体験や動作確認
テキストエディタ → HTMLやjavascriptの記述
Webサーバー → コンテンツの公開
サーバーに関して今回は・・・
Glitchを利用 https://glitch.com/
FacebookかGitHubのアカウントがあればOK
サーバーとエディタの両方を無料で提供
この資料ではGlitch使用を前提に説明します
- 28. ソースの確認
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js">
</script>
</head>
<body>
<a-scene>
表示するオブジェクトや背景の設定をここに記述
</a-scene>
</body>
</html>
ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
<a-scene>と</a-scene>の間に描画に関する記述をする
- 29. ソースの確認
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E">
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5"
color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0"
width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
基本図形はa-xxxタグで提供されている
https://aframe.io/docs/1.2.0/primi
tives/a-box.html (例：a-boxの詳細)
位置 回転 色
- 36. [編集例]
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 45" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#00FFFF">
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="0.2"
color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0"
width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
HTML編集に慣れよう
角度
高さ
HoloLensでは削除
色
- 43. 手のオブジェクトを表示
<a-scene>
<a-box position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0"
color="#4CC3D9" shadow></a-box>
<!--左手の描画-->
<a-entity id="leftHand"
hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity>
<!--右手の描画-->
<a-entity id="rightHand"
hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity>
</a-scene>
【hand-tracking-controlsの詳細]】
hand: left または right
modelStyle: mesh または dots
(meshはうまく働かず)
modelColor: 手のモデルの色
(今回はデフォルト色) Lesson02
![まずは体験
基本サンプル Hello WebVRをクリック
画面をクリック
回転：マウスでドラッグ
左右：[A][D]キー
前後：[W][S]キー
※前後左右は自分がどちらに動くかで考える](https://image.slidesharecdn.com/yoshinaga-pre-211117123240/85/OculusQuest-HoloLens2-WebXR-19-320.jpg)
![[編集例]
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 45" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#00FFFF">
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="0.2"
color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0"
width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
HTML編集に慣れよう
角度
高さ
HoloLensでは削除
色](https://image.slidesharecdn.com/yoshinaga-pre-211117123240/85/OculusQuest-HoloLens2-WebXR-36-320.jpg)
![URLの確認
プレビュー画面の上方にある[Change URL]からURLを確認
Change URL
これがURL
※実機での動作確認に使用](https://image.slidesharecdn.com/yoshinaga-pre-211117123240/85/OculusQuest-HoloLens2-WebXR-40-320.jpg)
![手のオブジェクトを表示
<a-scene>
<a-box position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0"
color="#4CC3D9" shadow></a-box>
<!--左手の描画-->
<a-entity id="leftHand"
hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity>
<!--右手の描画-->
<a-entity id="rightHand"
hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity>
</a-scene>
【hand-tracking-controlsの詳細]】
hand: left または right
modelStyle: mesh または dots
(meshはうまく働かず)
modelColor: 手のモデルの色
(今回はデフォルト色) Lesson02](https://image.slidesharecdn.com/yoshinaga-pre-211117123240/85/OculusQuest-HoloLens2-WebXR-43-320.jpg)
