# WebGL alpha can't be used as a texture

**URL:** <https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981>\
**Category:** Beginners\
**Created:** [March 28, 2022, 1:16pm UTC](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981 "2022-03-28T13:16:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveH](https://avatars.discourse-cdn.com/v4/letter/d/85e7bf/32.png) [@DaveH](https://discourse.processing.org/u/DaveH)\
**Post date:** [March 28, 2022, 1:16pm UTC](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981/1 "2022-03-28T13:16:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [March 29, 2022, 2:24am UTC](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981/2 "2022-03-29T02:24:48Z")

</div>

There are a couple of things that could be going on:

1. If you are using p5.js 1.4.1 you now need to call `setAttributes('alpha', true)` on your WEBGL buffer\*
2. If you have multiple overlapping textured planes then see this [GitHub issue/answer](https://github.com/processing/p5.js/issues/3736#issuecomment-640545729)

Here’s a complete working example:

https://editor.p5js.org/Kumu-Paul/full/heOCY1r9h
- 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.

---

<div class="post-metadata">

**Author:** ![DaveH](https://avatars.discourse-cdn.com/v4/letter/d/85e7bf/32.png) [@DaveH](https://discourse.processing.org/u/DaveH)\
**Post date:** [March 29, 2022, 2:34pm UTC](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981/3 "2022-03-29T14:34:41Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![SantosCuccia](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@SantosCuccia](https://discourse.processing.org/u/SantosCuccia)\
**Post date:** [March 30, 2022, 5:48am UTC](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981/4 "2022-03-30T05:48:56Z")

</div>

I have encountered a similar problem recently, and I am trying to solve it