CODEWITHSUNDEEP
three.js
Joshua Comeau
Joshua Comeau

Reputation: 2763

Blurring light reflections in meshStandardMaterial

in Three.js, I have a standard-material mesh cube sitting between two RectAreaLight strips. By default, it renders like this:

enter image description here

I wanted to add shadows under the cube, so I set the renderer's shadowMap:

renderer.shadowMap.enabled = true;

When I do this, suddenly my cube is reflecting the light strips:

enter image description here

(to clarify, only the two horizontal strips are RectAreaLight instances. The 3 vertical strips shown are just planes.)

This effect is kind of neat, but it's too sharp: it looks pixellated because my cube is relatively low-poly, and each facet has a different angle.

My understanding is that MeshStandardMaterial's 'roughness' property can be used to diffuse and soften reflections, but neither roughness nor metalness have any effect on this effect; no matter what I set it to, these harsh reflections remain.

I'd love to find a way to soften the reflections. I've also noticed that lines in general tend to look pretty aliased, even though I've set renderer.antialias to true. Perhaps a better anti-aliasing strategy would kill two birds with one stone?

Upvotes: 1

Views: 645

Answers (1)

manthrax
manthrax

Reputation: 5036

Docs mention no shadow support with rectAreaLights:

https://threejs.org/docs/#api/en/lights/RectAreaLight

I wouldn't be surprised if there were other issues with the materials as well... RectAreaLights are implemented in a different branch of the render pipeline, as indicated by the requirement of including custom uniforms, but I don't know enough about the details to give you a better answer.

I would love to see other responses to this though, because RectAreaLights can create some really cool looks...

Upvotes: 1

Related Questions