Rendering selectively in multiple transparent(or depth test) objects

Questions
,
1

transparent
transparent2558×1912 349 KB

Scene is organized with
(1) Glass wall

  • this should be transparent(using opacity or alpha … whatever)
  • but it should have geometry because raycast need to sense the glass wall
    (2) Star object
  • this should not be rendered
  • and in this position, the raycast couldn’t reach to object beacuse glass wall block it first
    (3) Skybox wall
  • this should be rendered in texture
  • it don’t need to be transparent

I want to organized the scene which has these conditions.
How can I approach this problem?
Any idea should be helpful to me.
Thanks.

2

Can you please explain in more detail the purpose of the star object? Should it be act as some sort of mask?

3

Originally, star object is kind of portal to move or interaction.
So there are several start objects are attached to plane,
and glass wall could be say like invisible rock.
But important thing is if start object are at the behind of glass wall, it should not be seen(should not be rendererd) to camera.
If you need more explanation, please tell me.
Thanks.

4

It doesn’t work like that ,the raycast may hit your star first, then 123 other objects, then your glass wall in the end, and only then figure out that the glass wall is actually the closest.

5

This seems completely unrelated to your problem. Try adding a skybox and follow an example for render to texture.

6

Oh you’re right. basically, star object will hit.
Because in Doc
“Checks all intersection between the ray and the objects with or without the descendants.”
And I’m using like
… let intersects = raycaster.intersectObjects(…);
intersects[0] …

And as you said, skybox wall maybe unrelated to my problem.
Reason that I noticed the condition is, in Doc
“This has an effect on rendering as transparent objects need special treatment and are rendered after non-transparent objects.”
So if skybox wall has transparancy, it could be treated as special. I just want to make it clear that skybox doesn’t need to be transparent.

7

This is test view with easy code.
The glass wall is green-transparent, the star object is red-transparent, and the skybox is blue.

testRender
testRender755×653 14.2 KB 

    let glassWall = new THREE.Mesh(
    new THREE.BoxGeometry(10, 10, 0.1),
    new THREE.MeshBasicMaterial({
        color: 0x00ff00,
        transparent: true,
        opacity: 0.2
    })
);
glassWall.position.set(0, 0, 5);
scene.add(glassWall);

let starObject = new THREE.Mesh(
    new THREE.BoxGeometry(3, 3, 3),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        transparent: true,
        opacity: 0.4
    })
);
starObject.position.set(0, 0, 2.5);
scene.add(starObject);

let skyboxWall = new THREE.Mesh(
    new THREE.BoxGeometry(20, 20, 0.1),
    new THREE.MeshBasicMaterial({
        color: 0x0000ff
    })
);
scene.add(skyboxWall);
8

Solved with renderOrder.
I set glass wall’s renderOrder(eg. 0) lower than star object’s renderOrder(eg. 1).

Result:

result
result532×515 4.16 KB