How to Increase the Resolution of Elements Transmitted through Transmission

Questions
1

Hello,

I am creating a transmissive material using Transmission.
However, when I add a slight blur effect with roughness, a flickering issue occurs.
How can I resolve this flickering issue?

2

related: MeshTransmissionMaterial poor performances URGENT

You may be able to pass in your own buffer for transmission… so something larger/higher res than the default.

3

I am not using drei’s MeshTransmissionMaterial.

I’m simply using:

const outerMaterial = new THREE.MeshPhysicalMaterial({
    transmission: 1,
    thickness: 2.5,
    side: THREE.DoubleSide,
});

I’m using a physical material. Is this post helpful for me?

4

I think if you use the drei MeshTransmissionMaterial you maybe can control the “transmissionSampler” buffer/size…

https://x.com/0xca0a/status/1612205580822749184

5

My question is how to increase the resolution of the transmission effect in Three.js.

Also, the link you provided has code that is very different from the actual code used in the drei-vanilla story, and it’s not clear how to specify colors, making it very inconvenient to use.

drei-vanilla/.storybook/stories/MeshTransmissionMaterial.stories.ts at main · pmndrs/drei-vanilla (github.com)

6

Hmm ok. I’m out of ideas. :slight_smile:

Out of curiosity what are the .roughness and .opacity you’re setting on the material?

7

The opacity is set to the default value (no value was explicitly given).

I remember the roughness being around 2.5 (I’m still testing, so I don’t remember the exact value at the time, but the shape was visible at values below 2.5).

The missing property in the declaration above is roughness.

8

oo… yeah try setting roughness and metalness to 0 … see if that changes anything :smiley:

roughness and metalness I think are only in 0 to 1 range… values outside that range might just get clamped… or do weird stuff?

9

I apologize for the confusion. I mistook the roughness value for 2.5 instead of .25.

My intention is to give a moderate amount of roughness.
This is because my goal is to create translucent glass.

The current solution I’ve found is:

renderer.setPixelRatio(devicePixelRatio * 2);

I solved it by increasing the pixel ratio, but I experienced the browser freezing when I tried to get a little higher resolution on a mobile device with low memory.

Hoping to find a better solution…

10

Yeah each doubling of devicePixelRatio will increase the gpu load by 4x… so be judicious with that one. :slight_smile:

I was asking about roughness because roughness > 0 might cause some of that “flicker”
and also, the small dots, they are falling below the nyquist of that texture size, so maybe using larger dots might help.

1 Like