Go to Qiita Advent Calendar 2024 Top
LoginSignup
15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

NeosVR resoAdvent Calendar 2020

Day 4
@piacerex

VRヘッドセット（HMD）持っていなくてもNeosVRプログラミング：3D豆腐をブン回す

Last updated at Posted at 2020-12-04

この記事は「NeosVR reso Advent Calendar 2020」、および「NeosVR Advent Calendar 2020」の4日目です

昨日は、@kazu0617 さんの「Logixを用いた外部データの取得と活用（パンツパッチから）[HTTP GET String]」、および @FLICK さんの 「波紋【基礎練習】」でした

NeosVRから現実世界に干渉し、生活や仕事をより良いものへと改変していくコミュニティ「NeosVR reso」のオーガナイザー、piacereです
ご覧いただいて、ありがとうございます :bow:

NeosVRは、VRヘッドセット（HMD）を持っていないと、使ったり、プログラミングすることができないVRプラットフォームだと思われていますが、実は、HMD無しで、ばっちりプログラミングができます

それを体験していただけるような「3D豆腐をブン回す」までのプログラミングコラムを書いてみました

なお、コラム中で作った3D豆腐は、番組の後、みんなで美味しくいただきました（ウソです）:yum:
image.png

NeosVRにログインする

まず、NeosVRをプレイするには、Steamのインストールと、Steam内からのNeosVRのインストール、そしてNeosVRアカウント登録を済ませておいてください

NeosVRを起動すると、下記のような画面が表示されます…真ん中に表示されているウインドウは、「ダッシュメニュー」と言います
image.png

何もボタンを押さず、マウスをコロコロと移動させると、NeosVR内で自分の向いている方向が変えられるので、左右や上下を見回してみてください

このマウス移動で向きを変えると、画面上下左右中央の赤いポチも移動し、コレがボタン等に重なるとフォーカス状態になるので、そこでマウスの左クリックをすると、ボタン押下やテキスト入力選択ができます（以降、このフォーカスして左クリックすることを「クリック」と略します）

ダッシュメニュー左上の「匿名」と書かれた左下にある「ログイン」に赤ポチを重ねて、クリックすると、下記ログイン画面が表示されるので、先ほど登録したNeosVRアカウントのユーザ名／パスワードをキーボードで入力し、「記憶する」チェックをクリックし、「ログイン」ボタンをクリックします
image.png

すると、ログインが行われ、ダッシュメニュー左上にあった「匿名」が、ユーザ名に変わったり、その配下のユーザ情報が更新されます（一緒に背景も変わりますが、コレは人によりけりなので、下記と同じ背景にならないことはあります）
image.png

ログイン直後の自分の姿を鏡で見る

ダッシュメニュー下側の「ホーム」を先ほどまで見ていましたが、3つ右にある「インベントリ」をクリックすると、「Essential Tools」と「Neos Essentials」の2つが出てくるので、「Neos Essentials」をダブルクリックし、更に「Mirror」をダブルクリックすると下記画面になるので、右から3つ目のアイコン「Local Mirror」をダブルクリックします
image.png

すると、ダッシュメニューの手前に、下記のような黒い板が出てきます
image.png

この黒い板の下側に「Mirror (Local)」と書かれた場所があるので、コレをクリックすると、ログイン直後の自分の姿を鏡で見ることができます（ココで見えているHMDと手しか無い状態がアバター設定前の自分の姿です）
image.png

なお、下側に「Mirror (Local)」が見えない場合は、鏡が裏返っているので、黒い板を右ドラッグしながら、Ctrlキーを押しっぱなしでマウスホイールを回して、鏡を表まで回転させてください

音声の設定をする

ダッシュメニュー下側の「設定」をクリックすると、様々な設定をする画面が出るので、右側にある「音声入力デバイスを選択」をクリックします
image.png

すると、音声入力デバイス選択と、マイクのテストが出てくるので、コレでマイクが音声を拾えるよう調整してください（今回は、マイクで会話しませんが、今後、NeosVR初心者案内デー等のイベントに参加したり、他プレイヤーとお喋りするときに、ここの設定が重要になります）
image.png

ローカルPCの画像をロードする

ダッシュメニュー下側の「ファイルブラウザ」をクリックすると、ナント、あなたのローカルPCの中身が、NeosVR上で見れてしまいます … フォルダ移動して、適当なpng等の画像ファイルをダブルクリックしてみると、「画像インポーター」でどの画像フォーマットでインポートするか聞かれるので、「イメージ／テクスチャ」をクリックしてください
image.png

