# Access to gl.blendFuncSeparate

**URL:** <https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411>\
**Category:** Questions\
**Created:** [October 16, 2019, 6:05pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411 "2019-10-16T18:05:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Corentin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/corentin/32/4861_2.png) [@Corentin](https://forum.babylonjs.com/u/Corentin)\
**Post date:** [October 16, 2019, 6:05pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/1 "2019-10-16T18:05:12Z")

</div>

Hello,

I saw that we can set alphaMode on material or meshes. But I would need to set blendFuncSeparate to specific values:  
gl.blendFuncSeparate(gl.SRC\_ALPHA, gl.ONE\_MINUS\_SRC\_ALPHA, gl.ONE, gl.ONE\_MINUS\_SRC\_ALPHA);

and

gl.blendFuncSeparate(gl.ZERO, gl.ONE\_MINUS\_SRC\_ALPHA, gl.ZERO, gl.ONE\_MINUS\_SRC\_ALPHA);

I’m wondering if I can have access to the gl context from babylon ? Thanks !

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 16, 2019, 7:32pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/2 "2019-10-16T19:32:03Z")

</div>

You can change all of them through engine.alphaState.setAlphaBlendConstants or engine.alphaState. …

Would that work for you ? it is what we use internally

---

<div class="post-metadata">

**Author:** ![Corentin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/corentin/32/4861_2.png) [@Corentin](https://forum.babylonjs.com/u/Corentin)\
**Post date:** [October 17, 2019, 3:46pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/3 "2019-10-17T15:46:50Z")

</div>

Thanks ! This is what I’m looking for however changing them directly or using .setAlphaBlendConstants doesn’t seems to change anything in my render.

Just to give a bit of context, I’m having the black alpha problem (This is a pure blue) :  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/ed02f74c0c85e0a129f3ae30f760b6bd838b5937.png)  
This is a plane with a renderTarget that has alpha. Solution for this in native is setting gl.blendFunc( gl.SRC\_ALPHA, gl.ONE\_MINUS\_SRC\_ALPHA );

But I can’t get the same on babylon

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 17, 2019, 3:52pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/4 "2019-10-17T15:52:40Z")

</div>

You should try to set it in mesh.onBeforeRenderObservable to ensure it does not get overriden by the mesh render function.

---

<div class="post-metadata">

**Author:** ![Corentin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/corentin/32/4861_2.png) [@Corentin](https://forum.babylonjs.com/u/Corentin)\
**Post date:** [October 17, 2019, 5:44pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/5 "2019-10-17T17:44:16Z")

</div>

It does not change anything either ☹

I’m trying to get this : [WebGL, Blending, and Why You're Probably Doing it Wrong](https://limnu.com/webgl-blending-youre-probably-wrong/)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 17, 2019, 5:49pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/6 "2019-10-17T17:49:48Z")

</div>

Would be great if you could share a repro in the playground 🙂

---

<div class="post-metadata">

**Author:** ![Corentin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/corentin/32/4861_2.png) [@Corentin](https://forum.babylonjs.com/u/Corentin)\
**Post date:** [October 25, 2019, 8:18pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/7 "2019-10-25T20:18:41Z")

</div>

Hi ! Sorry for the delay.

I investigated a bit and found out the reason of the black border. I’m working with transparent scene. The clear color is affecting the alpha. So a scene clear color black will create those black value in the alpha. If i’m changing the color it will change it too. I think this is not correct as render and it should be considered as a bug. What do you think ?

Here a simple playground so you can see & test : [https://www.babylonjs-playground.com/#2J05PG#1](https://www.babylonjs-playground.com/#2J05PG#1)

---

<div class="post-metadata">

**Author:** ![Corentin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/corentin/32/4861_2.png) [@Corentin](https://forum.babylonjs.com/u/Corentin)\
**Post date:** [October 25, 2019, 9:10pm UTC](https://forum.babylonjs.com/t/access-to-gl-blendfuncseparate/6411/8 "2019-10-25T21:10:09Z")

</div>

I found the solution!

So on my mesh I have this :

> mesh.onBeforeDrawObservable.add(\_ =\> {  
> engine.\_alphaState.setAlphaBlendFunctionParameters( engine.\_gl.SRC\_ALPHA, engine.\_gl.ONE\_MINUS\_SRC\_ALPHA, engine.\_gl.ONE, engine.\_gl.ONE\_MINUS\_SRC\_ALPHA )  
> })

And on the plane where there is the renderTarget I have this

> plane.onBeforeDrawObservable.add(\_ =\> {  
> engine.\_alphaState.setAlphaBlendFunctionParameters(engine.\_gl.ONE, engine.\_gl.ONE\_MINUS\_SRC\_ALPHA, engine.\_gl.ONE, engine.\_gl.ONE\_MINUS\_SRC\_ALPHA)  
> })