Using shaderpass causes serious sawtooth problems

Questions
1

HI！everybody :point_down:

image
image945×417 3.41 KB

image
image975×524 5.64 KB

Is there any good way to solve this problem？

2

Do you mean the aliasing? Postprocessing disables the automatic antialiasing, but you can try adding an FXAA as an additional pass - it should fix the issue.

3

The first picture is fxaapass added, and the second picture is the effect of automatic antialiasing.I used shaderpass to mix the two targets together. Is there a better way to mix two goals?

const finalPass = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: Composer1.renderTarget2.texture },
          bloomTexture: { value: bloomComposer.renderTarget2.texture }
        },
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,
        defines: {}
      })
    );
const finalComposer = new EffectComposer(renderer);
finalComposer.addPass(finalPass);
4

Maybe is the pixel ratio; everytime you add a new pass it takes half of your pixel ratio(less pixel ratio = less resolution = more sawtooth). So maybe the solution is increse the pixel ratio.

5

How can I increase my pixel ratio? :thinking:

6

You cant increase more then you canvas size.

7

Automatic (use the max of your device)
renderer.setPixelRatio( window.devicePixelRatio );

Manual
renderer.setPixelRatio( window.devicePixelRatio, 3);

Change 3. But keep un mind that less pixel ratio = better performance more is quality. 5 is too much

8

image
image837×94 9.33 KB

There seems to be no second parameter on the document. If I set it, it doesn’t seem to have any effect.

:beers: :beers: :beers:
Is there any way to mix the post rendered objects with the objects rendered by the normal renderer so that the post rendered objects will not appear serious aliasing without using the post rendered objects.

9

:thinking: What’s the meaning of this?

10

Strange. Right now im using renderer.setPixelRatio( window.devicePixelRatio,1);
on my proyect and it does the job for performance.

11

@Mugen87 This method may be updated by a new version? Have you ever encountered such a mixture? :thinking:

12

Hehe I think Im working in a old Threejs vertion
I think now is more easy. Something like

renderer.setPixelRatio(3);

13

That was never the way the method should be used. It always had just a single parameter.

14

There seems to be no solution to this problem . :sob: :sob:

15

This grid more smooth: GitHub - Fyrestar/THREE.InfiniteGridHelper: Infinite anti-aliased grid.

1 Like
16

XD I think I know why. is because I forgot that I used Math.min

this.vars.renderer.setPixelRatio(Math.min(window.devicePixelRatio,1));

17

image
image1196×659 62.3 KB

I used this grid, but why does it look like a dotted line.

18

I believe that the reason why this may work is just JS. you could also call:

renderer.setPixelRatio(
  window.devicePixelRatio,
  1,
  2,
  'banana',
  window.innerHeight,
  innerHeight
)

And it should work. The method will still use just the first argument.