Skip to content

Instantly share code, notes, and snippets.

@Martin-Pitt
Created October 21, 2024 11:12
Show Gist options
  • Save Martin-Pitt/cce4adc59df477c9163ddd8b9cd19479 to your computer and use it in GitHub Desktop.
Save Martin-Pitt/cce4adc59df477c9163ddd8b9cd19479 to your computer and use it in GitHub Desktop.
Technical Meshes Commission

A set of meshes and variants for technical use. These are very low poly but all with same LOD levels to make sure they always appear correctly.

These are 'technical' meshes in the sense they are used for scripting user interfaces. So they are very low poly but have certain useful exact shapes and UV mapping.

A lot of my inspiration was drawn from looking at Game UI Database — I'd love to be able to recreate a lot of these UIs and was wondering what it would take to do that in SL.

Layered Icons

A mesh for displaying icons.

Contains these layers in order from front to back:

  • Superscript Icon — for showing a small sub-icon in the top right
  • Subscript Icon — for showing a small sub-icon in bottom left
  • Digits — Three digit spaces to show numbers for a quantity in bottom right
  • Icon — the main thing
  • Ripple — a layer to show an outward ink ripple effect like Google's Material Design
  • Shadow — to well, show a shadow of the icon or other usecases like selection highlighting. Slightly larger than icon.

Faces in order: Icon, Digits (right-to-left), Super, Sub, Ripple Shadow; For a total of 8 faces.

Quick sheets - page 62

Image Grids

The grids are rectangles. if a rectangle were 100 x 100, the row/col gap between them should be 20 wide? I think that's a nice gap to have.

Quick sheets - page 63

These are the most annoying meshes because there's a lot of variants possible to handle different aspect ratios. I'd usually only need 1:1 and would stretch the entire mesh, however this affects the gap between each rectangle to be stretched as well.

Grid-type

Variants based on aspect ratios and different grid rows/columns. Faces go from top left to bottom right, normal reading order. Aspect ratios: 1:1, 4:3, 16:9, 3:2 Row/cols: 4x2, 3x2, 2x2, 2x4, 2x3

Also alternate versions without a gap, but only need 1:1 aspect ratio.

Row-type

(which can be reused as a column) Same aspect ratio 1:1, will stretch or squish as needed to express different aspect ratios. Variants based on amount of images: 8x1, 6x1, 4x1, 2x1

Also alternative without a gap between.

Patches

Patches are special meshes based on a UI technique called 9-slice or 9-patch.

By adapting this technique into a way that can be used in SL can be used with texture scaling to prevent stretching of the image, allowing one to build shapes such as rounded rectangles that can be stretched to any size while maintaining rounded corners that are consistent.

There are three main variants:

  • Filled patch — 8 faces with the horizontal/vertical tiles having an extra triangle to fill the center
  • Hollow patch — 8 squares placed in a ring
  • Pill patch — 5-6 rectangles placed to allow creating pill shapes. I wasn't sure how I would pull this off so I need two versions of this, one with a center and another without a center

Quick sheets - page 64 Quick sheets - page 65 Quick sheets - page 66

Number Display

Digits placed with a comma separator for use in displaying numbers. Two variants, one for showing thousands cleanly and another for supporting larger numbers that can be stacked horizontally.

Faces from right to left.

The sketch shows a gap between digits but I think they should be lined up right next to eachother or only have a very tiny gap.

Quick sheets - page 69

Donut Progress

A circular donut which can be used to show a donut-shaped progress bar pretty much.

It should be ≥3 layers thick, so that it can support showing normal progress, recent changes and a background at least. Remember how in games when you take damage or heal it shows a small highlighted section temporarily?

Number Counter w/ Donut Progress

Combination of a number display with a donut progress.

Donut should be 3 layers. Variants should have 2, 3 or 4 digits. Scaled to fit within / slightly overlapping the donut. Digits infront of donut.

Quick sheets - page 67

Progress Bar

Speaking of progress, the classic progress bar.

Generally 4 main faces: Bar (2x at least), Background, Overlay.

Not sure what to do with 4 other faces, maybe use them to duplicate the overlay 4x times.

Bar/Background are same sized rectangles, only the overlay layer extends a bit out.

Quick sheets - page 68

Gapped Progress Bar

Same as progress bar but with gaps, like in games. Variants would be based on how many gaps. I've no idea how many variants, 1–6 gaps? Maybe more?

Note that the UV mapping skips the gaps, so the texture continues onto the next patch immediately. This is how it works in most games and gamers prefer this.

Quick sheets - page 70

Dual Number Counter

Basically a magazine counter similar to the number counters. Major and minor digits. Also a layer for a divider in the back between the numbers.

Possible variant(s) might be having a vertically stacked version or with minor aligned at top instead of bottom.

Not sure what to do with 2 leftover faces. Was thinking of a tiny progress bar below the major digits perhaps that could be used for showing reload progress? idk.

Quick sheets - page 71

Faces from right to left.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment