P5.xr Extend field of view ?

[jtech555]

Nature of issue?

• Found a bug
• Existing feature enhancement
• [ x ] New feature request

Which area does this problem relate to?

• [ x ] VR
• AR(ARCORE)
• AR(MARKER)

Details about the bug:

• p5.js version: Latest
• Device Name: -
• Web browser and version: Chrome
• Operating System: Windows
• Steps to reproduce this:

Starting the VR

Feature enhancement details:

I've managed to run a Minecraft like game in p5.xr that I coded in javascript using p5js, however I am unable to expand the field of view when using p5.xr. I'm not sure if this is something you can help with?

New feature details:

[TiborUdvari]

I think this might be the same as #203, when you say expand the field of view, do you mean immersive mode? As in it does not occupy the whole space? What device/setup are you using?

[jtech555]

In this p5js sketch - oppr.org/s/mFtKFA6z (This is a private openprocessing.org link, it is safe), you will see when using the WASD keys to walk around and the mouse to look around, that there is sometimes a grey circle in the center of the screen. That circle represents the end of the player's field of view - the limit of how far ahead the player can see. Using this code in this sketch:

perspective(PI / 3, width / height, 1, 9000); // The last parameter is the player's field of view - the max distance the player can see

Running and converting this 1st person sketch to work with p5xr, so we have a 1st person VR environment, modifying the last line in the perspective function above, does not change the player's field of view at all in VR. The player's field of view always remains the same, giving us a grey circle we constantly see in the VR environment as in the sketch.

I do not currently have my device/setup on me, but I will get them to you as soon as I can. If additional details are needed be happy to provide!

[TiborUdvari]

Line 65 of p5vr.js you have the field of view for the inline session set like this. With the p5 renderer I'm not exactly sure how all this works with the projection matrix just yet.

      this.xrSession.updateRenderState({
        baseLayer: new XRWebGLLayer(this.xrSession, this.gl),
        inlineVerticalFieldOfView: 70 * (Math.PI / 180),
      });

In any case you should probably not play with these setting when in immersive VR mode.

In my case the app is not running in immersive mode? Is that the case for you as well? In my pull request here you can see a video of immersive vs inline mode: #205

[jtech555]

Hi Tibor - I will take a look at the field of view code. I think just by changing 70 to a higher number, may possibly extend the field of view for us in VR. Appreciate that info!

In our case we do run our VR project using p5js and p5xr "in" immersive mode. Here you can see a clip of the environment we created in VR, and of a 3D hand I am working on rotate with our controller: https://american0-my.sharepoint.com/:v:/g/personal/jdenavas_american_edu/EQqp-69ZHL5Ev4Q0tZQAtAgBMK_wLDvwfpnJ4bP4yQrGOQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=eylcLf . At this point in time we are now trying to create a server for multiple people with VR headset to join in and interact with the environment. If this may be something you're interested in, we can definitely shoot you an invite.

[TiborUdvari]

OK, my issue was that the Oculus Quest 3 did not launch immersive mode, see #203. It may be that using a headset with a computer has a different behaviour. The setting I gave you should only effect inline mode. Please tell me if it works for you.

For your issue as mentioned in #193 this would probably be handled by the renderer and you would need to change that there.

[TiborUdvari]

I was going more through the WebXR spec, the XRView provides the projectionMatrix that should be used. https://developer.mozilla.org/en-US/docs/Web/API/XRView/projectionMatrix

I think this issue should be closed.

[jtech555]

Hey Tibor, can you give an example code of how I would use XRView to expand the users field of view? Apologies but I am having a difficult time figuring out how to.

[jtech555]

If anyone can help, I am still stuck trying to extend the field of view. If anyone can help me in what line of code would need to be used I would appreciate it

[jtech555]

If anyone can help this week, I will cash app them 30 dollars. Using this for a large project I've been working on