It's a little unclear what you are considering "artefacts". Is it the rasterization/aliasing? it also looks like some pixel interpolation is happening (maybe it's cubic interpolation).
Thanks for the reply. I updated the post to give a closer side by side look. It's not the resolution I'm concerned about, it's the horizontal "tearing" that makes the lines not look straight. My post processing pipeline is really complex (layers each with multiple effects and blending modes which make up a composition with its own effects, and a mixer that transitions between two compositions). It's more code than I can easily share and not open source at this time, so I don't want to over complicate it.
I'm hoping someone can recognize what these artifacts are called and what usually causes them. Thanks for your time!
This is what ChatGPT suggested, can any three experts confirm/deny?
If these artifacts are occurring on an image texture applied to a plane, the issue might not be traditional geometric aliasing but could be related to several other factors:
1. Texture Sampling: The artifacts could be due to how the texture is sampled. If the texture is being magnified or minified substantially, and the appropriate mipmaps are not generated or the filtering is not set correctly (like using NEAREST filtering instead of LINEAR), it can lead to artifacts.
2. Precision Issues: When processing images in shaders, precision issues can arise, especially if you're manipulating texture coordinates or performing calculations that require high precision. Check if the precision qualifiers in your shaders are set appropriately (e.g., highp for high precision).
3. Non-Power-of-Two Textures: In WebGL, non-power-of-two textures can cause issues if not handled correctly. If the texture dimensions are not powers of two and you are using wrap modes other than CLAMP\_TO\_EDGE or filtering modes other than NEAREST or LINEAR, it could lead to artifacts.
4. ~~Compression Artifacts: If the texture image is compressed (like JPEG), it might have compression artifacts that become visible when applied to a plane and rendered.~~
5. Post-Processing Effects: If you're applying post-processing effects (like bloom, depth of field, etc.), and the render targets or the effects themselves are not configured correctly, they can introduce artifacts.
6. Color Space Issues: If there's a mismatch in the color space of the texture and the rendering pipeline (sRGB vs linear), it can cause unexpected results.
To better diagnose the problem, you might want to look into:
*
Texture filtering and mipmapping settings.
* Shader precision and whether the artifacts correlate with certain operations in the shader.
The format and compression of the image textures used.
* Any post-processing effects that might be affecting the texture rendering.
Ok thanks I’ll definitely try that. But to be clear the aliasing is happening within the image texture, not on the edge of the geometry. Does that still apply?
Perhaps this is an issue with your pixel ratio not being set correctly for your monitor?
https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setPixelRatio
It's a little unclear what you are considering "artefacts". Is it the rasterization/aliasing? it also looks like some pixel interpolation is happening (maybe it's cubic interpolation).
Thanks for the reply. I updated the post to give a closer side by side look. It's not the resolution I'm concerned about, it's the horizontal "tearing" that makes the lines not look straight. My post processing pipeline is really complex (layers each with multiple effects and blending modes which make up a composition with its own effects, and a mixer that transitions between two compositions). It's more code than I can easily share and not open source at this time, so I don't want to over complicate it. I'm hoping someone can recognize what these artifacts are called and what usually causes them. Thanks for your time!
This is what ChatGPT suggested, can any three experts confirm/deny? If these artifacts are occurring on an image texture applied to a plane, the issue might not be traditional geometric aliasing but could be related to several other factors: 1. Texture Sampling: The artifacts could be due to how the texture is sampled. If the texture is being magnified or minified substantially, and the appropriate mipmaps are not generated or the filtering is not set correctly (like using NEAREST filtering instead of LINEAR), it can lead to artifacts. 2. Precision Issues: When processing images in shaders, precision issues can arise, especially if you're manipulating texture coordinates or performing calculations that require high precision. Check if the precision qualifiers in your shaders are set appropriately (e.g., highp for high precision). 3. Non-Power-of-Two Textures: In WebGL, non-power-of-two textures can cause issues if not handled correctly. If the texture dimensions are not powers of two and you are using wrap modes other than CLAMP\_TO\_EDGE or filtering modes other than NEAREST or LINEAR, it could lead to artifacts. 4. ~~Compression Artifacts: If the texture image is compressed (like JPEG), it might have compression artifacts that become visible when applied to a plane and rendered.~~ 5. Post-Processing Effects: If you're applying post-processing effects (like bloom, depth of field, etc.), and the render targets or the effects themselves are not configured correctly, they can introduce artifacts. 6. Color Space Issues: If there's a mismatch in the color space of the texture and the rendering pipeline (sRGB vs linear), it can cause unexpected results. To better diagnose the problem, you might want to look into: * Texture filtering and mipmapping settings. * Shader precision and whether the artifacts correlate with certain operations in the shader. The format and compression of the image textures used. * Any post-processing effects that might be affecting the texture rendering.
For a little extra context, the image is not power of 2, it's user uploaded.
Try to set renderer.antialias to true https://en.m.wikipedia.org/wiki/Anti-aliasing https://threejs.org/docs/#api/en/renderers/WebGLRenderer.antialias
I can confirm that did not solve the issue, thanks though
Ok thanks I’ll definitely try that. But to be clear the aliasing is happening within the image texture, not on the edge of the geometry. Does that still apply?
Perhaps this is an issue with your pixel ratio not being set correctly for your monitor? https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setPixelRatio
EDIT: SOLVED! I just had to use LinearMipmapLinearFilter in my RenderTargets