WebGLRenderer: Added HTMLTexture.

[mrdoob]

Description

This is just a quick test adding support for the HTML-in-Canvas proposal.

https://raw.githack.com/mrdoob/three.js/htmltexture/examples/webgl_materials_texture_html.html

(Requires passing --enable-blink-features=CanvasDrawElement to Chrome Canary versions later than 138.0.7175.0)

Here's a jsfiddle for anyone that wants to experiment with this: https://jsfiddle.net/ysw4dtbq/

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	337.4 78.67	337.73 78.76	+332 B +82 B
WebGPU	553.89 153.48	553.9 153.49	+12 B +6 B
WebGPU Nodes	553.24 153.32	553.26 153.33	+12 B +7 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	468.59 113.33	468.91 113.4	+320 B +78 B
WebGPU	628.86 170.19	628.86 170.19	+0 B +0 B
WebGPU Nodes	583.72 159.53	583.72 159.53	+0 B +0 B

[Makio64]

so weird, but also so usefull!

[mkeblx]

When I try out I don't see the inline image drawn.

When I switch to a same origin image it works.

This may be expected behavior. Although I see the 2D canvas example working currently with a different origin image.

[mkeblx]

Also, you can now try this a bit easier.

In the latest Chrome Beta (or Dev, Canary; just not Stable), there is now a 'HTML-in-Canvas' flag (chrome://flags) you can enable.