すると、NeosVR内に、画像ファイルが取り込まれます … NeosVRが、タダVRで遊ぶだけのVRプラットフォームでは無い感じが、ジワジワと伝わってきたのでは無いでしょうか？
image.png

「DevToolTip」…VR内オブジェクトを作るツール

それでは、NeosVRプログラミングを行う上で大事なツールを2つご紹介します

1つ目は「DevToolTip」と呼ばれる、VR内オブジェクトを作ったり、変更するツールで、これはインベントリの「Essential Tools」配下にあるため、「(back)」を2回行い、「Essential Tools」に入り、右下から3番目のアイコン「DevToolTip」をダブルクリックします
image.png

すると、DevToolTipがNeosVR内にロードされます … 使い方は、後ほど説明するので、いったん放置しておいてください
image.png

「LogiXTip」…VR内プログラミングをするツール

2つ目は「LogiXTip」と呼ばれる、VR内プログラミングをするツールで、これはHMD向けのものはDevToolTipと同じ階層にありますが、HMD無し向けのものは、「Essential Tools」-「Community Tools」-「DesktopUtils」-「Tools」配下の右から2番目のアイコン「LogiXTip v5.0」をダブルクリックします
image.png

すると、LogiXTip v5.0がNeosVR内にロードされます … 使い方は、後ほど説明します
image.png

DevToolTipで3D豆腐を作る

まずはDevToolTipで、3D豆腐を作ってみますが、ダッシュメニューは邪魔になるので、Ctrl+Spaceキーで非表示にしてください（再度、Ctrl+Spaceキーを押せば表示されます）

DevToolTipにフォーカスしている状態で、右ダブルクリックするとDevToolTipを装備をすることができ、この状態で「C」キーを押すと、「New」が表示されます
image.png

「3Dモデル」をクリックすると、下記表示になるので、「ボックス」をクリックします
image.png

すると、緑の線が目の前に出てきますが、コレは、3D豆腐の内部に入っている状態です
image.png

「S」キーを押し続け、後ろに移動すると、目の前に3D豆腐が見えてきます
image.png

3D豆腐を右ドラッグしながら、Ctrlキーを押しっぱなしでマウスホイールを回すと、3D豆腐を横回転でき、Altキーを押しっぱなしでマウスホイールを回すと、3D豆腐を縦回転できるので、手動でクルクル回してみてください
image.png

「インスペクタ」で3D豆腐の内部情報を出す

3D豆腐を右ドラッグしながら、「i」キーを押すと、3D豆腐の「インスペクタ」が表示されます
image.png

インスペクタ左上の「●Box」の文字部分をダブルクリックすると、インスペクタ右側に、3D豆腐の内部情報が表示されます（ここの扱い方は、別コラムで今度ご紹介します）
image.png

この後、このインスペクタをLogiXTipで使います

LogiXTipではじめてのNeosVRプログラミング

では、いよいよ、NeosVRプログラミングです

まずは、何も無いところで右ダブルクリックで、DevToolTipの装備を外し、LogiXTip v5.0を右ダブルクリックで装備し、「c」キーを押すと、「LogiX Nodes」が表示されます
image.png

「LogiX Nodes」の「Input」をダブルクリックすると、下記画面になるので、「T」をダブルクリックします … すると、「Pack in-place」と書かれた文字の上が、「T」に変化します
image.png

この状態で、何も無いところでダブルクリックすると、「T」の板が出現します
image.png

このT板の右にある水色からドラッグすると、水色の線が伸びます
image.png

伸ばした後、マウスホイールをクリックすると、数字がパカパカ変わる板が出てきますが、コレは、NeosVRで経過した時間、つまりタイマーを表示しています
image.png

このようにLogiXでは、板の右から水色の線を出して、その板の持つ情報を引き出したり、板同士を連結させることができます

タイマーをsinに繋げて±1の間を繰り返させる

それでは今度は、板同士の連結をやってみましょう

「LogiX Nodes」を「(back)」で戻り、「Math」をダブルクリックし、左ドラッグで下にスクロールさせると、下記画面になるので、「sin」をダブルクリックし、何も無いところでダブルクリックすると、「Sin」の板が出現します
image.png

