create every day - 福野泰介の一日一創

Let's build our town! Virtual Sabae Project Started at IODD2017!

2017/03/04 23:55:00
#IODD2017 #opendata #vr #english 

We've start to build a virtual Sabae city at 5th International Open Data Day in Fukui.
Sabae city has a base 3D open data powered by JM. (3D open data & VR / Oculus)

"Let's play in our town! IODD2017 / 鯖江みんなでまちあそび@インターナショナルオープンデータデイ2017"


We separated 4 data gathering teams and 1 data making team.


I was a member of the data making team.

We make textures of buildings on a 3D modeling tool "SketchUp" using data posted from gathering teams!
"bulidings photo on Facebook event page"


Nishiyama-store at Sabae city with new textures!


Discussion about new ideas using the 3D open data of virtual Sabae city.


You can become a giant fireman to protect from fires Sabae city!


3D open data of Sabae city (modified 2017.3.4) DOWNLOAD here!
original model CC BY Sabae city powered by JM and the map by Geospatial Information Authority of Japan

links
- 鯖江みんなでまちあそび@インターナショナルオープンデータデイ2017
- International Open Data Day 2017

鯖江の街をドローンで飛ぶVR

2016/10/27 23:55:00
#vr #sabae #opendata #unity 

開発環境Unityがスゴイ!

鯖江上空の空中散歩、近年のスタンダードなゲームコントローラー、アナログ2軸を使ってドローン風にして飛んでみました。 影処理をオフにしたり、見える範囲を調整するとフレームレートは大きく向上して、VRでもスムーズな描画になりました。


(鯖江の商店街中心地をドローンで飛ぶシミュレーション中 using Oculus DK2)

プログラムは非常にシンプル!
地面や建物に当たり判定をつけると、ちゃんとぶつかって落ちるところを自動でシミュレートしてくれます。
(Inputの設定で、2軸目をVertical2/Horizontal2として設定)

using UnityEngine; using System.Collections; public class Player : MonoBehaviour { Rigidbody rg; void Start () { rg = GetComponent(); } void Update () { float z = Input.GetAxis("Vertical"); float dir = Input.GetAxis("Horizontal"); float x = Input.GetAxis("Vertical2"); float y = Input.GetAxis("Horizontal2"); rg.AddForce(transform.up * z * -10.0f); rg.AddRelativeTorque(new Vector3(x * -0.01f, dir * 0.3f, y * -0.01f)); } }

とっても簡単、カスタマイズ自在!

VRだけでなく、iOSやAndroid向けや、PS4やXBoxなどのゲーム機用の開発環境としても使われるソフトが小規模利用、個人利用だと完全無料。 プログラミングできる子供にとって本当に天国のような環境です。

第5回こどもプロコン、表彰式は今週末!
Unityのスゴさを見たい人もぜひどうぞ。
PCNこどもプロコン2016夏 | PCN プログラミング クラブ ネットワーク

VRで鯖江上空を散歩するプログラムを3DオープンデータとUnityで作る方法、VR酔いとARな未来

2016/10/18 23:55:00
#sabae #vr #unity #opendata 

チェックボックス一つでVRを実現してくれるUnity株式会社JM提供の鯖江市の3Dオープンデータを使って、鯖江の街を散歩するアプリもあっという間にできました。 前後左右上下に移動しながら、Oculus DK2を使って360度ぐるぐる街を見渡せます。

作り方はとっても簡単。鯖江市のオープンデータカタログサイトから「3D商店街データ」をダウンロード。zipファイルを展開したskpファイル(3DモデリングソフトSketchUpのファイル)をUnityのAssetにいれるとインポートがはじまり、終わると現れる鯖江の街! 前回同様VRにチェックするだけでその場で見渡せます。

歩きまわってみましょう。球体(Sphere)を自分キャラとして登場させて、カメラ(MainCamera)をドラグ&ドロップで級の子要素にして位置を調整。 AssetでC# Script、Player をつくり、球体にアタッチ、下記のように動きを書いたら完成!

using UnityEngine; using System.Collections; public class Player : MonoBehaviour { void Start () { } void Update () { float x = Input.GetAxisRaw("Horizontal"); float z = Input.GetAxisRaw("Vertical"); float y = 0; if (Input.GetKey(KeyCode.H)) { y = 1; } else if (Input.GetKey(KeyCode.J)) { y = -1; } Rigidbody rb = GetComponent(); rb.AddRelativeForce(rb.transform.forward * z * 8); rb.AddRelativeForce(rb.transform.up * y * 8); rb.AddRelativeTorque(new Vector3(0, x, 0).normalized * 0.5f); } }

