館農 大輝(たての だいき) のすべての投稿

Last

0.チーム8メンバー

R4A1:樋口 幸亮
M2A1:澤口 拓朗
M2A1:関水 悠大
M2A1:館農 大輝

1.取り組んだ内容

私たちチーム8は、
Webに関する最新技術の研究を取り組みました。
途中キャンプしてました。
最終的に取り組んだものは、WebVRになりました。

WebVRとは、ブラウザ上を疑似的に円形の空間を作り、
サイトを360°見渡せるようにする技術のことです。

特に、携帯端末(スマートフォンなど)を使うと、
ジャイロ機能も使えてより、臨場感溢れる体験ができます。

2.よくできたところ

一番は、VRページを作れたこと。

最初は、↓のような感じを作ろうと頑張ってました。

まず、縦を再現して…

奥行を再現して…

結果、使いませんでした☆

一応、ゲーム専攻でしたので三次元は多少知識があったため、
完成できたのではないでしょうか。
まぁ、3Dゲーム作ってないけど

3.うまくいかなかったところ

2点ありまして、
まず、↓の画像の赤線内を再現できなかったこと

そして、携帯端末でVRモードにしたまま
ページ遷移をするとVRモードが解除されること
(↓VRモード)

1つ目の赤線内に関しては、技術をそもそも勘違いしてました。
VRは基本ハンドフリーでの操作を想定しているため、
注視点カーソルしかありませんし、
イベントハンドラーも基本的に注視点カーソルでの発火しか
ありませんでした。

1つ目の件で、ストリートビューとVRの違いを体感し、
VRの操作性に関しては幅の狭さを感じました。

2つ目のVRモードに関しては、ページを遷移ではなく、
オブジェクトをスクリプトで削除・追加をする場合だと、
VRモードは解除されない(1つのページで完結させる)のですが、
あまりにも汚いコードになるのと、
処理速度の関係上断念しました。

4.卒業研究の感想

思ったよりも簡単だったこと。
卒業研究開始から1週間程で最終成果物がほぼできてたので…。
苦労した点は、ドキュメントが英語だったのと、
参考サイトが皆無だったくらいで、
A-Frameには本当に助けられました。

後、チームメンバーにも助けられました。
関水が画像の加工をしてくれました。
澤口がサイトを作ってくれました。
樋口さんがまとめてくれたり、
プレゼンテーションをしてくれたり、
ポンデリング食べてくれました。

役割分担がしっかりできた点も良かったと思います。

余った時間は、Javaでサーバ作ってたり、
Progateしてたり、CodeSprintでSランク取ったり、
スキルアップしてました。

5.書いた人がなんとなーく特定できる情報

投稿者名を見てね♡

6.成果物

本体:HCS校案内/VR
おまけ:VR迷路(携帯端末推奨)

チーム8 活動報告

〇本日の活動

1.サイトに乗っける予定のプロフィール画像の提供

各々、素材を出しあいました。

2.FTPソフトの接続テスト

用意してもらったサーバへ試しに接続しようとしたところ、
ドメインが見つかりませんでした。
恐らく準備中だと思うので、暫くしたら再度試してみます。

【追記 19/01/22】
サーバへ接続出来ました。
URL:HCS校案内/VR

3.サイト作成

澤口氏が鋭意制作中です。
長らく悩んでいたバグについては、
原因を特定出来たみたいです。

4.ポスター作成

templateを埋める作業。

チーム8 活動報告

〇本日の活動

1.A-Frame研究

KCSのキャンパスツアーの下部分を
再現するために情報の収集を行いました。
KCSの使っているのがkrpanoというパノラマビューで、
パクれないリスペクトできないので、
球状に画像を配置した際の経験を活かして、
下部分を再現したいと思います。
後は、イベントと座標計算だけですが、
必要なイベントが公式のドキュメントに載っていないので、
苦労しています。
a-frameが開発途中みたいですので、
最悪イベントが存在しない可能性もあります。
その際には、three.jsで代用できないか試してみます。
それでも無理そうならパクります。

(赤い枠線内を再現しようとしています)

チーム8 活動報告

〇本日の活動

1.サイトの作成

澤口氏が鋭意作成しています。
来週の金曜日にサイトが完成する予定です。

2.サイトとスクリプトの組み合わせ

球状に画像を配置するスクリプトと、
制作途中のサイトの組み合わせを行いました。
特にバグは発生しなかったので、
後は素材とリンクを整えるだけでVR要素は一通り完成します。

(画像をクリックする動きます – 原色版)

(画像をクリックする動きます – いらすとや版)

※画像が左右逆なのは既に修正済みです。

〇今後の予定

そろそろ無人の教室を撮影したいです。

チーム8 活動報告

〇本日の活動

1.今後の写真撮影をどうするのか

360°カメラの代替え案として、
Googleストリートビューアプリの機能に
スマートフォンのカメラを使って360°写真を
撮ることができることを知り、
今後の写真撮影ではこの機能を使って撮影を
していく方針に固まりました。

試しに撮影してわかったこと
1.人が多いと写真にずれが生じやすい。
2.手振れが生じると写真もずれる。
3.撮った写真を360°の写真に変換するのは
すべて自動で行われるため微修正ができない。
4.アプリで撮った写真でも今までのコードで
問題なく動くこと。

以上のことから、撮影班は今までよりも
活動する時間や撮り直しの発生など
負担が大きくなりました。

(Googleストリートビューで撮った360°写真)

2.サイトのコーディング

サイトは画像のように自分を中心に
360°円状に記事を配置するタイプになりました。

(画像をクリックすると動きます)

既に注視ポインターと画面遷移、
スクリプトによるオブジェクトの作成はできるため、
今後のコーディングは、
座標計算と角度計算をするスクリプトを作ります。

スクリプトを作る前に考慮しなければならないのが、
記事のアニメーションと大きさです。

記事には少しアニメーションが付与されており、
多少上下に動くのでその動きと記事の大きさを
計算式に組み込まなければ、記事と記事が重なり合い、
行きたいページに飛べなくなります。
ですので、それらを意識してスクリプトを作っていきます。