fix(radius): avoid seam on fractional position (#675)

Resolve visual line artifacts in rounded corners when elements are
positioned at fractional coordinates.

Author: il-sairamg

examples/tests/viewport-largebound.ts

@@ -5,15 +5,36 @@ import type { INode } from '../../dist/exports/index.js';
 export async function automation(settings: ExampleSettings) {
   const page = await test(settings);
   page(1);
+  await waitForRendererIdle(settings.renderer);
   await settings.snapshot();
 
   page(2);
+  await waitForRendererIdle(settings.renderer);
   await settings.snapshot();
 
   page(3);
+  await waitForRendererIdle(settings.renderer);
   await settings.snapshot();
 }
 
+function waitForRendererIdle(renderer: ExampleSettings['renderer']) {
+  return new Promise<void>((resolve) => {
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+
+    const finishSoon = () => {
+      timeout = setTimeout(() => resolve(), 200);
+    };
+
+    renderer.once('idle', () => {
+      if (timeout) clearTimeout(timeout);
+      finishSoon();
+    });
+
+    // Fallback in case `idle` already fired before we attached the listener
+    finishSoon();
+  });
+}
+
 export default async function test({ renderer, testRoot }: ExampleSettings) {
   // Create a container node
   const containerNode = renderer.createNode({
@@ -62,7 +83,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
       'Container bound: ' + JSON.stringify(containerNode.renderState) + '\n';
 
     for (const node of containerNode.children) {
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+       
       status += `${
         (node.children[0] as CoreTextNode)?.text
       } bound: ${JSON.stringify(node.renderState)} \n`;

src/core/renderers/webgl/shaders/effects/RadiusEffect.ts

@@ -97,11 +97,11 @@ export class RadiusEffect extends ShaderEffect {
 
   static override onShaderMask = `
   vec2 halfDimensions = u_dimensions * 0.5;
-  float r = radius[0] * step(v_nodeCoordinate.x, 0.5) * step(v_nodeCoordinate.y, 0.5);
-  r = r + radius[1] * step(0.5, v_nodeCoordinate.x) * step(v_nodeCoordinate.y, 0.5);
-  r = r + radius[2] * step(0.5, v_nodeCoordinate.x) * step(0.5, v_nodeCoordinate.y);
-  r = r + radius[3] * step(v_nodeCoordinate.x, 0.5) * step(0.5, v_nodeCoordinate.y);
-  return $boxDist(v_nodeCoordinate.xy * u_dimensions - halfDimensions, halfDimensions, r);
+  vec2 p = v_nodeCoordinate.xy * u_dimensions - halfDimensions;
+  vec4 r = radius;
+  r.xy = (p.x > 0.0) ? r.yz : r.xw;
+  float cornerRadius = (p.y > 0.0) ? r.y : r.x;
+  return $boxDist(p, halfDimensions, cornerRadius);
   `;
 
   static override onEffectMask = `