p5.xrを使ってOculus Quest2で再生できるVRを作る方法。p5.jsを改変するだけ。

p5.jsを少し変更するだけで、スケッチをOculus Quest2でVR再生できたので、方法をシェアします。

この記事は、p5.js Web Editorが使えて、Oculus Quest2を持っている人向けに書いています。

できたもの

以下動画のように、p5.jsのスケッチをVR空間で楽しむことができました。

自分が作ったスケッチが360度全方向で見られるという体験は、クリエイティブコーディングする上で大きなモチベーションになりました。

要するに、楽しいです。

初歩：Oculus Quest2でp5.xrを体験する

まずOculus Quest2でp5.xrを体験しましょう。

  1. Oculus Quest2の標準ブラウザで、このサイト　にアクセスする。(p5.xrで検索して一番上に出てくるサイトです)
  2. QUICK START>ExamplesのRaycasting VR ExampleのViewを押す
  3. ENTER VRを押す
  4. 複数の球体が見えたら成功

このExamplesのページを一通り試しましたが、Raycasting VR Exampleと360 Image VR Example以外はうまく動きませんでした。

また、Editのページから、p5.xrのコードが見れるので、参考になります。

作成フロー

私は以下のフローで作成できました。

  1. PCのブラウザでp5.js Web Editorを開き、スケッチを作成・編集・デバッグ・保存する。
  2. Oculus Quest2の標準ブラウザでp5.js Web Editorにアクセスしログインする。
  3. Oculus Quest2で、さきほど保存したスケッチを開き、実行する。
  4. VR作品を楽しむ。

ポイント

  • PCのブラウザでp5.jsのエラー確認はできる（文法などのエラー表示はされる)
  • PCのブラウザ(chrome)でp5.jsの実行はできない(下図のように XR NOT FOUNDが表示される) 　※もし方法があれば教えてください
  • このサイト https://p5xr.org/#/reference/vr に詳細記載あり

手順詳細

新規スケッチ作成とindex.html書き換え

p5.jsのWeb Editorで新規のスケッチを作る。

index.htmlを以下コードに書き換える。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
    <script src="https://unpkg.com/p5.xr"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

上記コードは、p5.xrのサイトから引用しました。

スケッチの編集

sketch.jsを編集する。

スケッチの注意点は、このサイトに詳しいですが、かいつまんで説明します。

createVRCanvas()

以下コードをfunction setup()よりも前に入れる。これを入れることでVRで見れるモードになる。

function preload(){
  createVRCanvas();
}

なお、createCanvas()はそもそも不要。

setVRBackgroundColor()

スケッチの中でbackground()を使う場合は、代わりにsetVRBackgroundColor()を使用する。background()を使うと、なぜか片目だけ表示されないことがあったので、backgroundを使う箇所は、全てこれに置き換える。

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

function calculate()

p5.xrはp5.jsと違い、draw()がフレームごとに２回実行される。そのため、draw()の中の計算が2回実行されてしまい、意図しない値になることがある。calculate()内のコードは、フレームごとに１回実行されるので、この問題を防ぐことができる。

フレームごとに1回だけ実行したい計算のコードは、この中に入れておけば問題を防げる。

とはいえ、そもそもcalculateを全く使わなくても問題はなさそう。

例
function calculate(){
....
}
function draw() {
...
}

メモ：draw()がフレームごとに２回実行される理由は、右目向けの描写と左目向けの描写をそれぞれ行うためのようです。

setViewerPosition()

ユーザーの視点の場所を３次元上(x軸、y軸、z軸)に設定する。

3次元のスケッチの中心に入り込みたいならsetViewerPosition(0,0,0)がいいし、少し離れて見たい場合はsetViewerPosition(0,0,400)くらいがいい。

例  
setViewerPosition(0, 0, 400);

スケッチ作成まとめ

今までをまとめると、スケッチは以下のような構成になります。

スケッチ構成例

function preload(){
  createVRCanvas();
}

function setup(){
....
setVRBackgroundColor(200, 0, 150);  //draw()などの他の場所に記述してもよい。background()の代わりに使う
}

function calculate(){   //これはなくてもよい
....
}

function draw() {
  setViewerPosition(0, 0, 400);  //Viewerの居場所を決める
...
}

スケッチを実行して、エラーがなくなるまでデバッグします。

なお、”This device does not support immersive VR sessions. “と表示されてしまっても、無視して構いません。

エラーが無くなったらp5.js Web Editorに保存します。

これでPCでの作業は完了です。

スケッチを実行する

続いて、Oculus Quest2でスケッチを実行します。

まずOculus Quest2の標準ブラウザでp5.js Web Editorにアクセス・ログインし、先程PCで保存したスケッチを開きます。

スケッチを実行すると、下写真のように表示されるので、ENTER VRを押します。

写真の説明はありません。

VR空間いっぱいに表示されたら、成功です。

参考コード

冒頭の動画は、このコードです。

a=0;//frameCount更新ごとに足す値
c=0.05//for文のiに足していく値(radian的にちょうど良さそうな値。1だと大きいので)
r1=2;//r1の初期値
r2=3;//r2の初期値
r3=4;//r3の初期値
sec=0;//secの初期値


function preload(){
  createVRCanvas();
}

function setup() {
  setVRBackgroundColor(0,0,0);
  colorMode( HSB, 100 );
}

function calculate(){
  
    if( sec != second() ){
   r1=int(random(1,5));
   r2=int(random(1,5));
   r3=int(random(1,5));
    
    sec = second();
    }
  
  xx1=1;
  yy1=1;
  zz1=1;
  xx2=1;
  yy2=1;
  zz2=1;
  
  if(second()>=30){
    xx1=sin(a);
    yy1=cos(a);
    xx2=sin(a);
    yy2=cos(a);
      }
  
}

function draw() {
  setViewerPosition(0, 0, 200);
  setVRBackgroundColor(0,0,0);
  strokeWeight(10);


  for(i=0;i<10;i+=c){
    
    t1=a+i*r1; //x1のcosに代入する値
    t2=a+i*r2; //y1のsinに代入する値
    t3=a+i*r3; //z1のsinに代入する値
    t4=a+(i+c)*r1; //x2のcosに代入する値
    t5=a+(i+c)*r2; //y2のsinに代入する値
    t6=a+(i+c)*r3; //z2のsinに代入する値

    
    x1=cos(t1)*xx1*width/3;
    y1=sin(t2)*yy1*height/3;
    z1=sin(t3)*zz1*height/3;
    x2=cos(t4)*xx2*width/3;
    y2=sin(t5)*yy2*height/3;
    z2=sin(t6)*zz2*height/3;
    
    stroke(i*10,100,100)
    line(x1,y1,z1,x2,y2,z2)

  }
  

  
  a+=0.01
}

感想

私自身、音楽と映像を作るのが好きで、いずれVR空間で自分の音楽と映像をシンクロさせた作品を作れたらいいなあと思っていたところで、このp5.xrに出会いました。

記事のように、環境さえあれば簡単にVR空間を作れるので、自分にとって大きな自信になりました。

ただOculusはPCよりもかなり非力で、複雑で処理の重い描写は難しく、理想の作品を作るにはハードルがまだまだありそうです。（オーディオリアクティブとか、そもそもできるのか謎）

またp5.xrで検索しても出てくる情報がかなり少ないので、p5.jsのような盛り上がりは現状ないようです。

とはいえ、VR空間を簡単に作れるという体験がとても楽しいので、ぜひ一度トライしてみてください。

p5.jsの本をAmazonで検索

Related Posts