Native fix or Material shader for a plane that makes it transparent and hides the occluded parts of objects behind it so the scene background texture shows up

Questions
, , ,
1

Hi I’m working on a product placement scene with Three.js

I have a scene with a video background texture running and a loaded gltf mesh.

However i need a part of the loaded mesh to be transparent/hidden and show the background video it otherwise is hiding so that the loaded object appear to be partially behind an object that exists only in the video background.

I’m very new to three.js but i assume there must be either:

  • a way to create a material shader that makes a mesh/plane transparent but by registering depth somehow prevents what is behind it from showing up and therefore those pixels show the background texture of the scene.

Or

  • there must be a way to keep track of all the pixels coordinates that correspond in the camera view to the plane used to hide parts of an object and somehow rewrite those pixels with the corresponding pixels in the background when the scene renders.

According to this http://jsfiddle.net/4vnsbdz6/1/

if only dealing with occlusion of meshes without specifically showing a background texture it works if you set the material for the occlusion plane

mesh.material.colorWrite = false;

and then use

mesh.renderOrder = 0; to draw the background mesh first

there doesn’t appear to be a way to force the background texture to be rendered first

the source code fix at https://github.com/mrdoob/three.js/pull/15323

and

renderer.backgroundRenderOrder = -Infinity // background will be rendered first

doesn’t work sadly

Could you help me understand how one goes about implementing either of this strategies or let me know if a better way exists to solve the problem?

Any help would be greatly appreciated.

Thanks in advance.

2

It would be good to narrow down your text as it’s a bit confusing to read. From the title it sounds like you want to use a mesh as a mask which shows the background?

Maybe like this? https://threejs.org/examples/?q=post#webgl_postprocessing_masking

3

Thanks a lot !

If I’m understanding correctly you create a stencil buffer mask using the occlusion plane object

then render the original scene

then create another scene just with the video background texture and using the composer
do a mask pass with that second scene so only the pixels corresponding to the plane get rendered