Update p5.Framebuffer references

[nickmcintyre]

Preparing references in src/webgl/p5.Framebuffer.js for the new website.

PR Checklist

• npm run lint passes
• [Inline documentation] is included / updated

@Qianqianye @davepagurek @limzykenneth

[Qianqianye]

Do we need the 'and' in the sentence 'Removes the framebuffer and from the web page'?
@nickmcintyre @davepagurek

[nickmcintyre]

Good catch @Qianqianye – fixed!

[nickmcintyre]

@Qianqianye @davepagurek also, this method seems broken. I'll open issues soon for a few bugs found while writing.

[davepagurek]

Something a little tricky here is that the framebuffer camera is active here even on the main canvas. Due to some technical internal things (the browser stores main canvas textures upside down compared to other textures), framebuffer cameras render upside down when used on the main canvas.

Probably the way to avoid that here is to do a createCamera() (for the main canvas, not on the framebuffer) at the end, and only call setCamera(cam1) within draw between begin and end.

[davepagurek]

Maybe a key point we should mention here is that you only ever want to apply a framebuffer camera when you're actively drawing to the framebuffer.

In the current example, because it it's being applied outside, the camera is actually only affecting the image call. I added a red background to draw, and it looks like this:

function draw() {
  background('red')
  // Draw to the p5.Framebuffer object.
  myBuffer.begin();
  background(200);
  box();
  myBuffer.end();

  // Display the p5.Framebuffer object.
  image(myBuffer, -50, -50);
}

I was looking into what this needs to be to work, and came to something like this:

// Double-click to toggle between cameras.

let myBuffer;
let cam1;
let cam2;
let usingCam1 = true;

function setup() {
  createCanvas(100, 100, WEBGL);

  // Create a p5.Framebuffer object.
  myBuffer = createFramebuffer();

  // Create cameras between begin/end.
  myBuffer.begin();
  // Create the first camera.
  // Keep its default settings.
  cam1 = myBuffer.createCamera();

  // Create the second camera.
  // Place it at the top-left.
  // Point it at the origin.
  cam2 = myBuffer.createCamera();
  cam2.setPosition(400, -400, 800);
  cam2.lookAt(0, 0, 0);
  myBuffer.end();

  describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');
}

function draw() {
  // Draw to the p5.Framebuffer object.
  myBuffer.begin();
  if (usingCam1) {
    setCamera(cam1);
  } else {
    setCamera(cam2);
  }
  background(200);
  resetMatrix()
  box();
  myBuffer.end();

  // Display the p5.Framebuffer object.
  image(myBuffer, -50, -50);
}

// Toggle the current camera when the user double-clicks.
function doubleClicked() {
  if (usingCam1 === true) {
    usingCam1 = false;
  } else {
    usingCam1 = true;
  }
}

Unfortunately it looks like setCamera right now doesn't update the position from the previous camera position, it just sets the projection matrix, so you have to call resetMatrix() for it to apply, which isn't great. I'll open an issue for that.

I think it might be helpful in the future if cameras didn't auto-set themselves as the active camera when you create them because I think right now it basically means you always have to do something to prevent making a new framebuffer camera from applying to the main canvas.

[nickmcintyre]

I tried reworking this example to call setCamera() within doubleClicked() instead of draw() but can't seem to get it working. Not sure whether this a bug or I'm missing something obvious.

The current draft is accurate, but I figured I'd try to follow the best practice of setting the camera outside of draw(). If there's not a quick fix, then I suggest we go ahead with the current draft.

[davepagurek]

Framebuffers don't save any state (begin/end also act like a push/pop) so you'll still have to set framebuffer cameras within draw. I think the rule is maybe not so much that it must be set outside of draw, but just that it should be set before you actually draw anything. So setting it outside of draw is one way to accomplish that for the main canvas, but the closest we can get for framebuffers is doing it right after its begin.

[nickmcintyre]

Ohh gotcha!

[davepagurek]

Thanks for the updates, looks good!