'Why is OutlinePass in Three.js causing everything to appear pixelated?
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
