Why does a transparent object not appear behind another?

Questions
,
1

In this demo, the “wall” behind the object is refracted through the transparent object.

If we make the “wall” transparent, it no longer shows through the glass object:

What are we missing?

2

Could be the fact that transparent objects are rendered after opaque, so at the time you are rendering the prism, the wall is not there yet, so there is nothing to refract.

3

I tried setting renderOrder so the wall is rendered first, and renderer.sortObjects = false, but that didn’t do it:

4

.renderOrder : Number

This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently

5

Even if sortObjects is false?

6

Here’s the first non-working example from the OP with both objects transparent: true, so they must sort in order of depth:

Here’s one with disabled sortObjects, and custom renderOrder, and both objects transparent:

7

I never dug the library code re refracting objects, so I’m not sure, since it’s not working, it could be that refractive objects are put in the same basket with opaque objects or make a basket of their own.

8

Yeah, I’m thinking it might be something like that too.

EDIT: Yeah, looks like it is not possible, this is the order in the renderer:

It renders only opaqueObjects first, then anything that is transmissive (like the refracting stone).

Another thread that mentions it:

1 Like
9

use meshtransmissionmaterial. mtm looks better, is faster, “sees” transparent and transmissive objects, “sees” backfaces, has usable roughness, anisiotrophic blur, chromatic abberations.

you can play with settings here:

and here’s an example where it “sees” another transparent object (the shadow catcher) and its own backfaces. without backfaces even if mpm would be able to see transparent objects it would always look flat and unrealistic.

there is a vanilla version here: MeshTransmission vanilla - CodeSandbox but that one uses transmissionSampler just like mpm. you need to copy a tiny part from the drei component so that it can use its own buffers.

1 Like
10

Thanks. In fact I’ve been wanting to try that material next! Looks very nice!

11

The roughness looks like pointalism art more than a rough surface:

Any idea how to fix it?

12

I think it looks great!

But anyway, N8 just added bicubic Sampling to threejs, when it’s merged you can switch between this and bicubic.

1 Like
13

Yeah, really need a configurable blur effect. The hard coded size in WebGLRenderer is limiting indeed.

What does this do exactly?

What unwanted effect would happen without it otherwise?

14

switches the host off, the mesh that carries the material. we want to only catch the rest, would be wasteful to render it and also occlude the background.

1 Like
15

Gotcha, makes sense. So we still want the shadow of the transparent object in the scene that is being refracted.

I see the vertex and frag shaders are empty. Would it be better to extend from RawShaderMaterial? Or would something be missing?

16

exactly that’s what discardmaterial is for. so it kind of renders it, only to obtain the shadow, but every pixel is discarded. right, it’s probably better to extend from rawshadermaterial, i think i use shadermaterial, might need to change that now that you mention it.

17

Ah, I see what backside does. It was hard to tell with the skeleton demo because it already has a separate mesh for the “back side”, so with backside turned off, it still looks like we can see the other inside of the cube. Commenting out the nodes.cube2.geometry mesh makes it obvious:

18

the model is a bad example because it had a fake backside made in blender, it’s like an extra mesh with flipped normals, i guess they made it to make sketchfab happy. try a torus or a box or any other model and you will see a significant difference MeshEpoxyMaterial (forked) - CodeSandbox (dial down thickness and you see it better)

ps that logic is from maxime heckel see https://twitter.com/MaximeHeckel/status/1617919153096065027 might want to read it

1 Like
19

btw forgot to say, if you use roughness you can go as low as 32x32 for resolution and as high as 32 on the samples. reduces the noise and you can cleaner results.

1 Like
20

Is there a reason to keep the transmissionSampler for the original MeshPhysicalMaterial behavior? Wondering if instead a user can switch to MeshPhysicalMaterial if they wish to have the original behavior, and keep MeshTransmissionMaterial simpler.