three.jswebglopengl-es-2.0webgl-extensions

Enabling GL EXT_blend_minmax

According to this MDN page EXT_blend_minmax has been supported since Chrome 38 and Firefox 47.

I'm trying to use it from Three.js. However, it doesn't work for me with either latest Chrome or latest Firefox:

const renderer = new THREE.WebGLRenderer();
const gl = renderer.getContext();
const ext = gl.getExtension('EXT_blend_minmax');

console.log(ext) // -> null; I'm hoping for { [...], MAX_EXT }

I've also tried setting my Chrome WebGL flags to experimental, but I get the same result.

Is there something I should do to activate it?

X/Y reason: I would like multiple semi-transparent objects to overlap. However, I want a max alpha limit among them. My understanding is that EXT_blend_minmax can help achieve this. Example visuals:

enter image description here

Solution

  • There is no need to explicitly request the EXT_blend_minmax extension on app level. If you configure the blending equation with the three.js constants THREE.MinEquation or THREE.MaxEquation, you can use the extension automatically.

    Blending is defined for materials so you have to set the blendEquation property to one of the above values.