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

WebVRで取得可能、シンプル快適 Oculus Go controller

2018/06/10
#megane #vr #js 

2次元のテレビやスマホでは伝わらない、VR/AR/MRのスゴさ。実際体験するしかないですねっ。

アメコミ化しためがね大使まゆちゃん。視界がリアルタイムに変換されて、アメコミの世界にいった感覚になれます。・・・と、いくら書いても伝わらないのがもどかしいところ。


めがねフェスでも人気だった、Oculus Go。 自分で創りたくなるのがものづくり好きの性。シンプルながら操作性抜群の Oculus Go controller をwebアプリで取得する方法を調査。 無事、ボタンと加速度の値が取れました!

const gp = navigator.getGamepads()[0]; const corient = gp.pose.orientation; const pad = gp.buttons[0].pressed; const trigger = gp..buttons[1].pressed;

方向とトリガー、パッド部分が押されたかどうかが取得できます。(戻るキーはVRモードが終了してしまう)
* VRDisplay requestPresent した後のみ有効です


視点移動と合わせたシンプルなサンプルとしてまとめて公開したいと思います。


MRの不思議な世界、お子様たちも興味津々。ようこそプログラマブルワールドへ。


まゆちゃんも体験!


NUAGEのメガネアイス!


NUAGEは、めがねグルメグランプリ、二冠!


次回のめがねフェスではどこまで進化しているか!?


めがね大使まゆちゃんとめがね会館 in アメコミ世界

links
- Oculus Go | Oculus (スマホVRの一段上質のVR体験が23,800円!)

Welcome to Megane World! めがねxIT at めがねフェス2018

2018/06/08
#megane #vr #swift 

Welcome to Megane World! めがねをかけないと損する時代は、もうまもなく!

一足先にスマホMRで体験、見えている人、全員が赤いメガネをかける世界。


6/9-10の2日間はステキなメガネに会える「めがねフェス2018
ステージ、グルメ、ショップ、ワークショップなど、イベント盛りだくさん!隣のめがね会館へもどうぞ!


オススメは800円から買えちゃう、各種スマホVR、ぜひ試着してお気に入りのVRを手に入れてください。
一段上のVR体験、Oculus Go も展示!
発売開始から3分で完売 Oculus Go中国国内モデル、入荷待ちは5万人以上 | Mogura VR - 国内外のVR/AR/MR最新情報


めがねxIT」ブースで体験できるメガネアプリ開発者は鯖江在住の現役高校生プログラマー!
ITの基本、プログラミングを子供も大人も学べる格安パソコン「IchigoJam」の体験コーナーもあります。限定品の販売も!?


めがねのまちさばえ!

links
- めがねフェス2018

任天堂伝説のゲーム機、バーチャルボーイ風をスマホVRとWebVRで手軽に創る

2018/04/23
#vr #web 

2014年、Durovis Diveが教えてくれた、スマホを使って安価に実現するスマホVR。
スマホのスペックが上がり、画面が大きく、残像も少なくなったiPhone Xであの夢にもうチャレンジ!

redrain」WebVR使用、スマホVR用 (base app: ICS MEDIA)
3Dライブラリ three.js で、作りたい空間を作るだけ!
二画面分割して見る方向合わせはライブラリがやってくれます。

1995年、高専1年生の夏に登場し、瞬く間に、専用ゲームが10円ワゴンセールや「ご自由にお持ちください」状態になった、早すぎたVRゲーム機「バーチャルボーイ」(on Wikipedia)


今ではだいぶ市民権を得たが、当時は異様すぎた、没入感抜群の固定式ヘッドセットタイプ。 見える世界は、赤と黒のみのバーチャルな3D空間。多彩な操作方法と、奥行きある斬新な3D表現が楽しかった!(が、一般には受け入れられなかった)


VRゴーグル - otamart
THETAなど、360度動画が多数アップされる中、オタマート公式ショップでのスマホVRの販売開始!
手軽に体験できる千円台、三千円台、五千円台の3ラインナップ。


こちら五千円台、PSVRと同様、ヘッドバンドタイプのVRヘッドセット。後ろのネジを引っ張り、回して締め付け固定。 耳に当たらないので疲れない、スピーカー付き!


イヤホンジャックが格納されてます(Lightningコネクタは付属品ではありません)
フロントカバーを外すことで、外カメラを使ったAR、MRにも対応可能。
ヘッドセット下にあるボタンを押すと、ヒンジを通して画面中央をタップしてくれるので、YouTubeなどの操作が簡単、手軽!


左右レンズの前後と左右を調整できるダイヤルが3つで調整すれば、裸眼視力0.1でもメガネ無しでくっきり見える。

平面では伝わらないVR、体験するとしないとでは大違い。まだの方、ぜひどうぞ!

