Merge pull request #223 from TiborUdvari/fix/p5-v1.10.0

Fix to work with p5 v1.10.0

package.json

@@ -90,7 +90,7 @@
     "karma-sinon": "^1.0.5",
     "mocha": "^10.2.0",
     "openssl": "^2.0.0",
-    "p5": "~1.9.2",
+    "p5": "~1.10.0",
     "parcel": "^2.6.2",
     "sinon": "^7.5.0",
     "standard-version": "^9.5.0",

src/app.js

@@ -1,3 +1,4 @@
+import './p5xr/core/p5overrides';
 import p5vr from './p5xr/p5vr/p5vr';
 import p5ar from './p5xr/p5ar/p5ar';
 

src/p5xr/core/p5overrides.js

@@ -0,0 +1,45 @@
+import { lineVert, lineFrag } from '../shaders/lineShader';
+import compareVersions from '../utilities/versionComparator';
+
+/**
+ * Override default p5 line shader to avoid issue in v1.10.0
+ * https://github.com/processing/p5.js/issues/7200
+ * @private
+ * @ignore
+ */
+const overrideLineVertShader = compareVersions(p5.VERSION, '1.10.0') >= 0;
+if (overrideLineVertShader) {
+  console.log('p5.xr: overriding p5 v1.10.x line vert shader for v1.9.4');
+  p5.RendererGL.prototype._getLineShader = function () {
+    if (!this._customLineShader) {
+      this._customLineShader = new p5.Shader(
+        this,
+        this._webGL2CompatibilityPrefix('vert', 'mediump') + lineVert,
+        this._webGL2CompatibilityPrefix('frag', 'mediump') + lineFrag,
+      );
+    }
+
+    return this._customLineShader;
+  };
+}
+
+const overrideMatrixCopy = compareVersions(p5.VERSION, '1.9.2') >= 0;
+if (overrideMatrixCopy) {
+  console.log(
+    'p5.xr: Overriding camera copy so linePerspective works with push pop',
+  );
+  const originalCopy = p5.Camera.prototype.copy;
+
+  p5.Camera.prototype.copy = function () {
+    const copiedCamera = originalCopy.call(this);
+    copiedCamera.useLinePerspective = this.useLinePerspective;
+    return copiedCamera;
+  };
+
+  const originalSet = p5.Camera.prototype.set;
+  p5.Camera.prototype.set = function (cam) {
+    originalSet.call(this, cam);
+    this.useLinePerspective = cam.useLinePerspective;
+    return this;
+  };
+}

src/p5xr/core/p5xr.js

