Hi there,
currently i am writing shaders to display different patterns on a plane. That works fine but the output looks like anti-aliasing is missing for me. Although antialiasing is enabled. I also tried to increase the pixelRatio, which helped a bit but did not bring the results i want.
Here is an image of the probem:
As you can see all the edges of the squares are jagged.
Here is my fragment shader code:
uniform vec2 uSize; // The size of the plane in meters
uniform float uSquareSize; // Square size in meters
uniform float uGapSize; // Gap size in meters
uniform float uInvert;
varying vec2 vUv;
void main() {
// Calculate total size of one grid cell (square + gap)
float gridCellSizeX = uSquareSize + uGapSize;
float gridCellSizeY = uSquareSize + uGapSize;
// Calculate number of complete grid cells that fit in each dimension
float numberOfColumns = floor(uSize.x / gridCellSizeX);
float numberOfRows = floor(uSize.y / gridCellSizeY);
// Calculate total width and height occupied by these grid cells
float totalGridWidth = numberOfColumns * gridCellSizeX;
float totalGridHeight = numberOfRows * gridCellSizeY;
// Calculate remaining space after fitting complete grid cells
float restX = uSize.x - totalGridWidth;
float restY = uSize.y - totalGridHeight;
// Calculate offsets to center the pattern
float offsetX = (restX - uGapSize) / 2.0;
float offsetY = (restY - uGapSize) / 2.0;
// Adjust UV coordinates to apply centering offsets
vec2 adjustedUV = vUv * uSize - vec2(offsetX, offsetY);
// Calculate step value for square and gap transitions
float stepValueX = uGapSize / gridCellSizeX;
float stepValueY = uGapSize / gridCellSizeY;
// Determine pattern presence using step function
float patternX = step(stepValueX, mod(adjustedUV.x / gridCellSizeX, 1.0));
float patternY = step(stepValueY, mod(adjustedUV.y / gridCellSizeY, 1.0));
// Combine patterns for both dimensions
float pattern = patternX * patternY;
// Output color based on pattern
pattern = mix(pattern, 1.0 - pattern, uInvert);
//keep result between 0 and 0.95
pattern = clamp(pattern, 0.0, 0.95);
gl_FragColor = vec4(vec3(0.9), pattern);
}
Any hint would be highly appreciated!
P.S. I am using r3f but i doubt, it is part of the problem (mentioning it just to make sure you have all infos)
