[Feature] Allow translucent rendering of volumes behind meshes

[dstansby]

Motivation

When rendering a mesh, it blocks any volume images behind it. It would be great if meshes could be made transparent so that image data "shows" through them. In the first screenshot you can see some cylinder sources I've added to the scene, which block the volume data behind them. Even when the opacity is turned right down (second image), the volume data is blocked.

Detailed Description

[finetjul]

@sankhesh do you know why translucent polydata write into depth buffer ?

vtk-js/Sources/Rendering/OpenGL/ForwardPass/index.js

Lines 48 to 79 in c962c49

	if (
	((model.opaqueActorCount > 0 || model.translucentActorCount > 0) &&
	model.volumeCount > 0) ||
	model.depthRequested
	) {
	const size = viewNode.getFramebufferSize();
	// make sure the framebuffer is setup
	if (model.framebuffer === null) {
	model.framebuffer = vtkOpenGLFramebuffer.newInstance();
	}
	model.framebuffer.setOpenGLRenderWindow(viewNode);
	model.framebuffer.saveCurrentBindingsAndBuffers();
	const fbSize = model.framebuffer.getSize();
	if (
	fbSize === null ||
	fbSize[0] !== size[0] ||
	fbSize[1] !== size[1]
	) {
	model.framebuffer.create(size[0], size[1]);
	model.framebuffer.populateFramebuffer();
	}
	model.framebuffer.bind();
	// opaqueZBufferPass only renders opaque actors
	// zBufferPass renders both translucent and opaque actors
	// we want to be able to pick translucent actors
	publicAPI.setCurrentOperation('zBufferPass');
	renNode.traverse(publicAPI);
	model.framebuffer.restorePreviousBindingsAndBuffers();
	// reset now that we have done it
	model.depthRequested = false;
	}

[finetjul]

This is actually a recent behavior:

ec4ec2f

I'm not sure it is intentional...
@bruyeret ?

[sankhesh]

@sankhesh do you know why translucent polydata write into depth buffer ?

vtk-js/Sources/Rendering/OpenGL/ForwardPass/index.js

Lines 48 to 79 in c962c49

	if (
	((model.opaqueActorCount > 0 || model.translucentActorCount > 0) &&
	model.volumeCount > 0) ||
	model.depthRequested
	) {
	const size = viewNode.getFramebufferSize();
	// make sure the framebuffer is setup
	if (model.framebuffer === null) {
	model.framebuffer = vtkOpenGLFramebuffer.newInstance();
	}
	model.framebuffer.setOpenGLRenderWindow(viewNode);
	model.framebuffer.saveCurrentBindingsAndBuffers();
	const fbSize = model.framebuffer.getSize();
	if (
	fbSize === null ||
	fbSize[0] !== size[0] ||
	fbSize[1] !== size[1]
	) {
	model.framebuffer.create(size[0], size[1]);
	model.framebuffer.populateFramebuffer();
	}
	model.framebuffer.bind();
	// opaqueZBufferPass only renders opaque actors
	// zBufferPass renders both translucent and opaque actors
	// we want to be able to pick translucent actors
	publicAPI.setCurrentOperation('zBufferPass');
	renNode.traverse(publicAPI);
	model.framebuffer.restorePreviousBindingsAndBuffers();
	// reset now that we have done it
	model.depthRequested = false;
	}

To sort order with multiple translucent actors only when picking. It shouldn't be written when the current frame is not a pick frame. See

vtk-js/Sources/Rendering/OpenGL/Actor/index.js

Lines 155 to 158 in c962c49

	model.context.depthMask(
	model._openGLRenderer.getSelector() &&
	model.renderable.getNestedPickable()
	);

[bruyeret]

From what I remember, the zbuffer is needed when rendering both volumes and polydatas:
If a polydata is in front of a volume, we need the zbuffer to know when to stop the volume raycasting
You can test if it is really needed by removing this zbuffer pass and rendering this example (a polydata in front of a volume)

A solution is to discard fragments that are completely transparent in the polydata mapper fragment shader during the zbuffer pass