流石に広く、テクスチャーも豊富なためか、Corei7+RX480ではフレームレートは30を切ってガクガクすることがあります。 激しく動かしすぎたり、慣性でぐるぐる回っていると酔って来ました。高専1年生の頃、Pentium90MHzを買って体験した3Dゲーム「DOOM」で以来の懐かしい感覚。


試しにガクガクしない、シンプルな3D迷路空間をつくって、走り回ってみたところ、酔いそう感はだいぶ抑えられました。 今では普通の3Dゲームで酔うことはないので、同様に人間側の慣れとコンピューター側のスペックや、作り方の問題かもしれません。

視界は動くのに自分の体が動かないズレの問題は思った以上に大きいので、HTC Viveは一定の空間内でルームスケールVRに力をいれているのでしょう(Oculusも近日対応とのこと)。 3Dゲームは今でも苦手な人がいるように、VRはより人を選ぶ可能性が大きいです。やはり本命へAR=電脳メガネ。VRで電脳メガネの世界をシミュレーションしておきましょう!

11/12の電脳メガネサミット、最新AR/VR体験コーナーに持っていきます!
電脳メガネサミットでは、電脳メガネアイデア募集中。眼鏡の未来に興味ある方、せっかくなら見るだけでなく、体験、自ら創る側へどうぞ!

電脳メガネコンテスト2016 賞金10万円 電脳メガネも副賞に!? 締め切り10月31日


電脳メガネサミット2016 11月12日13時 鯖江市 嚮陽会館にて開催
内容:パネルディスカッション&電脳メガネコンテスト決勝プレゼン大会
パネリスト:鯖江市長、ボストンクラブ小松原氏、NECパーソナル森部氏、SAPジャパン吉越氏、セイコーエプソン津田氏、Vuzix藤井氏、テレパシージャパン鈴木氏、jig.jp 福野
主催:鯖江市
企画運営:NPO法人エル・コミュニティ
協力:セイコーエプソン株式会社 VUFINE さばえNPOサポート 株式会社エムディエス

Unity x Oculus DK2、VRプログラムはじめのいっぽ、吹き出し花火VR

2016/10/15 23:55:00
#vr #unity 

3万円台という低価格VRで世界中で話題となり、Facebookによる買収、PSVR発表をはじめ、VRの火付け役とも言える、Oculus DK2。 鯖江商店街3Dデータや、THETAによる360度写真など、VRで手軽に電脳メガネによるARの実験ができる素材が揃ってきたので、ひさしぶりにWindowsマシンを調達し、Unity x Oculus DK2 実験!


吹き出し花火VRが動いている様子。製作時間、Unityでわずか1分!
ウェアラブルと同様、写真では伝わらないVRのおもしろさ。

Windows 10 64bit Home、グラフィックボード(GPU)は AMD Radeon RX480 VRAM8GB、CPUは Intel Corei7 6700 という構成。 GPUのRX480なんと、5.8TFLOPS(1秒に5.6兆回計算!)、たった1800台でスパコン京に匹敵。

DK2用のドライバは、正式対応ではないものの、製品版のOculus RiftのものでOK! XBOX Oneなど、純正コントローラーがなくてもHomeUnhiderというツールを使えばなんとかなりそうです。 フレームレートは75Hz、PSVRよりちょっと解像度が低い1920x1080という一世代前の開発機 Oculus DK2 ですが、十分な没入感を楽しめます!


無料で使える Unity Personal の最新版はなぜか動かなかったので、ちょっと古いver5.3を使用。 Game ObjectからParticle Systemを選んで設置、右側のInspectorでいろいろ調整できますが、とりあえず、Max Particles(最大5万の様子)と、EmissionのRateを増やすと吹き出し花火のできあがり!


なんとVR対応はチェックボックス1つ。メニューEdit、Project Setting、Playerで右に開くInspector、Web PlayerではなくStand aloneにタブの「Virtual Reality Supported」をチェックするだけ! 再生ボタンを押して、Oculusを被ればそこはVR花火会場!


EmissionのRateを5000にすると多量のパーティクル!さすがCorei7+RX480、びくともしない安定のフレームレート。 床をつけたり、色を変えたり、大きさを変化させたり、リアルなテクスチャーを貼り付けてみたり、プログラミングを全くしないうちから楽しめるUnityでした。

VRなら夢のARも思いのまま!
やってみたいアイデア、ぜひ電脳メガネコンテストへ応募ください!