links
- 必要なのはスマホと1,000円のGoogle Cardboardだけ! WebGLではじめるお手軽VR入門 - ICS MEDIA
- WebVR はじめよう - Qiita
- VRゴーグル - otamart
- RICHO THETAで撮る鯖江の花火360度動画
- 22年前に発売されていた元祖VRゲーム機を楽しむ

楽しい、最強 at 豊田高専。わくわく技術をどんどん使おう! Windows MR x Unity で雪だるま

2017/12/12
#vr #unity #kosen 

高専プロコンで起業家甲子園への挑戦権を手にしたチームのメンタリングと講演で4年ぶり2度目の訪問となった豊田高専

意気込みを表すポーズ(特別アドバイザーに、インターンOBのジョン!)


ものづくり好きですか?
80分もらって講演、結論「楽しい、最強」。10分のQ&Aタイム、コメント.netが活躍!


会場には多量のIchigoJam!今月開催の小学生向けワークショップも大人気とのこと!


名古屋に住んでいた頃が懐かしい、味噌たっぷりなおでん!


豊田は晴天、福井は雪な、典型的な冬でした


Windows MR、富士通バージョンをUnityで使って開発実験。
Create, 3D Object, Sphere を4つ置いただけ、雪がなくてもゆきだるま!


最新版のUnityで、Edit、Project Setting、Player、XR Settings、Virtual Reallity Supported にチェックするだけ!


平面の画面では、全く伝わらないですが、ゴーグルを覗くとそこには等身大のゆきだるま!(右はWindows標準、VRなホーム)
外カメラで空間を認識、HTC ViveのルームスケールVRの如く、しゃがんだり近寄ったり自然にできます。
理想の環境、創り放題!理想の社会、シミュレーションし放題!

Windows MR の標準VRホームを覗く様子を動画にして伝えてみますが、やはり体験してみるのが一番です。

VRを使った認知症判定、雪道の歩道を歩く体験、足元から天井までマルチすぎる画面に囲まれた仕事環境など、「やってみる」の敷居を大きく拡げてくれるVR。10万円くらいのいいパソコンと、5万円くらいのWindows MRで入手可です!(MRといいつつ、今はVRのみ)

THE 9D PROJECT -Experience Innovation- from tao tajima on Vimeo.

育英高専出身の田島太雄さんの映像作品、未来はVRで先取りしちゃいましょう!

links
- Windows MRとは。詳細、ヘッドセットの性能、値段・価格、比較【Windows Mixed Reality】 | VR Inside
- Unity

VR/AR/MRにいい感じな iPhone X! InstaVRでルワンダVRミニツアーコンテンツ作成

2017/11/04
#vr #africa 

VRなコンテンツを簡単に作成できるサービス「InstaVR」で、ルワンダバーチャルツアー!


VR tour to Rwanda on InstaVR」スマホVR対応!

・作り方
InstaVRへ登録
プロジェクトを作成

THETAで撮影した、360度写真をアップロード


リンクを設置


Packageで、Web用として生成


Downloadから、リンクを取得!QRコードですぐに試せます

久々のメジャーバージョンアップな、iPhone X、画面が大きくなって横長になったのでVR/MR向き!
ちょっと広い画角がうれしい!また、残像感が薄く見やすいのが有機ELならでは!

iPhone X を980円 VRヘッドセットにセットした様子。


こちらは、iPhone 7(写真の撮り方がまずくて違いがわかりづらい!)

Bluetoothのコントローラー付きで、1,450円!安い
Anskp 3Dメガネ vr iphone5/6/7 plus 4-6インチのスマホ対応 vr ゴーグル レンズ距離を調整可能 Bluetoothリモコン付き (ホワイト)
iPhone 7 も X もOK、視差調整、距離調整しやすく、視力0.1の裸眼で鮮明に見えるよう調整できました!

ARKitとの組み合わせでMRが手軽に創れるようになると楽しくなりそう!

・iPhone X レビュー(iPhone 7との比較)
Face ID認証後のスワイプを省略したい(Face ID認証は高速で良い)
画面下を下スワイプで「簡易アクセス」が楽、届かないストレス軽減(iOS11.1にして、設定、アクセシビリティ)
でも、コントロールセンターに2アクション必要なのはちょっと面倒
有機ELの綺麗さはVRでよく分かる
スピーカーからの音声もちょっときれい
ちょっと重い、ちょっと大きい(カバー付きのiPhone 7くらい)

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

2017/03/04
#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
#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
#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); } }

流石に広く、テクスチャーも豊富なためか、Core i7+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
#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 Core i7 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にすると多量のパーティクル!さすがCore i7+RX480、びくともしない安定のフレームレート。 床をつけたり、色を変えたり、大きさを変化させたり、リアルなテクスチャーを貼り付けてみたり、プログラミングを全くしないうちから楽しめるUnityでした。

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

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

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

2016/07/05
#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年一日一創)

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