【问题标题】:Three.js what causes shadow acne and how to fix it三.js是什么原因导致暗疮以及如何修复它
【发布时间】:2019-05-08 06:27:23
【问题描述】:

为了让所有的阴影都被渲染,我将shadow.camera.top/bottom/left/right设置为定向光(投射阴影),但是会导致阴影粉刺。 我尝试使用shadow.bias,但仍然不对。什么原因导致暗疮以及如何解决?

这是我的代码。

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 38, 82, 1 );
light.castShadow = true;
// light.shadow.bias = -0.001;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.camera.near = 0.1;  // same as the camera
light.shadow.camera.far = 1000;  // same as the camera
light.shadow.camera.top = 120;
light.shadow.camera.bottom = -120;
light.shadow.camera.left = 120;
light.shadow.camera.right = -120;
scene.add( light );

谢谢!!

【问题讨论】:

  • 你能用live example 证明这个问题吗?当调整light.shadow.bias 没有帮助时,这很奇怪。顺便说一句:阴影摄影机不必像实际摄影机那样使用相同的nearfar 值来渲染场景。我建议您使用THREE.CameraHelper 来可视化阴影相机并使截锥体尽可能紧密。你可以像scene.add( new THREE.CameraHelper( light.shadow.camera ) );这样创建帮助器。
  • 这是我的complete code。 :)
  • 似乎小提琴不起作用,因为 JSON 文件未从您的后端正确加载(我可以在网络选项卡中看到状态为“待处理”)。你能在这里分享JSON文件吗?然后我可以进行本地测试。

标签: javascript three.js model


【解决方案1】:

shadow.bias 设置为- 0.0005 似乎可以消除阴影伪影。但是,阴影的质量仍然不好,因为阴影的边缘看起来很块状。

考虑将属性renderer.shadowMap.type 设置为THREE.PCFSoftShadowMap,这将显着提高阴影质量。减小阴影相机的截锥体的大小并仅在某个“焦点”区域投射阴影可能也是一个好主意。另一种选择是将高质量光照烘焙到光照贴图中,然后将其应用于城市材质的lightMap 属性。您也可以将阴影贴图的分辨率提高到4096 x 4096,但这会影响性能,尤其是在移动设备上。

【讨论】:

  • 我将light1.shadow.camera.left = side; 更改为light1.shadow.camera.left = -side; 并将light1.shadow.camera.right = -side; 更改为light1.shadow.camera.right = side;。看起来好多了。
  • 我认为用 3DsMax 或搅拌机烘焙是最好的解决方案。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-11-20
  • 2021-03-07
相关资源
最近更新 更多