p5.Graphics off-screen buffer in WebGL mode appears blank when using setAttributes("alpha", true); and in Firefox when using setAttributes("antialias", true);

[jellygatorade]

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

v1.4.2

Web browser and version

Chrome 105.0.5195.127, Firefox 105.0.1, Edge 105.0.1343.50

Operating System

Windows 10 21H1 Build 19043.1889

Steps to reproduce this

Hello again 👋.

I am using the p5.Graphics off-screen buffer in WebGL mode to write a back buffer as exemplified here.

I am using the same code as specified in #5814 with the addition of setAttributes("alpha", true); within setup().

When setAttributes("alpha", true); is present, the p5.Graphics buffer appears blank. When commented out, that frame buffer appears as intended. There are no errors thrown with this behavior.

...and after some further testing with setAttributes("antialias", true); - this seems to break the p5.Graphics instance in Firefox but not Chrome. I am currently only interested in using alpha compositing for my current needs so I didn't think until just now to test extensively with the other attributes.

Here is my full code with JS and GLSL:

JavaScript:

let theShader, backbuffer, canvas;

function preload() {
  theShader = loadShader("render.vert", "render.frag");
}

function setup() {
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes("alpha", true);
  //setAttributes("antialias", true);

  // create an off-screen canvas to be used as a back buffer
  backbuffer = createGraphics(width, height, WEBGL);
  backbuffer.clear();
}

function draw() {
  // move the image drawn on the main canvas from the previous frame to the back buffer
  backbuffer.clear();
  backbuffer.image(canvas, width * -0.5, height * -0.5, width, height);

  shader(theShader);

  // send the back buffer, where the previous frame was drawn, into the shader program
  theShader.setUniform("buffer", backbuffer);

  // enter a value to calculate according to the current screen size
  theShader.setUniform("res", [width, height]);

  // time as current frame count
  theShader.setUniform("time", [frameCount]);

  // since the mouse coordinates and the position of pixels in the shader are converted into values between 0 and 1, the mouse coordinates are also changed accordingly
  let mx = mouseX / width;
  let my = 1 + (-1 * mouseY) / height;
  theShader.setUniform("mouse", [mx, my]);

  rect(0, 0, width, height);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Vertex Shader:

// https://github.com/aferriss/p5jsShaderExamples
// This vertex shader only functions to draw a rectangle to draw the image.

#ifdef GL_ES
precision highp float;
#endif

attribute vec3 aPosition;

void main() {

  // Copy the position data into a vec4, adding 1.0 as the w parameter
  vec4 positionVec4 = vec4(aPosition, 1.0);

  // Scale to make the output fit the canvas
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 

  // Send the vertex information on to the fragment shader
  gl_Position = positionVec4;
}

Fragment Shader:

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 res;
uniform sampler2D buffer;
uniform float time;
uniform vec2 mouse;

void main() {
  // gl_FragCoord.xy can be thought of as the position of the pixel
  vec2 st = gl_FragCoord.xy;
  
  vec3 col = vec3(0);
  
  // the pixel position is changing to a value between 0 and 1
  vec2 tc = st / res;
  
  // the pixel position is changing to a value between 0 and 1
  vec2 buffer_tc = st / res;
  // corrected because the back buffer y direction is reversed
  buffer_tc.y = 1. + buffer_tc.y * -1.; 
  
  // get pixel values from the back buffer image with a function called texture2D.
  // texture2D(texture, texture coordinates (between 0 and 1))
  vec3 buffer_samp = texture2D(buffer, buffer_tc).xyz;
  
  // radius of circle
  float r = 0.1;

  // depending on the condition, pixels that meet the criteria of the circle become white.
  float ell = smoothstep(r,r-0.01,length((tc-mouse) * res / res.y));
  
  // adds a darker pixel value from the previous screen to the current screen
  col = vec3(ell) + buffer_samp.xyz * 0.98;

  gl_FragColor = vec4(col, 1.0);
}

Thank you. Please let me know if I can give more information to troubleshoot or if I have missed reading something in the p5.js documentation 😊.

[davepagurek]

Thanks again for filing this! I haven't looked closely enough to find a cause yet, but I updated your sketch to load p5 v1.4.2 instead of an older version, and found that Chrome also shows the same behaviour if I setAttributes('alpha', true). Not sure why just yet, but I'll look into this one again later today probably!

[jellygatorade]

Yep, that matches my assessment. Maybe this helps clarify ->

With p5 v1.4.2 and Chrome v105.0.5195.127:

• setAttributes("alpha", true); causes p5.Graphics to appear blank
• setAttributes("antialias", true); works as expected

With p5 v1.4.2 and Firefox v105.0.1:

• setAttributes("alpha", true); causes p5.Graphics to appear blank
• setAttributes("antialias", true); causes p5.Graphics to appear blank

[jellygatorade]

@davepagurek Amazing, I was just about to start digging back into this issue tonight. Looked back at the thread here and see your pull request. Thanks again for your work on this!