T板の右の水色からドラッグで引っ張り出し、Sin板の左の水色でドラッグを離すと、板同士が連結します

更に、Sin板の右の水色からドラッグで引っ張り出し、マウスホイールクリックすると、タイマーをsinで処理した結果の板が出てきて、±1の範囲の数値がパカパカ変化します
image.png

NeosVRでのプログラミングは、こんな感じで、板を繋いで、データ変換や判定をしていきます

タイマー+sinで3D豆腐をグルグル回す

「LogiX Nodes」を「(back)」で戻り、「Operators」をダブルクリックし、左ドラッグで下にスクロールさせると、下記画面になるので、「Pack xyz」をダブルクリックし、何も無いところでダブルクリックすると、「Pack xyz」の板が出現するので、その左に3つある水色全てにSin板の右の水色からドラッグで連結します
image.png

Pack xyz板は、左の上から、x／y／zの各座標を意味していて、Pack xyzは、この3つの座標を束ねる動きをする板です

次に、3D豆腐のインスペクタ左上の「●Box」の文字部分を、「L」キーを押しながらクリックすると、下図のようなカラフルな帯（「スロット」と呼びます）が出現しますが、コレは、3D豆腐の情報を操作するためのものです
image.png

このスロットの「Position」に向けて、Pack xyz板の右の水色からドラッグし、Positionの上でドラッグを離します
image.png

すると、Pack xyz板とスロットのPositionが連結します
image.png

同時に、3D豆腐が、xyz軸を斜めにユラユラと勝手に移動するようになります
image.png

これは、Pack xyzのx／y／zの各座標に、タイマー連動して±1の範囲で変化するSinの値が連携され、NeosVRのx／y／z座標の-1～+1の間を3D豆腐が行ったり来たりする挙動となっています

このような感じで、NeosVRでは、VR内オブジェクト情報をプログラムで変化させることができ、これはPositionだけで無く、オブジェクトの大きさや回転、色といったものにも適用できますし、sinで-1～+1の間を巡回する以外のもっと複雑な動きをプログラミングすることが出来ます

ここまでの手順はHMDでも出来る？

もちろん、できます

マウス移動はHMDの向き、つまり顔の向きと同じように動き、クリックや右クリック、それらのドラッグ等は、ハンドコントローラで再現できます

そのため、HMD無しの状態で、上記のようなNeosVRプログラミングを覚えても、HMDで応用が効きます

ちなみに私は、HMD無しの状態で、1ヶ月半ほど、このNeosVRプログラミングに慣れ親しんだ後、HMDを入手しましたが、特に違和感無く、HMD有のNeosVRプログラミングへとスイッチできました

ここまでの操作のおさらい＋α

上記で解説したHMD無しの操作は、「NeosVR日本語Wiki」の下記URLに「デスクトップモード」として操作一覧がまとめられています
https://neosvrjp.memo.wiki/d/%a5%ac%a5%a4%a5%c9#content_1_2

以前、NeosVR resoで開催したイベント「VRヘッドセットが無い方／使わない方限定のNeosVRプログラミング入門」では、この一覧を元に、今回コラムの目次と似たような構成／時間割で、下記4レベルに分けて、NeosVR内でのHMD無しプログラミング解説に利用させていただきました
image.png
image.png
image.png
image.png

「VRヘッドセットが無い方／使わない方限定のNeosVRプログラミング入門」開催時の様子は、こんな感じで、NeosVRでワイワイ楽しみながら、今回コラムと同じようなプログラミング実習をしました
image.png
image.png
image.png
image.png
image.png
image.png
image.png

最後に

このコラムを読んで、VRヘッドセット（HDM）を持っていなくても、NeosVRプログラミングができることを知っていただき、今後、伸びていくであろうVRプログラミングの世界観に触れてみたいという方が1人でも増えたら幸いです:laughing:

あと、NeosVRを始めたばかりの方でも、下記URLからお気軽にNeosVR reso Advent Calendarにご参加ください💁

https://qiita.com/advent-calendar/2020/neosvr_reso
image.png

p.s.このコラムが、面白かったり、役に立ったら…

image.png や image.png にて、どうぞ応援よろしくお願いします:bow:

明日の記事は、@kmizuno0211 さんの「NeosVRと5Gがもたらす未来の音楽の希望『Revolution No.10』」および @rhenium_vrc さんの「お気に入りComponentを紹介する」 です

15
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?