レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

AframeのマーカーARでa-cameraやa-marker-cameraを使うとマーカーと物体位置がズレる

なぜかなと思って、ずっと別の方法で誤魔化していたが解決したので記。

現象

ダメなパターンは以下、a-cameraを使っている。

<!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" />
    <script type="text/javascript" src="https://aframe.io/releases/1.2.0/aframe.min.js "></script>
    <script type="text/javascript" src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js" ></script>
  </head>
  <body style="margin: 0; overflow: hidden; height: 100%">
    <a-scene
      embedded
      arjs="trackingMethod: best; sourceType: webcam; detectionMode:mono_and_matrix; debugUIEnabled: false;"
    >
      <a-camera></a-camera>
      <a-marker type="barcode" value="1" >
        <a-box position="0 0.5 0" wireframe="true" color="black"></a-box>
      </a-marker>
    </a-scene>
  </body>
</html>

実行するとこんな感じ

解決

変えたところだけ。 これを

<a-camera></a-camera>

こう変える

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

ピッタリ来た。

原因

a-cameraはVRようにY=1.6になってる。

<a-entity camera>でプレーンなカメラを作ることで解消するということ

わかってみれば簡単だが、長らくわからなくてドキュメントもGPTもあてにならなかった。

a-marker-cameraも同様にYを持ってるので厄介。 すっきりしたのでよかった・。

astro＋Restのサービスを作る時にCORSにならない方法

Astroからaxiosやfetchやらで、RestAPIを呼ぼうとするとCORSの制限に引っかかる。

ローカルだとClientとServerをそれぞれポートを分けて立てたりするから。

仮に以下のようにするとする

Astro => http://localhost:3000/

Server => http://localhost:8080/api/

Astro側のpackage.jsonに"proxy": "http://localhost:8080/と、サーバーのホストを知らせてやれば良い。

{

 "name": "sampleservice",
 "type": "module",
 "proxy": "http://localhost:8080/,
 "version": "0.0.1",
 ・・・
}

サーバーサイドにも

import cors from "cors";

// 中略


// CORSをexpressに設定
const origin ="http://localhost:3000";
const app = express();
app.use(
  cors({
    origin: origin,
    credentials: true,
    preflightContinue: true,
  })
);

// 中略

const server = app.listen(config.get("server_port"), () => {
  console.log(config);
  console.log("listen to " + config.get("server_port"));
});

覚書:git である程度大きいファイルをアップする時に、pushが進まなくなる現象の対処

Git のプッシュでWriteが終わり、Total 6626 (delta 1700), reused 0 (delta 0), pack-reused 0と出たあとに止まってしまう。 ある程度大きなファイルがあるときは、以下のようにバッファを増やしてからpush する。

git config http.postBuffer 157M

大きすぎてエラーが出る場合は、LFSを使う。

A-FrameでVRを始めるときにトラブらない最低限の設定

A-Frameを使ったVRをいくつか作っていて、いつも設定で回避していることを備忘録的に記載します。

最終形

最終形を始めに示し、以降で構成要素を見ていくことにします。

