Any shape.
Any style.
A vector graphics system for Unity UI and 3D, sharp at any scale. Capabilities include editable geometry, boolean shapes, layered effects, gradients, textures and animated control states. Shape providers and layers form reusable constructors. Custom geometry and effects extend the same workflow and share LightSide infrastructure with the other products.
UI + 3D · Editable geometry · Layer constructors · Common LightSide systems
Editable graphics inside Unity
Outline providers define geometry. Layer constructors define appearance. Shared state keeps the same configuration editable in the Inspector, Scene view and running application.
Parametric shapes
Radius, thickness, angles, corners and proportions remain editable. Shared shape assets and presets carry the same geometry across instances.
Sharp at any scale
Distance-field edges are evaluated during rendering. The same shape adapts to different sizes and display densities.
Composable layers
Fills, strokes, shadows, inner shadows, bevels, noise, extrusion, filters, cuts and deformation compose in one ordered stack.
Presets and control states
Nested layers, named paints and shared presets update their consumers. Hover, press, focus and selection have editable transitions.
Geometry and appearance remain editable data. Changes to outlines, layers or paints update the existing component. Shared assets propagate changes to their instances.
A graphics constructor inside Unity
Built-in geometry and effects use the same workflow as custom outline providers and layers. Shared presets, state and property editing connect the features throughout the product.
Analytic primitives and editable paths on one Canvas
Editable geometry
18 primitives, Bézier paths, SVG paths and traced sprites. Composite shapes combine outlines through union, subtraction, intersection and morphing.
A layer stack building up: shadow, fill, stroke, inner shadow
Layered effects
Fills, strokes, shadows, bevels, noise and extrusion form an ordered stack. Groups, filters, cuts and deformation shape the final appearance.
One ramp switching between sRGB, linear and Oklab interpolation
Gradients without a stop limit
Color and alpha share one list. Smooth, linear, perceptual and stepped interpolation use the same gradient editor as UniText.
A Distance-projected ramp fading inward from the outline
Effects that follow the outline
Gradients and geometric patterns follow the shape. Edge fades, inner glow, neon rings and surface patterns stay editable.
Editing a Bézier contour in the Scene view with G / S / R
Bézier and SVG editing
Contours and handles are edited directly in Unity. SVG path data becomes an editable outline.
A sprite traced into an editable contour, then stroked
Shapes from sprites
Sprite silhouettes become editable contours, with configurable alpha threshold and simplification.
Frame Debugger: shapes and text in a single draw call
Text, shapes and animation in one draw call
UniShapes shares Core's shaders and materials with UniText and UniLottie, for both UI and world rendering.
Editing a Layer Preset asset while every shape updates live
Shared styles
Layer presets, shape libraries and named paints apply across many objects. Changes to a shared asset update its consumers.
Outline types and sources
18 analytic primitives, editable closed and open paths, and composite shapes.
Per-corner radii or one uniform radius, with a smoothing parameter that sweeps each corner from circular to squircle.
A circle inscribed in the rect's shorter axis.
An ellipse filling the rect's half-extents on both axes.
A stadium — a rectangle capped by two semicircles on the shorter axis.
An equilateral triangle fitted to the rect.
A regular five-sided polygon fitted to the rect.
A regular six-sided polygon fitted to the rect.
A regular eight-sided polygon fitted to the rect.
An adjustable star with point count, sharpness and corner rounding.
A filled sector with editable start and end angles.
A ring sector with editable angles, thickness and end caps.
An annulus whose thickness is a fraction of the radius.
A disc with a straight chord cut across it, positioned anywhere from the centre to the rim.
A parallelogram with adjustable skew.
A trapezoid with adjustable taper.
A diamond with adjustable rounding.
A cross with editable thickness and rounding.
A heart fitted to the shape bounds.
Any flattened contour — a Bézier path, an imported SVG path or a traced sprite — evaluated as an exact polygon field.
An open path with width, end caps and a variable width profile.
Outlines combined through union, subtraction, intersection, exclusion and morphing.
An analytic primitive with editable geometry parameters.
An editable Bézier path, closed or open.
A named outline from a shared shape library.
An editable contour traced from a sprite.
A composition of outlines with boolean operations and softened seams.
Appearance through layer construction
Ordered layers, nested groups and reusable presets. Every part of the design remains editable.
Paints the shape's interior with a full paint — solid, gradient or texture.
An outline of a given width, aligned anywhere from fully inside to fully outside through a −1…+1 alignment.
A soft drop shadow with independent offset, blur radius and spread.
A shadow cast inward from the outline, with its own offset and blur.
Directional highlights and shadows along the edge.
Procedural surface grain with editable paint, frequency and contrast.
Layered silhouette slices with editable depth and paint.
Color adjustments applied to lower layers.
An editable silhouette that cuts lower layers.
Animated field deformation applied to lower layers.
A nested group with its own adjustment scope.
A reusable layer stack shared by multiple shapes.
Independent layer placement
Layers have their own enabled state and rectangle placement, including anchors, position, size, pivot and rotation.
Custom layers
ShapeLayer subclasses extend the same constructor, change tracking and rendering pipeline.
Shared LightSide paints
Colors, gradients, textures and filters use the same Core systems as UniText. Shape-specific projections add distance effects and procedural patterns.
Source
What the layer samples.
Spread
What happens past the ends of the ramp.
Fit
How a texture source is fitted into the shape's box.
Blend
How a layer combines with the layers beneath it.
Gradient interpolation
The colour space a multi-stop ramp is interpolated in.
Projection
How the source is mapped across the shape. Distance is shape-only — it exists because the outline is a field.
The Distance projection
A gradient follows the distance from the outline. Edge fades, inner glow and rings track the shape as its geometry changes.
Gradients without a key cap
One list stores color and alpha stops, with smooth, linear, Oklab or stepped interpolation. Shared gradient storage preserves batching across different ramps.
Paint and gradient editing uses the same controls as UniText.
Vector tools inside Unity
Bézier editing, SVG path import, sprite tracing and shared shape libraries.
Editable Bézier paths
Knots with in and out handles and enforced tangent modes — free, aligned, mirrored, auto and vector — plus shape-preserving segment splitting, adaptive flattening, closest-point queries, winding reversal and fit-into-rect.
SVG path import
SVG path data becomes an editable contour. The importer supports M, L, H, V, C, S, Q, T, A and Z, including elliptical arcs. It imports one subpath.
Editable sprite silhouettes
Alpha-based tracing converts a sprite boundary into a Bézier contour. Threshold and simplification control the result.
Blender-style point editing
A Scene view tool with click, shift-click and box select, modal G / S / R with axis constraints and numeric entry, Ctrl-click to split a segment, handle modes on 1–5 and coalesced undo. The same controller drives the traced-contour canvas in the inspector.
Primitive gallery
The primitive gallery contains ready-made examples of geometry and layered appearance.
Asset upgrades
Package migrations preserve authored shapes when serialized formats change.
Shared rendering, less repeated work
Editable geometry and rich effects use the same materials and GPU systems.
One draw call
Compatible layers combine in a render group. Text, shapes and Lottie can share the final batch.
Reusable rendering data
Mesh buffers and shared GPU tables reuse storage across updates. Changed data is refreshed without rebuilding unrelated assets.
Resolution independence
Analytic edges are evaluated per pixel, with antialiasing that follows scale and DPI.
Analytic and vector shapes
The 18 analytic primitives use closed-form fields. Editable paths use a bounded polygon or polyline representation.
Common shaders
Shapes, layers and paints are supplied as rendering data. The same shader serves many different appearances.
Different styles, shared materials
Per-shape parameters and common GPU tables keep colors, gradients and geometry out of individual material instances.
Geometry storage
Analytic primitives do not use polygon rows. Outline storage is bounded by device resources.
Masks, textures, blend modes and sorting can split batches. Richer layer stacks add shader work even within one draw call.
Everywhere Shader Model 3.5 Reaches
There are no native plugins to port. The shape path is C# plus one shared shader, so support is decided by the graphics backend alone.
The shared LightSide/UI shader declares #pragma target 3.5. GLES2 and WebGL 1.0 sit below that floor and are not supported. Polygon outlines travel in a plain data texture rather than a StructuredBuffer, so the vector path behaves on WebGL 2.0 and Android GLES3 exactly as it does on desktop.
UniShapes vs Vector Graphics vs Image
Geometry, appearance, authoring and rendering capabilities.
| Característica | UniShapes | Unity Vector Graphics | Stock uGUI Image |
|---|---|---|---|
| Rendering Model | |||
| Arbitrary Vector Outline as an Exact Signed Distance Field | Per-pixel, winding-number polygon SDF | Tessellated to a mesh1 | Sampled from a sprite |
| Resolution Independence at Any Scale or DPI | No re-tessellation, no vertex churn | Tessellation settings / retessellation1 | Fixed raster |
| Strokes, Shadows and Inner Shadows on an Imported Outline | Same layer stack a primitive gets | Strokes; custom work for soft effects1 | |
| Distance-Field Shape Features on WebGL 2.0 and Android GLES3 | Data texture, no StructuredBuffer2 | ||
| Painting | |||
| Composable Layer Stack (any count, any order) | 12 layer types, nested groups and presets | One sprite plus a colour tint | |
| Per-Layer Placement and Paint Blending | Normal / Multiply / Screen / Additive / Exclusion | ||
| Unlimited-Stop Gradients | Colour and alpha in one stop list | GradientStop array3 | |
| Perceptual (Oklab) Gradient Interpolation | Smooth / Linear / Oklab / Stepped | sRGB only3 | |
| Distance-Projected Gradients | Ramp runs inward from the outline | 4 | |
| Batching | |||
| Typical Stack Renders in One Draw Call | One CanvasRenderer, one sub-mesh | Depends on the tessellated sprite | Batches when sprites share an atlas |
| Batches With Text and Vector Animation in the Same Draw Call | Shared material with UniText and UniLottie5 | ||
| Authoring | |||
| In-Scene Bézier Point Editing | Blender-style G / S / R, box select, Ctrl-split, handle modes 1–5 | ||
| SVG Path Import | One `d` attribute, first sub-path6 | SVG document import6 | |
| Sprite Silhouette Tracing in the Editor | Editable contour from sprite alpha7 | ||
| Automatic Package Asset Migrations | Automatic asset migrations | ||
| Geometry and scene support | |||
| Holes and Self-Intersecting Contours | Composite subtraction and cut layers; one contour per vector path8 | Full path fill rules | Sprite alpha |
| Outline Complexity Budget | 64 vertices per polygon outline9 | Bounded only by the mesh | Bounded only by the texture |
| World-Space and Non-Canvas Rendering | UniShapeWorld, shared world batching | Canvas only | |
- 1.Unity Vector Graphics tessellates paths into meshes through its importer or runtime API. Tessellation settings determine geometric detail. It supports strokes and fills; the package does not provide UniShapes-style live distance-field effect layers.
- 2.Polygon outlines travel in a plain RGBAFloat data texture rather than a StructuredBuffer, so the vector path needs only Shader Model 3.5 — the same floor as the rest of the shader. GLES2 and WebGL 1.0 are not supported.
- 3.UniShapes gradients combine color and alpha in one stop list, with sRGB, linear-light, Oklab and stepped interpolation. Unity Vector Graphics also supports an array of gradient stops; its GradientFill supports linear and radial fills.
- 4.A distance-projected ramp runs inward from the outline itself, so it needs the signed distance at every pixel. A system that renders a shape as geometry has no such value to project a ramp along.
- 5.UniShape, UniText and UniLottie render through the same shared LightSide/UI material instance, dispatched by a surface-kind word carried in the vertex stream, so shapes, text and vector animation on one Canvas collapse into a single draw call. Custom materials, sampled paint textures, blend modes, masks and ordering can split batches. A traced outline does not require its source sprite texture for rendering.
- 6.UniShapes imports the first contour of SVG path data. Unity Vector Graphics imports SVG documents, with documented exclusions including text, filter effects, per-pixel masking, interaction and SVG animation.
- 7.Sprite tracing produces an editable contour from the sprite alpha boundary. Its alpha threshold and simplification are configurable.
- 8.Vector paths contain one contour. CompositeShapeProvider combines silhouettes by union, subtraction, intersection or exclusion; CutLayer subtracts from lower appearance layers.
- 9.Each flattened polygon or polyline has a 64-vertex budget. Outline storage grows with live content and device limits. The 18 analytic primitives do not use polygon rows.
UniShapes
UniShapes supplies editable vector graphics in Canvas UI and world space. Geometry options include 18 analytic primitives, editable paths and composite outlines. Layer constructors compose appearance from paints and effects, with reusable presets and animated control states. New outline providers and layer types use the existing geometry, state and authoring workflow. Common LightSide systems supply shared infrastructure throughout.