Hi dev team, I have been using this lib for a couple of weeks now, and I like it a lot.

But for some reason, I cannot manage to draw some text on the canvas. I have tried a lot of options, like using a dedicated-to-texts frameBuffer inside mine, and nothing. The only message I happen to have is: p5.js says: texture() was expecting p5.Image|p5.MediaElement|p5.Graphics for the first parameter, received object instead. . This message is just a friendly p5 message, and doesn't block anything. I precise, I use this lib in most of my sketches and I have no issues with it (except when I want to draw some text).

I import the lib in index.html (like all others) like: <script type="text/javascript" src="core/externalLibs/p5/p5.Framebuffer.min.js"></script>

Worth mentioning:

p5.js v1.4.0

I join a code sample down there. I have added an ellipse in the draw function to ensure P5 works.

First case: I have nothing on screen (except the ellipse and the grey-ish background set as 100).

let textToShow = "FINALLY SOME TEXT";
let blockbold;
let TEXT_FB, F1_FB;

function preload() {
    blockbold = loadFont('assets/fonts/BlockBold.ttf');
}

function setup() {
    // creates canvas in WEBGL
    CNV = createCanvas(windowWidth, windowHeight, WEBGL);

    // build framebuffer objects
    F1_FB = createFramebuffer({ colorFormat: 'float' });
    TEXT_FB = createFramebuffer({ colorFormat: 'float' });
}

function draw() {
    background(0);
    F1_FB.draw(() => {
        clear();
        background(100);
        push();
        drawSomeTextHere();
        pop();
    });
    push()
    texture(F1_FB.color)
    plane(CNV.width, -CNV.height)
    pop()

    push()
    fill(360, 100, 100);
    ellipse(mouseX - CNV.width / 2, mouseY - CNV.height / 2, 50, 50);
    drawSomeTextHere();
    pop()
}

function drawSomeTextHere() {
    push();
    stroke(255);
    strokeWeight(10);
    textSize(30);
    textFont(blockbold);
    text(textToShow, 0, 0);
    pop();
}

Second case, I have text on screen when I remove the script import in index.html.

let textToShow = "FINALLY SOME TEXT";
let blockbold;

function preload() {
    blockbold = loadFont('assets/fonts/BlockBold.ttf');
}

function setup() {
    // creates canvas in WEBGL
    CNV = createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
    background(0);
    push();
    fill(360, 100, 100);
    ellipse(mouseX - CNV.width / 2, mouseY - CNV.height / 2, 50, 50);
    drawSomeTextHere();
    pop();
}

function drawSomeTextHere() {
    push();
    stroke(255);
    strokeWeight(10);
    textSize(30);
    textFont(blockbold);
    text(textToShow, 0, 0);
    pop();
}

Thanks for your help 🙏

• The blur amount will start to be gained while the depth is outside the given depth of field (dof).
• The focal target is located in the centre of the depth of field.
• Use setDof() to set the depth of field.
• Defaults to 0.

I'd need to just add gl.getExtension('OES_texture_float') in the constructor and then use gl.FLOAT here: https://github.com/davepagurek/p5.Framebuffer/blob/main/p5.Framebuffer.js#L119

This will deal with the fact that the projection matrix will need to change when sizes are different: https://github.com/davepagurek/p5.Framebuffer/issues/14

This will involve:

• Creating a WebGL2 context
• If it's available:
  • Creating an antialiased renderbuffer
  • Blitting that renderbuffer to the framebuffer texture when asked for
• Otherwise:
  • Doubling the fbo's dimensions to approximate supersampling

This will involve updating the projection matrix's aspect ratio to match the framebuffer, and managing calls to camera functions that happen within the fbo callback.

Right now I think this breaks:

fbo1.draw(() => {
  fbo2.draw(() => {
    // etc
  })
  texture(fbo2.color)
  rect(0, 0, width, height)
})

This is because the draw call binds the main canvas when it finishes: https://github.com/davepagurek/p5.Framebuffer/blob/main/p5.Framebuffer.js#L206

To fix this, it would need to record whatever context is currently bound before it starts, and then re-bind that at the end again instead of binding null (the main canvas.)

As a temporary workaround, this should be fine:

fbo2.draw(() => {
  // etc
})
fbo1.draw(() => {
  texture(fbo2.color)
  rect(0, 0, width, height)
})

Fixes https://github.com/davepagurek/p5.Framebuffer/issues/5

In p5 1.4.1, WebGL graphics/canvases default to not having an alpha channel to make alpha blending less confusing by default (thanks @SableRaf for finding this!) Previously, p5.Framebuffer would always have an alpha channel, leading to unexpected results in p5 1.4.1.

After this change:

• The framebuffer will create an alpha channel if and only if the WebGL context it's attached to has one
• The example sketch calls background(255) after clear(), since the behaviour of clear() looks different from v1.4.0 to v1.4.1 if you don't also set a background color