Configuring StreamUP Pattern Tiler
by Andi
Version: 0.0.1
A shader that tiles an animated pattern across a Colour Source. Built for the canvas behind Starting Soon, BRB, and Ending screens, but it works anywhere you want a moving background that isn't a video file.
Each cell can be a dot, ring, square, diamond, plus, polygon, star, line, an OBS source, or your own PNG. Layer two shapes together, jitter the hue, scroll the grid, drift the cells, pulse them in and out, the lot. All slider-driven. No code.
Requires the obs-shaderfilter plugin (v2.6.0 or newer).
Installation
- Download
streamup-pattern-tiler.shader - Drop it into your obs-shaderfilter shaders folder (or anywhere you like, you point at it manually)
- In OBS, add a Colour Source to a scene
- Right-click the source, 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
If you've never used shader filters before, a Colour Source is the easiest canvas. The shader paints over it from edge to edge.
How It's Built
The shader divides the canvas into a grid of square cells. Density controls how many cells across, Size controls how much of each cell the shape fills. Everything else is a modifier on top of that grid.
Two shapes can render in the same pattern, picked per cell by the Mix With slider. Useful for breaking up the rhythm without making a second shader pass.
Information
Three info widgets at the top. Just usage notes and version. Nothing to set.
Background
What sits behind the shapes.
- Paint Background fills the canvas with the Background Colour. Turn it off if you want the shapes drawn on top of the source instead (useful for layering this over a video or another shader)
- Background Colour the fill colour. Defaults to dark grey (#181818)
- Vignette fades the shapes near the edges. Pulls focus to the centre. 0 is off, 1 is heavy
Shape
The first shape that draws in each cell.
| Option | What it is |
|---|---|
| Dot | Solid filled circle |
| Ring | Outlined circle |
| Square | Solid filled square |
| Diamond | Square rotated 45 |
| Plus | Cross / plus sign |
| Polygon | Configurable sides (triangle through 12-sided) |
| Star | 5-pointed star |
| OBS Source | Tiles whatever OBS source you select |
| Horizontal Line | Continuous horizontal stripes |
| Vertical Line | Continuous vertical stripes |
| Custom Image | Tiles a PNG you point at |
Mix With
Same dropdown again. Each cell rolls a dice (controlled by Shape Mix in the Variation section) to decide which shape to draw. Set Shape Mix to 0 and Mix With does nothing. Set it to 1 and you only see Mix With. Anywhere in between gives you a blend.
OBS Source
Only matters if Shape or Mix With is set to OBS Source. Pick any source from the dropdown. The shader samples its alpha and tiles it across the grid.
Custom Image (PNG)
Only matters if Shape or Mix With is set to Custom Image. File picker. Point at any PNG with transparency.
Note: the OBS Source and Custom Image controls always show in the panel because of how obs-shaderfilter handles these widgets. Just ignore them if you're not using either shape.
Shape Style
How the shapes look.
- Shape Colour the fill colour. Defaults to brand gold (#D4A843)
- Density how many cells across the canvas. 5 (huge cells) up to 200 (tiny cells). Default is 50
- Size how much of each cell the shape fills. 0.5 fills the cell edge to edge. Default is 0.08 (small)
- Edge Softness blurs the shape edges. 0 keeps them crisp. For Custom Image and OBS Source, this becomes the blur radius
Shape Geometry
Rotation and the polygon side count.
- Rotation (deg) rotates every shape by a fixed amount. 45 turns Squares into Diamonds, for example
- Auto-Rotate (deg/sec) spins the shapes continuously. Negative values spin the other way
- Polygon Sides only matters if Shape or Mix With is Polygon. 3 = triangle, 6 = hexagon, 8 = octagon, up to 12
Variation
Per-cell randomisation. This is where the pattern stops looking like a regular grid.
- Visibility chance each cell shows its shape. 1 = every cell, 0.5 = about half empty, 0 = none. Binary on/off, not a fade
- Twinkle Amount fades each cell in and out on its own phase. 0 = static, 1 = full fade off and back. Pair with Twinkle Speed
- Twinkle Speed how fast the twinkle cycles
- Size Variation randomises each shape's size around the base. At 1, sizes range from 50% to 150% of the Size setting
- Rotation Variation (deg) randomises each shape's rotation on top of the base. 360 = any angle
- Shape Mix chance each cell uses the Mix With shape instead of the primary. 0 = no mix, 1 = all Mix With
- Hue Variation randomises each cell's hue around the Shape Colour. 0.05 to 0.15 keeps it on-brand whilst adding life. Crank it for full rainbow
Motion
The whole-grid and per-cell movement controls.
Scroll
Moves the entire grid in one direction.
- Scroll Speed how fast the grid scrolls. 0 = static, 10 = fast
- Scroll Angle (deg) direction it scrolls. 0 = right, 90 = up, 180 = left, 270 = down
Drift
Per-cell wobble. Each cell wanders around its centre on its own phase.
- Drift Amount how far each cell wobbles. Small = subtle, big = chaos
- Drift Speed how fast the wobble cycles
Note: Drift breaks the continuous lines. Leave it at 0 if you're using Horizontal or Vertical Line.
Pulse
Per-cell breathing. Each shape pulses in and out from its base size.
- Pulse Amount how much each shape grows and shrinks
- Pulse Speed how fast the pulse cycles
Recipes
A few starting points to copy.
Subtle Brand Background
- Shape: Dot
- Density: 80
- Size: 0.04
- Shape Colour: brand gold (#D4A843)
- Background: dark grey (#181818)
- Twinkle Amount: 0.3, Twinkle Speed: 0.5
- Vignette: 0.3
Ambient. Doesn't fight the foreground.
Animated Halftone
- Shape: Dot
- Density: 100
- Size: 0.15
- Size Variation: 0.4
- Hue Variation: 0.05
Looks like a printed halftone, with just enough variation to feel alive.
Drifting Stars
- Shape: Star
- Density: 30
- Size: 0.1
- Drift Amount: 0.1
- Drift Speed: 0.5
- Twinkle Amount: 0.6
- Hue Variation: 0.1
Slow, dreamy, off-grid. Good for ending screens.
Logo Tile
- Shape: Custom Image
- Custom Image: your logo PNG
- Density: 20
- Size: 0.4
- Visibility: 0.5
- Hue Variation: 0.1
Sparse logo wallpaper. Bump Density up for tighter coverage.
Scrolling Stripes
- Shape: Horizontal Line
- Density: 30
- Size: 0.4
- Drift Amount: 0
- Scroll Speed: 1
- Scroll Angle: 90
Conveyor-belt look. Keep Drift at 0 or the lines break up.
Performance Notes
- Drift triggers a 3x3 cell lookup per pixel. Anything else stays on the cheap single-cell path. If performance matters, leave Drift Amount at 0
- Density doesn't change cost much. The shader runs per pixel, not per cell, so a Density of 200 is the same speed as 5
- Custom Image and OBS Source shapes do up to 4 texture samples per cell when Edge Softness is on. 1 sample when it's off
Good to Know
- Cells stay square no matter the canvas aspect. A 1920x1080 canvas at Density 50 gives you 50 cells across and ~28 down
- The shader composites alpha properly, so it works as a transparent overlay if Paint Background is off and Shape Colour alpha is below 1
- Anti-aliasing is automatic and based on cell size. Edge Softness adds extra softness on top
- For Custom Image and OBS Source, transparency is respected. The shape is whatever the source's alpha says it is
- File watching is on by default in obs-shaderfilter, so editing the .shader file in a text editor updates OBS live. Useful if you want to tweak the defaults