Hi, I’m using WebGL as a createGraphics object for rendering a texture.
My fragment shader uses the alpha channel in gl_FragColor for a smooth cut-out.
I want to render the webGL context using this alpha channel, but it completely ignores it, and renders it as solid.
My main canvas I’m rendering the context to is a P2D.
I’ve tested using a PNG with an alpha channel and that works great, so the blend mode is correct on the canvas, it’s just not working with the WebGL context.
I’m drawing with image(myWebGL,0,0); and I’ve tried the blend() function without success.
I’ve also tried setting gl.colorMask to all true, but it didn’t work.
Can anybody help please? Or is this a known broken thing?
There are a couple of things that could be going on:
If you are using p5.js 1.4.1 you now need to call setAttributes('alpha', true) on your WEBGL buffer*
If you have multiple overlapping textured planes then see this GitHub issue/answer
Here’s a complete working example:
this was a design change because a lot of folks were being caught out by the fact that previously, drawing an opaque background, and then drawing some transparent geometry on top of it, effectively “punched a hole” in the background causing the DOM content underneath the canvas to become visible.
Brilliant. Thanks for the great help, man. It seems odd that P5 defaults to not using alpha, which makes it different from the normal texture behaviour, and quite unexpected. Oh well, all good now, thanks again!