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

a month ago by Stratos to c/godot

Google Chrome Labs keeps an Awesome HTML-in-Canvas 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 Write-up + live demo: https://vav-labs.com/case-studies/quest-signal/

godot
godot

@programming.dev

login for more options
7972
1192
567

Welcome to the programming.dev Godot community!

This is a place where you can discuss about anything relating to the Godot game engine. Feel free to ask questions, post tutorials, show off your godot game, etc.

Make sure to follow the Godot CoC while chatting

We have a matrix room that can be used for chatting with other members of the community here

Links

Other Communities

Rules

  • Posts need to be in english
  • Posts with explicit content must be tagged with nsfw
  • We do not condone harassment inside the community as well as trolling or equivalent behaviour
  • Do not post illegal materials or post things encouraging actions such as pirating games

We have a four strike system in this community where you get warned the first time you break a rule, then given a week ban, then given a year ban, then a permanent ban. Certain actions may bypass this and go straight to permanent ban if severe enough and done with malicious intent

Wormhole

!roguelikedev@programming.dev

Credits

  • The icon is a modified version of the official godot engine logo (changing the colors to a gradient and black background)
  • The banner is from Godot Design

go to feed...