WebGLRenderer Quality Settings

Based on the screenshot you've provided, I can see you're trying to match the settings from the online glTF viewer. The quality issues you're experiencing (poor texture quality and moiré effects) are likely related to several renderer settings that affect image quality.

Here are some suggestions to improve your rendering quality:

Key Settings to Adjust

1. Enable antialiasing:

   JAVASCRIPTCopied
   const renderer = new THREE.WebGLRenderer({
     antialias: true
   });

2. Set pixel ratio to match your device's display:

   JAVASCRIPTCopied
   renderer.setPixelRatio(window.devicePixelRatio);

3. Enable tone mapping (as shown in your screenshot):

   JAVASCRIPTCopied
   renderer.toneMapping = THREE.ACESFilmicToneMapping;
   renderer.toneMappingExposure = 1.0; // Adjust as needed

4. Enable shadow mapping with higher quality settings:

   JAVASCRIPTCopied
   renderer.shadowMap.enabled = true;
   renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows

5. Texture filtering - Make sure your textures have proper mipmaps and filtering:

   JAVASCRIPTCopied
   texture.minFilter = THREE.LinearMipMapLinearFilter;
   texture.magFilter = THREE.LinearFilter;
   texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

The anisotropic filtering is particularly important for reducing texture blurring at oblique angles, which might be causing your sign texture to look poor.

Additional Considerations

• Check if your model's textures have mipmaps generated
• Ensure your textures are power-of-two dimensions for optimal performance
• Consider using higher resolution textures if the current ones are too low-res

Try implementing these settings to match what you see in the screenshot, and it should help improve the quality of your rendering.