How To Draw 2D Gizmo Overlay In 3D Editor Viewport

Godot Version

v4.2.stable.mono.official [46dc27791]


Hello! I wanted to ask if the following is possible in Godot and if so how i would accomplish this:

I want to create an 2D overlay for the editor 3D window that draws a set of lines based on the size of the editor window. Basically a rule of thirds gizmo that helps for 3D scene composition and cinematic shots.

I have seen that there is a way to draw custom gizmos for 2D Nodes, but i would need it to operate on a 3d scene.

You could create a small plugin that adds a Node2D to the 3D viewport and draws the lines in its CanvasItem._draw() function or using the CanvasItem.draw signal. You can read about how to make plugins here Making plugins — Godot Engine (stable) documentation in English


extends EditorPlugin

var overlay:Node2D
var overlay_toggle_button:CheckButton

func _enter_tree() -> void:
	# A button to toggle on and off the overlay
	overlay_toggle_button =
	overlay_toggle_button.text = "Show overlay"
	overlay_toggle_button.button_pressed = true
		overlay.visible = toggled
	add_control_to_container(EditorPlugin.CONTAINER_SPATIAL_EDITOR_MENU, overlay_toggle_button)

	var viewport = EditorInterface.get_editor_viewport_3d(0)
	overlay =
		# Draw stuff here
		overlay.draw_line(Vector2.ZERO, viewport.size, Color.RED, 10, true)

func _exit_tree() -> void:
	# Clean up nodes
	if is_instance_valid(overlay_toggle_button):
		remove_control_from_container(EditorPlugin.CONTAINER_SPATIAL_EDITOR_MENU, overlay_toggle_button)
	if is_instance_valid(overlay):
1 Like

That’s exactly what i was looking for! Very nice solution. Thanks alot!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.