How to tweak this shadow to remove ACNE but keep the shadow looking good?

Questions
, , ,
1

Here’s a pen with some Shadows:

It’s written with HTML, but behind the scenes it’s using Three.js.

On line 5, the shadow properties can be tweaked, where light.threeObject3d is… you guessed it… a THREE.PointLight.

I can’t seem to find the right setting (f.e. bias, etc) to remove the ACNE while not messing up the button shadows (either the shadow is too dim, or the light blends into the shadow).

You can see the ACNE if you look on desktop, maximize the window, then you’ll see the ACNE lines on the background (it’s not super obvious, but it’s not smooth either).

What magical setting might do the trick?

NOTE:

Every DOM element (i-scene, i-mesh, i-light, etc) has a property called threeObject3d which is a reference to the underlying Three.js object, so you can query any node, then access the scene objects that way. I haven’t exposed all the properties via HTML attributes yet.

For example, on line 69 I am modifying the material opacities after querying the elements from the DOM.

Let me know if you have any questions about which internals to access, and I can let you know how.

Any time you move the mouse, internally that triggers an animation frame and a THREE.WebGLRenderer.render call.

2

I can’t help you with your shadow problem but i see a lot of color banding in your application that you can mitigate if you set dithering to true on your green background material.

Maybe interesting for you: https://github.com/mrdoob/three.js/pull/11076

1 Like
3

Awesome, it looks much better with dithering enabled!

The eye will likely be focused around the lit area, making the shadow ACNE not necessarily so noticeable, but I’d still like to figure out how to get rid of it without messing up the shadow/lighting on the buttons.

4

Can we maybe… do dithering on the shadow acne?

5

I don’t know that…