1. mechamogera

    No comment

    mechamogera
Changes in body
Source | HTML | Preview
@@ -1,61 +1,62 @@
RICOH THETA SのDualfisheye動画(変換前の動画)をThree.jsで表示してみた。
計算とか教えてもらいながら自分なりに考えて実装したのでおかしいところがあるかもしれないが忘れないようにメモしておく(計算難しい)。
ソースコード:https://gist.github.com/mechamogera/5635338a1075baadba0b
動作サンプル:http://bl.ocks.org/mechamogera/5635338a1075baadba0b
+(2016/01/25追記 コミットミスってソースコード & 動作サンプルぶっ壊してました、修復しました)
上のコードだとmp4動画を視聴しているが、WebRTCで取得したTHETAのライブストリーミング画像でもちゃんと表示できた。
# コード解説
## 概要
基本は[初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> | HTML5Experts.jp](https://html5experts.jp/yomotsu/5225/)を参照してThree.jsで実装。
構成は以下のようにしている。
* three.min.js:Three.jsのメイン処理を行う取得してきたファイル
* OrbitControls.js:Three.jsでマウスをグリグリするための取得してきたファイル
* index.html:Dualfisheye動画を見るために作成したHTML
* theta-view.js:Dualfisheye動画を見るために作成したJS
* m20.mp4:表示するためのDualfisheyeサンプル動画
球を作成してカメラを内部に配置してvideoタグをソースにした動画テクスチャをごにょごにょして貼り付けて表示している。
## テクスチャを貼る
theta-view.jsで以下の部分がUVを設定している部分。
```js
if (i < faceVertexUvs.length / 2) {
var correction = (x == 0 && z == 0) ? 1 : (Math.acos(y) / Math.sqrt(x * x + z * z)) * (2 / Math.PI);
uvs[ j ].x = x * (404 / 1920) * correction + (447 / 1920);
uvs[ j ].y = z * (404 / 1080) * correction + (582 / 1080);
} else {
var correction = ( x == 0 && z == 0) ? 1 : (Math.acos(-y) / Math.sqrt(x * x + z * z)) * (2 / Math.PI);
uvs[ j ].x = -1 * x * (404 / 1920) * correction + (1460 / 1920);
uvs[ j ].y = z * (404 / 1080) * correction + (582 / 1080);
}
```
404や447のマジックナンバーは以下のサイズに対応する。
ただし、正確に測ったりしていないのでざっくりとした値。
![Dualfisheyeの配置(1).png](https://qiita-image-store.s3.amazonaws.com/0/16768/8f0bba63-8720-3bb2-9825-491963635df3.png)
ベースとなるコードは以下の質問の回答にある[こちら](http://jsfiddle.net/zD2rH/5/)のコードを参考にしている。
[javascript - Mapping image onto a sphere in Three.js - Stack Overflow](http://stackoverflow.com/questions/21663923/mapping-image-onto-a-sphere-in-three-js)
```js
faceVertexUvs[ face ][ j ].x = face.vertexNormals[ j ].x * 0.5 + 0.5;
faceVertexUvs[ face ][ j ].y = face.vertexNormals[ j ].y * 0.5 + 0.5;
```
ただし、上のコードのままだと画像が歪む。
![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/16768/01cf6d32-6fe9-ca9c-337f-bbe67cd78947.png)
そのため以下のように計算して補正している。
![補正計算(1).png](https://qiita-image-store.s3.amazonaws.com/0/16768/31336a6a-0544-e561-b445-2d188007ed68.png)