Edges are denty

Questions
,
1

Hi there, How come that my gltf meshes come with awful denty edges but gltf-viewers (such as donmccurdy) have a very smooth edge (please see the photo)?
I have tried FXAA sometime ago (with the following code) but the edges became pixelated rather than smooth, so I have removed it (my player has a boosted contrast shader):

const effectFXAA = new ShaderPass( FXAAShader );                                       
effectFXAA.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );  
effectFXAA.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio ); 
composer.addPass( effectFXAA );                                                        
![mine|690x172](upload://x5OSfh8bAJBt7n5h5S7DlKpfuH5.jpeg)

Every help is much appreciated, thank you,

mine
mine1527×382 80.7 KB

2

Do you even need postprocessing? Using antialias: true in the render setting enables antialiasing for whatever is supported like MSAA, you can also use for WebGLRenderTargets, but it has it’s own performance cost and isn’t guaranteed to be available on every device.

1 Like
3

Thank you, I have that enabled but still I get this awful dents, am I missing something in here that the viewer is doing right? Here is my code for AA:

        let pixelRatio = window.devicePixelRatio;
        let AA = true;
        if (pixelRatio > 1) {
              AA = false;
            }
        let renderer = new THREE.WebGLRenderer({
              antialias: AA,
              powerPreference: "high-performance",
            })
        renderer.shadowMap.enabled = true;
4

I found the problem: brightness contrast shader ruins AA; remove it and you are done. Although I need that contrast be manually set (which I did using shader) but I rather save AA than the shader. Now I have to figure out how to add more contrast by other mean!
Thanks to Fyrestar to pointing that maybe the AA is enough and no post is needed