<!DOCTYPE html>
<html >
  <head>
    <meta name="description" content="VR template" />
    <meta charset="utf-8" />
    <title>VR Template</title>
    <script type="text/javascript" src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <style>
    html{
      height: 100%;
    }
    body{
      font-size: 0.625%;
      overflow: hidden;
      touch-action: manipulation;
      margin: 0;
      height: 100%;
    }
    </style>
    <script type="text/babel">
    AFRAME.registerComponent("init", {
      init: async () => {
        const message:string = "init start";
        console.log(message);
      }
    });
    </script>
    <a id="myEnterARButton" href="#"></a>
  </head>
  <body>
    <a-scene init  renderer="colorManagement: true" vr-mode-ui="enterARButton: #myEnterARButton"
    device-orientation-permission-ui="enabled:true;denyButtonText:いいえ;allowButtonText:はい;cancelButtonText:キャンセル;deviceMotionMessage:向きのセンサーにアクセスしてよろしいですか;mobileDesktopMessage:モバイル用Webサイトに切り替えてこの画面をリロードしてください。"

    gltf-model="dracoDecoderPath:https://www.gstatic.com/draco/v1/decoders/" >
      <a-assets>
        <!-- <a-asset-item id="asset1" src="xxx.glb"></a-asset-item> -->
      </a-assets>

      <a-box  color="red" ></a-box>

      <a-entity id="rig" movement-controls position="0 0 4">
        <a-entity
          look-controls="pointerLockEnabled: false"
          id="main-camera"
          camera=""
        >
          <a-entity
            id="cursor"
            cursor="rayOrigin: mouse;fuse:false"
            raycaster="objects: .clickable"
          ></a-entity>
        </a-entity>
      </a-entity>
      <a-entity laser-controls raycaster="objects: .clickable; far: 10"></a-entity>
      <a-entity laser-controls raycaster="objects: .clickable; far: 10"></a-entity>
    </a-scene>
  </body>
</html>

説明のいらないところから

とりあえず、最終形から分解して説明のいらない基本セットを用意します。 A-Frameのライブラリを呼んで、a-sceneを読み込むだけです。これだけでも３Dシーンが作られるのがA-Frameの手軽なところですね。

<!DOCTYPE html>
<html >
  <head>
    <title>VR Template</title>
    <script type="text/javascript" src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body >
    <a-scene >
    </a-scene>
  </body>
</html>

スタイル

スタイル設定は主にスマホでのズームを抑制するものです。

    <style>
    html{
      height: 100%;
    }
    body{
      font-size: 0.625%;
      overflow: hidden;
      touch-action: manipulation;
      margin: 0;
      height: 100%;
    }
    </style>

viewportメタタグも拡大縮小を抑制します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

シーンの設定について

a-scene要素での設定は、以下です。

<a-scene init  renderer="colorManagement: true" vr-mode-ui="enterARButton: #myEnterARButton"
    device-orientation-permission-ui="enabled:true;denyButtonText:いいえ;allowButtonText:はい;cancelButtonText:キャンセル;deviceMotionMessage:向きのセンサーにアクセスしてよろしいですか;mobileDesktopMessage:モバイル用Webサイトに切り替えてこの画面をリロードしてください。"
  • init
    • registerComponentで登録したinitコンポーネントを読み込む。registerComponentのパートは後述。
  • renderer="colorManagement: true"
    • Glbの色が暗くなる問題の対応

  • vr-mode-ui="enterARButton: #myEnterARButton"

    • AndroidデバイスでARボタンがVRボタンと重なって表示される。問題を回避します。 head内の<a id="myEnterARButton" href="#"></a>のコードもセットで使います。

  • device-orientation-permission-ui

    • iPhoneでジャイロセンサーにアクセスする許可ダイアログを日本語化
      • enabled:true;
      • denyButtonText:いいえ;
      • allowButtonText:はい;
      • cancelButtonText:キャンセル;
      • deviceMotionMessage:向きのセンサーにアクセスしてよろしいですか;
      • mobileDesktopMessage:モバイル用Webサイトに切り替えてこの画面をリロードしてください。
  • gltf-model="dracoDecoderPath:https://www.gstatic.com/draco/v1/decoders/"
    • gltfモデルのDraco圧縮を有効にする

draco圧縮

Draco圧縮は、Googleのオープンソース技術でZIP圧縮したものよりも、圧倒的に高い圧縮率を実現できます。

https://2.bp.blogspot.com/-_zGI5CHskzE/WHaG88sMbfI/AAAAAAAABAQ/2nQERexN08AzGNf3N5OYOOCURV7TCyZdgCLcB/s1600/Draco1.png

Draco圧縮するためのツールをインストールします。

npm install -g gltf-pipeline

