ブログ一覧

WebVRを用いたVR180写真の設定について

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サーバにアップする。

2024年05月12日

Far east Summer

長野、瀬戸大橋、金沢、浜寺公園、大阪市、河内長野、岩代、湯浅の8kVR180動画。ほとんどの動画をミニチュア化してます。
カメラ:DJI Action2
アプリケーション:180Kino

2023年09月07日

Hokkaido movie

札幌、小樽のVR180動画。比較的安価なアクションカムで、8kの高解像度VR180動画を実現しています。
カメラ:DJI Action2
アプリケーション:180Kino

2023年09月07日

Drone photography

海南、高野下、笠置、清水山、蹴上、柳生のVR180スライドショー。
カメラ:DJI Action2
アプリケーション:180Augen

2023年09月07日

Landscape photo turned into 3D miniatures(3)

堺市役所、大阪湾、山辺の道、法起寺、法輪寺、柳生街道のVR180スライドショー。ミニチュア化してます。
カメラ:DJI Action2、Canon EOS 5D2、Olympus E-M10 mk3
アプリケーション:180Augen

2023年09月07日