WebVRを用いて、ホームページ上にVR180写真(静止画)を表示する方法について、今わかっていることを示します。
まず、httpsのwebサーバが使える状態であること。
(1)webxr-samples-main.zipをダウンロード、解凍
(2)"layers-samples"フォルダ内の"eqrt-layer.html"を用いる。このフォルダ内のすべてのhtmlファイルは不要。
(3)"eqrt-layer.html"ファイルを以下のように書きかえる。
(3-1)FPS表示の停止
"let scene = new Scene();"の下に"scene.enableStats(false);"を追加し、FPS表示を止める。これで余計な表示がなくなるとともに、画像が表示されるまでの速度が格段にアップする。
(3-2)写真のアップとURLの指定
const EQRT_180_TEXTURE_STEREO_PATH = '../media/textures/chess-pano-4k180.png';
を表示したいVR180サイドバイサイド形式の写真のファイル名に変更(jpgも可)する。
指定したフォルダにその写真をアップする。
(3-3)サイドバイサイドへの変更
viewPixelWidth: eqrtTextureWidth,
viewPixelHeight: eqrtTextureHeight / (eqrtIsStereo ? 2 : 1),
layout: eqrtIsStereo ? "stereo-top-bottom" : "mono",
の3行を
viewPixelWidth: eqrtTextureWidth / (eqrtIsStereo ? 2 : 1),
viewPixelHeight: eqrtTextureHeight,
layout: eqrtIsStereo ? "stereo-left-right" : "mono",
と書きかえる。
(4)"eqrt-layer.html"ファイルは名前を変更したり、別のフォルダに動かしても良い。ただし、ファイル内で指定しているリンク先を変更する必要がある。
(5)不要フォルダ、ファイルの削除
最上位フォルダの"htmlファイル"、たとえば"hit-test.html"などはすべて不要
"proposals","report","tests"フォルダおよび中のファイルは不要。
"media"フォルダ内の"thumbnails","video","gltf","sound"フォルダおよび中のファイルも不要。
"media"-"textures"フォルダ内のファイルは、"chess-pano-4k.png","mono_equirect_test.png","mono-equirect180.png","chess-pano-4k180"以外はすべて不要。これらもhtmlで名前を変更した場合は不要。
"css"フォルダ内の"pygment_trac.css","stylesheet.css"ファイルも不要。
"layers-samples"フォルダ内のhtmlファイルは、"eqrt-layer.html"以外すべて不要。
これらのファイルをそのままwebサーバにアップする。