CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。(Unity以外)ARCoreが1.9になりました。代表的な機能として、WebブラウザでもARCoreの機能が使えるようになる「SceneViewer」が導入されました。Viewerを試すための環境構築手順をまとめました。動作環境は以下の通りです。1.9の新機能githubのリリースページに書いてあります。imagesについては、こちらで詳しく書かれているので参照ください。記載の通り、相当に性能が上がっています。Viewerは後述します。スマートフォンにGoogle提供のARCore用のapkを入れておく必要があります。それはこのページで公開されています。Developersapkはadbコマンドでこのようにインストールします。path>/ARCore_1.9.0.apkあるいは、apkファイルをスマートフォンにコピーし、スマートフォン側の「ファイル」アプリなどから直接インストールすればOKです。DeviceAPI対応ブラウザでも動きます。Viewerを使ってみるまず、AndroidスマートフォンまたはiOSデバイスのブラウザアプリから、以下のサイトにアクセスします。それぞれ、モデル横の立方体のようなボタンをタッチします。「周囲のスペースに表示する」をタッチすると、ARCoreのアプリが別途起動し、ARモードになります。「AR」をタッチすると、ブラウザに重なるような形でカメラのViewerが表示され、ARモードになります。どちらの場合もARモードでできることは、カメラ越しにオブジェクトを配置する(オブジェクトをタッチして動かす)、拡大縮小する(画面をピンチ操作)ができます。Viewerの環境構築をする私自身がまだnode.jsなどのフロントエンド系の開発に詳しくないのと、なぜかGoogleから提供される開発向け情報がいくつか散らばっていたので、ざっと手順をまとめました。この記事執筆時点ではAndroidでの動作確認ができていません。サンプルコードの入手ここから取得します。ViewerのGithubリンクを見つけられませんでした。必要なライブラリの取得、Typescriptのコンパイルnode.jsがインストールされていない場合、事前にインストールします。Node.jsターミナルを起動し、以下のように入力します。Viewerの機能を実現するための必要なライブラリ(package.jsonに書かれています)を取得し、node_modulesフォルダに格納します。Viewerの機能を提供するサーバとしてのサンプルコードは、Typescriptで書かれており、src/に格納されています。Typescriptのままでは動かないので、javascriptにコンパイルします。buildは、tsconfig.jsonに記載された指示に沿って、Typescriptのソースコード(srcフォルダに入っているのが通例)をjavascriptのソースコードにコンパイルするものです。サーバを起動するターミナルから以下を入力します。http://192.168.0.9:8000同一ネットワーク内で表示されたURLにアクセスすれば、先ほどと同じ動作が確認できます。後述のようにAndroidではうごかせなかったのですが、iOSではモデルを差し替えて、別のモデルで試すこともできました。別のモデルに差し替える場合、examples/augmented-reality.htmlの59行目付近にあるコードで読み込むモデルのファイル名を変更します。ios-srcにTVモデルのファイル名を書きました。unstable-webxr></model-viewer>このファイルは以下のサイトから取得しました。Viewerが動かないことの調査Androidではこのような画面が表示され、ARCoreのアプリに切り替わりませんでした。試したのですが、オレオレではない証明書を持ったhttpsのサイトを作る必要がありそうな感触です。参考までに、試したことを書いておきます。いうコマンドは、package.jsonに書いてある通り"ws"です。Socketの略で、node_modules/local-web-serverフォルダに実体があります。ここのReadme.mdにhttpsでの起動方法がありました。自分のターミナルにはwsを入れていないので、package.jsonの"scripts"の中に新しく追記します。新たにserve-httpsを追加しました。名称は何でもよく、追加する場所も指定はありません。追加後、ターミナルから以下のように入力すると、今度はhttpsとしてサイトが開きます。ViewerでARモードは使用できませんでした。GithubにプロジェクトをアップロードしてhttpsサイトとするGithubには、リポジトリをサーバのように使う機能があります。以下でわかりやすくまとめられています。HTTPSが無料で使えるWebサーバーとしてGitHubを使う。pushに失敗しました。https://github.com/flushpot1125/arcore_sceneviewer_sample.git以下で解説されている方法で解決する可能性があります。他のglTF形式のモデルと差し替えるオブジェクトが悪い、ともみえるので、MicrosoftのRemix3DでglTF形式で公開されている3Dデータをいくつか取得して、examples/augmented-reality.htmlの59行目付近を変更しましたが、結果は変わりませんでした。おわりに一通り試しましたが、肝心のAndroidでは自分の環境での動作確認ができていない状態です。確認できたらまた追記します。2018の11日目の投稿です。Imagesで風景をARマーカにするここ最近、ARCore1.2を調べてます。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。