Add HTML-in-Canvas support with texElement2D API

[mvaligursky]

Add HTML-in-Canvas support with texElement2D API

This PR implements support for the HTML-in-Canvas proposal by adding texElement2D functionality to the PlayCanvas engine.

This PR is set to Draft mode, it's merge is conditional on the proposed feature being approved / supported by the browsers.

Live example: https://engine-r6jsc97gk-playcanvas.vercel.app/#/misc/html-texture
(check message in Console to confirm new feature vs fallback being used)

What's Changed

Core Engine Changes

• Extended GraphicsDevice: Added _isHTMLElementInterface() method to detect HTML elements as valid texture sources
• Enhanced WebGL Graphics Device: Added feature detection for texElement2D API support via supportsTexElement2D property
• Modified WebGL Texture Upload: Implemented HTML element rendering using texElement2D when available, with graceful fallback to existing texture upload methods
• Updated Texture Class: Extended setSource() method to accept HTML elements with proper dimension handling via getBoundingClientRect()

New Example

• HTML Texture Example: Created html-texture.example.mjs demonstrating:
  • HTML content rendered directly as WebGL texture using texElement2D
  • Animated HTML elements with CSS animations
  • Graceful fallback to canvas-based rendering when texElement2D is not supported
  • Proper error handling and feature detection

Technical Details

HTML-in-Canvas Requirements

• HTML elements must be direct children of the canvas element
• Canvas requires layoutsubtree attribute for feature enablement
• Experimental API requiring browser flags in current implementations

Fallback Strategy

When texElement2D is not supported or fails, the implementation automatically falls back to:

• Canvas-based texture generation that visually mimics the HTML content
• Maintains functionality across all browsers
• Clear console logging for debugging

Browser Support

• Experimental: Requires Chrome Canary with --enable-experimental-web-platform-features
• Future: Will work in browsers that implement the HTML-in-Canvas proposal
• Fallback: Works in all browsers via canvas rendering

Files Modified

• src/platform/graphics/graphics-device.js
• src/platform/graphics/webgl/webgl-graphics-device.js
• src/platform/graphics/webgl/webgl-texture.js
• src/platform/graphics/texture.js
• examples/src/examples/misc/html-texture.example.mjs (new)

Testing

• Example demonstrates spinning cube with HTML texture
• Feature detection works correctly
• Fallback rendering maintains visual consistency
• No breaking changes to existing texture functionality

This implementation provides a foundation for future HTML-in-Canvas adoption while maintaining backward compatibility.

Screen.Recording.2025-08-11.at.11.37.05.mov