技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

事務所を仮想空間にしてみたい!

2017-12-07 勉強会
最近、事務所のサークル空間を通る度に、「何か有効活用できないか?」
「何か面白そうなことができないのか?」と妄想にふけてしまうこの頃です。

例えば、椅子取りゲーム」「フルーツバスケット」「メリーゴーランド」「VR試写」「eスポーツ」「ミラーボール」「ミニドローンの練習所」「仮想空間」「プラネタリウム」など。。

と妄想はあるのですが、試す勇気がありません。
(実は、ちょっと試したことはあるのですが、ここに載せるわけには・・・)

そこで今回は、「事務所を仮想空間するとしたら!」をテーマにしました。
まるで前前回、前回チームの意思を引き継いだかのような作品を目指そうと試みました。(パクリともいう)

そんなかんなですが、まずは、札幌事務所のレイアウト図をご覧ください。

2つのサークル空間が気になりませんか?

※前前回チームより素材提供

次にサークル空間を撮影してみました。

この画像はパノラマモードで撮影しました。
いい感じです。(自己満足!)

エントランスだけにしとくのは、惜しい気がします。
考えても何かモヤモヤします。
ひらめきそうで、ひらめかない。

そこで、事務所を歩いてみた。



これをARに出来たら?

そして踊ってみた!



ミラーボールを設置できたら・・特に意味はないです。


サークル空間を360°で表現できたら・・

エントランス - Spherical Image - RICOH THETA



360度VRカメラで撮影してみました。
ん~仮想空間っぽくなってきました。

イベントルーム - イベントルーム





なんとなく臨場感がでてきました!

会社のコーポレートサイトで使っている事務所(東京)をバーチャルツアー化した画像(アプリ?)に近づいてきたような気がします。

今回使用した360度カメラは、市販で販売しているRICOH THETA SCで撮影しました。
ベーシックモデルでも、十分使えると思いました。
また、360度画像をバーチャル化も、専用アプリがあり、非常に便利でした。
誰でも簡単に、編集そして共有ができてしまうことに驚きました。

RICOH THETA
https://theta360.com/ja/

RICOH THETA 編集アプリ
https://theta360.com/ja/about/application/


※フリーでも360度化するアプリは存在します。

フリー版バーチャルツアーソフト(Tourweaver)
http://www.easypano.com/jp/virtual-tour-software-free.html

インストールは英語版なので、少し分かりづらいですがすぐに使えます(詳細は略します。)

※所感:画質が今一つですが、フリーなら十分かと。

この360°画像とレイアウト図を掛け合わせて表現できたら・・・

と考えました。

ここは、懐かしのFLASHだったら実現できるかも?

とりあえず、試してみました。

事務所の仮想空間

完成品のリンクはこちら↓↓↓↓↓↓↓↓↓↓↓↓↓
「 事務所の仮想空間 」


スタートをクリックすると、仮想の事務所内を歩きまわることができます。
そして、モニターらしきアイコンに近づくと・・・
画像が開く仕組みとなっております。(別ウインド)

ただ、SWFはiphoneで閲覧できないのが欠点。

そして、今、HTML5の時代。
SWFファイルが利用できなくなるまで、あと3年。
一世を風靡したFLASHの時代が終わろうとしています。

「でも大丈夫! google SwiffyでHTML5へ自動変換すればなんてことはない!」
と考えていたのですが、いつの間にか変換サービスが終了していました。
他にもサービスはあるはずと探したのですが、無料サービスが見当たらない。・・困りましたが、「GitHub」で配布しているスクリプト「swf2js」に出会うことができました。

https://github.com/ienaga/swf2js

「swf2js」
※swfをJavaScriptで直接バイナリ分解してcanvasに出力するらしい。

HTML5版テストの結果は、成功したかに見えたが・・・・

早速、スクリプトをダウンロードしHTMLに組み込んでみました。
変換はできたのですが、やはり完全ではない。
HitTest() メソッドが動かない。ここが今回の肝なのに。。時間がなく残念な結果となりました。

テストページはこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓
「 事務所の仮想空間 HTML5版 」
動作はPCのみ。

まとめ

「事務所を仮想空間にしてみたい!」に至るまで、どうやって表現したらいいか悩みました。
今回は、動画で表現したら面白いのではないか?と試行錯誤。
ドローン(飛行、走るタイプ)で撮影してみたが、なんだかよくわからない絵になり、失敗。
プロジェクター用の大画面で、ゲームをしたら、臨場感が凄いのではないかと
思い試したのですが、動画にするとただのテレビゲーム等・・・・悪銭苦闘。

これに何か意味あるのかと問われると...「ありません。」
「試みることに意味がある。」と...自問自答しました。


収穫は、
・360°パノラマ撮影は、誰でも気軽にで撮影できること。
・youtube Instagram等へ気軽に公開できること。
・写真の表現もリトルプラネットなど多彩。

もちろん、WEB制作でも即戦力で使えそうと分かったので、取り入れたいです。
商用でも使える自前の変換アプリがあればと思いました。

また、Adobe AnimateCCは ActionScript3をhtml5へコンバートする機能があるようです。
swfをHTML5に変換できる無料サービスは、ほぼ全滅してしまったこともわかりましたので
これを機にAnimateCCでHTML5 JS に触れてみようと思いました。
ただ64bitのPCでないと動作しないこともわかり、PCを買い替えたくなりました。

ご清聴いただき有難うございました。

<今回の開発ツール/機器>

RICOH THETA SC スタンダードモデル
https://theta360.com/ja/about/theta/sc.html

THETA アプリ
https://theta360.com/ja/about/application/

フリー版バーチャルツアーソフト(Tourweaver)
http://www.easypano.com/jp/virtual-tour-software-free.html

Adobe FLASH CS6 / Photoshop CC / Illustrator CC
https://www.adobe.com/jp/

「swf2js」
https://github.com/ienaga/swf2js
記事一覧へ

Member

システム部開発ユニット
システム部SIユニット
クリエイティブ戦略部デザインユニット
クリエイティブ戦略部プランニングユニット
管理部