2018-12-25

xR勉強会 #3 xR Developers Japan 年末ハッカソン2018イベントダイジェストレポート

イベント

今回は年末スペシャルでワイド版のハッカソンを開きましたよ^^ 色々な作品が登場、参加者みんなで楽しんで開発できました^^

今回のイベント概要

xrdevja.connpass.com

今後も当面Compassでイベント企画は案内しますので、是非コミュニティご参加くださいませ^^

経過

9:00到着。設営開始。

今回はこちら。三鷹駅北口から徒歩1分の、普段は囲碁教室をやられているお部屋をお借りしました^^

f:id:k_mawa:20181225222511j:plain

三階ですね。どれどれ・・・ f:id:k_mawa:20181225222808j:plain

f:id:k_mawa:20181225222618j:plain

おお！落ち着きの空間。床も模様があって、AR認識が捗りそうなのもいいですね^^

10:30開発開始

と、いうわけで10時前後に数名いらっしゃいました^^ さっそく開発開始です・・・ f:id:k_mawa:20181225232155j:plain

今日はVR技術者認定試験と重なっていたため試験後にもいらっしゃる方もいます。試験について気になる方はこちら、とりトカシュさんご提供の記事です( とりカシュ (@torikasyu) | Twitter )

torikasyu.com

川越さんは今日はBlenderチャレンジ2回目です。 f:id:k_mawa:20181225224155j:plain

このハッカソン前に、ティーカップを作るチャレンジをしてから万全の態勢でのチャレンジです！

qiita.com

本日も島根の仙人こと、トドネロさん( トドネロ (@x282665) | Twitter ) も参加されてます。Blenderについてサポートしていただきました。今回もありがとうございましたm( )m

東京と島根でDiscordで画面共有しながらモデリングチームが動き始めました・・・

f:id:k_mawa:20181225224220j:plain

スライムを作っているようです・・・

Discordは電話中に画面共有ができるのが便利ですね。Skypeだと1人分しか共有できないのですが、Discordは通話者全員画面共有が可能なのが長所です。

HoloLens体験中・・・　HoloLens初めて触るなら、ということでグラフィックもきれいでHoloLensの特性も十分理解できるゲームアプリ、「RoboRoid」をおすすめしました・・・ f:id:k_mawa:20181225232238j:plain

女性参加者さんもチャレンジ！AirTapとブルーム、最初はなんかコツがつかみにくい・・・私もそうでした。だんだんスムーズにセンサーに届くサインになっていきました^^ f:id:k_mawa:20181225224519j:plain

Oculus Go ビルドチェック中。。。 f:id:k_mawa:20181225232405j:plain

今日はなんと10時間！企画したときは、時間カウント適当にしていたので、いざスケジュール見ると、「おお！10時間PCに向かうのか・・・」という笑　参加者の皆様、超集中で、あっという間に20時に・・・

成果発表会！

お待ちかねの成果発表の時間です^^

f:id:k_mawa:20181225225229j:plain

自分の作ったものを見せた時の反応・そして、ほかの方の作品も楽しみな時間です^^

ときには島根のトドネロさんにも見えるようにWebカム経由で紹介・・・　なんかスムーズにしたいものですが、ARって機材経由の挙動も共有するので、なんかうまい方法考えたいです・・・ f:id:k_mawa:20181225225036j:plain

ARCoreチュートリアルを2点

自分（ mawa (@k_mawa82) | Twitter ）です。今日はAndroid スマホを持ってきていたのでARCoreのチュートリアルがんばりましたよ^^

タップでキューブが出るチュートリアル完了～(^-^)/ #ARCore #ar #xr #xrdevja pic.twitter.com/rIkepK7p8P
— mawa (@k_mawa82) 2018年12月22日

サンタAR! タップした場所にサンタが来る(^-^) #ARCore #ar #unity #xrdevja pic.twitter.com/qo4YJORHV4
— mawa (@k_mawa82) 2018年12月22日

この2点ですね。写真を一緒に撮れるボタンを実装しようとして時間切れ・・・こんど実装してみよう・・・

利用した書籍です。とても勉強になります。

ARCoreとUnityではじめるARアプリ開発

作者: 薬師寺国安
出版社/メーカー: 秀和システム
発売日: 2018/03/08
メディア: 単行本
この商品を含むブログを見る

『ピンボールゲーム』

床（ Plane）の配置しかしたことない状態からの参加でピンボールができちゃいました！すごい^^ f:id:k_mawa:20181225225737j:plain

