Merge pull request #414 from dli7319/ui_panel_corner_radius

ui: Unify panel corner radius and use physical border width

Author: dli7319

samples/ui/index.html

@@ -190,8 +190,8 @@
           // player row
           const playerRow = grid.addRow({weight: 1.0});
           const playerPanel = playerRow.addPanel({
-            width: 1.2,
-            height: 1.2,
+            width: 1,
+            height: 1,
             backgroundColor: '#21252baa',
           });
           const playerGrid = playerPanel.addGrid();

src/ui/core/Panel.ts

@@ -76,6 +76,9 @@ export class Panel extends View implements Draggable, Partial<HasDraggingMode> {
    */
   showHighlights = false;
 
+  /** The width of the interactive border, in meters. */
+  borderWidth = 0.1;
+
   /** The background color of the panel, expressed as a CSS color string. */
   backgroundColor = '#c2c2c255';
 
@@ -123,8 +126,6 @@ export class Panel extends View implements Draggable, Partial<HasDraggingMode> {
     const isDraggable = options.draggable ?? this.draggable;
 
     const useBorderlessShader = options.useBorderlessShader ?? !isDraggable;
-    // Draggable panels have a larger geometry for interaction padding.
-    const panelScale = useBorderlessShader ? 1.0 : 1.3;
     // Use SpatialPanelShader for SpatialPanel, while developers can choose
     // useBorderlessShader=false to disable the interactive border.
     const shader = useBorderlessShader ? SquircleShader : SpatialPanelShader;
@@ -147,8 +148,12 @@ export class Panel extends View implements Draggable, Partial<HasDraggingMode> {
       options.useDefaultPosition ?? this.useDefaultPosition;
     this.useBorderlessShader =
       options.useBorderlessShader ?? this.useBorderlessShader;
+    this.borderWidth = options.borderWidth ?? this.borderWidth;
 
-    this.mesh = new PanelMesh(shader, this.backgroundColor, panelScale);
+    this.mesh = new PanelMesh(shader, this.backgroundColor);
+    if (this.mesh.uniforms.uBorderWidth) {
+      this.mesh.uniforms.uBorderWidth.value = this.borderWidth;
+    }
     this.add(this.mesh);
 
     this.updateLayout();
@@ -321,13 +326,21 @@ export class Panel extends View implements Draggable, Partial<HasDraggingMode> {
    */
   override updateLayout() {
     super.updateLayout();
-    this.mesh.setAspectRatio(this.aspectRatio);
     const parentAspectRatio =
       this.isRoot || !this.parent ? 1.0 : (this.parent as View).aspectRatio;
-    this.mesh.setWidthHeight(
-      this.width * Math.max(parentAspectRatio, 1.0),
-      this.height * Math.max(1.0 / parentAspectRatio, 1.0)
-    );
+    const layoutWidth = this.width * Math.max(parentAspectRatio, 1.0);
+    const layoutHeight = this.height * Math.max(1.0 / parentAspectRatio, 1.0);
+
+    const effectiveBorderWidth = this.useBorderlessShader
+      ? 0.0
+      : this.borderWidth;
+    const meshWidth = layoutWidth + effectiveBorderWidth;
+    const meshHeight = layoutHeight + effectiveBorderWidth;
+
+    const panelScale = Math.min(layoutWidth, layoutHeight);
+    this.mesh.scale.set(meshWidth / panelScale, meshHeight / panelScale, 1.0);
+
+    this.mesh.setWidthHeight(meshWidth, meshHeight);
     this.mesh.renderOrder = this.renderOrder;
   }
 

src/ui/core/PanelMesh.ts

@@ -29,9 +29,8 @@ export class PanelMesh extends THREE.Mesh<
    * Creates an instance of PanelMesh.
    * @param shader - Shader for the panel mesh.
    * @param backgroundColor - The background color as a CSS string.
-   * @param panelScale - The initial scale of the plane
    */
-  constructor(shader: Shader, backgroundColor?: string, panelScale = 1.0) {
+  constructor(shader: Shader, backgroundColor?: string) {
     // Each mesh needs its own unique set of uniforms.
     const uniforms = THREE.UniformsUtils.clone(shader.uniforms);
 
@@ -44,7 +43,7 @@ export class PanelMesh extends THREE.Mesh<
       side: THREE.DoubleSide,
     });
 
-    const geometry = new THREE.PlaneGeometry(panelScale, panelScale);
+    const geometry = new THREE.PlaneGeometry(1.0, 1.0);
 
     super(geometry, material);
 

src/ui/core/PanelOptions.ts

@@ -14,4 +14,5 @@ export type PanelOptions = ViewOptions & {
   showHighlights?: boolean;
   useDefaultPosition?: boolean;
   useBorderlessShader?: boolean;
+  borderWidth?: number;
 };

src/ui/shaders/SpatialPanelShader.ts

@@ -108,10 +108,6 @@ export const SpatialPanelShader = {
     }
 
     void main(void) {
-      vec2 size = uBoxSize * 1000.0;
-      float radius = min(size.x, size.y) * (0.05 + uRadius);
-      vec2 half_size = 0.5 * size;
-
       // Distance to the outer edge of the round box in UV space (0-1)
       float distOuterUV = distRoundBox(vTexCoord * uBoxSize - uBoxSize * 0.5, uBoxSize * 0.5, uRadius);
 

src/ui/shaders/SquircleShader.ts

@@ -106,14 +106,12 @@ export const SquircleShader = {
       #include <alphatest_fragment>
       #include <alphahash_fragment>
       #include <specularmap_fragment>
-      vec2 size = uBoxSize * 1000.0;
 
-      // Calculates the adjusted radius based on box size.
-      float radius = min(size.x, size.y) * (0.05 + uRadius);
-      vec2 half_size = 0.5 * size;
+      // Compute the distance from the rounded box edge in meters.
+      float dist = distRoundBox(vUv * uBoxSize - uBoxSize * 0.5, uBoxSize * 0.5, uRadius);
 
-      // Compute the distance from the rounded box edge.
-      float dist = distRoundBox(vUv * size - half_size, half_size, radius);
+      // Antialiasing delta
+      float aa = fwidth(dist) * 0.8;
 
       // Use lerp for smooth color transition based on distance.
       vec4 colorInside = uBackgroundColor;
@@ -126,7 +124,7 @@ export const SquircleShader = {
       // Transparent black for outside.
       vec4 colorOutside = vec4(0.0, 0.0, 0.0, 0.0);
 
-      vec4 finalColor = mix(colorInside, colorOutside, smoothstep(0.0, 1.0, dist));
+      vec4 finalColor = mix(colorInside, colorOutside, smoothstep(0.0, aa, dist));
 
       // Return premultiplied alpha.
       gl_FragColor = uOpacity * finalColor.a * vec4(finalColor.rgb, 1.0);