Use object to mask parts of others

Questions
1

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:

image
image582×559 57.4 KB

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.

2

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

3

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?

4

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

5

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

2 Likes
6

Curious if this technique works.
-following

7

This works! But how would you go about having the cylinder hide only the torus and not hide a cube that is behind it?

8

I don’t see any cubes here. This thread is more than a year old, I suggest starting a new topic link to JSFiddle with minimum coding.

9

Thank you, I ended up adding a cube behind the other shapes in the original fiddle and the cube is indeed visible behind the cylinder, but it doesn’t work if the cube is set to transparent itself Edit fiddle - JSFiddle - Code Playground

10

The Cube must be behind the masking element to see the effect.
Here is another example, creating a hole in cube.

C&C.html (4.0 KB)

Last post under this thread.