Add getWorldToScreenMatrix function in all renderers

Author: bojidar-bg

src/accessibility/outputs.js

@@ -540,14 +540,9 @@ function outputs(p5, fn){
 
   //gets position of shape in the canvas
   fn._getPos = function (x, y) {
-    const untransformedPosition = new DOMPointReadOnly(x, y);
-    const currentTransform = this._renderer.isP3D ?
-      new DOMMatrix(this._renderer.calculateCombinedMatrix()) :
-      this.drawingContext.getTransform();
-    const { x: transformedX, y: transformedY } = untransformedPosition
-      .matrixTransform(currentTransform);
-    const canvasWidth = this.width * this._renderer._pixelDensity;
-    const canvasHeight = this.height * this._renderer._pixelDensity;
+    const { x: transformedX, y: transformedY } = this.worldToScreen(new this.Vector(x, y));
+    const canvasWidth = this.width;
+    const canvasHeight = this.height;
     if (transformedX < 0.4 * canvasWidth) {
       if (transformedY < 0.4 * canvasHeight) {
         return 'top left';

src/core/environment.js

@@ -1384,27 +1384,9 @@ function environment(p5, fn){
    *
    */
   fn.worldToScreen = function(worldPosition) {
-    const renderer = this._renderer;
-    if (renderer.drawingContext instanceof CanvasRenderingContext2D) {
-      // Handle 2D context
-      const transformMatrix = new DOMMatrix()
-        .scale(1 / renderer._pInst.pixelDensity())
-        .multiply(renderer.drawingContext.getTransform());
-      const screenCoordinates = transformMatrix.transformPoint(
-        new DOMPoint(worldPosition.x, worldPosition.y)
-      );
-      return new p5.Vector(screenCoordinates.x, screenCoordinates.y);
-    } else {
-          // Handle WebGL context (3D)
-          const modelViewMatrix = renderer.calculateCombinedMatrix();
-          const cameraCoordinates = modelViewMatrix.multiplyPoint(worldPosition);
-          const normalizedDeviceCoordinates =
-            renderer.states.uPMatrix.multiplyAndNormalizePoint(cameraCoordinates);
-          const screenX = (0.5 + 0.5 * normalizedDeviceCoordinates.x) * this.width;
-          const screenY = (0.5 - 0.5 * normalizedDeviceCoordinates.y) * this.height;
-          const screenZ = 0.5 + 0.5 * normalizedDeviceCoordinates.z;
-          return new Vector(screenX, screenY, screenZ);
-    }
+    const matrix = this._renderer.getWorldToScreenMatrix();
+    const screenPosition = matrix.multiplyAndNormalizePoint(worldPosition);
+    return screenPosition;
   };
   /**
    * Converts 2D screen coordinates to 3D world coordinates.
@@ -1477,30 +1459,11 @@ function environment(p5, fn){
    *
    */
   fn.screenToWorld = function(screenPosition) {
-    const renderer = this._renderer;
-    if (renderer.drawingContext instanceof CanvasRenderingContext2D) {
-      // Handle 2D context
-      const inverseTransformMatrix = new DOMMatrix()
-        .multiply(renderer.drawingContext.getTransform().inverse())
-        .scale(renderer._pInst.pixelDensity());
-      const screenCoordinates = inverseTransformMatrix.transformPoint(
-        new DOMPoint(screenPosition.x, screenPosition.y)
-      );
-      return new p5.Vector(screenCoordinates.x, screenCoordinates.y);
-    } else {
-      const normalizedDeviceCoordinates = new p5.Vector(
-        screenPosition.x / this.width * 2 - 1,
-        screenPosition.y / this.height * -2 + 1,
-        screenPosition.z * 2 - 1,
-      );
-      let uPMatrixInverse = renderer.states.uPMatrix.copy()
-      uPMatrixInverse = uPMatrixInverse.invert(uPMatrixInverse);
-      let modelViewMatrixInverse = renderer.calculateCombinedMatrix();
-      modelViewMatrixInverse = modelViewMatrixInverse.invert(modelViewMatrixInverse);
-      const cameraCoordinates = uPMatrixInverse.multiplyAndNormalizePoint(normalizedDeviceCoordinates);
-      const worldPosition = modelViewMatrixInverse.multiplyPoint(cameraCoordinates);
-      return worldPosition;
-    }
+    let matrixInverse = this._renderer.getWorldToScreenMatrix();
+    matrixInverse = matrixInverse.invert(matrixInverse);
+
+    const worldPosition = matrixInverse.multiplyAndNormalizePoint(screenPosition);
+    return worldPosition;
   };
 }
 

src/core/p5.Renderer2D.js

@@ -7,6 +7,7 @@ import { Element } from '../dom/p5.Element';
 import { MediaElement } from '../dom/p5.MediaElement';
 import { RGBHDR } from '../color/creating_reading';
 import FilterRenderer2D from '../image/filterRenderer2D';
+import { Matrix } from '../math/p5.Matrix';
 import { PrimitiveToPath2DConverter } from '../shape/custom_shapes';
 
 
@@ -999,6 +1000,13 @@ class Renderer2D extends Renderer {
     this.drawingContext.transform(a, b, c, d, e, f);
   }
 
+  getWorldToScreenMatrix() {
+    let domMatrix = new DOMMatrix()
+      .scale(1 / this._pixelDensity)
+      .multiply(this.drawingContext.getTransform());
+    return new Matrix(domMatrix.toFloat32Array());
+  }
+
   resetMatrix() {
     this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
     this.drawingContext.scale(

src/webgl/p5.RendererGL.js

@@ -1024,12 +1024,23 @@ class RendererGL extends Renderer {
     this.clear(..._col._getRGBA());
   }
 
-  // Combines the model and view matrices to get the uMVMatrix
-  // This method will be reusable wherever you need to update the combined matrix.
-  calculateCombinedMatrix() {
+
+  /**
+   * Get a matrix from world-space to screen-space
+   */
+  getWorldToScreenMatrix() {
     const modelMatrix = this.states.uModelMatrix;
     const viewMatrix = this.states.uViewMatrix;
-    return modelMatrix.copy().mult(viewMatrix);
+    const projectionMatrix = this.states.uPMatrix;
+    const projectedToScreenMatrix = new Matrix(4);
+    projectedToScreenMatrix.scale(this.width, this.height, 1);
+    projectedToScreenMatrix.translate([0.5, 0.5, 0.5]);
+    projectedToScreenMatrix.scale(0.5, -0.5, 0.5);
+
+    const modelViewMatrix = modelMatrix.copy().mult(viewMatrix);
+    const modelViewProjectionMatrix = modelViewMatrix.mult(projectionMatrix);
+    const worldToScreenMatrix = modelViewProjectionMatrix.mult(projectedToScreenMatrix);
+    return worldToScreenMatrix;
   }
 
   //////////////////////////////////////////////
@@ -2204,7 +2215,7 @@ class RendererGL extends Renderer {
     const modelMatrix = this.states.uModelMatrix;
     const viewMatrix = this.states.uViewMatrix;
     const projectionMatrix = this.states.uPMatrix;
-    const modelViewMatrix = this.calculateCombinedMatrix();
+    const modelViewMatrix = modelMatrix.copy().mult(viewMatrix);
 
     shader.setUniform(
       "uPerspective",