Add a DOM renderer to the web platform

[EiTaNBaRiBoA]

Describe the project you are working on

Hi, I know this is a big proposal, but maybe for the distant future and as an innovation for Godot's web export.
The project I am working on involves exploring ways to improve Godot's web export capabilities beyond the current WebGL-based approach. The goal is to create web experiences that are highly performant, SEO friendly, and have minimal file sizes, resembling native HTML/CSS/JavaScript websites. This proposal focuses on a new, optional renderer specifically designed for this purpose. (Native Web Renderer)

Describe the problem or limitation you are having in your project

Godot's current web export relies heavily on WebGL and it has significant drawbacks for web applications:

The content within the canvas is not easily indexable, so SEO can't rank well in search results.
It uses higher CPU/GPU usage and battery drain, especially on lower-powered devices.
Native HTML elements have better built-in accessibility support like text readers and etc.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

The proposed "Native Web Renderer" is a new rendering backend for Godot that, when used for web exports, directly translates specific Godot nodes and their properties into native HTML elements and CSS styles with DOM (Document Object Model) structure. Instead of rendering to a WebGL canvas.

This will allow:

• Allow SEO.
• Reducing File Size
• Better Accessibility

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

The Native Web Renderer would operate as an alternative rendering backend, selectable during the web export process.

• Node Mapping: A core system would define a mapping between a subset of Godot's 2D nodes (e.g., Label, Button, TextureRect, HBoxContainer, VBoxContainer, Panel, LineEdit) and their corresponding HTML elements
  (for example <p>, <button>, <img>, <div style="display: flex; flex-direction: row;">, <div style="display: flex; flex-direction: column;">, <div style="background-color: ...;">, <input type="text">).

• Property Conversion: Node properties (e.g., text, color, position, size, visibility) would be translated into equivalent CSS styles and HTML attributes.

• GDScript/JavaScript Interop: A mechanism to allow GDScript code (or a subset of it) to interact with the generated HTML/CSS like JavaScript Bridge. Maybe an API for GDScript to call JavaScript functions and vice-versa.

If this enhancement will not be used often, can it be worked around with a few lines of script?

No. This enhancement requires aditional Godot's rendering pipeline for web exports, specifically bypassing WebGL and generating HTML/CSS directly.

Is there a reason why this should be core and not an add-on in the asset library?

No, it can't be an addon. It needs to hook directly into Godot's web export process.

[Calinou]

This would be a lot of work for something that will ultimately perform worse in most scenarios. DOM bookkeeping has a cost, and using WebGL avoids it entirely.

Also, this would not reduce the file size of web exports unless you build your own export template with the Compatibility rendering method disabled. (In fact, the "default" size of the web export would be increased since it would contain two renderers instead of one.)