常連

### 実現したいこと

WebARのマーカーがうまく反応しないです。
QRコードにアイコンを真ん中に表示する事ができると思いますが、
そこにARマーカーを付けて、QRでWebブラウザを開いてカメラを
起動させ、そのまま真ん中の小さなARマーカーにカメラをかざせば、
ARが表示されます。

実際に下記のWebARの解説記事にもその方法が書かれていて、
ARマーカーとQRコードが一体になってるのでデザインする時
スペースが節約できて便利です。

でも実際、やってみると全然、ARが反応してくれません。
QRコードの点の部分やARマーカーの縁の部分を黒やはっきりした
色にしても反応しません。

ARが表示されたいです。私の場合は画像や動画です。

**「参考サイト」**
[AR.jsを使ってWebAR年賀状を作る 2020年版](https://iti.hatenablog.jp/entry/2019/12/25/125345)

### 該当のソースコード

```ここに言語名を入力
<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>

            <a-assets>
                <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>
            </a-assets>

            <a-marker
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                videohandler
                smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-video
                link="href: https://twitter.com/naive_kazama"
         animation-mixer="loop:repeat"
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-marker>

            <a-entity camera></a-entity>
        </a-scene>

```
</section>
    </body>
</html>

### 試したこと

逆にARマーカーの中にQRコードを入れてQRコードごと
ARマーカーにしれしまうパターンでは比較的反応しやすかったです。

ここにより詳細な情報を記載してください。


QRコードの中にARマーカーの画像を入れても反応しないので反応させたい

## テーマ、知りたいこと

WebARのメリットを教えてください。
またWebARを一般の方に理解してもらって
興味を持ってもらうにはどうしたらいいのでしょうか？

## 背景、状況

私はAR.jsを使ってWebARをデザインに実装しています。
マーカーにスマホカメラをかざすと動画や画像や3Dデータが
実際の空間にあるように表示されるように見えますよね。

でも、QRコードをスマホで読み取ってリンク先のYoutubeで
動画再生すれば再生が終わるまでARでずっとマーカーに
カメラをかざしておくような必要もないですよね。

メリットがいまいちわかりません。

どういうメリットがあるでしょうか？

一応、知り合いの地下アイドルに名刺を作ってあげた時に
ARを実装したのですが、女性は喜んでいましたし、
名刺を配った相手も「すごいすごい」とARに驚いていました。

でも、Twitter上などでARの凄さを知ってもらおうと思い、
実際にスマホでARを表示させている所をスマホの画面収録で撮影して
「こんな感じです！すごいでしょう？」とやってもほとんどの方が
ピンときていないようで反応は薄いです。

また、DM等にマーカー画像を送って、「スマホで読み取ってみて」
というのですが、QRコードをマーカーにしていたりすると、
相手は「QRコードじゃん？」という反応でこれも中々WebARという事を
理解されない事が多いです。

実際に本人の目の前で実演したりすると凄さを理解してもらえる事が多いのですが…。

SNS上でWebARの良さを知ってもらうにはどんな方法が効果的でしょうか？





WebARのメリットを教えてください。またWebARのメリットを人に教えるいい方法はありますか？

## テーマ、知りたいこと

WebARのLocation Basedを使う場合、勝手にお店や観光地、ビルの座標を指定して使ってもいいのでしょうか？

## 背景、状況
例えばポケモンGOやドラクエウォーク、イングレスのように
ある特定の場所に行くとモンスターや何かポイントなどがもらえる
ARがありますが、あれってビルや施設、駅、公園などに
「こういうのをアプリ上で表示させたいのでこちらの公園のGPS使っていいですか？」
といちいち許可取りしてないと思うんです。

まあ法的にも問題ないからやってるんでしょうけど。

でもポケモンGOやイングレスはちゃんとした企業が作っているゲームなので
問題はあまり起きていませんが、例えばあるアイドルの事務所のGPSを指定して
そこでARを使うとアイドルの悪口動画が再生されるとかもできちゃうじゃないですか？

もちろん、事務所にバレれば名誉毀損とか偽計業務妨害とかになるとは思いますが、
バレなければずっと事務所にARは残り続けます。

その辺の問題ってWebAR界隈やそもそも位置情報ゲーム界隈ではどう議論されているのでしょうか？


WebARのLocation Basedを使う場合、勝手にお店や観光地、ビルの座標を指定して使ってもいいのか？

### 実現したいこと

ar.jsを使ってマーカーレスのARを実現したいです。

### 前提
マーカーレスにも2種類あると思います。
黒い縁の正方形のマーカーではなくスマホで撮った写真や
素材サイトから引っ張ってきたような写真をそのままマーカーにするパターン。


**「黒縁マーカーではないマーカー」**
こらはこのサイトを参考に試してみたのですが、まずNFTデータを生成するのに
苦労し、nodeはいまくインストールできなかったので、NFT CREATORという
サイトで生成しようとしてもググってでてくるNFT CREATORが前のバージョンなのか
私が使ってるサイトと仕様が変わっています。サイトは同じサイトなんですが…。

NFT CREATOR：[https://carnaux.github.io/NFT-Marker-Creator/](https://carnaux.github.io/NFT-Marker-Creator/)

コードの参考サイト：[https://webar-lab.palanar.com/developer/%E3%80%90ar-js-v3-0%E3%80%91image-tracking%EF%BC%88nft%EF%BC%89%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/](https://webar-lab.palanar.com/developer/%E3%80%90ar-js-v3-0%E3%80%91image-tracking%EF%BC%88nft%EF%BC%89%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/)

まず、最新？のNFT CREATORでデータを生成して参考サイトの通りコードを記述してもスマホカメラかざしてもなにも表示されません。

**「ビジョンベース」**
ビジョンベースは完全にマーカー自体がなく、実際の空間にあるものを使う
パターンですが、こちらはいくらググってもコードが書かれているサイトがなく
だいたいが「ビジョンベースのARやりたい人は楽な方法があります。うちのサービス使わない？」
みたいなものばかりです。

二つのマーカーレスARで参考になるサイトをご存知の方がいらっしゃいましたら教えてください。

英語のサイトでも構いません。Youtubeでも大丈夫です。

マーカーレスのWebARを実現したいがコード解説がされているサイトをいくつか教えてほしいです。

##WEBARで透過GIFアニメを表示させたい

AR.js+A-frameのWEBARで透過GIFを表示させたいのですが、表示させると重なった状態で見えてしまいます。
A-frameのバージョンを0.9.0にしても改善されませんでした。何が原因なのでしょうか。




### ソースコード

```ここに言語名を入力
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

  <script src='https://aframe.io/releases/0.9.0/aframe.min.js'></script>

<script src='https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js'></script>

<script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
<script src="shader-grid-glitch.js"></script>

<link rel="stylesheet" href="style.css">
<title>YPCの簡単AR</title>
</head>
  
<body>
  <div class="arjs-loader">
    <p>gifアニメテスト00</p>
  </div>
 

<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
        
        <a-assets>
            <img id="kaeru" src="kero.gif">
        </a-assets>


　<a-marker preset="custom" type="pattern" url="pattern-testmarker.patt" >
   <a-entity
              geometry="primitive: plane;"
              material="shader:gif; src:#kaeru;
              color:white;
              opacity:1"
              rotation="-90 0 0">
   </a-entity>
</a-marker>
    <a-entity camera></a-entity>
  </a-scene>
  <script>

    </body>
</html>
```

AR.jsとA-frameを使ったWebARで、GIFアニメーションを表示させたい

AR.jsとA-frameを使ったWebARで、クロマキー処理動画を表示したい


### 発生している問題・エラーメッセージ

iPhone（ios13.4.1）で見るとマーカーの上に透過処理された静止状態の動画が表示されるが、タップして再生すると元々の動画（グリーンバックで作成した動画）が再生されてしまいます。原因がどこにあるかわかりません。ご教授お願い致します。

### 該当のソースコード　
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

  <script src='https://aframe.io/releases/1.0.4/aframe.min.js'></script>

<script src='https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js'></script>

<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

<link rel="stylesheet" href="./ypc/style.css">
<title>タイトル</title>
</head>
  
<body>
  <div class="arjs-loader">
    <p>クリックして動画をみよう</p>
  </div>
  
    <a-assets>
      <video id="touka" src="./XXX/chromakey.mp4" autoplay loop="true" muted="true">
  </a-assets>


<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
  

<a-marker type='pattern' url='./XXX/pattern.patt'　registerevents>
  <a-video class="touka" material="shader: chromakey; src: #touka; color: 0.1 0.9 0.2" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0"></a-video>
</a-marker>
    <a-entity camera></a-entity>
  </a-scene>
  <script>
// var videoEl = document.querySelector('#touka');videoEl.play();
 'use strict';{
    AFRAME.registerComponent('registerevents', {
        init: function () {
            let marker = this.el;
            marker.setAttribute('emitevents', 'true');
            marker.addEventListener('markerFound', function () {
            let markerId = marker.id;
            console.log('markerFound', markerId);
            document.getElementById('touka').play();
             });

            // マーカーを見失ったイベントの登録
            marker.addEventListener('markerLost', function () {
            let markerId = marker.id;
            console.log('markerLost', markerId);
            document.getElementById('touka').pause();
            v.muted= true;
            });
        }
    });
     window.addEventListener('click', function () {
      let v = document.querySelector('#touka');
      v.play();
    });
}
</script>


</body>
</html>

### 試したこと

android端末では正常にクロマキー処理された動画が見られます。

AR.jsとA-frameを使ったWebARで、クロマキー処理動画を表示したい

### 質問
A-Frameを利用しWebARカメラを以下のコードで起動させているのですが、
```html
<a-entity camera></a-entity>
```
カメラが起動するまでに相当な時間がかかってしまうためローディング中ということがわかるようにcssでアニメーションを作成しました。
しかし、カメラの起動=読み込み完了ではないため、windows.onloadではアニメーションが見えない速さで消えてしまいます。

そこで、windows.onloadではなく以下のようにa-entityタグにインラインで記述しましたが、カメラ起動後もローディングアニメーションが消えることなくカメラ内にずっと残ってしまいました。
```html
<a-entity camera onload="loaded()"></a-entity>
<script>
      function loaded() {
        const spinner = document.getElementById('loader');
        spinner.classList.add('loaded');
      }
</script>
```
```css
.loaded {
    opacity: 0;
    visibility: hidden;
}
```

そもそも、カメラ起動まで何にそんなに時間がかかっているのかわからず、オブジェクトは2つのみで、重いものでもないのですが2分ほどかかっています。
対処療法としてのローディングアニメーションであり、根本的解決はカメラ起動を速くすることだと思っています。

### 実現したいこと
- [ ] webARカメラが起動したらローディングを非表示にしたい
- [ ] カメラの起動を速くしたい

上記のいずれかを実現したいです。

### 補足情報（FW/ツールのバージョンなど）

A-Frame



webARカメラを起動したらローディングを非表示にしたい、カメラの起動を高速化したい

### 前提・実現したいこと
aframeのa-videosphereを使って、ブラウザ上で３６０度動画を再生したいと思っています。
ところが、動画冒頭の静止画が表示されるだけで動画が再生されません。
コンソールにはWebGL: INVALID_VALUEtexImage2D:no videoと表示されます。
タグの記述は間違っていないはずなので、なにがいけないのかわかりません。

### 発生している問題・エラーメッセージ

```
WebGL: INVALID_VALUEtexImage2D:no video
```

### 該当のソースコード

```ＨＴＭＬ
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<title></title>

</head>
<body>
<a-scene vr-mode-ui="enabled: false">
  <a-assets>
    <video src="main.mp4"> </video>
  </a-assets>
  <a-videosphere src="main.mp4"></a-videosphere>
</a-scene>

</body>
</html>
```

### 試したこと

aframeのバージョンを変える


### 補足情報（FW/ツールのバージョンなど）
ブラウザはchromeです。
ローカルサーバを立てて確認しています。