<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AR</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>AR.js</h1>
<p>AR.jsは、WebAR開発のための代表的なOSS（オープンソースソフトウェア）のひとつです。</p>
<div class="marker">
<h2>marker-based AR</h2>
<div class="box">
<p>
マーカーベースARはAR.jsの代表的な機能でとても簡単にできます。
決められたマーカーにカメラを向けるとオブジェクトを表示する」よう簡単に設定することができます。<br/>
黒く太い線があることでマーカー検出をしやすくしており、その結果安定したARが実現できます。
</p>
</div>
<p style="text-align: center;">作ったプログラムの映像</p>
<video controls="controls">
<source src="../material/marker.mov">
</video>
<p style="text-align: center;">こちらがマーカーベースのサンプルになります</p>
<img src="../material/pattern-AR-marker.png" alt="">
<p style="text-align: center;"><a href="https://www.yatex.org/gitbucket/Fumiya238/mypage/pages/AR/AR-marker_based.html">またはこちらから</a></p>
<hr>
<p>【利用方法】<br />
1.上記のQRコードを利用してAR用のWEBページにアクセス<br />
2.ページを開くと表示されるポップアップでカメラの利用を「許可」する<br />
3.そのままカメラを上のQRコードに向けるとオブジェクトが表示される</p>
<hr>
</div>
<div class="location">
<h2>location-based AR</h2>
<div class="box">
<p>Location Based AR（ロケーションベース型AR）とはGPSなどの位置情報に基づいて、特定の位置にARコンテンツを表示させるARです。<br/>
例えば地図アプリのナビゲーションで目的地の方向や位置を示すのに使われてたりします。</p>
</div>
<h3>実装に向いてる環境・条件</h3>
<ul>
<li>建造物が少ない公園や開けた場所</li>
<li>大きなサイズのARコンテンツ</li>
<li>ある程度の座標の位置ブレを許容できる</li>
<li>表示される高さを厳密に求めない</li>
<li>宝探しやアート系のAR</li>
</ul>
<h3>実装に向いてる環境・条件</h3>
<ul>
<li>建造物が多い</li>
<li>小さなサイズのARコンテンツ</li>
<li>正確な座標に表示させたい</li>
<li>室内などGPSを正確に取得できない場所</li>
<li>表示される高さを厳密に求める</li>
</ul>
<p style="text-align: center;">作ったプログラムの映像</p>
<video controls="controls">
<source src="../material/location.mov">
</video>
<p style="text-align: center;">こちらがロケーションベースのサンプルになります</p>
<img src="../material/AR-location.png" alt=""><br/>
<p style="text-align: center;"><a href="https://www.yatex.org/gitbucket/Fumiya238/mypage/pages/AR/AR-location_based.html">またはこちらから</a></p>
<hr>
<p>【利用方法】<br />
1.上記のQRコードを利用してAR用のWEBページにアクセス<br />
2.ページを開くと表示されるポップアップでカメラとGPSの利用を「許可」する<br />
3.そのままカメラをあらかじめ設定した位置に向けるとオブジェクトが表示される</p>
※うまくいかない場合 →設定→ 位置情報サービス → Safariなどの検索ツールに位置情報を常にオンにしてみてください
<hr>
</div>
</body>
</html>
Satou Fumiya