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

[moep]

Godot Version

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

Question

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.

[mrcdk]

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

Example:

@tool
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 = CheckButton.new()
	overlay_toggle_button.text = "Show overlay"
	overlay_toggle_button.button_pressed = true
	overlay_toggle_button.toggled.connect(func(toggled:bool):
		overlay.visible = toggled
	)
	add_control_to_container(EditorPlugin.CONTAINER_SPATIAL_EDITOR_MENU, overlay_toggle_button)

	var viewport = EditorInterface.get_editor_viewport_3d(0)
	overlay = Node2D.new()
	overlay.draw.connect(func():
		# Draw stuff here
		overlay.draw_line(Vector2.ZERO, viewport.size, Color.RED, 10, true)
	)
	viewport.add_child(overlay)


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)
		overlay_toggle_button.queue_free()
	if is_instance_valid(overlay):
		overlay.queue_free()

[moep]

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