Separate Model and View Matrices.

src/webgl/3d_primitives.js

@@ -1246,7 +1246,7 @@ p5.RendererGL.prototype.triangle = function(args) {
   // this matrix multiplication transforms those two unit vectors
   // onto the required vector prior to rendering, and moves the
   // origin appropriately.
-  const uMVMatrix = this.uMVMatrix.copy();
+  const uModelMatrix = this.uModelMatrix.copy();
   try {
     // triangle orientation.
     const orientation = Math.sign(x1*y2-x2*y1 + x2*y3-x3*y2 + x3*y1-x1*y3);
@@ -1255,13 +1255,13 @@ p5.RendererGL.prototype.triangle = function(args) {
       x3 - x1, y3 - y1, 0, 0, // the resulting unit Y-axis
       0, 0, orientation, 0,   // the resulting unit Z-axis (Reflect the specified order of vertices)
       x1, y1, 0, 1            // the resulting origin
-    ]).mult(this.uMVMatrix);
+    ]).mult(this.uModelMatrix);
 
-    this.uMVMatrix = mult;
+    this.uModelMatrix = mult;
 
     this.drawBuffers(gId);
   } finally {
-    this.uMVMatrix = uMVMatrix;
+    this.uModelMatrix = uModelMatrix;
   }
 
   return this;
@@ -1383,15 +1383,15 @@ p5.RendererGL.prototype.arc = function(args) {
     this.createBuffers(gId, arcGeom);
   }
 
-  const uMVMatrix = this.uMVMatrix.copy();
+  const uModelMatrix = this.uModelMatrix.copy();
 
   try {
-    this.uMVMatrix.translate([x, y, 0]);
-    this.uMVMatrix.scale(width, height, 1);
+    this.uModelMatrix.translate([x, y, 0]);
+    this.uModelMatrix.scale(width, height, 1);
 
     this.drawBuffers(gId);
   } finally {
-    this.uMVMatrix = uMVMatrix;
+    this.uModelMatrix = uModelMatrix;
   }
 
   return this;
