Merge pull request #8322 from processing/fix/fbo-ortho

Make sure camera methods on framebuffers work with push/pop

Author: davepagurek

src/webgl/p5.Camera.js

@@ -1844,6 +1844,8 @@ class Camera {
     _cam.projMatrix = this.projMatrix.copy();
     _cam.yScale = this.yScale;
 
+    _cam.cameraType = this.cameraType;
+
     return _cam;
   }
 
@@ -2945,15 +2947,18 @@ function camera(p5, fn){
   p5.Camera = Camera;
 
   RendererGL.prototype.camera = function(...args) {
+    this.states.setValue('curCamera', this.states.curCamera.clone());
     this.states.curCamera.camera(...args);
   };
 
   RendererGL.prototype.perspective = function(...args) {
+    this.states.setValue('curCamera', this.states.curCamera.clone());
     this.states.curCamera.perspective(...args);
   };
 
   RendererGL.prototype.linePerspective = function(enable) {
     if (enable !== undefined) {
+      this.states.setValue('curCamera', this.states.curCamera.clone());
       // Set the line perspective if enable is provided
       this.states.curCamera.useLinePerspective = enable;
     } else {
@@ -2963,10 +2968,12 @@ function camera(p5, fn){
   };
 
   RendererGL.prototype.ortho = function(...args) {
+    this.states.setValue('curCamera', this.states.curCamera.clone());
     this.states.curCamera.ortho(...args);
   };
 
   RendererGL.prototype.frustum = function(...args) {
+    this.states.setValue('curCamera', this.states.curCamera.clone());
     this.states.curCamera.frustum(...args);
   };
 

src/webgl/p5.Framebuffer.js

@@ -31,6 +31,12 @@ class FramebufferCamera extends Camera {
     this.defaultCameraFOV =
       2 * Math.atan(this.fbo.height / 2 / this.defaultEyeZ);
   }
+
+  copy() {
+    const _cam = super.copy();
+    _cam.fbo = this.fbo;
+    return _cam;
+  }
 }
 
 class FramebufferTexture {

test/unit/visual/cases/webgl.js

@@ -25,6 +25,42 @@ visualSuite('WebGL', function() {
       p5.box(20);
       screenshot();
     });
+
+    visualTest('Camera settings on framebuffers reset after push/pop', function(p5, screenshot) {
+      p5.createCanvas(100, 100, p5.WEBGL);
+      p5.setAttributes({ antialias: true });
+      const fbo = p5.createFramebuffer();
+
+      p5.background(220);
+      p5.imageMode(p5.CENTER);
+
+      fbo.begin();
+      p5.push();
+      p5.ortho();
+      p5.translate(0, -25);
+      for (let i = -1; i <= 1; i++) {
+        p5.push();
+        p5.translate(i * 35, 0);
+        p5.box(25, 25, 150);
+        p5.pop();
+      }
+      p5.pop();
+
+
+      p5.push();
+      p5.translate(0, 25);
+      for (let i = -1; i <= 1; i++) {
+        p5.push();
+        p5.translate(i * 35, 0);
+        p5.box(25, 25, 150);
+        p5.pop();
+      }
+      p5.pop();
+
+      fbo.end();
+      p5.image(fbo, 0, 0);
+      screenshot();
+    });
   });
 
   visualSuite('filter', function() {
@@ -758,7 +794,7 @@ visualSuite('WebGL', function() {
       screenshot();
     });
   });
-  
+
   visualSuite('p5.strands', () => {
     visualTest('it recovers from p5.strands errors', (p5, screenshot) => {
       p5.createCanvas(50, 50, p5.WEBGL);

test/unit/visual/screenshots/WebGL/Camera/Camera settings on framebuffers reset after push%2Fpop/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}