Google Pixel のカメラアプリで 360 度画像を撮影し A-Frame で 360 度ビューを表示するメモ

Posted on 2020-12-18

プロトアウトスタジオ Advent Calendar 2020 の 18 日目の記事です。Google Pixel のカメラアプリで 360 度画像を撮影し A-Frame で 360 度ビューを表示するメモです。

できたこと

THETA のような特別な 360 度画像撮影ハードウェアでなくても、Google Pixel のカメラアプリで360 度画像が撮影できるので、その画像を使ってA-Frame で360 度ビューを表示できます。

これができると、Oculus Quest のようなWebXRに対応しているVRデバイスで、手軽に360ビューが体験できるのもいいところです。

A-Frame の 360° Image サンプルを参考に HTML 作成

360° Image – A-Frame

ですが、ここの VIEW SOURCE のソースを使うと、ライブラリの呼び出しが相対パスでちょっとややこしいので、CDNから呼び出せるフルパス調整します。

2020/12/18 現在の GET STARTED 紹介されている 1.1.0 バージョンを使います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Image</title>
    <meta name="description" content="360&deg; Image - A-Frame">
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="<local image path>" rotation="0 -130 0"></a-sky>

      <a-text font="kelsonsans" value="[360&deg; Image]" width="6" position="-2.5 0.25 -1.5"
              rotation="0 15 0"></a-text>
    </a-scene>
  </body>
</html>

こちらを index.html で保存しましょう。このあと <local image path> の部分を書き換えて 360 度画像を配置してみましょう。

Google Pixel のカメラアプリで 360 度画像を撮影

Google Pixel のカメラアプリでは、360 度画像が撮影できます。2020/12/18 時点の Android 11 が入った Pixel 4 のカメラアプリです。

Pixel スマートフォンの Google カメラアプリの設定を変更する - Google Camera ヘルプ

この説明の通りで、静止画を 360 度撮影するガイドに合わせて何枚も撮影することで実現できます。

こうやってスタートして

どんどん撮る。

正直なところ、同じ位置でパシャパシャ撮ることになり、あやしさが目立つし手間ではあるんですが、思い出の全景を残せるっていうのはやはり良いものです。

撮影出来たら index.html と同じ階層に download-image.jpg でこの画像を配置しましょう。

<a-sky src="<local image path>" rotation="0 -130 0"></a-sky>

index.html の <local image path> の部分を、今回の画像 download-image.jpg に変更します。

<a-sky src="download-image.jpg" rotation="0 -130 0"></a-sky>

index.html を保存して VSCode の Live Server のような拡張機能で Web サーバーをローカルで立てたり、どこかの Web サーバーに配置してみると、冒頭でご紹介したように自分の 360 画像が表示されます。

ちなみに、ローカルの index.html をそのまま Chrome ブラウザで見てしまうと、CROSエラーなどで見れないので Web サーバーでみてください。