WGGの活動log

都内でゲーム開発だったりVRだったりをしてるかもしれないエンジニアです． WGGは「ワグ」と読みます

p5.xr を使って Oculus Quest 2 で動くVRを作ってみる

アドベントカレンダー Processing プログラミング VR p5.js

この記事は Processing Advent Calendar 2020 の 20 日目の記事です

はじめに

夏頃まで Twitter で #つぶやきProcessing とか作って楽しんでいたのですが，最近少し忙しくなって，10月頃から Processing の活動ができていないです

今回は，10月に手に入れた Oculus Quest 2 を使って，p5.js でVRコンテンツを作ってみたお話です

Oculus Quest 2

www.oculus.com

最近発売した VR ヘッドセットです

Twitter では FaceBook アカウントを連携した瞬間に BAN されたみたいな話が話題になっていた気がしますが...

自分は大学時代にサークルで Oculus Rift CV1 と HoloLens の開発をしていたことがあり，結構久しぶりのVRで楽しみにしていました

WebXR

Oculus Quest 2 では， ブラウザアプリを使って WebXR (WebVR) を体験することができます．

WebXR 対応のページを，普通にPCのブラウザで開くと，↓のように XR NOT FOUND と出て見ることができません

f:id:wgg00sh:20201219193211p:plain

それを Oculus Quest など， VR対応の環境で見ると，VRコンテンツを表示できるようになります

f:id:wgg00sh:20201219193316p:plain

p5.xr

p5xr.org

p5.js は，ブラウザで動くCGコンテンツを作ることができますが，この WebXR には対応していません

しかし，p5.xr というライブラリを使って実現することができました

サンプルコードを見るとだいたいわかりますが，普段の p5.js 開発から， 一部の使用する関数を VR 用のものに変えるだけで使用できました

// 普段の処理
function setup(){
  createCanvas(windowWidth, windowHeight,WebGL)
}

// p5.xr 用の処理 (https://editor.p5js.org/stalgiag/sketches/YsmwJUs83 より引用)
function preload() {
  createVRCanvas();
}

function setup() {
  setVRBackgroundColor(200, 0, 150);
}

このように，VR開発の経験があまりなくても簡単に作ることができました

見た感じ，コントローラなどのハンドトラッキングにはまだ対応して居なさそうだったので，そのあたりまで作ってからこの記事書こうと思ってたのですが，時間が無くて辞めました

作ったもの

ここで表示しているコンテンツは，以前自分が p5.js で作った作品で，ソースコードもほぼそのまま移植して動かすことができました

↓に OpenProcessing への埋め込みを貼っていますが，GLSL 周りで環境依存のあるコードになってしまっていたので，使用しているPCによっては正しく表示されないかもしれません

www.openprocessing.org

終わりに

今年は去年ほどアドベントカレンダーに力入れられませんでしたが， Processing や p5.js を使って，こういう事もできるんだっ知ってもらえれば嬉しいです

おまけ

来年の PCD の募集が始まってて，今年は初参加でLTをさせていただいたので，来年もなにかできると良いのですが...