Draco圧縮をコマンドラインで実施します。

gltf-pipeline -i xxx_from.glb -o xxx_to.glb -d

カメラはリグに入れる

カメラをリグに入れることで、カメラの方向をプログラムから変えることができます。 マウスのタップを有効にするには、カメラの配下にraycaster属性を持った要素を持ちます。 cursorのrayOriginをmouseにするだけかと思いきや、fuse:falseにしないと、マウスクリックやタップで2回クリックが発生するという罠があります

      <a-entity id="rig" movement-controls position="0 0 4">
        <a-entity
          look-controls="pointerLockEnabled: false"
          id="main-camera"
          camera=""
        >
          <a-entity
            id="cursor"
            cursor="rayOrigin: mouse;fuse:false"
            raycaster="objects: .clickable"
          ></a-entity>
        </a-entity>
      </a-entity>
      <a-entity laser-controls raycaster="objects: .clickable; far: 10"></a-entity>
      <a-entity laser-controls raycaster="objects: .clickable; far: 10"></a-entity>
    </a-scene>

この設定にあるmovement-controls属性のために以下のaframe-extrasが必要です。

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

movement-controlsを設定すると、スマホで画面タップしたときに直進する機能が付加されます

AFrameのコンポーネントを作るためのregisterComponentをTypescriptで書けるようにtype="text/babel"でスクリプトを作ります。 このコンポーネントは、a-sceneで設定しています。

    <script type="text/babel">
    AFRAME.registerComponent("init", {
      init: async () => {
        const message:string = "init start";
        console.log(message);
      }
    });
    </script>

Babelのためにインポートが必要ですね。TypescriptにしないまたはWebpackなどでビルドするなら不要です。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

決定的に重要な資質 Integrityの人

私の大好きな経営の神様ドラッカー。そのドラッカーがよく使った言葉「integrity」は、真摯さと訳されます。
 
大変難しい言葉ですが、高潔、誠実、清廉、品位、完全性を含んだ言葉で、ドラッカーが言うには「integrityこそが組織のリーダーやマネジメントを担う人材にとって決定的に重要な資質である」と。
 
私の解釈では、真面目で誠実であるだけではなく軸をもっていて推進力があり、公正であり裏表がない人物だと考えています。
 
この真摯さについて考えると時に私がイメージする人物が、先日公開したレベルエンターのWebサイトでインタビューの特集記事に協力いただいた、デジタルハリウッド大学の 池谷 和浩 執行役員です。池谷さんは真摯さ(integrity)という言葉がぴったりだなと思います。
そんな池谷さんから、大変高く評価していただいていることをとても嬉しく思います。
ということで、既にご覧いただいた方もいらっしゃると思いますが、ぜひ御覧ください。
 
デジタルハリウッド大学 池谷執行役員へのインタビュー
 
レベルエンターは沢山の人のお世話になってここまで歩んできておりますが、VR/ARという分野で、池谷さんに出会えたことは大変大きな変化をいただくきっかけになりました。
池谷さんを紹介してくださったのはハコスコの 藤井 直敬 先生、その藤井先生とのきっかけをいただいたのが、カヤックの 柳澤 大輔CEO、VR部の原さんでビッグな繋がりの先に頂いたご縁です。
レベルエンターとしてはまだまだ沢山の人にお世話になっており、機会を見つけて、お世話になった方々にインタビューのご協力をいただきたいなと思っています。

Webサイトリニューアルと夏休みのイベント

株式会社レベルエンターの新しいWebサイトができました。

levelenter.com


たくさんの皆様に協力いただき、オープンすることができました。
WebARになるのでちょっと遊んでみてください。

 

また、7月1日よりレベルエンターは8期目が始まっています。

7年間もフラフラとしておりまして、これからもフラフラする予定です。

 

また、BLOCKVROCKをプラットフォームにして、夏祭りメタバースを0から作り込みむワークショップを夏休みに開催します。


