Use object to mask parts of others

Hello folks,

I am looking for a solution to the following problem: Imagine a torus and a cylinder in a group. The cylinder is oriented so it goes through the hole of the torus:

What I would like to achieve is the following behavior:

  • The cylinder is completely invisible/transparent
  • The parts of the torus that are covered by the cylinder will be hidden - instead the background is shown

So basically the cylinder should have a material/shader that instead of rendering the solid will render the background behind the cylinder. Furthermore, the torus parts being hidden by the cylinder should also be transparent and instead show the background.
The gist is: Everything that is the cylinder (red in the picture above) should be the background instead.

I have done this in the past in Unity successfully. I did it by defining a material & shader and simply applying that to the cylinder.
As per my understanding it should be easy to achieve the same result with Three.js, right? Unfortunately, I couldn’t yet figure out how to do this thought.

I would be thankful if somebody could help me out here.
Here’s a fiddle where I already did the grunt work: https://jsfiddle.net/2trjdb5g/

Here’s the Unity shader I used:

Shader "Custom/DepthReserve"
{
    Properties
    {
    }
    SubShader
    {
        Tags { "RenderType" = "Opaque" "Queue"="Geometry-1" }
        LOD 100

        Blend Zero One

        Pass
        {

        }
    }
}

Thank you for your efforts.

I don’t know if there is a shader solution
But only a suggestion, can you try with post processing mask
https://threejs.org/examples/?q=mas#webgl_postprocessing_masking

How would I go about applying this post-processing for just one object and leave everything else in the scene as it is?

Would I keep my currently existing scene (which contains other stuff that should not be altered by this), then create a second scene that only contains the cylinder and do the post-processing only on that scene?

Is it possible to have a group of two objects where one object is assigned to once scene and the other object to another scene?

after a short search I’ve found this sample for you on codepen
two scenes and two objects where a cube masks a shere
https://codepen.io/PartlyAwesome/pen/bZqBJE

I hope it will be useful

torus.material.transparent = !0;
cylinder.material.transparent = !0;
cylinder.material.opacity = 0;
cylinder.renderOrder = -1;

2 Likes

Curious if this technique works.
-following