为什么 Three.js 中的 OutlinePass 会导致所有内容都出现像素化？答案

【问题标题】：Why is OutlinePass in Three.js causing everything to appear pixelated?为什么 Three.js 中的 OutlinePass 会导致所有内容都出现像素化？
【发布时间】：2022-12-03 08:50:05
【问题描述】：

出于某种原因，我在我的代码中使用 OutlinePass 的方式导致所有内容（添加的轮廓除外）都被像素化，但 EffectComposer 仅与 RenderPass 一起工作正常，我无法弄清楚为什么。根据我看到的一些类似的问题和答案，添加一个 FXAAShader 可能会解决这个问题，但是我尝试了这个（代码在下面注释）并且它似乎没有任何区别。是什么导致了这种行为？

<script type="importmap">
  {
    "imports": {
      "three": "https://threejs.org/build/three.module.js"
    }
  }
</script>
<!--
  Had to put JS in the HTML block to import THREE
  Also, issue is more clear with an image material, but I had to use a solid color for this example
-->
<script type="module">
  import * as THREE from "three";
  import {EffectComposer} from "https://threejs.org/examples/jsm/postprocessing/EffectComposer.js";
  import {OutlinePass} from "https://threejs.org/examples/jsm/postprocessing/OutlinePass.js";
  import {RenderPass} from "https://threejs.org/examples/jsm/postprocessing/RenderPass.js";
  // import {ShaderPass} from "https://threejs.org/examples/jsm/postprocessing/ShaderPass.js";
  // import {FXAAShader} from "https://threejs.org/examples/jsm/shaders/FXAAShader.js";

  const windowSize = [256,256],
  mesh = new THREE.Mesh(new THREE.BoxGeometry(16,16,16), new THREE.MeshBasicMaterial({color: 0xd41313})),
  scene = new THREE.Scene(),
  camera = new THREE.OrthographicCamera(-16,16,16,-16),
  renderer = new THREE.WebGLRenderer(),
  textureLoader = new THREE.TextureLoader(),
  effectComposer = new EffectComposer(renderer),
  outline = new OutlinePass(new THREE.Vector2(...windowSize), scene, camera);
  // const effectFXAA = new ShaderPass(FXAAShader);

  // --- Swapping these two passes demonstrates it's the outline causing issues
  effectComposer.addPass(new RenderPass(scene, camera));
  effectComposer.addPass(outline);

  // --- FXAAShader was an attempt to fix it, since some research showed it could be anti-aliasing issues, but this did not seem to make a difference
  // effectFXAA.uniforms['resolution'].value.set(1/windowSize[0],1/windowSize[1]);
  // effectComposer.addPass(effectFXAA);

  renderer.setSize(...windowSize);
  camera.position.set(32,32,32);
  camera.lookAt(0,0,0);
  outline.selectedObjects = [mesh];
  scene.add(mesh);
  document.body.appendChild(renderer.domElement);
  effectComposer.render();
</script>

【问题讨论】：

标签： javascript three.js

【解决方案1】：

我遇到了同样的问题，然后我不得不在调整窗口大小事件中重新分配像素比率和大小，这就解决了问题。（甚至不需要FXAAShader来解决问题）

...
    window.addEventListener("resize", this.resize.bind(this));

resize(){
    this.composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    this.composer.setSize(this.width, this.height)
}

【讨论】：