GREE VR Studio Laboratoryさんのプロデュースで、デジハリの教授の皆様の協力もいただきます。
森ビルさんの会場をかりて、やります。豪華布陣！

スペシャリストたちのチームで、中々すごいのができそうです。

vr.gree.net

NFTとXMLの類似性

NFTについてひとこと言えるほどの力量はないけれど、やっぱり最近の以下の議論がとても面白かったので書きたくなってしまった。

kumagi.hatenablog.com

NFTとXMLはアルファベット3文字の略称という以外にも、「実現できることは比較的シンプルな技術でありながら、壮大な未来が語られる」あたりが似ているように思えています。

XML

2000年前半、当時IT業界新卒だった僕は、XML（Extensible Markup Language）は画期的な技術で、ソフトウェア開発技術者としては絶対に知っておくべき技術だと教えられました。

当時XMLについて勉強し、記憶しているのは以下のような文句です。

  • 企業や銀行のデータ連携（EDI）は全てXMLベースに置き換わる
  • 企業はXMLをインターフェイスにして業務ノウハウ（ビジネスロジック）を売り買いする時代になる
  • 画面の定義もできる
  • 今後全ての設定ファイルがXMLに置き換わる
  • 医療カルテや定型外のデータが全てXMLになりどんなソフトでも交換可能になる
  • データベースに革命が起きXMLデータベースが覇権を握る
  • HTMLの親戚である。それどころか、HTMLもXMLの1つにすぎないのである

今振り返って聞くと、顧客が欲しかったこととエンジニアの実装の差がよくわかりますが、当時の僕にはまったくわからん技術でした。

さらに、これだけのことができる技術でありながら、勉強してみるとXMLというのは、実の所データ記述するルールぐらいのことでしかなく、さらに謎が深まるわけです。

XMLをわかりたくて仕方なかった僕は、本当によくわからんので勉強しようと思ってXMLマスターという試験を受け、それでもよくわからなくてXMLマスタープロフェッショナルの資格本に執筆者の一人として参加するという斜め上の展開にたどり着いたという思い出があります。

XMLマスター教科書プロフェッショナル | 株式会社クロノス 志賀 澄人, 株式会社クロノス 山本 大, XML技術者育成推進委員会 |本 | 通販 | Amazon

この本の評価は残念ながら当時からビミョーでした。

当時の、XML技術によって生み出される未来という喧伝には、いくつもの論理の飛躍がありました。

たとえば、電子カルテが全てXMLになってどんなソフトでも交換可能になるという未来像は

「電子カルテのXMLフォーマットが業界で統一されたらの話」という論理の飛躍があり

「電子カルテを読み込むソフトがその統一フォーマットに対応したらの話」という飛躍があり

「多くの医師がその統一フォーマット準拠のソフトに切り替えたらの話」という飛躍がある

これだけの困難な変化が起こってはじめてXMLで、全ての電子カルテが交換可能になるのです。

というわけで、2000年当時にはSF(サイエンスフィクション)の域を超えない話でした。

NFT

NFT（Non-Fungible Token）も、紐解いていくと要するに取引が記録されて消えにくい証明書トークンであるというもの。

できることは割とシンプルでそれ以上のことはないんだけれど、NFTは大きな期待を持って次のように語られます。

  • NFTでアートやツイートが高額で売れる
  • NFTでデジタルの土地が売り買いできる
  • NFTでメタバースで商売して生きる人類がうまれる
  • NFTをベースとした組織が新しい組織の形態となる

現時点では、NFTをビジネスと紐づけて熱く語る人の中には、高額で取引される投機的な部分だけに興味があるという人が多いようです。

高額な取引が実際に行われているので、いつものバズワードよりも熱を帯びている気がします。

ただ、上記のNFTが生み出す未来の中には、多大な論理の飛躍やいくつかの技術的・社会的なブレイクスルーがあって初めて成り立つことが、すぐにでも起こる未来のように語られている部分もあるように思います。

