Blury Text after an EffectPass

[changbowen]

Hi,
When at least one EffectPass is applied, the text on screen seems to have "inconsistent sharpness"...
Here is a comparison. I used the quick-start.js as entry file. The first image is how it looks when 0 passes are returned. The second one is with only one new pp.EffectPass(null, new pp.BrightnessContrastEffect()) returned. A small font size is used so the artifact is more visible. (Also disable scaling of this webpage for a clearer idea.)

Feels like the rendered content is getting stretched somehow and it is not 1:1.

[slammayjammay]

Doesn't happen on my mac; might be windows only. Do you see this problem using other passes from postprocessing? Just to make sure it isn't an issue with Effects, what happens if you export this from the entry file? For me this shows the same as no plugin at all.

module.exports = `
	void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
		outputColor = inputColor;
	}
`;

[changbowen]

Plugin disabled (crystal clear):

Exporting only void mainImage as you suggested (similar blurry text):

I also tested on linux and the results looked the same. This is on a manjaro with plugin disabled:

And with plugin enabled:

You might not see the small artifacts with the retina display on your mac fixing it for you :)
I guess it could be hard for an image processing plugin to produce clear text.. but this is a console and is meant for display text 😜

[slammayjammay]

Looks fine on a non-retina screen for me too (on macOS). I'll do some testing on windows, something I obviously haven't done in a while :)

[slammayjammay]

(Haven't forgotten about this) for what it's worth I have the same problem on windows 8.1. No idea why it's happening; postprocessing handles most rendering-related stuff.

[changbowen]

Strangely enough it happens on linux too...
And if you notice the text when resizing the window, the blurriness changes "focus". That's why I felt it was like a result of the output getting stretched.

[devlinb]

I can confirm this.

If you resize the window vertically with hyper-postprocessing running, the text will be stretched/squished vertically, instead of just the window frame being resized. (Sometimes it'll snap to an integer scaling and everything will look proper).

This happens even with no effects active, if retro/index.js is modified to just

const { readFileSync } = require('fs');
const { resolve } = require('path');
const THREE = require('three');
const POSTPROCESSING = require('postprocessing');

module.exports = ({ hyperTerm, xTerm }) => {

const saveTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { format: THREE.RGBAFormat, stencilBuffer: false })
const savePass = new POSTPROCESSING.SavePass(saveTarget)
return { 
	passes: [
		savePass,
	],

};
};

The distortion still happens, see a demonstration at https://imgur.com/a/tDXmnzI

Things get worse if I add

css: '.hyper-postprocessing { height: 100% !important; }',

to .hyper.js to get rid of the annoying black padding that happens below the canvas even with padding set to 0.

[slammayjammay]

d2c5e5a

Duh, the canvas size was just being set wrong, that took way too long to figure out....Try downloading version 2.3.1. @devlinb that resizing issue in the gif seems to have gone away as well.

Things get worse if I add css: '.hyper-postprocessing { height: 100% !important; }',

Best to use the underlying xterm API to set the terminal size. Theoretically once the xterm terminal is resized, the hyper-postprocessing canvas will match its dimensions and placement.

get rid of the annoying black padding that happens below the canvas

I was able to remove a bit of that black bar at the bottom by resizing the window height. I think xterm aligns the terminal height to a grid so that there's an integer number of rows.

[changbowen]

I did some tests. There are definitely improvements. However under 125% DPI scaling I can still see some blurriness with small fonts (10 pt) while resizing the window horizontally.

[marcofugaro]

Maybe this is an aliasing issue? Have you tried passing multisampling: 8 to the postprocessing options?

https://vanruesc.github.io/postprocessing/public/docs/class/src/core/EffectComposer.js~EffectComposer.html