the.bay.news

Selectable HTML on 3D surfaces in a Godot web export, drawn straight into Godot's own WebGL textures (Chrome HTML-in-Canvas, MIT)

programming.dev
Selectable HTML on 3D surfaces in a Godot web export, drawn straight into Godot's own WebGL textures (Chrome HTML-in-Canvas, MIT)
Google Chrome Labs keeps an Awesome HTML-in-Canvas [https://github.com/GoogleChromeLabs/css-web-ui-demos/blob/main/html-in-canvas/awesome-html-in-canvas.md] list of demos for the API, and one of them is a Godot scene of mine. Here’s how the Godot side works. The three panels in the scene are real HTML, drawn straight into textures Godot already owns. You can select text on a tilted panel while the camera moves, Ctrl+C it, Ctrl+F finds it, right-click translate works. (It’s real DOM, so it’s also in the accessibility tree, which a canvas HUD normally isn’t.) The bit that’s useful even if you never touch this API is getting at Godot’s own WebGLTexture from GDScript: - RenderingServer.texture_get_native_handle(tex.get_rid()) gives you the GL texture id (web export = Compatibility renderer) - inside JavaScriptBridge.eval, GL.textures[id] is the actual WebGLTexture (emscripten’s lookup table) - write to it from JS, then put the GL state back after (active texture, binding, unpack flags). Godot doesn’t expect anyone else touching its context Chrome changed the API this week: texElementImage2D became texElementSubImage2D, panels need a new drawable attribute, and hit testing moved to updateElementGeometry. For a Godot texture the new version fits better actually, Godot already allocated the storage so it’s just a sub-image write. I kept the old path behind feature detection since stable Chrome is still mid-transition. Caveats up front: Chromium only (origin trial on the demo, or the CanvasDrawElement flag). Mozilla and WebKit haven’t taken a position yet, both requests are still open. So it’s an experiment, not something to ship a game on. Source (MIT): https://github.com/Vav-Labs/quest-signal [https://github.com/Vav-Labs/quest-signal] Write-up + live demo: https://vav-labs.com/case-studies/quest-signal/ [https://vav-labs.com/case-studies/quest-signal/]

0 comments

Sign in to join the discussion — your thebay.events account works here.

No comments yet.