『箱庭』

はじめてUnityに挑戦された方です。モデルをうまく配置して、箱庭のお家ができました！！ f:id:k_mawa:20181225225906j:plain

『玉転がしギミック』

外部の転載不可チュートリアルでしたので発表風景だけですが、ゲームオブジェクトを駆使してできた作品です。再生すると、ピタゴラスイッチのように玉転がしギミックが発動するという仕組みを発表いただきました！普段はRails や React をよく使うそうです。私もそうですが、サーバー通信が絡むとUnityもWebAPIを叩くフロントエンド的に側面を持つことになるので、Webエンジニアリング界隈の方がゲームエンジンに取り組む事例は今後増えてきそうですね^^ f:id:k_mawa:20181225230056j:plain

『FirstVRを活用したクリスマス連動エクササイズゲーム』

FirstVRというガジェットを利用したARゲームを披露いただきました。力作！！！色々なセンシング機器が出てるのだなぁと勉強になりました。

xR 1Dayハッカソンで作ったもの。
次のハッカソンではFirstVRのジェスチャー識別を入れたアプリを作りたい。早く使い方に慣れてFirstVRでリハビリのアプリを作っていきたい。#xrdevja pic.twitter.com/4Kt6N3W39e
— Kei_XR@Unity勉強中 (@Kei_XR2018) 2018年12月22日

kurosanさん　『VR迷路探検アプリ』

f:id:k_mawa:20181225231216j:plain

エリアごとの壁面に色を付けた迷路風普ダンジョンを、OculusGoでVRで移動できます。VR酔いしにくいとされるテレポート式の移動を実装されていて、新鮮でした。

後日実装参考資料いただきました、こちらです。 qiita.com

発表時に試させてもらえました^^

f:id:k_mawa:20181225231514j:plain

やはりVRは楽しいです。ワクワク度が高いです。

川越さん　『スライム』『タリーズ カップ』

本ハッカソン前は表面のデザインがないカップだったのが、見事タリーズのロゴがプリントされたものができました！ f:id:k_mawa:20181225225354j:plain

スライムもしっかり　スライムと一目でわかる仕上がりです^^ f:id:k_mawa:20181225225326j:plain

トドネロさん( トドネロ (@x282665) | Twitter ) 　『プレゼント』

季節感のあるプレゼントのモデルができてました！綺麗ですね! f:id:k_mawa:20181225225537j:plain

boothで販売中とのことです！速い・・・^^/

クリスマス！！

ってことでプレゼント箱のモデルをBoothで配布します！
蓋の開閉のシェイプキーもついているのでいろいろ使えますよ！！https://t.co/fiNwFrZ0Av
— トドネロ (@x282665) 2018年12月24日

感想

年末らしい、本コミュニティにとっては大型のイベントでした。10人以下だと落ち着いて和気あいあいとできるのはメリットだなって思いました。あと質疑もしやすいので情報共有もはかどりますね^^

毎回そうですが、自分の知らない情報が入るのは本当に助かります^^

次回はまた来年ですね、企画しようと思います。