@@ -1443,14 +1443,14 @@ p5.RendererGL.prototype.rect = function(args) {
     // opposite corners at (0,0) & (1,1).
     //
     // before rendering, this square is scaled & moved to the required location.
-    const uMVMatrix = this.uMVMatrix.copy();
+    const uModelMatrix = this.uModelMatrix.copy();
     try {
-      this.uMVMatrix.translate([x, y, 0]);
-      this.uMVMatrix.scale(width, height, 1);
+      this.uModelMatrix.translate([x, y, 0]);
+      this.uModelMatrix.scale(width, height, 1);
 
       this.drawBuffers(gId);
     } finally {
-      this.uMVMatrix = uMVMatrix;
+      this.uModelMatrix = uModelMatrix;
     }
   } else {
     // Use Immediate mode to round the rectangle corner,

src/webgl/GeometryBuilder.js

@@ -11,7 +11,7 @@ class GeometryBuilder {
     this.renderer = renderer;
     renderer._pInst.push();
     this.identityMatrix = new p5.Matrix();
-    renderer.uMVMatrix = new p5.Matrix();
+    renderer.uModelMatrix = new p5.Matrix();
     this.geometry = new p5.Geometry();
     this.geometry.gid = `_p5_GeometryBuilder_${GeometryBuilder.nextGeometryId}`;
     GeometryBuilder.nextGeometryId++;
@@ -25,7 +25,7 @@ class GeometryBuilder {
   transformVertices(vertices) {
     if (!this.hasTransform) return vertices;
 
-    return vertices.map(v => this.renderer.uMVMatrix.multiplyPoint(v));
+    return vertices.map(v => this.renderer.uModelMatrix.multiplyPoint(v));
   }
 
   /**
@@ -46,11 +46,11 @@ class GeometryBuilder {
    * transformations.
    */
   addGeometry(input) {
-    this.hasTransform = !this.renderer.uMVMatrix.mat4
+    this.hasTransform = !this.renderer.uModelMatrix.mat4
       .every((v, i) => v === this.identityMatrix.mat4[i]);
 
     if (this.hasTransform) {
-      this.renderer.uNMatrix.inverseTranspose(this.renderer.uMVMatrix);
+      this.renderer.uNMatrix.inverseTranspose(this.renderer.uModelMatrix);
     }
 
     let startIdx = this.geometry.vertices.length;

src/webgl/interaction.js

@@ -686,7 +686,7 @@ p5.prototype._grid = function(size, numDivs, xOff, yOff, zOff) {
       this._renderer.curStrokeColor[1] * 255,
       this._renderer.curStrokeColor[2] * 255
     );
-    this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix);
+    this._renderer.uModelMatrix.reset();
 
     // Lines along X axis
     for (let q = 0; q <= numDivs; q++) {
@@ -733,7 +733,7 @@ p5.prototype._axesIcon = function(size, xOff, yOff, zOff) {
 
   return function() {
     this.push();
-    this._renderer.uMVMatrix.set(this._renderer._curCamera.cameraMatrix);
+    this._renderer.uModelMatrix.reset();
 
     // X axis
     this.strokeWeight(2);

src/webgl/p5.Camera.js

@@ -1390,7 +1390,8 @@ p5.Camera = class Camera {
     this.cameraMatrix.translate([tx, ty, tz]);
 
     if (this._isActive()) {
-      this._renderer.uMVMatrix.set(this.cameraMatrix);
+      this._renderer.uModelMatrix.set(this.modelMatrix);
+      this._renderer.uViewMatrix.set(this.viewMatrix);
     }
     return this;
   }
@@ -1599,13 +1600,12 @@ p5.Camera = class Camera {
     this.cameraMatrix = cam.cameraMatrix.copy();
     this.projMatrix = cam.projMatrix.copy();
 
-    // If the target camera is active, update uMVMatrix and uPMatrix.
     if (this._isActive()) {
-      this._renderer.uMVMatrix.mat4 = this.cameraMatrix.mat4.slice();
-      this._renderer.uPMatrix.mat4 = this.projMatrix.mat4.slice();
+      this._renderer.uModelMatrix.reset();
+      this._renderer.uViewMatrix.set(this.cameraMatrix);
+      this._renderer.uPMatrix.set(this.projMatrix);
     }
   }
-
   /**
  * For the cameras cam0 and cam1 with the given arguments, their view are combined
  * with the parameter amt that represents the quantity, and the obtained view is applied.

src/webgl/p5.Framebuffer.js

@@ -842,9 +842,10 @@ class Framebuffer {
     // RendererGL.reset() does, but this does not try to clear any buffers;
     // it only sets the camera.
     this.target.setCamera(this.defaultCamera);
-    this.target._renderer.uMVMatrix.set(
-      this.target._renderer._curCamera.cameraMatrix
-    );
+    this.target.resetMatrix();
+    this.target._renderer.uViewMatrix
+      .set(this.target._renderer._curCamera.cameraMatrix);
+    this.target._renderer.uModelMatrix.set(this.target.modelMatrix);
   }
 
   /**

src/webgl/p5.Matrix.js

@@ -47,6 +47,15 @@ p5.Matrix = class {
     return this;
   }
 
+  reset() {
+    if (this.mat3) {
+      this.mat3.set([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+    } else if (this.mat4) {
+      this.mat4.set([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    }
+    return this;
+  }
+
   /**
  * Replace the entire contents of a 4x4 matrix.
  * If providing an array or a p5.Matrix, the values will be copied without

src/webgl/p5.RendererGL.Retained.js

@@ -195,15 +195,16 @@ p5.RendererGL.prototype.drawBuffersScaled = function(
   scaleY,
   scaleZ
 ) {
-  const uMVMatrix = this.uMVMatrix.copy();
+  let originalModelMatrix = this.uModelMatrix.copy();
   try {
-    this.uMVMatrix.scale(scaleX, scaleY, scaleZ);
+    this.uModelMatrix.scale(scaleX, scaleY, scaleZ);
+
     this.drawBuffers(gId);
   } finally {
-    this.uMVMatrix = uMVMatrix;
+
+    this.uModelMatrix = originalModelMatrix;
   }
 };
-
 p5.RendererGL.prototype._drawArrays = function(drawMode, gId) {
   this.GL.drawArrays(
     drawMode,

src/webgl/p5.RendererGL.js

@@ -530,6 +530,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
  * model view, projection, & normal
  * matrices
  */
+    this.uModelMatrix = new p5.Matrix();
+    this.uViewMatrix = new p5.Matrix();
     this.uMVMatrix = new p5.Matrix();
     this.uPMatrix = new p5.Matrix();
     this.uNMatrix = new p5.Matrix('mat3');
@@ -855,7 +857,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
   _update() {
     // reset model view and apply initial camera transform
     // (containing only look at info; no projection).
-    this.uMVMatrix.set(this._curCamera.cameraMatrix);
+    this.uModelMatrix.reset();
+    this.uViewMatrix.set(this._curCamera.cameraMatrix);
 
     // reset light data for new frame.
 
@@ -1488,9 +1491,9 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
 
   applyMatrix(a, b, c, d, e, f) {
     if (arguments.length === 16) {
-      p5.Matrix.prototype.apply.apply(this.uMVMatrix, arguments);
+      p5.Matrix.prototype.apply.apply(this.uModelMatrix, arguments);
     } else {
-      this.uMVMatrix.apply([
+      this.uModelMatrix.apply([
         a, b, 0, 0,
         c, d, 0, 0,
         0, 0, 1, 0,
@@ -1514,7 +1517,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
       y = x.y;
       x = x.x;
     }
-    this.uMVMatrix.translate([x, y, z]);
+    this.uModelMatrix.translate([x, y, z]);
     return this;
   }
 
@@ -1527,15 +1530,15 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
  * @chainable
  */
   scale(x, y, z) {
-    this.uMVMatrix.scale(x, y, z);
+    this.uModelMatrix.scale(x, y, z);
     return this;
   }
 
   rotate(rad, axis) {
     if (typeof axis === 'undefined') {
       return this.rotateZ(rad);
     }
-    p5.Matrix.prototype.rotate.apply(this.uMVMatrix, arguments);
+    p5.Matrix.prototype.rotate.apply(this.uModelMatrix, arguments);
     return this;
   }
 
@@ -1561,10 +1564,13 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     // add webgl-specific style properties
     const properties = style.properties;
 
-    properties.uMVMatrix = this.uMVMatrix.copy();
+    properties.uModelMatrix = this.uModelMatrix.copy();
+    properties.uViewMatrix = this.uViewMatrix.copy();
     properties.uPMatrix = this.uPMatrix.copy();
     properties._curCamera = this._curCamera;
 
+    this.uViewMatrix.set(this._curCamera.cameraMatrix);
+
     // make a copy of the current camera for the push state
     // this preserves any references stored using 'createCamera'
     this._curCamera = this._curCamera.copy();
@@ -1648,7 +1654,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     }
   }
   resetMatrix() {
-    this.uMVMatrix.set(this._curCamera.cameraMatrix);
+    this.uModelMatrix.reset();
+    this.uViewMatrix.set(this._curCamera.cameraMatrix);
     return this;
   }
 

src/webgl/p5.Shader.js

@@ -316,9 +316,10 @@ p5.Shader = class {
   }
 
   _setMatrixUniforms() {
+    const modelMatrix = this._renderer.uModelMatrix;
     const viewMatrix = this._renderer._curCamera.cameraMatrix;
     const projectionMatrix = this._renderer.uPMatrix;
-    const modelViewMatrix = this._renderer.uMVMatrix;
+    const modelViewMatrix = (modelMatrix.copy()).mult(viewMatrix);
 
     const modelViewProjectionMatrix = modelViewMatrix.copy();
     modelViewProjectionMatrix.mult(projectionMatrix);
@@ -334,6 +335,7 @@ p5.Shader = class {
     }
     this.setUniform('uViewMatrix', viewMatrix.mat4);
     this.setUniform('uProjectionMatrix', projectionMatrix.mat4);
+    this.setUniform('uModelMatrix', modelMatrix.mat4);
     this.setUniform('uModelViewMatrix', modelViewMatrix.mat4);
     this.setUniform(
       'uModelViewProjectionMatrix',

test/unit/webgl/p5.Camera.js

@@ -392,7 +392,7 @@ suite('p5.Camera', function() {
       // the renderer's matrix will also change.
       assert.deepEqual(
         copyCam.cameraMatrix.mat4,
-        myp5._renderer.uMVMatrix.mat4
+        myp5._renderer.uViewMatrix.mat4
       );
       assert.deepEqual(
         copyCam.projMatrix.mat4,

test/unit/webgl/p5.RendererGL.js

@@ -593,13 +593,23 @@ suite('p5.RendererGL', function() {
   suite('push() and pop() work in WEBGL Mode', function() {
     test('push/pop and translation works as expected in WEBGL Mode', function(done) {
       myp5.createCanvas(100, 100, myp5.WEBGL);
-      var modelView = myp5._renderer.uMVMatrix.copy();
+      var modelMatrixBefore = myp5._renderer.uModelMatrix.copy();
+      var viewMatrixBefore = myp5._renderer.uViewMatrix.copy();
+
       myp5.push();
       myp5.rotateX(Math.random(0, 100));
       myp5.translate(20, 100, 5);
-      assert.notEqual(modelView.mat4, myp5._renderer.uMVMatrix.mat4);
+      // Check if the model matrix has changed
+      assert.notDeepEqual(modelMatrixBefore.mat4,
+        myp5._renderer.uModelMatrix.mat4);
+      // Check if the view matrix has changed
+      assert.notDeepEqual(viewMatrixBefore.mat4,
+        myp5._renderer.uViewMatrix.mat4);
       myp5.pop();
-      assert.deepEqual(modelView.mat4, myp5._renderer.uMVMatrix.mat4);
+      // Check if both the model and view matrices are restored after popping
+      assert.deepEqual(modelMatrixBefore.mat4,
+        myp5._renderer.uModelMatrix.mat4);
+      assert.deepEqual(viewMatrixBefore.mat4, myp5._renderer.uViewMatrix.mat4);
       done();
     });