Access to gl.blendFuncSeparate

Questions
1

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 !

2

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

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

3

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

4

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

5

It does not change anything either :frowning:

I’m trying to get this : WebGL, Blending, and Why You're Probably Doing it Wrong

6

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

7

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

8

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)
})

2 Likes