mawa ( https://twitter.com/k_mawa82 )

コミュニティ参加者募集中！

初心者の方も大歓迎です^^/ お気軽に切磋琢磨しましょう^^/

xR Development Japanのスラックアカウントにご関心あれば下記の記事下部のフォームから参加いただけます。 https://goo.gl/forms/gwUzHQuL1x1ulA0c2

Discordアカウントもつくりました。お気軽に参加ください^^ https://discord.gg/r9TzPmx

今回のイベントについても意見交換などしています。

2018-12-21

チュートリアル:OculusGo VRビーチを作る

Unity VR OculusGo 参考資料 C# チュートリアル

f:id:k_mawa:20181221202401p:plain

概要

Oculus GoのでVRビーチを探検できるチュートリアルです。

デモ

OculusGoで見た景色。こんな感じです。これは沖縄の海辺の動画なのですが、あたかも旅行に来たかのような体験が楽しめます。コントローラーで、ビーチ内を移動もできます。

実装概要

下記のような感じです。オブジェクトも4個しかなく、シンプルな2Dゲームを作ることと比較しても、構造はとてもシンプルです。

f:id:k_mawa:20181221202919p:plain

手順

1:素材を用意する。

360度動画というものが必要です。今回はこちらの動画配布サイトを利用いたしました。今回の実験にピッタリです。

360度VR動画・画像のフリー素材が無料ダウンロード可能 360あーる・てぃー・しー 360度VR動画・画像のフリー素材が無料ダウンロード可能 - 360あーる・てぃー・しー

このうち、この動画がきれいだなと思ったので、ダウンロードしました。

沖縄県読谷村宇座海岸青い空と青い海、これぞ沖縄の海という雰囲気が感じられる沖縄県読谷村宇座海岸 No.1- 【360度VR動画・画像のフリー素材】360あーる・てぃー・しー

自分で撮ることもできます。

360度天球動画の録画できる機材が必要です。最近の有名どころだとリコーのシータですね。一番安いグレードだと、2万円台から手に入ります。紹介動画を引用しておきます。

なお、シータで撮影した動画をUnityで扱うまでの流れで参考になる記事がありましたので、こちらもご紹介します。

vrinside.jp

2:Unityで実装開始

Unityで概要にあったオブジェクトを配置します。

f:id:k_mawa:20181221203636p:plain

スクリーンとなるSphere 床となる、Plane OculusGoで利用できるCamera、OVRCameraRig デフォルトの照明の Directional LightはそのままでOKです。

OVRCameraRigを配置したことない方は、こちらの記事など参考になるかと思います。 xrdevjaでも記事追記したほうがいい内容ですね^^ いずれ追記します。 o21o21.hatenablog.jp

3:床を透明にする

f:id:k_mawa:20181221204136p:plain Planeに設定しているMaterialのRenderingModeをデフォルトの"Opaque"から"Fade"に変えます。

f:id:k_mawa:20181221204455p:plain

かわりましたね。ためしにUnityEditorで再生してみてください。これだけで再生時に透明になります。これで360度動画全領域をHMDで見渡せるようになります。

Materialいじるのは初めてですという方向けにはこちらの記事が役立つと思います^^

techacademy.jp

4:SphereにVideoPlayerコンポーネントを追加

再生する設定をします。動画をインポートして、コンポーネントで指定します。次のようにします。 f:id:k_mawa:20181221205011p:plain

このあたりで一旦再生してみるとすでに球体でビデオが再生されている様子が確認できます。次は中に入ってもビデオを見られるようにします。

5: Sphereの内側でも再生されるようにする。

再生されるような設定のシェーダを作ります。

まずは初期設定のシェーダーをつくります。 f:id:k_mawa:20181221205209p:plain

シェーダーを編集します

SubShader
    {
        Tags { "RenderType"="Opaque" }
        Cull Front //これを追加
        LOD 100

この1行を追加してください。これはどういう意味かというと裏側描写するという意味で、次の記事がとても勉強になりますのでご覧ください。

nn-hokuson.hatenablog.com

それをまた新たに作った新規Materialにくっつけます f:id:k_mawa:20181221205305p:plain

くっつけた新Materialを、Sphereにドラッグ＆ドロップして設定します。すると、内側でも再生されるのでデモのように全天球のVRビーチを楽しめます。

OculusGoで見た映像です。海の球の中に入れるようにできました^^/
仕組みは、Sphereの再生面を外側と内側両方で再生するようにシェーダーを参考記事にそって2行ほど改造するとできます。床面を透明にしてあるので全天球が見えます。動画配布元さん⇒ https://t.co/X7JZF5c6l9 #oculus #vr #Unity pic.twitter.com/MvHcSk82eA
— mawa (@k_mawa82) 2018年12月9日

参考・一部引用記事

全天球動画のVRの実装方法の解説が参考になります。

作って学べる Unity VR アプリ開発入門

作者: 大嶋剛直,松島寛樹,河野修弘
出版社/メーカー: 技術評論社
発売日: 2018/09/22
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2018-12-13

VR酔いを防ぐための実装ノウハウ

Unity VR OculusGo 参考資料 C# デバッグ

6日目の記事です！ qiita.com

概要

VRコンテンツを開発しているとユーザー体験の設定上避けて通れないのが、「VR酔い」対策ですね。 Unityで、Rigidbodyくっつけただけだと、Terrain上を動くとふらふらして、筆者もVR酔いになりやすいです。勉強会メンバーさんから聞いたVR酔いに強い開発対策ノウハウをまとめました。今回も、メンバーのトドネロさん（　トドネロ (@x282665) | Twitter　）ありがとうございます。

VR酔いの原因と実装可能な対策

VR酔いがどうしてなるのか、については医学的には全然しりませんが、「体は動いてないのに、視覚では動いているので脳の認識が混乱するから」という仮説をトドネロさんに教えていただきました。このVR酔いを柔らげる方法としては、

周りを黒くする＆視界を狭くする
テレポートするような画面遷移の実装をしてガタツキなどを減らす

が代表的なもののようです。

テレポートするような画面遷移は以下が一例です。

対策アセット

自分で実装しなくても対策アセットもあります。すごいですね・・・ assetstore.unity.com

2018-12-07

OculusGo HMDの方向に前進するコード解説メモ

Unity VR OculusGo 参考資料 C#

f:id:k_mawa:20181207214536p:plain

概要

Oculus GoのHMDの向いている方向に沿って前進するコードを実装したときのメモです。参考コード記事とともにご覧くださいませ。

デモ

コード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;

//RigidBodyコンポーネント自動付加されます
[RequireComponent(typeof(Rigidbody))]

public class Walk : MonoBehaviour {

    Rigidbody m_Rigidbody;

    [SerializeField] float ForceGravity = 100f;
    [SerializeField] private Transform _centerEyeAnchor = null;
    [SerializeField] private float _moveSpeed = 2;

    // Use this for initialization
    void Start()
    {
        //Playerに付加されているRigidBodyコンポーネントの取得
        rb = GetComponent<Rigidbody>(); 
    }

    void FixedUpdate()
    {

        float x = 0.05f;
        float z = 0.05f;
        Vector2 touchPad = OVRInput.Get(OVRInput.Axis2D.PrimaryTouchpad);

        if (touchPad.x > 0.5 && -0.5 < touchPad.y && touchPad.y < 0.5) //キー右部押す
        {
            transform.Rotate(new Vector3(0.0f, 0.5f, 0.0f)); // 右回転
        }
        if (touchPad.x < -0.5 && -0.5 < touchPad.y && touchPad.y < 0.5) //キー左部押す
        {
            transform.Rotate(new Vector3(0.0f, -0.5f, 0.0f));  //左回転
        }
        if (touchPad.y > 0.5 && -0.5 < touchPad.x && touchPad.x < 0.5) //キー上部押す
        {   
            //CenterEyeAnchorの前に向いている方向へRigidBodyポジションを移動                     
            rb.position += _centerEyeAnchor.transform.forward * z;

        }
        if (touchPad.y < -0.5 && -0.5 < touchPad.x && touchPad.x < 0.5) //キー下部押す
        {
            z -= 0.1f;
            // 単なるバック
            rb.position += this.transform.forward * z;
        }

        //プレイヤー落下速度調整
        rb.AddForce(Vector3.down * ForceGravity, ForceMode.Acceleration); 
    }
}

CenterEyeAnchorとPlayerオブジェクトのヒエラルキーの指定メモ画像です f:id:k_mawa:20181207214536p:plain

参考・一部引用記事

参考引用しました。チュートリアルとしても素晴らしいです。 qiita.com

2018-12-06

OculusGo centerEyeAnchor.rotationの値の取得実証実験をしてみた

Unity VR OculusGo 参考資料 C#

f:id:k_mawa:20181207202654p:plain

チュートリアル概要

OculusGoのヘッドセットの角度をセンシングしているセンサーのひとつcenterEyeAnchorの値を読み取ってみた。どこか特定の向きに向いているときのコード実装に有益かなと思います^^

結論

結構ざっくりですが、以下のようになっています。

上を見る

定位置 f:id:k_mawa:20181207202654p:plain f:id:k_mawa:20181207202609p:plain

下を見る

定位置 f:id:k_mawa:20181207202654p:plain f:id:k_mawa:20181207202624p:plain

右を見る

定位置 f:id:k_mawa:20181207202654p:plain f:id:k_mawa:20181207202742p:plain

左を見る

定位置 f:id:k_mawa:20181207202654p:plain f:id:k_mawa:20181207202755p:plain

右に傾く

定位置 f:id:k_mawa:20181207202654p:plain f:id:k_mawa:20181207202814p:plain

左に傾く

定位置 f:id:k_mawa:20181207202654p:plain f:id:k_mawa:20181207202828p:plain

検証方法

UI経由でテキストに表示させました。

UIのTextコンポーネントに追加したY座標の取得コード（x座標取得コードはほぼ一緒なので割愛）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;

public class Showx : MonoBehaviour {

    private Text targetText;
    [SerializeField] private Transform _centerEyeAnchor = null; //OVRCameraRig/CenterEyeAnchorをD＆D配置

    // Use this for initialization
    void Start () {

        this.targetText = this.GetComponent<Text>();

    }
    
    // Update is called once per frame
    void Update () {

        this.targetText.text = String.Format("r : {0}", _centerEyeAnchor.rotation);

    }
}

CenterEyeAnchorの配置のUnityEditorの指定メモです f:id:k_mawa:20181206213016p:plain

検証結果

そのほか参考になる資料

詳しいです。重宝します
kan-kikuchi.hatenablog.com

Quartanion
spi8823.hatenablog.com

Text表示用の資料です。一応のっけときます
qiita.com

2018-12-06

OculusGo コントローラーのタッチパッドの座標情報の取得実証実験をしてみた

Unity VR OculusGo 参考資料 C#

f:id:k_mawa:20181206162707p:plain

チュートリアル概要

OculusGoのコントローラーについているタッチパッドを使った操作を実装しているときに、座標情報がどうなっているか気になったので調べてみた。

結論

以下のようになっています。-1<x<1, -1<y<1の範囲で触れている部分の座標を取得しています。OVRInput.Axis2D.PrimaryTouchpadで取得します。

f:id:k_mawa:20181206163325p:plain

検証方法

UI経由でテキストに表示させました。

UIのTextコンポーネントに追加したY座標の取得コード（x座標取得コードはほぼ一緒なので割愛）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;


public class Showy : MonoBehaviour {

    private Text targetText;

    // Use this for initialization
    void Start () {

#if UNITY_EDITOR
        Debug.Log("Unity Editor");
#endif

        this.targetText = this.GetComponent<Text>();

    }
    
    // Update is called once per frame
    void Update () {

        Vector2 touchPad = OVRInput.Get(OVRInput.Axis2D.PrimaryTouchpad); //これは特にusingディレクティブとか書かなくてもこの1行で座標情報取得できる
        this.targetText.text = String.Format("Y is{0}", touchPad.y);

#if UNITY_EDITOR
        this.targetText.text = String.Format("Y is {0}", this.transform.position.y);
#endif
    }
}

検証結果

タッチパネル上部分で前進、下部分で後退、タッチパネル左右で回転のコード実行中のタッチパネルに触れている座標情報です。

そのほか参考になる資料

詳しいので重宝します kan-kikuchi.hatenablog.com

簡潔にまとめてあります qiita.com

Text表示用の資料です。一応のっけときます qiita.com

実例として次のステップ用の資料です。実装してみて確認できます

qiita.com

2018-12-06

チュートリアル：OculusGo＋Unity＋VR実装入門(2018年11月動作確認)

Unity 入門講座チュートリアル VR OculusGo 参考資料

f:id:k_mawa:20181206125918p:plain

チュートリアル概要

OculusGoでVRアプリを作るということを、デモアプリを作って動かす一連の流れを通じて理解し、実装力をつけるための入門チュートリアルです。

できるもの

OculusGoでキューブを間近で眺められるというだけのアプリ

必要なもの

PC
OculusGo

チュートリアル本編

xrdevjaのメンバーmawaの記事になります。

k-mawa.hateblo.jp

今回のイベント概要

経過

9:00到着。設営開始。

10:30開発開始

成果発表会！

ARCoreチュートリアルを2点

『ピンボールゲーム』

『箱庭』

『玉転がしギミック』

『FirstVRを活用したクリスマス連動エクササイズゲーム』

kurosanさん 『VR迷路探検アプリ』

川越さん 『スライム』『タリーズカップ』

トドネロさん( トドネロ (@x282665) | Twitter ) 『プレゼント』

感想

コミュニティ参加者募集中！

概要

デモ

実装概要

手順

1:素材を用意する。

2:Unityで実装開始

3:床を透明にする

4:SphereにVideoPlayerコンポーネントを追加

5: Sphereの内側でも再生されるようにする。

参考・一部引用記事

概要

VR酔いの原因と実装可能な対策

対策アセット

概要

デモ

コード

参考・一部引用記事

チュートリアル概要

結論

上を見る

下を見る

右を見る

左を見る

右に傾く

左に傾く

検証方法

検証結果

そのほか参考になる資料

チュートリアル概要

結論

検証方法

検証結果

そのほか参考になる資料

チュートリアル概要

できるもの

必要なもの

チュートリアル本編

kurosanさん　『VR迷路探検アプリ』

川越さん　『スライム』『タリーズカップ』

トドネロさん( トドネロ (@x282665) | Twitter ) 　『プレゼント』