その期待値によってNFTの現在の価値が釣り上がるのがバブル的です。

論理の飛躍とともに語られる姿は、XMLのそれと近いと感じました。

NFTとメタバースの文脈での、論理の飛躍を含んだシナリオは例えば以下のような感じでしょうか。

「多くの人がメタバースに参加する必然性がある状態になったらの話」

「多くのメタバースを名乗る仮想空間プラットフォームが業界標準を作ったらの話」

「各社のプラットフォームが喧嘩をせずに標準に参画したらの話」

「次にアイテムや土地などの希少性が皆が認める状態になったらの話」

というようなSFが現時点では残っています。

個別の仮想空間プラットフォームが、標準化ないしは統合されて一つの大きなメタバースになるところが特に不透明で、上述した「標準化」というようなこれまで人類が何度も挑戦して失敗したプロセスが発生するシナリオをとるぐらいなら、巨大な1つの仮想空間プラットフォームが他を飲み込んで大きくなるシナリオの方がしっくりくるようにも思います。

ただ、そんな単一企業が独占する仮想空間プラットフォームだとしたら、NFTで土地やアイテムのやりとりを管理するよりも、単なるDBで管理した方がよっぽど理にかなっていてNFTの出番は無くなってしまいます。

ややこしいのは、いままででもソーシャルゲームの世界でNFTを使わなくても十分に成り立っていた土地の売買やアイテムの売買が、NFTによって実現されている出来事のように語られていることです。

NFTとXMLとSF

NFTにおけるSFも、XMLのその後に近くなるのではないでしょうか。

つまりNFTが作り出す未来として語られているSFのいくつかは別の方法で実現され、NFTは本質的に合っている用途（転売防止やデジタルデータの持ち主証明）などで進化する未来です。

XMLはデータフォーマットとしての地位は、JSONにとってかわられましたが言語やOSを問わないデータフォーマットのニーズはまやかしではなかった。

XMLによるEDIはできたところもあったができなかったところもあった。やっぱり標準化が安易にできるとは思わない方がいいですね。

SOAPという通信は今では見かけなくなったけれど、RESTやGraphQLにその遺伝子を残し、概ねXMLでやりたかったことは実現したように思います。

ビジネスロジックは売り買いできませんでしたね。

XMLを勉強していた当時、これは絶対無理だろうと思っていたUDDIというアイデアがありました。

SOAP通信のインターフェイス定義を全世界統一のUDDIというディレクトリで管理してシステム連携先を選ぶようなプロトコルで、データ連携の接続先を自動で切り替えることまで視野にいれていました。

流石にそれは無理があったのですが、システム開発を楽にする方法としてRESTful APIで様々なサービスを接続先に選ぶことはできるようになったり、

npmなどのパッケージマネージャが参照するグローバルなパッケージのリポジトリがあったり、当時思い描いたものとは異なるけれども便利な世界が実現されています。

NFTも課題が残る部分（よく言われるガス代とか環境負担とか）をそのままに発展するとは考えにくく、代替技術が出てきてからが本番というように感じています。

標準化みたいな時間のかかる論理の飛躍が含まれている未来像は、20年スパンぐらいでコモディティな感じになってから現実的になってくるような感じではないでしょうか。

そういう感じで、実現することとしないことがありつつ、一部別の形で実現し進むのでしょうね。

テクノロジーや人類の発展にはSFの力も必要だと僕は思います。

人間には想像できることしか実現できないので、XMLが出た時に夢のような未来を描くことがなければ、実現に向けて現実感をもって投資したり熱意を持って開発したりできなかったと思います。

過去の多くのSFでも予想ができなかった未来に我々は生きています。

ドラえもんの道具や、BTTFの2015年など答え合わせがされていっていて、こらから先の未来を作るためには、もっとSFが必要なんだろうなって思います。