For some reason, the way I've used OutlinePass in my code causes everything (except the added outline) to be pixelated, but the EffectComposer works fine with just the RenderPass, and I can't figure out why. According to some similar questions and answers I've seen, adding an FXAAShader might solve this, but I tried this (code commented below) and it did not seem to make any difference. What is causing this behaviour?
<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>