P5LIVE icon indicating copy to clipboard operation
P5LIVE copied to clipboard

Hard Compile Question – XRSession Persistance – p5 recreation

Open TiborUdvari opened this issue 6 months ago • 0 comments

I'm working on improving the workflow with p5.xr, as I mentioned before in #88.

In WebXR the browser needs to start an XRSession with a user interaction, usually a button click. This works fine with P5LIVE. However any time there is a hard compile users currently need to start this session again by clicking, which kind of breaks the live coding flow.

I'm attempting to start and persist this session on the parent object, like so:

// Simplified code example
if (!window.parent.activeSession) {
  const xrSession = await window.parent.navigator.xr.requestSession('immersive-ar');
  this.__startSketch(xrSession);
} else {
  this.__startSketch(window.parent.activeSession);
}

Previous code w/o persistance in context

The persisting works in this case, although p5.js does not seem to be properly resetting. Notably the camera seems to be going back to the default settings.

I've isolated the part of the code that is not getting updated I think, but after the hard compile, setting matrices on the renderer just seem to set anything, for instance in the code below the headset is sending correct values it simply doesn't update he values in the matrix. It's really weird, I don't know how it's not possible to update this value.

  set view(newView) {
    this._view = newView;
    console.log('before set');
    console.log(this._view.transform.inverse.matrix);
    p5.instance._renderer.uMVMatrix.set(this._view.transform.inverse.matrix);
    console.log('after set');
    console.log(p5.instance._renderer.uMVMatrix.mat4);
    // result: the uMVMatrix always has the default values, it does not change, even though it should have been just set
...
}

Previous code in context

The code I'm using in p5 live is something like this. I also noticed that after hard compiling, the preload gets executed twice.

let libs = [
	'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js',
	'https://cdn.jsdelivr.net/npm/@tiborudvari/[email protected]/dist/p5xr.js'
]

new p5(); 

function preload() {
	createARCanvas();
}

function draw() {
  sphere(1);
}

Any tips / ideas would be more than welcome. I've been trying to debug this for 2 days with no avail.

TiborUdvari avatar Aug 07 '24 21:08 TiborUdvari