Fix setAttributes messing with state

Author: davepagurek

preview/index.html

@@ -20,21 +20,26 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
+      let fbo;
       p.setup = async function () {
-        p.createCanvas(400, 400);
+        p.createCanvas(400, 400, p.WEBGL);
+        fbo = p.createFramebuffer()
       };
 
       p.draw = function () {
         p.push();
         p.background(200);
+        fbo.begin()
+        p.background('blue')
         p.strokeWeight(10);
         p.push()
         p.stroke('red')
         p.line(-100, -100, 100, 100);
         p.pop()
         p.translate(200, 200)
         p.line(-100, -100, 100, 100);
-        debugger
+        fbo.end()
+        p.image(fbo, 0, 0)
         p.pop();
       };
     };

src/webgl/p5.Framebuffer.js

@@ -905,7 +905,6 @@ class Framebuffer {
     const cam = new FramebufferCamera(this);
     cam._computeCameraDefaultSettings();
     cam._setDefaultCamera();
-    this.renderer.states.setValue('curCamera', cam);
     return cam;
   }
 
@@ -1069,6 +1068,7 @@ class Framebuffer {
     // this.renderer.setCamera(this.defaultCamera);
     this.renderer.states.setValue('curCamera', this.defaultCamera);
     // set the projection matrix (which is not normally updated each frame)
+    debugger
     this.renderer.states.setValue('uPMatrix', this.renderer.states.uPMatrix.clone());
     this.renderer.states.uPMatrix.set(this.defaultCamera.projMatrix);
     this.renderer.states.setValue('uViewMatrix', this.renderer.states.uViewMatrix.clone());

src/webgl/p5.RendererGL.js

@@ -181,6 +181,8 @@ class RendererGL extends Renderer {
     this.states.uPMatrix = new Matrix(4);
 
     this.states.curCamera = new Camera(this);
+    this.states.uPMatrix.set(this.states.curCamera.projMatrix);
+    this.states.uViewMatrix.set(this.states.curCamera.cameraMatrix);
 
     this.states.enableLighting = false;
     this.states.ambientLightColors = [];
@@ -207,24 +209,24 @@ class RendererGL extends Renderer {
 
     this.states.curBlendMode = constants.BLEND;
 
-    this.states.setValue('_hasSetAmbient', false);
-    this.states.setValue('_useSpecularMaterial', false);
-    this.states.setValue('_useEmissiveMaterial', false);
-    this.states.setValue('_useNormalMaterial', false);
-    this.states.setValue('_useShininess', 1);
-    this.states.setValue('_useMetalness', 0);
+    this.states._hasSetAmbient = false;
+    this.states._useSpecularMaterial = false;
+    this.states._useEmissiveMaterial = false;
+    this.states._useNormalMaterial = false;
+    this.states._useShininess = 1;
+    this.states._useMetalness = 0;
 
     this.states.tint = [255, 255, 255, 255];
 
     this.states.constantAttenuation = 1;
     this.states.linearAttenuation = 0;
     this.states.quadraticAttenuation = 0;
 
-    this.states.setValue('_currentNormal', new Vector(0, 0, 1));
+    this.states._currentNormal = new Vector(0, 0, 1);
 
     this.states.drawMode = constants.FILL;
 
-    this.states.setValue('_tex', null);
+    this.states._tex = null;
     this.states.textureMode = constants.IMAGE;
     this.states.textureWrapX = constants.CLAMP;
     this.states.textureWrapY = constants.CLAMP;
@@ -2633,9 +2635,7 @@ function rendererGL(p5, fn) {
       }
     }
 
-    this.push();
     this._renderer._resetContext();
-    this.pop();
 
     if (this._renderer.states.curCamera) {
       this._renderer.states.curCamera._renderer = this._renderer;

test/unit/webgl/p5.Framebuffer.js

@@ -48,6 +48,7 @@ suite('p5.Framebuffer', function() {
             myp5.box(5, 5, 5);
           });
 
+          console.log(myp5._renderer.states.uPMatrix.mat4)
           // Draw the framebuffer to the canvas
           myp5.background(0);
           myp5.noStroke();