常連

##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アニメーションを表示させたい

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

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

## 背景、状況

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

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

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

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

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

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

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

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

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





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

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

現在、WebARを個人で開発しています。
ロケーションベースのARを開発中なのですが、
PokemonGOのように特定の場所に行って
スマホカメラをかざせば、3Dモデルや映像が
表示されるという物を作っています。
そこでGPS座標を使うときの注意点が知りたいです。
勝手に座標を使ってい場所とダメな場所が
あると思うのですが、その辺りを詳しく知りたいです。


## 背景、状況
PokemonGOは私有地や公共の場所、関係なく
どこへ行っても特定の場所でスマホカメラをかざせば
3Dモデルや映像が表示されますが、この時のGPS座標は
勝手に使ってその場所にコンテンツを表示させるように
していますね。

そして、よく「勝手にうちの場所に表示させるな！」
となって裁判沙汰になってる話も聞きます。

ナイアンティックや株式会社ポケモンくらいの
巨大企業ともなれば「勝手にやりましたサーセン！てへぺろ」
で逃げられそうですし、裁判でも優位に戦えそうです。

でも無名な個人ではそもそもリスクが高すぎるし、
GPS座標を使う許可は降りそうにありません。

ChatGPT4で聞いてみると
「公共の場なら許可取らなくても使える所多いんじゃないかなー？」
という回答。

またググってもロケーションベースのAR作り方を技術面で紹介している
サイトは多いんですが、GPS座標情報の扱いについて言及している所は
僕の検索能力では見当たりませんでした。

ウェブでのGPS座標情報の権利等、使用に関するルール等について
詳しい方いたら教えてください。

ロケーションベースのWebARでGPS座標情報を使う時のルールってありますか？

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で、クロマキー処理動画を表示したい

### 実現したいこと
ウェブカメラと２Dイメージを同時に写し、AR空間に２Dイメージを乗せたいと思っています。



### 発生している問題・分からないこと
実際にコードはすでにあるのですが、2Dイメージが実装画面に表示されないのが問題になっております。

### エラーメッセージ
```error
エラーメッセージはないのですが、表示されません。
```

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

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script type="text/javascript" src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-three-location-only.js"></script>
    <script type="text/javascript" src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="http://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <title>AR Page</title>
</head>
<body>
    <a-scene
    cursor='rayOrigin:mouse; fuse: true; fuseTimeout:0;'
    raycaster="objects: .interactive;"
    vr-mode-ui="enabled: false"
    arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'
    renderer='antialias: true; alpha: true'>

    <a-assets>
        <img id="gate4" src="images/TORII.png" alt="gate4">
    </a-assets>
    
    <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
    <a href="https://www.japan-guide.com/e/e3902.html">
        <button style="position: absolute; top: 10px; left: 10px; font-size: 20px; z-index: 9999;">MORE</button>
    </a>
    <a-image class="interactive" onclick="window.location.href='https://www.japan-guide.com/e/e3902.html'" 
    src="#gate4" position="0 -10 -40" scale="0.00001 0.000001" width="0.5" height="0.25" rotation="100 0 0"></a-image>
    </a-scene>
</body>
</html>
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
エラーは表示されていません。

### 補足
特になし

AR 空間に２Dイメージを出現させる方法がわかりません。

### 前提・実現したいこと

AR.jsとA-Frameを用いたWebARのシステムを作ろうとしています。様々な方の作成されたコードを参考にボタンをクリックすることでARで表示しているオブジェクトを表示させたり、非表示にさせたりする機能を追加したいと考えております。しかし、ボタンをクリックしても表示されているARには何も変化が起きず、困っております。
　周りに、この問題を解決できる人がおらず、自分一人では解決ができません。そこで、知識のある方にご教授おねがいしたく、質問させていただきました。よろしくお願いいたします。

### 発生している問題・エラーメッセージ

ボタンの機能とARが関連付けできていない。

### 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>AnimationTest</title>
<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="js/aframe-extras.js"></script>
<script src="js/aframe-text-geometry-component.min.js"></script>
<script src="./js/aframe-ar.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>

  </head>
  <body style="margin:0px; overflow:hidden;">
<a-scene embedded arjs="debugUIEnabled:false;"  renderer="gammaOutput: true;" vr-mode-ui="enabled: false">

<a-assets>
    <a-asset-item id="model" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fscene1.glb?v=1594279817621"></a-asset-item>
    <a-asset-item id="model2" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fen.glb?v=1602566579902"></a-asset-item> 
  
</a-assets>

<a-marker preset="hiro">
  <a-entity gltf-model="#model" scale="0.0001 0.0001 0.0001" rotation="0 0 0" position="0 0.5 0" animation-mixer="clip:*" ></a-entity>
</a-marker>
 
<a-entity camera></a-entity>
    </a-scene>
<div style="position: fixed; bottom: 150px;">
　<input type="button" id="b1" value="change" onclick="click1">
</div>
<script>
//初期表示は非表示
document.getElementById("model2").style.visibility ="hidden";

function click1(){
	const model2 = document.getElementById("model2");

	if(model2.style.visibility=="visible"){
		// hiddenで非表示
		model2.style.visibility ="hidden";
	}else{
		// visibleで表示
		model2.style.visibility ="visible";
	}
}
</script>
 
  </body>

</html>



### 補足情報（FW/ツールのバージョンなど）

使用機器　iPhone X (iOS 14.0.1)

AR.jsでボタンを用いたARの物体の切り替え表示ができません。

### 前提・実現したいこと
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です。
ローカルサーバを立てて確認しています。

A-frame、a-videosphereで動画再生ができない

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

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

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

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

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

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

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