p5.Graphics off-screen buffer in WebGL mode appears blank when using setAttributes("alpha", true); and in Firefox when using setAttributes("antialias", true); #5817
Description
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 😊.