Fix UI clipToBounds bug

Author: STREGA

Sources/GateEngine/System/Rendering/SystemShaders.swift

@@ -234,6 +234,53 @@ internal extension VertexShader {
     }()
 }
 
+@MainActor
 internal extension FragmentShader {
-
+    static let userInterfaceClipRectTextureSample: FragmentShader = {
+        let fsh = FragmentShader()
+        let viewOrigin: Vec2 = fsh.uniforms["ViewOrigin"]
+        let viewSize: Vec2 = fsh.uniforms["ViewSize"]
+        let minX: Scalar = viewOrigin.x
+        let maxX: Scalar = minX + viewSize.width
+        let minY: Scalar = viewOrigin.y
+        let maxY: Scalar = minY + viewSize.height
+        let inBounds: Scalar = (fsh.input.position.x >= minX && fsh.input.position.x < maxX && fsh.input.position.y >= minY && fsh.input.position.y < maxY)
+        let opacity: Scalar = fsh.uniforms["opacity"]
+        let sample = fsh.channel(0).texture.sample(
+            at: fsh.input["texCoord0"]
+        )
+        fsh.output.color = Vec4(sample.rgb, sample.a * opacity).discard(if: inBounds == false)
+        return fsh
+    }()
+    static let userInterfaceClipRectTintColor: FragmentShader = {
+        let fsh = FragmentShader()
+        let viewOrigin: Vec2 = fsh.uniforms["ViewOrigin"]
+        let viewSize: Vec2 = fsh.uniforms["ViewSize"]
+        let minX: Scalar = viewOrigin.x
+        let maxX: Scalar = minX + viewSize.width
+        let minY: Scalar = viewOrigin.y
+        let maxY: Scalar = minY + viewSize.height
+        let inBounds: Scalar = (fsh.input.position.x >= minX && fsh.input.position.x < maxX && fsh.input.position.y >= minY && fsh.input.position.y < maxY)
+        let opacity: Scalar = fsh.uniforms["opacity"]
+        let tintColor: Vec4 = fsh.channel(0).color
+        fsh.output.color = Vec4(tintColor.rgb, tintColor.a * opacity).discard(if: inBounds == false)
+        return fsh
+    }()
+    static let userInterfaceClipRectTextureTemplateTintColor: FragmentShader = {
+        let fsh = FragmentShader()
+        let viewOrigin: Vec2 = fsh.uniforms["ViewOrigin"]
+        let viewSize: Vec2 = fsh.uniforms["ViewSize"]
+        let minX: Scalar = viewOrigin.x
+        let maxX: Scalar = minX + viewSize.width
+        let minY: Scalar = viewOrigin.y
+        let maxY: Scalar = minY + viewSize.height
+        let inBounds: Scalar = (fsh.input.position.x >= minX && fsh.input.position.x < maxX && fsh.input.position.y >= minY && fsh.input.position.y < maxY)
+        let opacity: Scalar = fsh.uniforms["opacity"]
+        let tintColor: Vec4 = fsh.channel(0).color
+        let sample = fsh.channel(0).texture.sample(
+            at: fsh.input["texCoord0"]
+        )
+        fsh.output.color = Vec4(tintColor.rgb, opacity * tintColor.a * sample.a).discard(if: inBounds == false)
+        return fsh
+    }()
 }

Sources/GateEngine/UI/ImageView.swift

@@ -53,6 +53,10 @@ open class ImageView: View {
     override func draw(_ rect: Rect, into canvas: inout UICanvas) {
         super.draw(rect, into: &canvas)
 
+        material.setCustomUniformValue(rect.position, forUniform: "ViewOrigin")
+        material.setCustomUniformValue(rect.size, forUniform: "ViewSize")
+        material.setCustomUniformValue(self.opacity, forUniform: "opacity")
+        
         canvas.insert(
             DrawCommand(
                 resource: .geometry(.rectOriginTopLeft),
@@ -63,8 +67,8 @@ open class ImageView: View {
                     )
                 ],
                 material: material,
-                vsh: .standard,
-                fsh: .textureSample,
+                vsh: .userInterface,
+                fsh: .userInterfaceClipRectTextureSample,
                 flags: .userInterface
             )
         )

Sources/GateEngine/UI/Label.swift

@@ -169,13 +169,18 @@ public final class Label: View {
         }
         yOffset = (rect.height / 2) - ((size.height / 2) * self.interfaceScale)
 
+        var material = Material(texture: texture, sampleFilter: sampleFilter, tintColor: textColor)
+        material.setCustomUniformValue(rect.position, forUniform: "ViewOrigin")
+        material.setCustomUniformValue(rect.size, forUniform: "ViewSize")
+        material.setCustomUniformValue(self.opacity, forUniform: "opacity")
+        
         canvas.insert(
             DrawCommand(
                 resource: .geometry(geometry),
                 transforms: [Transform3(position: Position3(rect.x + xOffset, rect.y + yOffset, 0))],
-                material: Material(texture: texture, sampleFilter: sampleFilter, tintColor: textColor),
-                vsh: .standard,
-                fsh: .textureSampleTintColor,
+                material: material,
+                vsh: .userInterface,
+                fsh: .userInterfaceClipRectTextureTemplateTintColor,
                 flags: .userInterface
             )
         )