p5.min.js WEBGL behaving differently than p5.js

[wagedu]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.5.0

Web browser and version

Firefox 102

Operating System

OSX 10.15

Steps to reproduce this

Steps:

1. Create/place a WEBGL canvas on top of a simple one. If using p5.js, the WEBGL layer can have transparent background. If switching to p5.min.js it renders opaque

Snippet:

// Paste your code here :)
var s2d = function( sketch ) {
  sketch.setup = function() {
    let canvas1 = sketch.createCanvas(100, 100);
    canvas1.position(0,0);
  }
  sketch.draw = function() {
    sketch.background(50);
    sketch.fill(100)
    sketch.ellipse(50,50,100,100)
  }
};

new p5(s2d);

var s3d = function( sketch ) {

  let b2;

   sketch.setup = function() {
    let canvas2 = sketch.createCanvas(100, 100, sketch.WEBGL);
    b2 = sketch.createGraphics(400,400)
    b2.rect(0,0,100,100)
    canvas2.position(0,0);
  }
  sketch.draw = function() {
    //for canvas 2
    // sketch.background(100);
    sketch.clear()
    sketch.rotateX(sketch.frameCount * 0.01);
    sketch.rotateZ(sketch.frameCount * 0.02);
    sketch.cylinder(30, 50);
    sketch.image(b2,0,0)
  }
};

new p5(s3d);

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[davepagurek]

Hi! I tried pasting your code into editor.p5js.org and then toggling between .min.js and .js but I don't see a difference between them. Is there a chance that your non-minified p5 file is from an earlier version? The .min.js output you've shown is the expected output in v1.5.0, which disables alpha by default. Alpha can be turned on by calling setAttributes({ alpha: true }) after creating your canvas.

However, I've noticed a bug when doing this! In your code, you have this:

let canvas2 = sketch.createCanvas(100, 100, sketch.WEBGL);
// ...
canvas2.position(0,0);

Unfortunately, this stops working after a setAttributes call, because setAttributes recreates the canvas element under the hood. Currently, to fix it, one would have to do:

sketch.createCanvas(100, 100, sketch.WEBGL);
sketch.setAttributes({ alpha: true });
let canvas2 = sketch._renderer;
// ...
canvas2.position(0,0);

This doesn't seem great, I wonder if there's a way that we can make the output of createCanvas stay up to date? Or maybe make setAttributes return the new renderer?

Live version here: https://editor.p5js.org/davepagurek/sketches/ZTPqeBdb9

[wagedu]

Yep, my bad. As I changed the old p5.min.js for the new one, did the exact opposite with the p5.js (how?!) and ended up using an old version.
I have "framebuffer" as a shortcut search just to copy the "setAttributes" snippet every.single.time. And I also noticed it not working for me. Thanks for the workaround!

[davepagurek]

For organizational purposes, I'm going to close this issue, but I've made a new issue with a more descriptive title for that issue where the return value of createCanvas stops being valid after setAttributes(): #5902

I've also made another issue here #5891 to discuss a potential solution to let us allow WebGL canvases to have alpha again by default. Feel free to carry on the discussions there 🙂