<!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" preload="none">
<source src="../material/marker.webm" type="video/webm">
<source src="../material/marker.mp4" type="video/mp4">
</video>
<p style="text-align: center;">こちらがマーカーベースのサンプルになります</p>
<img class="QR-img" src="../material/pattern-AR-marker.png" alt="">
<p style="text-align: center;"><a href="https://www.yatex.org/gitbucket/Fumiya238/AR-project/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>
<figure>
<video controls="controls" preload="none">
<source src="../material/location.webm" type="video/webm">
<source src="../material/location.mp4" type="video/mp4">
</video>
</figure>
<p style="text-align: center;">こちらがロケーションベースのサンプルになります</p>
<img class="QR-img" src="../material/AR-location.png" alt=""><br/>
<p style="text-align: center;"><a href="https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/AR/AR-location_based.html">またはこちらから</a></p>
<hr>
<p>【利用方法】<br />
1.上記のQRコードを利用してAR用のWEBページにアクセス<br />
2.ページを開くと表示されるポップアップでカメラとGPSの利用を「許可」する<br />
3.そのままカメラをあらかじめ設定した位置に向けるとオブジェクトが表示される</p>
※うまくいかない場合 →設定→ 位置情報サービス → Safariなどの検索ツールに位置情報を常にオンにしてみてください
<hr>
</div>
<h2>image-tracking AR</h2>
<div class="img-tracking">
<img class="nyanko1" src="../material/nyanko1.jpeg" alt="ニャンコ先生1">
<img class="nyanko3" src="../material/nyanko3.jpeg" alt="ニャンコ先生3">
</div>
<p><a href="../../pages/AR-test/AR-Image_tracking.html">イメージトラッキング</a></p>
<p>【問題点】<br>
どこが中心が設定されているかわからないため、potisionの設定大変 <br>
サイトに画像を渡す際、物体が認識しやすいものかの判断が必要、画像となるべく同じ状況にしないとうま認識されない<br>
サイトに渡す画像が大きすぎるとntf画像が返されないことが多い<br>
似た物体で試した結果、画像はしっかり区別したがリアルタイムで認識した際、似た違う物体も認識してしまうことがあった。（サイトに渡した画像が悪かったのかも）<br>
画像が大きいまま無理やりしてしまうと起動までに時間がかかる<br>
</p>
</div>
<script>
</script>
</body>
</html>
Satou Fumiya