Por alguna razón, la forma en que usé OutlinePass en mi código hace que todo (excepto el contorno agregado) se pixele, pero EffectComposer funciona bien solo con RenderPass, y no puedo entender por qué. De acuerdo con algunas preguntas y respuestas similares que he visto, agregar un FXAAShader podría resolver esto, pero probé esto (código comentado a continuación) y no pareció hacer ninguna diferencia. ¿Qué está causando este comportamiento?
<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>