VineによるUnityでつくって、Oculusで見るまで動画。

新しくなった「鯖江公民館」VR写真オープンデータでバーチャル内覧 by THETA S

2016/07/05 23:55:00
#theta #vr 

福井県システム工業会のオープンデータ委員会、今年の勉強会は舞台を鯖江に新しいオープンデータを使った楽しいイベントを企画中。 せっかくなので、新しくなった鯖江公民館を使えないかと360度カメラ「THETA S」と共に内覧、VR写真オープンデータを作成!


VR写真一覧(全球写真、全天写真)
1. 外観、 2. 1Fエントランス、 3. 会議室1、 4. 調理実習室、 5. 2Fロビー、 6. 図書・交流サロン、 7. 多目的ルーム、 8. 会議室2-3、 9. 会議室4、 10. 和室1-2、 11. 3Fロビー、 12. 会議室5、 13. 会議室6、 14. 大ホール
※クリックで各写真へ飛ぶ、スマホ/OculusなどのVRビュー対応

鯖江公民館使用料一覧(円)2016.7.5調べ


鯖江公民館2F 会議室2-3を連結した様子(普通の写真)


料金表と館内マップ


使用済み小型家電の回収BOXとインクカートリッジの回収箱が設置されていました
- 小型家電回収マップ
- インク里帰りマップ(2012年一日一創)

VR panorama viewer for Oculus/THETA using A-Frame

2016/07/03 23:55:00
#vr #js #ruby #theta 

OculusでWebVRがうまくいったので、RICHO THETAで撮った全球写真(360度写真)&全球動画(360度動画)のビューワーをつくってみました。


カーソルの左右で写真または動画を送れます。臨場感抜群すぎて、酔ってしまうほど。


ハコスコなど、スマホでもそこそこ見られるかもしれませんが、ぜひOculusでも体感ください!

- 使い方 for Mac
THETAで撮った写真や動画をパソコンにいれる(動画はコンバートしておく)
panorama viewer packをダウンロードして同じディレクトリに置く
コンソールで「ruby makelist.rb > list.js」を実行(ファイルの生成順に並んだ list.js ができる)
Oculusをつなぐ(設定方法)
panoramaviewer.html を、FirefoxNightly で開く
VRモードに切り替える
カーソル左右でシーン切り替え(上で一番最初に戻る)

A-Frameのa-videoshere機能を使っただけで簡単にできました!
ファイル名変換用に初のRuby使用!
※Macに標準でランタイムが入っているため配布して使ってもらいやすい!?

print "var list = [" f = Dir.entries(".") f.sort! do |a, b| File.stat(a).mtime <=> File.stat(b).mtime end f.each do |name| if name.end_with?(".JPG") || name.end_with?(".jpg") || name.end_with?(".MP4") || name.end_with?(".mp4") p name print "," end end print "];"

RubyはIchigoJam BASICと同じインタプリタ型のプログラミング言語、こういうファイル操作などのプログラムをパパっとつくるのにいい感じです!

WebVR x Oculusで仮想体験する巨大jig.jpロゴ

2016/07/02 23:55:00
#vr #js 

Interopで知ったWebVR実験。巨大jig.jpロゴを体感してみました。

(ディスプレイでは全くつわたらない、VRで見る巨大jig.jpロゴ)

使ったもの
- MacBook Pro
- Oculus DK2
- Oculus Runtime for OS X
- Firefox Nightly
- Mozilla WebVR Plus 0.5.0
- A-Frame

デモ手順
- Oculus DK2 のUSBとHDMIをMacBook Proに接続(今回はディスプレイのみ使用)
- システム環境設定、ディスプレイで、Rift DK2の回転を90°、リフレッシュレートを60ヘルツに設定

(ウィンドウを集める、を使うといい)
- Firefox Nightly で、jigロゴBIGを開く
- 右下のVRボタンを押す
- 見渡して巨大ロゴを体感する(今は動けません、見渡せるだけです)

今回使ったのは、WebVRを簡単に使えるフレームワーク「A-Frame

<a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>

A-Frameのはじめのいっぽ(Hello World!)は、こんな感じ。タグをHTML内に書けば、WebVRで見渡せます。positionは、プラスで右にいくx、プラス方向で上にいくy、プラス方向で手前にくるzを指定。

ひとまず以前つくったWebGLでつくったjig.jpロゴ生成プログラムを流用して、A-Frame用のタグを生成して、つくったものが巨大ロゴデモです。
楽しい!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / high-res profile image