Godot Version
Godot 4 (web export)
Question
Hi everyone,
I’m currently working with Godot 4 (Web export) and I’m trying to integrate a Godot-rendered scene on top of an HTML <video> element (video rendered by the browser, not inside Godot).
What I need
-
A video element rendered in HTML
-
A Godot Web canvas rendered above it
-
The Godot canvas should be transparent, except for the rendered objects (3D content and UI)
-
The user must see video and Godot content at the same time
What I’ve tried
-
Removing
WorldEnvironment -
Setting clear color alpha to
0 -
Making the canvas background transparent via CSS
-
Exporting with the Web preset and editing the generated HTML
-
Using transparent materials and checking alpha blending
-
Running with and without
WorldEnvironment
In all cases, the canvas is still composited as opaque, and the video underneath is not visible once the Godot engine starts.
From what I can tell, Godot Web exports render everything into a single WebGL canvas, and the final framebuffer seems to be presented as opaque to the DOM, even if alpha is used internally.
Because of this, HTML content cannot be layered between internal Godot render passes (clear color / world / objects / UI).
My question
Is there any supported or experimental way in Godot 4 Web to:
-
Export a 3D scene with real alpha transparency to the browser, or
-
Allow the WebGL canvas to expose alpha so HTML content (like a video) can be visible behind it?
Or is this currently not supported by design in Godot Web exports?
Thanks a lot for your time and for any insight you can share.