fix rounding to be smoother on retina devices and smooth correctly

examples/tests/shader-rounded-circles.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+export async function automation(settings: ExampleSettings) {
+  // Snapshot single page
+  await test(settings);
+  await settings.snapshot();
+}
+
+export default async function test({ renderer, testRoot }: ExampleSettings) {
+  const sizes = [10, 20, 40, 80, 100, 200, 300, 400, 800];
+  let x = 20;
+  let y = 20;
+  let rowHeight = 0;
+
+  sizes.forEach((size) => {
+    if (x + size > 1900) {
+      x = 20;
+      y += rowHeight + 20;
+      rowHeight = 0;
+    }
+    renderer.createNode({
+      x,
+      y,
+      w: size,
+      h: size,
+      color: 0xff0000ff,
+      shader: renderer.createShader('Rounded', { radius: size / 2 }),
+      parent: testRoot,
+    });
+
+    x += size + 20;
+    rowHeight = Math.max(rowHeight, size);
+  });
+}

src/core/shaders/webgl/Rounded.ts

@@ -80,6 +80,7 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
     uniform vec2 u_resolution;
     uniform vec2 u_dimensions;
     uniform float u_alpha;
+    uniform float u_pixelRatio;
     uniform sampler2D u_texture;
 
     //custom uniforms
@@ -103,7 +104,8 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
       float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, 1.0, boxDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float roundedAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, boxDist);
 
       vec4 resColor = vec4(0.0);
       resColor = mix(resColor, color, roundedAlpha);

src/core/shaders/webgl/RoundedWithBorder.ts

@@ -130,7 +130,8 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
       float outerDist = roundedBox(boxUv, v_halfDimensions, u_radius);
 
-      float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
 
       if(v_borderZero == 1.0) {
         gl_FragColor = mix(vec4(0.0), color, outerAlpha) * u_alpha;
@@ -141,7 +142,7 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 
       float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
-      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
       vec4 resColor = mix(u_borderColor, color, innerAlpha);
       resColor = mix(vec4(0.0), resColor, outerAlpha);

src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -151,7 +151,8 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
       float outerDist = roundedBox(boxUv, v_halfDimensions - 1.0, u_radius);
 
-      float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
 
       float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
       vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
@@ -165,7 +166,7 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 
       float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
-      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
       vec4 resColor = mix(u_borderColor, color, innerAlpha);
       resColor = mix(shadow, resColor, outerAlpha);

src/core/shaders/webgl/RoundedWithShadow.ts

@@ -81,7 +81,8 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
       float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float roundedAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, boxDist);
 
       float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_radius + u_shadow.z);