Is it possible to render only chosen meshes which are inside an invisible object? Like a color separator, renderOnly?

Questions
, , ,
1

Screenshot_3
Screenshot_31112×797 37.9 KB

Hello everyone, I’m trying to make invisible tunnels that only show certain colors going into them with flow animation. The screenshot gives a top view of the scene.

Tried ways;

Of these flows objects will be thousounds so i do not want to use loop to check and control objects at everyframe. This will not be high performance at all.

Using renderOrder can be best way to check it but renderorder logic works for only one tunnel changing renderorders for every checkpoints changing the all flows objects renderorder. So it seems impossible to sync without loop function.

clippingPlane, clippingAdvanced or portal examples can be solution for my case but failed to create clippinBox.

So,the best way in my opinion is it like renderOnly function which shows only definated mesh inside the invisible mesh or seperate the object color inside the mesh.

Can you show or discuss the way to do it ?

2

Maybe try layers.

Layers Example : three.js examples

image

3

i checked also layers. it seems to me that the layers hide the whole flow. Without loop function not toggle layers again i think.

i feel like, the tunnel it should be like xray device. Must shows only definated colors,objects etc.

4

If you’re going to have thousands of these, you’re going to need to use an instanced mesh. Instanced meshes work best when you iterate over a data structure to dynamically change the appearance of individual meshes. As a result, you’re going to need to have a loop each frame.

Depending on your visual and data structure, you may not have to have one big loop, but perhaps, multiple smaller loops where only some are called each frame.

If you’re target is mobile or VR, this limits the iterations per frame. However, if its only desktop, you can likely get away with looping over 20K objects per frame and still get 60 fps.

5

Is it possible to render only chosen meshes which are inside an invisible object

that sounds like a stencil to me

the invisible object in that box is a circle geometry for instance

2 Likes
6

this can be solution if the 2d ring plane can changes to 3d cylinder mesh or smt. let me try

7

it can be any geometry. stencils are impossible to understand, if you think that’s your solution you can copy the stencil args into your vanilla project from here drei/Mask.tsx at 17d6d5dcff431f6dae9d36d88235c1d92bde3f03 · pmndrs/drei · GitHub

1 Like
8

Stencils are impossible to understand… I see now…

I feel like so close to success… I tried something to do it but i stuck to control chosen color to hide.

Different colored spheres should be only seen in their same color boxes. without loop function…

Example; Red Sphere should be seen in red boxes, Blue should be in blue and green should be in green.

Can someone help me to improve this code for this case…

9

you dont need that webgl code imo, the link i sent you is react but it is still just threejs as well. you can just copy the properties.

the following properties:

{
      colorWrite: false, 
      depthWrite: false,
      stencilWrite: true,
      stencilRef: id,
      stencilFunc: THREE.AlwaysStencilFunc,
      stencilFail: THREE.ReplaceStencilOp,
      stencilZFail: THREE.ReplaceStencilOp,
      stencilZPass: THREE.ReplaceStencilOp,
}

need to be on the material. on the object that forms the mask, just do Object.assign(yourMaterial, theseProps)

and these props:

    stencilWrite: true,
    stencilRef: id,
    stencilFunc: inverse ? THREE.NotEqualStencilFunc : THREE.EqualStencilFunc,
    stencilFail: THREE.KeepStencilOp,
    stencilZFail: THREE.KeepStencilOp,
    stencilZPass: THREE.KeepStencilOp,

must be on the objects material that are affected by the mask. the ID must match between them

1 Like
10

This effect is what i want … Thank you for enlightening me…

I changed this

stencilFunc: inverse ? THREE.NotEqualStencilFunc : THREE.EqualStencilFunc,

to

stencilFunc: THREE.EqualStencilFunc,

and it works.

1 Like