When I add lights , I am getting jagged/pixlated edges on all objects in scene. how to fix it?

Questions
, , , ,
1

image
image1039Ă—580 81.6 KB

code is :

const BACKGROUND_COLOR = 0xffffff;
 initScene(): void {
    this.scene.background = new Color(BACKGROUND_COLOR);
    this.scene.castShadow = true;
    this.scene.receiveShadow = true;
  }

  initLights(): void {
     let dirLight = new DirectionalLight(LIGHT_CLR, 2);
    dirLight.position.set(5.02, 8.539, 4.129);
    dirLight.castShadow = true;
    dirLight.shadow.mapSize = new Vector2(1024, 1024);

    this.scene.add(dirLight);
  }

setupRenderer(): void {
    this.renderer = new WebGLRenderer({
        antialias: true,
        alpha: false,
        powerPreference: 'high-performance',
        precision: 'highp',
        preserveDrawingBuffer: true,
    });
    this.renderer.shadowMapType = PCFSoftShadowMap;

    this.renderer.shadowMap.enabled = true;
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(
        parseInt(this.canvas.style.width),
        parseInt(this.canvas.style.height)
    );
}
2

dirLight.shadow.bias=-0.0004;

2 Likes
3

You can start to learn about “shadow acne” here:

Setting the bias is one possible solution. You can also change

  • resolution of the shadow map
  • size of the shadow camera frustum (the tighter it fits around your objects, the crispier, the less bias, and the less resolution you’ll need, saving memory)
2 Likes
4

after doing that, I am getting wrong shadow:

image
image832Ă—526 40.1 KB

5

Try different values: -0.004, -0.04, -0.4, 0.004, 0.04, 0.4 etc.

1 Like
6

Theory behind the issue & bias solution (video is not specifically for three.js, so feel free to skip the code parts - the theoretical parts are universal for all 3D engines / frameworks.)

2 Likes