Three.js抗锯齿，盒子几何体仍然非常模糊。

Question

我正在尝试使用three.js创建一个简单的3D游戏，其中包括boxgeometries。一切都很顺利，但是这些盒子上没有锐利的边缘，无论是在移动浏览器上（Safari）还是在我的MacBook上的Chrome上。请看下面的截图。 到目前为止我尝试了以下方法：将渲染器的抗锯齿设置为true（有所帮助，但旋转立方体仍然没有直线），设置渲染器像素比（则不能正常工作并且线条仍然呈像素状）。还尝试了FXAA着色器，但结果并不比之前好。使用透视摄像机、Boxgeometry和Basic Material。

我的问题是，在这些小型盒子（例如移动屏幕上的30个等大小的盒子）中，three.js是否可以实现这样的锐利边缘？

使用的版本为three.js 87，Chrome 68和最新的移动Safari。

更新：这是我的渲染器设置：

renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
   });
  renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setPixelRatio(window.devicePixelRatio); // doesnt do the trick and messes up the threex domevent touch inputs
  document.body.appendChild(renderer.domElement);


  canvas = document.getElementsByTagName('canvas')[0];
  window.onresize = resizeCanvas;
  resizeCanvas();

  function resizeCanvas() {
    canvas.style.width = '100%';
    canvas.style.height = '100%';

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
  }

在我的CSS中，我只有这个样式：canvas { height: 100%; width: 100%; }。

更新2：此处有演示链接：https://jsfiddle.net/roxanfc4/11/

- Julian Orth

---

你能分享一个演示吗？官方的three.js示例在你的设备上看起来清晰吗？在three.js中获得清晰的边缘肯定是可能的，但如果没有关于你特定场景的一些信息，很难猜测为什么它在你的情况下不起作用。 - Don McCurdy

它看起来有点像反锯齿正在发生，但是你的画布通过CSS进行了缩放。你是否应用了类似于transform: scale(2.0);的CSS规则到你的画布、div、页面等上面？ - M -

Answer 1

不知何故，这段代码解决了问题，现在边缘明显更加柔和：

renderer.setPixelRatio(window.devicePixelRatio * 1.5);

- Julian Orth

---

我相当确定这是一种依赖于浏览器而非three.js的hack，但它救了我的一天，我不必包含/编写抗锯齿着色器。我希望这个hack能够在各种设备上继续工作。 - user151496

另外，我认为不规则线条问题主要出现在设备像素比为1的设备上。也许最好做一些像 if(window.devicePixelRatio<2){ renderer.setPixelRatio(window.devicePixelRatio * 2); } 这样的事情，以确保最终的像素比不会太高？无论如何，我已经找到了这个帖子 https://discourse.threejs.org/t/prevent-canvas-graining/11621/4 但它对问题没有提供额外的信息。 - user151496

为什么要使用 * 1.5？对我来说，只使用 renderer.setPixelRatio(window.devicePixelRatio) 就可以很好地解决问题了！ - Jacob Philpott

Answer 2

只需要renderer.setPixelRatio(window.devicePixelRatio)就可以了。我认为你不需要乘以1.5。参考资料

- Jacob Philpott