Jagged sharp edges on objects when using Custom Effect Pass

Questions
, ,
1

I’m trying to set up a very simple gradient map post processing shader. It’s set up as a custom effect pass in the effect composer & the shader simple turns the scene grayscale, then maps the lightness to a gradient texture, hence re-colouring the image to the gradient colours (same as photoshop’s gradient map function).

The shader is very basic:

const GradientMapShader = `

	uniform float mapAmount;
	uniform sampler2D gradientMap;

	float desaturate(in vec3 inColor) {
		return ((inColor.r + inColor.g + inColor.b) / 3.0);
	}

	void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {

		float lightness = desaturate(inputColor.rgb);
		vec4 gradientImage = texture2D(gradientMap, vec2(clamp(lightness, 0.0, 1.0), 0.0));

		vec4 finalColor = mix(vec4(gradientImage), vec4(inputColor), mapAmount);

		outputColor = vec4(finalColor.rgb, inputColor.a);

 		// just lightness map for testing
		//outputColor = vec4(vec3(lightness), inputColor.a);

	}
`

export { GradientMapShader }

However, it creates jagged (multi-colored) edges around all of the objects in the scene:
image
image

When compared to just the lightness map that it’s based off, there are no jagged edges:
image

Does anyone have any idea why this is happening?
Thanks in advance :slight_smile:

2

It’s probably because the built in anti-aliasing can’t work with post processing. You can either use add an AA pass (usually SMAA or FXAA) or you can use a multisample rendertarget. See this example:

https://threejs.org/examples/?q=multi#webgl2_multisampled_renderbuffers

3

From my understanding the library that I’m using (react-postprocessing) uses multisampling when it’s set up like the following with the multisampling param set to non-zero:

<EffectComposer multisampling={8}>
	<GradientMapEffect
		ref={gradientMapRef}
		blendFunction={BlendFunction.NORMAL}
		gradientMap={gradientMap}
		mapAmount={props.effectParams.gradientMapMix.default}
	/>

	<Noise blendFunction={BlendFunction.SCREEN} premultiply={true} opacity={0.5} />

	<GammaCorrection gamma={0.45} />
</EffectComposer>

I also tried react-postprocessing SMAA pass & set multisampling on the effect composer to 0, but the following image still results with the following gradient texture:
image

image

If I turn off the gradient pass it’s clean:
image

So I’m not sure its the anti-aliasing at this point?
Any ideas?