AgentStudiosSign in ↗
← All examples

godot shaders

Morphing signed distance shapes

Draw resolution-independent shapes from 2D signed distance functions (circle, rounded box, star, heart) and morph between them over time, with fill, outline, glow and optional distance contour lines.

Recorded render of Morphing signed distance shapes

What this component contains

  • ATTRIBUTION.md
  • LICENSE
  • README.md
  • component.json
  • demo.tscn
  • inspect_shader.py
  • material.tres
  • preview.png
  • sdf_shape_morph_2d.gdshader
  • test_package.py
  • verification/native.json

How it works

Shader type
canvas_item
Parameters
fill_color (vec4 = 0.95, 0.45, 0.55, 1), outline_color (vec4 = 1, 1, 1, 1), glow_color (vec4 = 1, 0.5, 0.7, 1), background_color (vec4 = 0.1, 0.08, 0.16, 1), morph_speed (float = 0.4), shape_index (float = 2.5), animate (bool = yes), size (float = 0.3) and 3 more
Use it on
A ColorRect (or any CanvasItem) sized to the area to fill; UVs span 0 to 1 across it.
Result
A pink shape halfway between a star and a heart with a white outline, glow and distance contours.
Renderers
compatibility: compiled and rendered, forward plus: not verified, mobile: not verified
Placement
res://baltor/godot_shaders/sdf_shape_morph_2d/

Recorded checks

godot 4.7.2.stable.official.ed1daf0bf

  • contract_static
  • engine_run
  • engine_log_clean
  • shader_in_scene
  • capture_written
  • render_not_uniform
  • shader_changes_pixels

Limits to consider

The star and heart functions are approximate distances (bounded but not exact), so outlines vary slightly in width. Blending distances does not preserve exact area during a morph.