Google VR Viewで取得したPitchとYawで視線の方向を表示してみる(パナソニックスタジアム編)


Pitch(上下方向の傾き角)

Yaw (垂直方向に対する曲がり角)

Google VR ViewでPitchとYawの取得はこちらのページを参照してください

 

PitchもYawも平面に展開した移動量のような感じで角度のイメージとは違いますが、角度です。

 

Pitchを使うと上下のどの向きを見ているのか、Yawを使うとどの方向を見ているのかを知ることができます。

 

初期画面は,Pitch = 0、Yaw = 0 ,default_yaw  = 0で下のような向きを見ています。

 

 

スタジアムは北に対して約18度東西に傾いています。

角度はこのページのコンパス機能で取得できます。

 

回転させる画像は、canvas要素で用意しておきます。

Yaw方向の画像は、初期は北向きなので、上向きの画像になります。

左の画像ですが、ちょっと分かりにくい?眉毛で上下(北南)を区別してますが、より下向きにパースのかかった画像ならもっと分かりやすいかも。

Pitchの初期画像は水平方向。

角度数に関して、3つの変数を用意。

var ini_yaw = 0;

var ini_pitch = 0;

これはパノラマの初期の向き(180~-180で任意に設定)。

var default_yaw = 0;

下の関数で使用します。

vrView.setContent({
image: scenes[current_scene].image,
preview: scenes[current_scene].preview,
default_yaw:default_yaw,
is_stereo: false,
is_autopan_off: true
});

 

ini_pitchは基本的に0ですが、init_yawは以下のようになります。

例えば、上の例では、パノラマ画像は南向きですが地図上では真南から西に18度傾いています。

yawの度数

canvas画像の角度

従って

ini_yaw = 180 + 18 – default_yaw;

 

(default_yawが負数になっているのは、取得する方向が逆だからです、ごめんちょっと分かりにくくて)

 

PitchとYawを使った回転角は以下のようになります。

function rotate_angles(pitch,yaw){

var direction_degree = 0;
var elevation_degree = 0;

direction_degree = ini_yaw – Number(yaw) + default_yaw;
elevation_degree = ini_pitch – Number(pitch);

//canvas要素の回転を実装

}

 


Appendix

canvas要素の実装と回転

var direction_ctx;
var direction_canvas;
var direction_image;
var ini_yaw = 0;

var elevation_ctx;
var elevation_canvas;
var elevation_image;
var ini_pitch = 0;

var default_yaw = 0;//任意に設定(180~-180)

//yaw

function direction_init(){
// canvasのDOM elementとcontext取得
direction_canvas = document.getElementById(“direction_angle”);
if ( ! direction_canvas || ! direction_canvas.getContext ) { return false; }
direction_ctx = direction_canvas.getContext(“2d”);

// direction_canvasの中心座標(center_x,center_y)
var center_x = direction_canvas.width / 2;
var center_y = direction_canvas.height / 2;

// 画像を取得
direction_image = new Image();
direction_image.src = “images/direction_view.png”;
direction_image.onload = function(){
// 画像をdirection_canvasの中央に表示するように左上座標
var lt_x = (direction_canvas.width – direction_image.width) / 2;
var lt_y = (direction_canvas.height – direction_image.height) / 2;
direction_ctx.drawImage(direction_image,lt_x,lt_y);

//
ini_yaw = 180 + 18 – default_yaw;
rotate_direction(ini_yaw);

}
}

//pitch

function elevation_init(){
// canvasのDOM elementとcontext取得
elevation_canvas = document.getElementById(“elevation_angle”);
if ( ! elevation_canvas || ! elevation_canvas.getContext ) { return false; }
elevation_ctx = elevation_canvas.getContext(“2d”);

// elevation_canvasの中心座標(center_x,center_y)
var center_x = elevation_canvas.width / 2;
var center_y = elevation_canvas.height / 2;

// 画像を取得
elevation_image = new Image();
elevation_image.src = “images/elevation_view.png”;
elevation_image.onload = function(){
// 画像をdirection_canvasの中央に表示するように左上座標
var lt_x = (elevation_canvas.width – elevation_image.width) / 2;
var lt_y = (elevation_canvas.height – elevation_image.height) / 2;
elevation_ctx.drawImage(elevation_image,lt_x,lt_y);

//
ini_pitch = 0;
rotate_elevation(ini_pitch);

}
}

//PitchとYawで回転

function rotate_angles(pitch,yaw){

var direction_degree = 0;
var elevation_degree = 0;

direction_degree = ini_yaw – yaw + default_yaw;
elevation_degree = ini_pitch – pitch;

rotate_direction(direction_degree);

rotate_elevation(elevation_degree);

}

function rotate_direction(degree){
var width = direction_canvas.width;
var height = direction_canvas.height;

direction_ctx.save();

direction_ctx.clearRect(0,0,width,height)

// 起点をこれから描画する矩形の中心に移動させる
direction_ctx.translate(width / 2, height / 2);

direction_ctx.rotate(degree * Math.PI / 180);

var _x = -1 * direction_image.width / 2;
var _y = -1 * direction_image.height / 2;

direction_ctx.drawImage(direction_image,_x,_y);

// contextの状態を最初に保存したときに戻す。
direction_ctx.restore();
}

function rotate_elevation(degree){
var width = elevation_canvas.width;
var height = elevation_canvas.height;

elevation_ctx.save();

elevation_ctx.clearRect(0,0,width,height)

// 起点をこれから描画する矩形の中心に移動させる
elevation_ctx.translate(width / 2, height / 2);

elevation_ctx.rotate(degree * Math.PI / 180);

var _x = -1 * elevation_image.width / 2;
var _y = -1 * elevation_image.height / 2;

elevation_ctx.drawImage(elevation_image,_x,_y);

// contextの状態を最初に保存したときに戻す。
elevation_ctx.restore();
}


Next

このページの例の場合、パナスタ行った人しか実感がわかないですよね?

より一般化したページを準備しています。

ご用意しました


 

Be the first to comment

Leave a Reply

Your email address will not be published.


*