Opacity property of Custom Shader Material

Questions
, ,
1

While using Custom Shaders for Transparent object rendering,
there are two sets of opacities/alpha related to the object.

  1. Transparency of different sub-layers of the object that custom shader takes into account to create final render of the object.
  2. transparency related to the object’s relation to other objects in the scene(i.e. objects behind and in front of it) that are taken care by webgl renderer or within the threejs javascript code.

Regarding the opacity property that we use while defining custom material(as in the code snippet below ), is it related to second kind of transparency? My intuition says it is, but I am unsure.

var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader : document.getElementById(‘vertexShader’).textContent,
fragmentShader : document.getElementById(‘fragmentShader’).textContent,
derivatives : true,
//blending:THREE.AdditiveBlending,
depthWrite: false,
transparent: true,
opacity: 0.5,
side: THREE.DoubleSide
});

2

TBH, I don’t understand the difference between 1. and 2.

Simply speaking, the opacity value (next to the blending equation and the render order) essentially controls how the object is blended with whatever is behind it.

Achieving “perfect” transparency is challenging since blending is actually a per fragment operation but the respective depth sorting usually happens on object/geometry level. That’s the reason why transparency artifacts can occur and techniques like OIT exist.

3

Does this mean, that this “opacity value”(if provided) will override any alpha value of the fragment (for each and every fragment for the rendered object, as this property is defined at object level ) calculated by custom shader as gl_FragColor = vec4(r,g,b,a); for the purpose of blending it to what ever object (destination framebuffer values) is behind it?

Regarding the idea of two different transparencies(sorry for being unclear, I had specific object like fur in mind), I meant type 1, as how we implement transparency for the object such as fur. then type 2 as how we combine this object (fur) fragments with another background object fragments. I hope I am clear now.

4

Well, it is the default opacity for each fragment. But if you sample a RGBA texture or an alpha map, the sampled alpha value is multiplied with the opacity.