Configuring StreamUP Squircle
by Andi
Version: 1.3.0
Masks a source into a single-radius squircle. All four corners share one radius and one squircleness, so the shape stays symmetric. Optional inset to shrink the shape, border with inside / outside / centre positioning, drop shadow, and an inverse mode that punches the squircle out of the source instead of keeping it.
If you want each corner to round differently, use the Squircle per Corner shader instead.
Requires the obs-shaderfilter plugin (v2.6.0 or newer).
Installation
- Download
streamup-squircle.shader - Drop it into your obs-shaderfilter shaders folder (or anywhere you like, you point at it manually)
- In OBS, right-click the source you want to mask, Filters, add a Shader Filter under Effect Filters
- Hit Browse next to "Shader Text File" and pick the .shader file
- Done. The properties panel fills with all the controls below
Works on any source. Cameras, browsers, images, scenes, group sources.
How It's Built
The shape is a superellipse, defined by a signed distance field. Corner radius controls the curve size in pixels, squircleness controls the shape of the curve.
- n = 2 is a perfect circle / ellipse corner
- n = 3 is the Apple squircle
- n = 100+ is effectively a hard square corner with a tiny chamfer
Edge softness adds anti-aliased feathering on top of the SDF, so the edge always looks clean regardless of canvas size.
Information
Two info widgets at the top. Usage and version. Nothing to set.
Corner Controls
The shape itself.
- Corner Radius (px) how rounded the corners are. 0 is a hard rectangle, higher rounds inward up to a circle at half the smallest dimension
- Squircleness (n) 2 is circle, 3 is Apple squircle, higher moves toward a square
The shader auto-clamps Corner Radius so it never exceeds half the smaller side. You can't break the shape by pushing radius too far.
Inset
Shrinks the squircle inside the source without resizing the filter. Useful when you want padding between the source edge and the masked shape (cameras with a soft border around them, for example).
- Inset Top (px) shrinks from the top edge
- Inset Bottom (px) shrinks from the bottom edge
- Inset Left (px) shrinks from the left edge
- Inset Right (px) shrinks from the right edge
All four default to 0 (shape fills the source).
Border / Outline
Optional outline along the squircle edge. Off by default.
- Enable Border toggle
- Position where the stroke sits relative to the edge:
- Inside stroke sits inside the shape
- Outside stroke sits outside the shape (needs canvas expansion to render past the source bounds)
- Centre stroke straddles the edge, half inside and half outside
- Border Width (px) thickness
- Border Color colour and alpha
Outside borders get clipped at the source edge by default. Use the canvas-expansion inputs above the shader (Expand Left / Right / Top / Bottom) to give the border room.
Drop Shadow
Optional shadow behind the squircle. Off by default.
- Enable Drop Shadow toggle
- Offset X / Y (px) where the shadow sits. Positive X = right, positive Y = down
- Blur (px) softness
- Shadow Color colour and alpha
- Opacity overall strength
Same canvas-expansion rule as outside borders. If the shadow needs room past the source edge, expand the canvas.
Mode
- Inverse (cutout) flips the mask. The squircle becomes a transparent hole through the source instead of the only visible part. Useful for vignette-style cutouts or punching brand shapes through a backdrop
Miscellaneous Controls
- Edge Softness (px) anti-aliasing width on the squircle edge. Defaults to 3px which looks clean at most sizes. Crank it for a softer, more blended edge
Recipes
A few starting points to copy.
Round-Cornered Camera
- Corner Radius: 60
- Squircleness: 3
- Edge Softness: 3
Apple-style rounded corners on a webcam. Set and forget.
Apple-Style Card
- Corner Radius: 40
- Squircleness: 5
- Inset: 10 all sides
- Border: on, Centre, 2px, white at 30%
- Drop Shadow: on, offset (0, 8), blur 20, opacity 0.4
Reads like a UI card. Good for static info panels or guest cards.
Hard Rounded Rect
- Corner Radius: 24
- Squircleness: 2
Standard rounded rectangle. Same look as a CSS border-radius.
Camera Cutout
- Inverse: on
- Corner Radius: 80
- Squircleness: 3
- Edge Softness: 5
Punches a squircle hole through a coloured background plate. Drop the camera under the plate and the squircle becomes the window.
Glow Stroke
- Corner Radius: 60
- Border: on, Outside, 6px, brand colour
- Drop Shadow: on, offset (0, 0), blur 30, same brand colour, opacity 1.0
Outline plus shadow at the same colour makes the border look like it's glowing. Needs canvas expansion.
Performance Notes
- The shader runs per pixel, so cost scales with the canvas size. The corner-curve math is a couple of pow() calls per pixel, basically free on modern GPUs
- Border, drop shadow, and inverse all branch on uniforms, not pixels, so disabling them costs nothing
- Drop shadow does a second SDF evaluation. Cheaper than blurring a rendered copy, but not zero. Leave it off if you don't need it
Good to Know
- Anti-aliasing is automatic. Edge Softness adds extra softness on top of the built-in AA
- The shape respects the source's original rectangle even on an expanded canvas. The inset / border / shadow all measure from the source bounds, not the expanded canvas bounds, so the shape doesn't shift when you turn expansion on
- File watching is on by default in obs-shaderfilter. Edit the .shader file and OBS updates live
Changelog
v1.3.0
- Added Inset Top / Bottom / Left / Right. Shrinks the shape inside the source without resizing the filter
- Added Border toggle with Inside / Outside / Centre positioning, width and colour
- Added Drop Shadow toggle with offset, blur, colour, opacity
- Added Inverse cutout mode. Squircle becomes a hole instead of a mask
v1.2
- Anti-aliasing on the shape edge, derived from fwidth so it stays sharp at any size
v1.1
- Added tooltips on every control
v1.0
- First release. Squircle mask with corner radius, squircleness and edge softness