MeshPhysicalMaterial how to use attenuationColor and attenuationDistance correctly?

Hi all,

How should I use attenuationColor and attenuationDistance properties of MeshPhysicalMaterial, and what are the expected visual results?

I was expecting to get a colour change based on how thick the geometry is, e.g. clear near the edges, but more coloured towards the centre of a volume.

Does this only work with certain types of geometry? e.g. open, closed, or a plane

In the attached screenshots the sphere has a MeshPhysicalMaterial applied, which has a color of 0xffffff and an attenuationColor of 0xff0000

First screenshot has default value for attenuationDistance (Infinity), second has 0.001, and third has 100, but I don’t see any change or falloff happening. How should I use these properties correctly?



Rasterizers (like the three.js renderer) do not know the depth of a geometry behind any given point on the surface. You can set a fixed material.thickness value, or optionally bake a thickness map in software like Blender.

Hiya @donmccurdy , thanks for the help!

I have now given the material a thickness of 0.5.

In the following screenshots, the first has default value for attenuationDistance (Infinity), second has 0.001, and third has 100.

I can see a hint of red in the first one, but changing attenuationDistance doesn’t seem to give any visual difference in the others? What visual result should I expect when I change this value?



@donmccurdy could utilizing @gkjohnson’s signed distance feild generation be used other than creating a baked depth map in cases like this do you think?

In the past I’ve experimented with depth peeling and rendering out the models backface depth to more accurately determine the thickness of a model from a given perspective but this is more performance intensive and still cannot correctly account for added distance and attenuation from internal reflection and refraction.

2 Likes

Woah, this is cool. Thanks for posting!

@gkjohnson perhaps it would also be possible to use three-gpu-pathtracer to bake a thickness map? Like the inverse of baking AO.

1 Like

@donmccurdy

perhaps it would also be possible to use three-gpu-pathtracer to bake a thickness map?

Unfortunately I don’t think it’s so simple to generate a robust thickness map since the apparent thickness of a specular transmissive object is dependent on the view perspective. Maybe the thickness from different angles can be encoded into coefficients in a texture similar to spherical harmonics so the thickness used changes based on the camera position?

I’m not sure how the demo GLTF thickness maps are being generated, though. Whatever other applications are doing can likely be done with the pathtracer. Do you know?

Blender is all I’m aware of. I’m not sure how we’d define “robust” here, it is some kind of average over view perspectives yes. I’ve never heard of an implementation with baked view-dependent thickness. For refraction I can imagine that would be a nice touch, for other effects like diffuse transmission and SSS it’s probably quite unnecessary. Typically the implementation looks a lot like baking ambient occlusion inside the mesh volume instead of outside it.

Hi all,

Just to check again (I’m still learning). Does attenuationDistance do anything in the existing MeshPhysicalMaterial? What visual result should I expect?

Many thanks,
Barry

I’m not sure how we’d define “robust” here

I should have said “more robust” - I just meant something that could more correctly represent view-dependent thickness. But yes this would only really be relevant for glass-like materials.

Typically the implementation looks a lot like baking ambient occlusion inside the mesh volume instead of outside it.

I see - so it’s basically like an averaging of the thickness at every point. That could definitely be done with the path tracer.

In this case, though, since OP’s transmissive mesh is basically a sphere a thickness map like this wouldn’t have a lot of effect I don’t think. It would just result in consistent thickness and attenuation across the whole surface, no?

Here is a demo with models in which i baked the thickness map in blender

gui has options to test the values

https://vis-prime.github.io/demos/#Thickness

2 Likes

Ah yes the MeshForbiddenMaterial :rofl: very nice demo

1 Like

:skull_and_crossbones: :skull_and_crossbones: :skull_and_crossbones:

2 Likes

:astonished::exploding_head: That is beautiful, the “holographic” pearlescence is lovely, are you using a multicoloured env map for that or are the colors being generated in the material?

Its meshPhysicalMaterial’s iridescence three.js examples

2 Likes

Ah okay, bit slow on the uptake here, so I would need to bake and add a thickness map to make use of attenuationDistance?

@gkjohnson since your material is a posteffect would it handle an animation where the mesh was deforming? e.g. with shape keys. (I’m guessing a thickness map would only work on non-deforming meshes?)

You don’t need to use a thickness map, just the scalar thickness will work… but yes, the effect looks much better with a baked map.