Today, we are thrilled to share a brand-new, cutting-edge capability inside echo3D: HTML-in-Canvas integration.
By bringing standard HTML markup directly onto spatial assets, you can now anchor rich, interactive web elements — like formatted text, images, media embeds, and clickable hyperlinks — to specific locations on your 3D models.
Whether you’re building digital twins, spatial e-commerce showcases, or interactive training environments, this feature opens up a whole new world of contextual UI possibilities without forcing you to build complex 3D text nodes from scratch.
⚠️ Note on Experimental Status:
The HTML-in-Canvas capability is currently an experimental feature in Google Chrome. It is available in our developer environment.
What is HTML-in-Canvas?
Backed by the Google Chrome team, HTML-in-Canvas is a modern Web API that allows the browser to render DOM elements directly into 2D canvas spaces or WebGL/WebGPU textures — all while preserving full user interactivity.
By integrating this API into echo3D, spatial models (MODEL_HOLOGRAM types like GLB, GLTF, OBJ, FBX) can now act as spatial anchors for dynamic, web-native content.
Step-by-Step: How to Get Started
Step 1: Enable the Chrome Flag
Because this relies on an emerging Web API, you’ll first need to enable the flag in Google Chrome:
Open Chrome and navigate to:
chrome://flags/#canvasSearch for HTML-in-Canvas.
Toggle the setting to Enabled and relaunch your browser.
Once enabled, the feature will automatically activate in your echo3D console session!
Step 2: Place Your HTML Element in the Inspector
1.Open Asset Inspector: Navigate to your scene and double-click any 3D asset card to enter the Inspector view (Inspect Asset Dialog).
2.Add Element: In the top asset toolbar, click Add HTML Element.
3.Anchor Content: Click anywhere on your 3D model surface to select the exact spatial coordinates where your overlay should live.
4.Configure & Save: Use the built-in rich text and code editor to format your card content, select a container scale, and click Save.
Formatting & Customization Options
The HTML Element Dialog gives you full CRUD (Create, Read, Update, Delete) control over your spatial markup.
Responsive Sizing Rules
To keep your UI crisp and readable across different screen resolutions and viewing distances in 3D space, you can select from three standard container scale classifications:
Small (S): Great for subtle pins, asset tags, unit IDs, and simple tooltips.
Medium (M): Default size. Perfect for descriptions, external links, and small inline imagery.
Large (L): Ideal for complex content, custom HTML/CSS code blocks, and embedded media.
Need to reset or tweak your design? You can click Clear to wipe unsaved edits, Cancel to discard the current session changes, or Delete to permanently unbind the overlay from your model.
Try It Out Today!
Combining spatial 3D assets with the flexibility of the web makes building rich, interactive experiences faster and more intuitive than ever.
Head over to echo3d.com to test it out for free today, and let us know what you build!
🌐 Useful Links & Resources
Google Chrome Trial Details: developer.chrome.com/blog/html-in-canvas-origin-trial
Github Repository: github.com/WICG/html-in-canvas
echo3D is a 3D digital asset management (DAM) platform for teams to store, secure, optimize, and share 3D models and scans across their organization and beyond. Talk to us today.
Top comments (0)