常連

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

### 前提・実現したいこと

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の物体の切り替え表示ができません。

##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年賀状を作成したいと思っています。
A-frameとAR.jsを使用して、オリジナルマーカーで3Dモデルを表示･回転させるものを作成しました。
iPhone(safari、Google chrome)、WindowsPC(Google chrome)では問題なく表示･回転出来ています。

### 発生している問題

androidスマホから読み込みを行うと、カメラに拡大(ズーム)が掛かったまま固定になってしまい、
ピントも合わないせいで、ARマーカーを認識できず、3Dも表示されません。

ARマーカーはオリジナルのもので、QRコードと合体させたものです。
iPhone、WindowsPCだと特に問題なく動くのに、androidになった途端に
カメラの挙動がおかしくなる理由が分からず、特にエラーコード等も出ないので困っております。

ネットで拾った情報を継ぎ接ぎしながら作成している為、おかしな部分があるかもしれません。
詳しい方いらっしゃったら、お知恵をお貸しください。


### 該当のソースコード

```ここに言語名を入力
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Happy New Year!</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
 
       
    <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">

        
        <a-assets>
        <a-asset-item id="tora01-obj" src="model_obj/nenga01/tora01.obj"></a-asset-item>
        <a-asset-item id="tora01-mtl" src="model_obj/nenga01/tora01.mtl"></a-asset-item>      
        </a-assets>
 
        
        <a-marker preset="custom" type="pattern" url='./pattern-QR_933564.patt'>

        
          <a-obj-model
            src="#tora01-obj"
            mtl="#tora01-mtl"
            scale="0.2 0.2 0.2"
            position="0 0.5 0">
            <a-animation
              attribute="rotation"
              to="0 360 0"
              dur="12000"
              easing="linear"
              repeat="indefinite">
            </a-animation>
          </a-obj-model>
 
        </a-marker>

         
        <a-entity camera></a-entity>
 
    </a-scene>
  </body>
</html>
```

### 試したこと

A-Frame ライブラリの部分を最新まで変更したりもしましたが、
回転しなくなっただけで、カメラの問題は解決しませんでした。

WebARの表示でandroidスマホだとカメラにズームが掛かって固定され、正しく表示されない

### 前提・実現したいこと
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のメリットを教えてください。
またWebARを一般の方に理解してもらって
興味を持ってもらうにはどうしたらいいのでしょうか？

## 背景、状況

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

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

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

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

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

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

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

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

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





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

### AR.js A-frameを使ったwebARでモデルのテクスチャが反映されない
当方プログラミング初心者でして、いろんなサイトからコードをコピペして作っているのですが、３Dモデルのテクスチャだけがどうしても反映されなくて困っています。モデル自体は出現します。

### 発生している問題・エラーメッセージ
objとmtlの形式を利用しているが、３Dモデルのテクスチャ（色？）が反映されず、真っ白な状態。モデル自体は出現する。glbも調べて試したが、モデル自体反映されなかったりしてうまくいかず。モデル制作はblender。


### 該当のソースコード
<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin: 0px; overflow: hidden;">
    <a-scene embedded arjs>
      
      <a-assets>
       <a-asset-item id="mikan-obj" src="mikan20.obj"></a-asset-item>
      <a-asset-item id="mikan-mtl" src="mikan20.mtl"></a-asset-item>    
      </a-assets>
      <a-marker type="pattern" url="pattern-akemasite.patt">
       <a-entity obj-model="obj: #mikan-obj; mtl: #mikan-mtl" scale="0.5 0.5 0.5"> </a-entity>  
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

### 試したこと
[**主に参考にさせていただいたサイト様**](https://zenn.dev/mganeko/articles/lidar-aframe)

↑上記に載っているglb形式も試しましたがうまくいきませんでした。


### 補足情報（FW/ツールのバージョンなど）
[**実際のARカメラのページ**](https://mofusakki.github.io/akeomeAR2022/)
[**githubのページ（マーカーとかあります）**](https://github.com/mofusakki/akeomeAR2022)

**環境**
コード書いてる→　**macbookair、github**
モデル制作→ **blender**
利用しているカメラ→ **iphone12mini IOS 15.2 Safari**

AR.js・A-frameを利用してテクスチャのついた３Dモデルを出現させたい（マーカーベース）

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

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

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

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

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

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

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