The Shader can't work, when using it as texture。

[cqu-linmu]

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.4.2

Web browser and version

Chrome://104.0.5112.81

Operating System

Windows

Steps to reproduce this

Steps:

1. load shader
2. set the arg
3. draw a rect with the texture
4. the shader can't work
5. change p5.js to 1.4.0 . The Bug fixed.

Snippet:

// Paste your code here :)

let circlePG,rectPG;
// a shader variable
let circleShader,rectShader;
let color = [1.0, 1.0, 1.0];

function preload(){

  // load the shader
  // circleShader = loadShader('basic.vert', 'circle.frag');
  rectShader = loadShader('basic.vert', 'rect.frag');

}

function setup() {
    // shaders require WEBGL mode to work
    createCanvas(windowWidth, windowHeight,WEBGL);
    // createCanvas(windowWidth, windowHeight, WEBGL);
    // circlePG = createGraphics(200,200, WEBGL);
    rectPG = createGraphics(20,1200, WEBGL);
    noStroke();
}

function draw() {
    background('black');
    // ellipse(windowWidth/2,windowHeight/2,10,10);

    // send resolution of sketch into shader
    // circleShader.setUniform('u_resolution', [circlePG.width, circlePG.height]);
    // circleShader.setUniform('u_color', color);
    rectShader.setUniform('u_resolution', [rectPG.width, rectPG.height]);
    rectShader.setUniform('u_color', color);

    rectPG.shader(rectShader);
    rectPG.rect(-rectPG.width/2,-rectPG.height/2,rectPG.width,rectPG.height);
 
    // circlePG.shader(circleShader);
    // circlePG.ellipse(-circlePG.width/2,-circlePG.height/2,circlePG.width,circlePG.height);
    // image(circlePG, 0, 0, circlePG.width,circlePG.height);

    push();
    texture(rectPG);
    rect(0,0,20,200);
    pop();

    // push();
    // texture(circlePG);
    // ellipse(0,0,200,200);
    // pop();
}

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec3 u_color;

void main(){
    float pct = gl_FragCoord.y/u_resolution.y;
	gl_FragColor = vec4( u_color, pct );
}

[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! This is an intentional change that got made in 1.4.1 to disable alpha by default in WebGL sketches/graphics to make blending work more consistently: #5555

For your sketch to work the same as in 1.4.0, you can add an alpha channel to your WebGL graphic by adding this line in setup:

rectPG.setAttributes({ alpha: true })

...alternatively, in your shader, you can fade to opaque black instead of fading to 0 alpha:

gl_FragColor = vec4( u_color * pct, 1.0 );

Let me know if either of those work for you!

[cqu-linmu]

@davepagurek
Thank you !
The problem was solved with your guidance.
After testing, it is indeed caused by alpha being disabled in WebGL.

[Qianqianye]

Thank you @davepagurek and @LinMu-z. I will close this issue for now.