How to create holes in objects without modifying the mesh structure in Three.js?

Questions
, , ,
1

I want to create holes in objects without modifying the mesh structure.
Image initial scene:
image
image with sphere removed.
image

Can I resolve this problem by stencil and shader?
https://threejs.org/examples/?q=sten#webgl_clipping_stencil

2

You have two alternatives that I know if:

  1. Write your own custom shaders, or
  2. a material’s .alphaMap texture.

But if you want to use custom geometry, it’s going to be very difficult to calculate this in the shader code.

3

I know you don’t want to change the mesh, but if you have to…there’s Manthax’s fork of this… Link

But there is a fully explored method of how to do what you want with shaders… User prisoner849 here made one with a fish bowl and a cloud, there was another with a wood grain cube being cut with an invisible sphere.
I cannot find the links to them right now.

Possibly people that see this will know what I’m talking about.

Edit: or was it User gkjohnson with something like this… Link

4

Hello, @marquizzo @GlifTek Thank you for your answers.
However, please look at this video : I Learn About Stencil Buffers and Cutting Holes in Things - YouTube

image
image1273Ă—670 219 KB

Actually, I’m looking for a way to implement this in Three.js.

5

Did you see that?

In the Orb (Shaders) - #3 by prisoner849

From the Collection of examples from discourse.threejs.org

invisibleParts

2021-03-25 09.06.04
2021-03-25 09.06.04845Ă—643 11.5 KB

6

Fantastic! Thank you @hofk
Can I use any shape instead of the sphere?

7

For instance, I want to use a box.

8

Then you have to define a box (center, size), pass it in uniforms of shader and process it there with your logics for clipping.

9

Yea that’s it. Finally found it late last night but forgot to post it.