@@ -100,8 +100,13 @@ export default class p5xr {
    */
   __setupSensibleXRDefaults() {
     if (typeof linePerspective !== 'undefined') {
-      // Stroke weight of 1mm
-      strokeWeight(0.001);
+      if (linePerspective()) {
+        // Stroke weight of 1mm
+        console.log(
+          'p5xr: linePerspective is active, setting stroke width to 0.001',
+        );
+        strokeWeight(0.001);
+      }
     }
   }
 
@@ -112,7 +117,6 @@ export default class p5xr {
    */
   __setupCanvas() {
     createCanvas(windowWidth, windowHeight, WEBGL);
-    this.__setupSensibleXRDefaults();
     p5.instance._setupDone = true;
   }
 
@@ -216,10 +220,16 @@ export default class p5xr {
     this.canvas = p5.instance.canvas;
     this.canvas.style.visibility = 'visible';
 
+    p5.instance._renderer._curCamera.cameraType = 'custom';
+    p5.instance._renderer._curCamera.useLinePerspective = false;
+
     if (typeof window.setup === 'function') {
       window.setup();
       p5.instance._millisStart = window.performance.now();
     }
+
+    this.__setupSensibleXRDefaults();
+
     const refSpaceRequest = this.isImmersive ? 'local' : 'viewer';
     this.xrSession.requestReferenceSpace(refSpaceRequest).then((refSpace) => {
       this.xrRefSpace = refSpace;
@@ -242,9 +252,7 @@ export default class p5xr {
    * @ignore
    */
   __onRequestSession() {
-    p5.instance._renderer._curCamera.cameraType = 'custom';
     const refSpaceRequest = this.isImmersive ? 'local' : 'viewer';
-
     this.gl = this.canvas.getContext(p5.instance.webglVersion);
     this.gl
       .makeXRCompatible()

src/p5xr/core/p5xrViewer.js

@@ -41,6 +41,11 @@ class p5xrViewer {
    */
   set view(newView) {
     this._view = newView;
+
+    // eslint-disable-next-line no-unused-expressions
+    p5.instance._renderer.uViewMatrix?.set(this._view.transform.inverse.matrix);
+
+    // has not effect in v1.10.0, but kept for older version
     p5.instance._renderer.uMVMatrix.set(this._view.transform.inverse.matrix);
     p5.instance._renderer.uPMatrix.set(this._view.projectionMatrix);
     p5.instance._renderer._curCamera.cameraMatrix.set(
@@ -86,18 +91,21 @@ class p5xrViewer {
 
     // transform ray origin to view space
     const rayOriginCopy = ray.origin.copy();
-    ray.origin.x = initialMVMatrix[0] * rayOriginCopy.x
-      + initialMVMatrix[1] * rayOriginCopy.y
-      + initialMVMatrix[2] * rayOriginCopy.z
-      + initialMVMatrix[3];
-    ray.origin.y = initialMVMatrix[4] * rayOriginCopy.x
-      + initialMVMatrix[5] * rayOriginCopy.y
-      + initialMVMatrix[6] * rayOriginCopy.z
-      + initialMVMatrix[7];
-    ray.origin.z = initialMVMatrix[8] * rayOriginCopy.x
-      + initialMVMatrix[9] * rayOriginCopy.y
-      + initialMVMatrix[10] * rayOriginCopy.z
-      + initialMVMatrix[11];
+    ray.origin.x =
+      initialMVMatrix[0] * rayOriginCopy.x +
+      initialMVMatrix[1] * rayOriginCopy.y +
+      initialMVMatrix[2] * rayOriginCopy.z +
+      initialMVMatrix[3];
+    ray.origin.y =
+      initialMVMatrix[4] * rayOriginCopy.x +
+      initialMVMatrix[5] * rayOriginCopy.y +
+      initialMVMatrix[6] * rayOriginCopy.z +
+      initialMVMatrix[7];
+    ray.origin.z =
+      initialMVMatrix[8] * rayOriginCopy.x +
+      initialMVMatrix[9] * rayOriginCopy.y +
+      initialMVMatrix[10] * rayOriginCopy.z +
+      initialMVMatrix[11];
 
     // get ray direction from left eye
     const leftDirection = new p5.Vector(screenX, screenY, -1);
@@ -108,8 +116,14 @@ class p5xrViewer {
     leftPMatrixInverse = leftPMatrixInverse.mat4;
 
     const leftDirectionCopy = leftDirection.copy();
-    leftDirection.x = leftPMatrixInverse[0] * leftDirectionCopy.x + leftPMatrixInverse[1] * leftDirectionCopy.y + leftPMatrixInverse[2] * leftDirectionCopy.z;
-    leftDirection.y = leftPMatrixInverse[4] * leftDirectionCopy.x + leftPMatrixInverse[5] * leftDirectionCopy.y + leftPMatrixInverse[6] * leftDirectionCopy.z;
+    leftDirection.x =
+      leftPMatrixInverse[0] * leftDirectionCopy.x +
+      leftPMatrixInverse[1] * leftDirectionCopy.y +
+      leftPMatrixInverse[2] * leftDirectionCopy.z;
+    leftDirection.y =
+      leftPMatrixInverse[4] * leftDirectionCopy.x +
+      leftPMatrixInverse[5] * leftDirectionCopy.y +
+      leftPMatrixInverse[6] * leftDirectionCopy.z;
     leftDirection.normalize();
 
     // get ray direction from right eye
@@ -121,8 +135,14 @@ class p5xrViewer {
     rightPMatrixInverse = rightPMatrixInverse.mat4;
 
     const rightDirectionCopy = rightDirection.copy();
-    rightDirection.x = rightPMatrixInverse[0] * rightDirectionCopy.x + rightPMatrixInverse[1] * rightDirectionCopy.y + rightPMatrixInverse[2] * rightDirectionCopy.z;
-    rightDirection.y = rightPMatrixInverse[4] * rightDirectionCopy.x + rightPMatrixInverse[5] * rightDirectionCopy.y + rightPMatrixInverse[6] * rightDirectionCopy.z;
+    rightDirection.x =
+      rightPMatrixInverse[0] * rightDirectionCopy.x +
+      rightPMatrixInverse[1] * rightDirectionCopy.y +
+      rightPMatrixInverse[2] * rightDirectionCopy.z;
+    rightDirection.y =
+      rightPMatrixInverse[4] * rightDirectionCopy.x +
+      rightPMatrixInverse[5] * rightDirectionCopy.y +
+      rightPMatrixInverse[6] * rightDirectionCopy.z;
     rightDirection.normalize();
 
     // combine both ray directions