Shape Reference

Common Properties

Every shape type shares these properties. They are controlled per-layer in the editor and stored in the ShapeData struct (144 bytes, GPU-aligned).

Property	Range	Description
color	RGBA float4	Fill color with alpha. Alpha of 0 hides the fill but glow/outline can still render.
glowIntensity	0 – 10	Brightness of the outer glow emanating from the shape boundary.
glowSize	0 – 1	Radius of the glow falloff. Larger values produce a wider, softer glow.
feather	0 – 0.1	Edge softness. 0 = hard pixel-perfect edges (bypasses AA), higher = softer.
outlineColor	RGBA float4	True outline color. When alpha > 0, renders an outward border ring around the fill.
outlineThickness	0 – 0.1	Width of the true outline band (independent from hollow thickness).
hollowThickness	0 – 0.5	0 = filled shape. >0 = hollow/donut mode showing only a ring of this width.
position	float2	Center position in normalized UV space (0,0 = screen center).
rotation	0 – 360°	Rotation in degrees.
scale	float2	Scale in X and Y. Non-uniform scaling stretches the shape.

---

Circle

The simplest SDF primitive. A perfect circle defined by a single radius. Use with hollow mode for rings, or as a boolean base for complex cutout patterns.

Parameter	Description
No type-specific parameters. Circle size is controlled entirely by scale.

---

Ring

A circle with a fixed annular width. Unlike a hollow Circle, Ring calculates its SDF as a true torus cross-section, producing cleaner glow behavior on both the inner and outer edges.

Parameter	Range	Description
thickness	0.001 – 0.5	Width of the ring band. Small values create thin halos; large values create wide bands.

---

Polygon

A regular polygon with 3 to 8 sides and optional corner rounding. Covers the full range from triangles through octagons. With 4 sides this becomes a square/diamond; with high corner radius on 4 sides, a rounded rectangle.

Parameter	Range	Description
sides	3 – 8 (integer)	Number of polygon sides. 3 = triangle, 4 = square/diamond, 5 = pentagon, 6 = hexagon, etc.
cornerRadius	0 – 0.1	Rounds the polygon corners. Higher values produce increasingly rounded shapes.

---

LineBurst

Creates multiple lines or rays from the center. Two distribution modes offer very different looks from the same shape type. This is the workhorse shape for crosshair designs.

Parameter	Range	Description
mode	Through Center / Radial	Through Center: Lines pass through center (180° distribution). Radial: Rays extend outward from center (360° distribution).
count	1–12 (TC) / 1–120 (Radial)	Number of lines or rays.
thickness	0.001 – 0.1	Width of each line/ray.
startEndType	Flat / Rounded / Tapered	Shape of the line start cap.
endEndType	Flat / Rounded / Tapered	Shape of the line end cap. Only available for Through Center mode with count = 1.
taperAmount	0 – 1	For tapered ends: 0 = full sharp point, 1 = no taper (flat).

Through Center Mode

Lines pass through the center point and extend equally in both directions. With count = 1 you get a single line; count = 2 gives a classic crosshair (+). Lines are distributed evenly over 180°.

Radial Mode

Rays emanate outward from the center like a starburst. They are distributed over 360° and only extend in one direction (outward). With a high count (60–120) and thin lines, this creates sunburst or radar-sweep patterns.

---

Chevron

A V-shaped or arrow-shaped indicator. Useful for directional markers, threat indicators, or decorative accents around other shapes.

Parameter	Range	Description
angle	10° – 170°	Opening angle of the V shape. Small angles produce tight arrows; large angles produce wide shallow Vs.

---

Stadia

Ranging marks with major and minor tick graduations, like rifle scope reticles. Consists of a main horizontal line with configurable tick marks at regular intervals.

Parameter	Range	Description
lineThickness	0.0001 – 0.05	Main line thickness. Use 0.0001 for approximately 1-pixel lines.
majorHeight	1.5 – 10.0	Major mark height as a multiplier of the base height.
minorHeightRatio	0.3 – 0.8	Minor mark height as a ratio of major mark height.
majorThickness	0.5 – 2.0	Major mark thickness multiplier relative to the main line thickness.
majorCount	1 – 20	Number of major marks per side of center.
spacing	0.01 – 0.2	Distance between major marks.
minorCount	0 – 6	Number of minor ticks between each pair of major marks.
markDirection	Up / Down / Both	Which direction marks extend from the main line.
capStyle	None / Up / Down / Center	End cap style at the outermost mark positions.
symmetryMode	Symmetric / PositiveOnly / NegativeOnly	Whether marks appear on both sides, right only, or left only.

---

ChamferBox

A box with beveled corners, producing an octagonal silhouette. Uses an exact SDF for correct glow behavior — the glow follows the chamfered boundary naturally, unlike a boolean group approach.

Parameter	Range	Description
chamferSize	0 – 0.4	Size of the corner bevel. 0 = sharp box corners. Larger values produce more beveled/octagonal shapes.

---

Custom Shape

Freeform shapes defined by cubic Bézier paths. Draw any shape you can imagine — crescents, stars, weapon silhouettes, logos — with full SDF quality including glow, outline, feathering, and boolean operations.

Drawing Workflow

1. Select Custom as the shape type and click Edit Shape
2. Drawing mode: Click to place corner control points. Click the first point to close the path.
3. Editing mode: Drag points to reposition. Drag Bézier handles to curve segments. Press T to toggle a point between Corner, Smooth, and Symmetric types. Press Delete to remove the selected point.
4. Press ESC to exit editing

Control Point Types

Type	Behavior
Corner	Sharp vertex. Handles can be moved independently for asymmetric curves meeting at a sharp angle.
Smooth	Handles are constrained to opposite directions (tangent continuity) but can have different lengths.
Symmetric	Handles are mirrored in both direction and length. Produces the smoothest curves.

SDF Generation

Custom shapes use a compute shader pipeline to generate an exact SDF:

The ExactSDF kernel evaluates per-texel distance to the nearest cubic Bézier using a coarse search (16 segments per curve) followed by Newton-Raphson refinement (4 iterations). The result includes signed distance, second-nearest distance for concave glow, and analytical curvature for glow tapering at sharp tips.

---

Gap Modes

Gaps carve patterns into shapes to create split crosshairs, grid overlays, and masked regions. Five modes are available on every shape type.

Mode	Description
None	No gap applied.
Radial	Angular slices from center, like pie cuts. Creates split crosshair effects when applied to rings or circles.
Grid	Rectangular grid overlay. Gap count and thickness control grid density.
Lines	Parallel line gaps. Useful for venetian-blind or scan-line effects.
CenterCutout	A centered shape (circle or 3–8 sided polygon) is subtracted from the middle. Creates donut or windowed patterns.

Gap Options

• Reveal Mask — Inverts the gap behavior: instead of subtracting, only the gap areas are visible. Creates stencil/reveal effects.
• Gap as Geometry — Applies the gap as an SDF boolean operation instead of an alpha mask. This means glow correctly appears on gap edges as well as the outer boundary. Cut-away corners remain glow-free, matching boolean group behavior.

---

What's Next

• Editor Guide — Using the visual editor to build reticles with these shapes
• Animations — Animating shape properties at runtime
• Architecture — How ShapeData maps to the GPU struct