Combine antialised render target texture with not antialised texture

Questions
, ,
1

Many objects like grass meshes, rocks and so on start flickering/jittering on a distance during a camera movement. The only thing that solves this problem is hardware antialiasing like msaa or ssaa. But due to perfomance reasons i want to use this kind of aa for the grass layer only. I’m using separate camera that renders the grass layer to a separate Render target.

  const renderTargetGrass = new THREE.WebGLRenderTarget(...biggestSize, {
    depthBuffer: true,
    format: THREE.RGBAFormat,
    type: THREE.UnsignedByteType,
    samples: 0, // doesnt matter in this case because i use ssaa for this test. msaa result is the same
  });

So i wanted to get this render target texture and just mix it with other scene layers. But as i understood antialiasing makes the edges of the meshes smooth blending it with current background respecting the colors at render moment only. So putting antialiased texture to any other background removes antialiasing from the image. For example in my custom shader pass i do this:

        vec4 grassTex = texture2D(tDiffuse, vUv);
        gl_FragColor = mix(vec4(1.0), grassTex, grassTex.a);

Mixing the grass texture with a white background shows the same flickering while changing mix color to black vec4(0.0) shows antialised (almost) image.

Maybe anyone has any wise ideas how to combine smooth edged grass with any custom background for the best perfomance?

2

Can you provide a video or minimal live example that demonstrates the issue? As a wild guess it sounds like your camera frustum far property is set to a large value, what are the near and far values of your camera set to?

1 Like
3

Ive tried earlier to set lower near/far values. It doesnt help at all. Its not z-fighting because log depth buffer or reverse depth buffer dont influence it. The only thing that was able to fix this is msaa/ssaa/taa. Smaa or fxaa dont help. Even if i make near = 0.1 , far = 1.0 (instead of 1000) the problem gonna exist because its relative to objects size in a camera view.

This is a basic simple implementation.

You can easily notice how everything is flickering from a certain distance if msaa = false.